详解bootstrap导航栏.nav与.navbar区别(在bootstrap中,有哪几种导航)

推荐整理分享详解bootstrap导航栏.nav与.navbar区别(在bootstrap中,有哪几种导航)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:bootstrap的导航栏颜色设置,bootstrap4 导航栏,bootstrap导航栏怎么居中,bootstrap导航栏下拉菜单,bootstrap导航菜单,bootstrap的导航栏颜色设置,bootstrap导航菜单,bootstrap导航菜单,内容如对您有帮助，希望把文章链接给更多的朋友！

刚刚看了bootstrap的导航栏，发现有点弄混了，现在来整理一下；

导航栏是一个很好的功能，是 Bootstrap 网站的一个突出特点。导航栏在您的应用或网站中作为导航页头的响应式基础组件。导航栏在移动设备的视图中是折叠的，随着可用视口宽度的增加，导航栏也会水平展开。在 Bootstrap 导航栏的核心中，导航栏包括了站点名称和基本的导航定义样式。

一、简单的ul,li组成的导航：

在浏览器上显示为：

缩小浏览器窗口显示为：

二、导航栏——<nav>标签中class="navbar navbar-expand-sm"——<ul>中class="navbar-nav"——<li>中class="nav-item"

代码为：

正常窗口显示为：

缩小窗口小于px时：

三、折叠导航栏

当窗口小于px的时候，不仅仅是简单的编程垂直导航；显示为一个button按钮，导航链接隐藏，点击button显示；

代码为：

//注意：.navbar-brand是品牌logo；

窗口大于的时候，显示为：

窗口小于的时候，显示为：

四、导航栏加上form表单表示搜索框：【？？？？？】

代码如下：

如图所示，如何使得导航栏中的form表单右对齐，移到最右边？？？？？float：eight应该也行吧。。

emmmm.....知道了上面的解决方法了：利用网格系统，将左边的ul,li和右边的form表单分别排列；.col-sm-6;然后再给form表单右浮动；

代码如下：