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 | 添加到导航栏内的链接或标题元素中，以表示徽标或标题 | 试一试 |
| .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 | 表示一个蓝色的标签，类型为 "primary" | 试一试 |
| .label label-success | 表示一个绿色的标签，类型为 "success" | 试一试 |
| .label label-info | 表示一个浅蓝色的标签，类型为 "info" | 试一试 |
| .label label-warning | 表示一个黄色的标签，类型为 "warning" | 试一试 |
| .label label-danger | 表示一个红色的标签，类型为 "danger" | 试一试 |
| .badge | 表示新的或未读的项目 | 试一试 |
| .jumbotron | 表示一个大框，用于格外关注特色内容或信息 | 试一试 |
| .jumbotron (额外) | 要让 .jumbotron 框跨越整个宽度，并且没有圆角，请将其放在 .container 类之外 | 试一试 |
