导航栏是一个很好的功能，是 bootstrap 网站的一个突出特点。导航栏在您的应用或网站中作为导航页头的响应式基础组件。导航栏在移动设备的视图中是折叠的，随着可用视口宽度的增加，导航栏也会水平展开。在 bootstrap 导航栏的核心中，导航栏包括了站点名称和基本的导航定义样式。本文主要介绍了详解bootstrap导航栏.nav与.navbar区别，小编觉得挺不错的，现在分享给大家，也给大家做个参考希望能帮助到大家。
一、简单的ul,li组成的导航：
//解析：.nav .nav-item .nav-link表示ul li是导航——.nav-pills表示胶囊状导航——.bg-dark/.nav-dark表示黑底白字——.justify-content-center表示导航栏在浏览器上居中显示在浏览器上显示为：
缩小浏览器窗口显示为：
二、导航栏——
代码为：
正常窗口显示为：
缩小窗口小于576px时：
三、折叠导航栏
当窗口小于576px的时候，不仅仅是简单的编程垂直导航；显示为一个button按钮，导航链接隐藏，点击button显示；
代码为：
//注意：.navbar-brand是品牌logo；
窗口大于576的时候，显示为：
窗口小于576的时候，显示为：
四、导航栏加上form表单表示搜索框：【？？？？？】
代码如下：
如图所示，如何使得导航栏中的form表单右对齐，移到最右边？？？？？float：eight应该也行吧。。
emmmm.....知道了上面的解决方法了：利用网格系统，将左边的ul,li和右边的form表单分别排列；.col-sm-6;然后再给form表单右浮动；
代码如下：
大家学会了吗？相信大家对Bootstrap 导航栏.nav与.navbar区别也有更近一步认识，觉得本文有用的话，赶紧收藏起来吧。
相关推荐：
Bootstrap导航栏各元素操作方法(表单、按钮、文本)_javascript技巧
