Bootstrap 导航组件
标签页和药丸
| 类 | 描述 | 示例 |
|---|---|---|
| .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 | 添加到导航栏内的链接或标题元素，用以表示 Logo 或标题 | 试一试 |
| .navbar-btn | 在导航栏内垂直对齐按钮 | 试一试 |
| .navbar-collapse | 折叠导航栏（在手机和小平板电脑上隐藏，并替换为菜单/汉堡图标） | 试一试 |
| .navbar-default | 创建一个默认的导航条（浅灰色背景色） | 试一试 |
| .navbar-fixed-bottom | 使导航条固定在屏幕底部（粘性/固定） | 试一试 |
| .navbar-fixed-top | 使导航条固定在屏幕顶部（粘性/固定） | 试一试 |
| .navbar-form | 添加到导航条内的表单元素，以使其垂直居中（提供适当的内边距） | 试一试 |
| .navbar-header | 添加到包含代表 Logo 或标题的链接/元素的容器元素 | 试一试 |
| .navbar-inverse | 创建一个黑色导航条（而不是浅灰色） | 试一试 |
| .navbar-left | 将导航链接、表单、按钮或文本在导航条中靠左对齐 | 试一试 |
| .navbar-link | 将元素样式化为导航条中的链接（锚点在悬停时具有适当的内边距和下划线，而其他元素如 p 或 span 则具有默认的悬停效果——在反向导航条中为白色，在默认导航条中为黑色） | 试一试 |
| .navbar-nav | 用于包含导航条内链接列表项的 `<ul>` 容器 | 试一试 |
| .navbar-right | 将导航链接、表单、按钮或文本在导航条中靠右对齐。 | 试一试 |
| .navbar-static-top | 移除导航条的左、上、右边框（圆角）（默认导航条有一个灰色边框和 4px 的 border-radius） | |
| .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 | 表示一个蓝色的“primary”类型的标签 | 试一试 |
| .label label-success | 表示一个绿色的“success”类型的标签 | 试一试 |
| .label label-info | 表示一个浅蓝色的“info”类型的标签 | 试一试 |
| .label label-warning | 表示一个黄色的“warning”类型的标签 | 试一试 |
| .label label-danger | 表示一个红色的“danger”类型的标签 | 试一试 |
| .badge | 表示新项目或未读项目 | 试一试 |
| .jumbotron | 表示一个大盒子，用于吸引用户对特色内容或信息的额外关注 | 试一试 |
| .jumbotron (附加) | 要让 `.jumbotron` 盒子跨越整个宽度，并且没有圆角，请将其放置在 `.container` 类之外 | 试一试 |
