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 类之外 测试一下