以下理论内容copy自Bootstrap中文网 （一个不错的bootstrap学习网站）
导航条
默认样式的导航条
导航条是在您的应用或网站中作为导航页头的响应式基础组件。它们在移动设备上可以折叠（并且可开可关），且在视口（viewport）宽度增加时逐渐变为水平展开模式。
以下代码和注释是我学习过程中的理解
（注意 引入必要的.css 和 .js查看）
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta content="width=device-width, initial-scale=1"> <title>Bootstrap 导航条模板</title> <link href="https://www.jb51.net/lib/bootstrap/css/bootstrap.css"> <!--[if lt IE 9]> <script src="https://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script> <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script> <![endif]--> </head> <body> <nav> <!-- <div> --> <!-- 将 100% 宽度的布局转换为固定宽度的栅格布局。 --> <div> <!-- 品牌商标 和 获得更好的移动分组显示--> <!-- .navbar-header元素里放了一个button按钮和一个a链接 先说简单的a链接，用于放置网页logo，导航栏上通常都需要 button按钮 是一个开关，当在移动设备上显示是，导航条一行显示不完，导航具体内容部分变会崩塌原有的显示形式，收集为多行显示，并隐藏，使用button 按钮可控制其（显示/隐藏） --> <!-- Brand and toggle get grouped for better mobile display --> <!-- 以下导航头部 --> <div> <!-- 当屏幕缩小时 id为bs-example-navbar-collapse-1的元素隐藏，使用下面这个button 调出 #bs-example-navbar-collapse-1元素 --> <button type="button" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <!-- <span>Toggle navigation</span> --> <!-- 下面三个span 只是用来显示 三条 横线样式，可以清除注释看看 --> <!-- <span></span> <span></span> <span></span> --> 更多 </button> <!-- 将导航条内放置品牌标志的地方替换为 <img> 元素即可展示自己的品牌图标。由于 .navbar-brand 已经被设置了内补（padding）和高度（height），你需要根据自己的情况添加一些 CSS 代码从而覆盖默认设置。 --> <!-- 放置商标的地方 --> <a href="#">Brand</a> <!-- a链接里当然也可以图片 或 字体图标 --> </div> <!-- 以下为导航具体内容，身体部分 --> <!-- 收集导航链接、表单和其他内容 方便移动设备时。收集隐藏 --> <!-- Collect the nav links, forms, and other content for toggling --> <div> <!-- 导航条的内容里有五部分 根据需求更改--> <!-- 第一部分 --> <ul> <li><a href="#">链接<span>(current)</span></a></li> <li><a href="#">链接</a></li> <li> <!-- 用来控制 下拉列表显示/隐藏 --> <a href="#" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">下拉 <span></span></a> <ul> <li><a href="#">一个行为</a></li> <li><a href="#">另一个行为</a></li> <li><a href="#">其他的行为</a></li> <!-- .divider 分隔器 与上面分隔一条线 --> <li role="separator"></li> <li><a href="#">分隔开的链接</a></li> <li role="separator"></li> <li><a href="#">另一个分隔开的链接</a></li> </ul> </li> </ul> <!-- 第二部分 一个文本 --> <!-- 把文本包裹在 .navbar-text中时，为了有正确的行距和颜色，通常使用 <p> 标签。 --> <p>文本内容</p> <!-- 第三部分 是一个表单--> <!-- 将表单放置于 .navbar-form 之内可以呈现很好的垂直对齐，并在较窄的视口（viewport）中呈现折叠状态。 使用对齐选项可以规定其在导航条上出现的位置。 --> <form role="search"> <div> <input type="text" placeholder="请输入内容"> </div> <button type="submit">提交</button> </form> <!-- 第四部分是一个独立按钮 --> <!-- 对于不包含在 <form> 中的 <button> 元素，加上 .navbar-btn 后，可以让它在导航条里垂直居中。有一些对于为辅助设备提供可识别标签的方法，例如， aria-label、aria-labelledby 或者 title 属性。如果这些方法都没有，屏幕阅读器将使用 placeholder 属性（如果这个属性存在的话），但是请注意，使用 placeholder 代替其他识别标签的方式是不推荐的。 --> <button type="button">独立按钮</button> <!-- 第五部分 --> <!-- 或许你希望在标准的导航组件之外添加标准链接，那么，使用 .navbar-link 类可以让链接有正确的默认颜色和反色设置。 --> <p>正常文本<a href="#"> 非导航链接</a></p> </div><!-- /.navbar-collapse --> </div><!-- /.container-fluid --> </nav> <script src="https://www.jb51.net/lib/jquery/jquery.js"></script> <script src="https://www.jb51.net/lib/bootstrap/js/bootstrap.js"></script> </body> </html>
组件排列