Bootstrap 导航组件 CSS 参考
本章节注意讲解 CSS 导航组件方面的样式，包括导航条，选项卡，胶囊式菜单，面包屑按钮，和分页，以及它们的实例代码展示.
选项卡和胶囊式菜单
| 样式 | 描述 | 实例 |
|---|
| .nav nav-tabs | 创建导航选项卡 | 试一试 |
| .nav nav-pills | 创建导航胶囊式菜单 | 试一试 |
| .nav nav-pills nav-stacked | 创建垂直堆叠的胶囊式菜单 | 试一试 |
| .nav-justified | 在大于 768px 的屏幕上，使导航选项卡/胶囊式菜单的宽度与其父选项卡/胶囊式菜单的宽度相等。在较小的屏幕上，导航选项卡/胶囊式菜单堆叠在一起 | 试一试 |
| .disabled | 表示已禁用（不可点击）选项卡/胶囊式菜单 | 试一试 |
| 带有下拉菜单的导航选项卡 | 试一试 |
| 带下拉菜单的导航胶囊按钮 | 试一试 |
| .tab-content | 它与 .tab-pane 和 data-toggle="tab"（data-toggle="pill" 表示胶囊式菜单）一起，使选项卡/胶囊式菜单可切换 | 试一试 |
| .tab-pane | 它与 .tab-content 和 data-toggle=”tab”（data-toggle=”pill” 表示胶囊式菜单）一起，使选项卡/胶囊式菜单可切换 | 试一试 |
导航条
| 样式 | 描述 | 实例 |
|---|
| .navbar | 创建导航条 | 试一试 |
| .navbar-brand | 添加到导航条内的链接或标题元素，以表示徽标或标题 | 试一试 |
| .navbar-btn | 垂直对齐导航条内的按钮 | 试一试 |
| .navbar-collapse | 折叠导航条（隐藏并替换为手机和小型平板电脑上的菜单/汉堡图标） | 试一试 |
| .navbar-default | 创建默认导航条（浅灰色背景色） | 试一试 |
| .navbar-fixed-bottom | 使导航条停留在屏幕底部（粘性/固定） | 试一试 |
| .navbar-fixed-top | 使导航条保持在屏幕顶部（粘性/固定） | 试一试 |
| .navbar-form | 添加到导航条内形成元素，使其垂直居中（适当的填充） | 试一试 |
| .navbar-header | 添加到包含代表徽标或标题的链接/元素的容器元素 | 试一试 |
| .navbar-inverse | 创建黑色导航条（而不是浅灰色） | 试一试 |
| .navbar-left | 将导航条中的导航链接、窗体、按钮或文本向左对齐 | 试一试 |
| .navbar-link | 设置元素的样式，使其看起来像导航条中的链接（锚点在悬停时获得适当的填充和下划线，而 p 或 span 等其他元素则获得默认的悬停效果——反之，导航条中为白色，默认导航栏中为黑色） | 试一试 |
| .navbar-nav | 用于 <ul> 容器，其中包含导航栏中带有链接的列表项 | 试一试 |
| .navbar-right | 将导航条中的导航链接、窗体、按钮或文本向右对齐。 | 试一试 |
| .navbar-static-top | 从导航条中删除左侧、顶部和右侧边框（圆角）（默认情况下，导航条具有灰色边框和 4px 边框半径） |
| .navbar-text | 垂直对齐导航条中非链接的所有元素（确保 padding 填充正确） | 试一试 |
| .navbar-toggle | 设置在小屏幕上打开导航条的按钮的样式。通常与三个 .icon-bar 类一起使用，表示可切换菜单图标（汉堡/导航条） | 试一试 |
面包屑与分页
| 样式 | 描述 | 实例 |
|---|
| .breadcrumb | 创建一个面包屑按钮 | 试一试 |
| .pager | 提供简单的分页链接（上一页/下一页） | 试一试 |
| .previous | 将 .pager 的翻页按钮左对齐 | 试一试 |
| .next | 将 .pager 的翻页按钮右对齐 | 试一试 |
| .pagination | 提供分页链接 | 试一试 |
| .pagination-lg | 与 .pagination 类一起使用，以提供更大的分页链接 | 试一试 |
| .pagination-sm | 与 .pagination 类一起使用，以提供较小的分页链接 | 试一试 |
| .disabled | 表示一个不可点击的链接 | 试一试 |
| .active | 表示当前页面 | 试一试 |
标签与徽章
| 样式 | 描述 | 实例 |
|---|
| .label label-default | 表示默认的灰色标签 | 试一试 |
| .label label-primary | 表示 "主要" 类型的蓝色标签 | 试一试 |
| .label label-success | 表示 "成功" 类型的绿色标签 | 试一试 |
| .label label-info | 表示 "信息" 类型的浅蓝色标签 | 试一试 |
| .label label-warning | 表示 "警告" 类型的黄色标签 | 试一试 |
| .label label-danger | 表示 "危险" 类型的红色标签 | 试一试 |
| .badge | 表示一个新的或者未读的项 | 试一试 |
| .jumbotron | 表示一个大框，用于引起对特色内容或信息的额外关注 | 试一试 |
| .jumbotron (extra) | 要让 .jumbotron 横跨整个宽度，并且没有圆角，请将其放置在 .container 类之外 | 试一试 |
