Bootstrap 导航组件
选项卡和胶囊
| 类 | 描述 | 实例 |
|---|---|---|
| .nav nav-tabs | 创建导航胶囊 | 测试一下 |
| .nav nav-pills | 创建垂直导航胶囊 | 测试一下 |
| .nav nav-pills nav-stacked | 创建垂直导航胶囊 | 测试一下 |
| .nav-justified | 在屏幕宽于 768 像素时，使导航选项卡/胶囊的宽度与其父级相同。 在较小的屏幕上，导航选项卡/胶囊堆叠 | 测试一下 |
| .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 | 垂直对齐导航栏中非链接的任何元素（确保正确的填充） | 测试一下 |
| .navbar-toggle | 设置应在小屏幕上打开导航栏的按钮的样式。通常与三个 .icon-bar 类一起使用，以指示可切换的菜单图标（汉堡/酒吧） |
测试一下 |
面包屑和分页
| 类 | 描述 | 实例 |
|---|---|---|
| .breadcrumb | 做一个面包屑 | 测试一下 |
| .pager | 提供简单的分页链接（上一个/下一个） | 测试一下 |
| .previous | 将 .pager 上一个按钮向左对齐 | 测试一下 |
| .next | 将 .pager 下一个按钮向右对齐 | 测试一下 |
| .disabled | 表示不可点击的链接 | 测试一下 |
| .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 类之外 | 测试一下 |
