Bootstrap内置组件
下拉菜单
例子
可切换的链接列表. 互动式的下拉菜单需要dropdown JavaScript 插件.
用法
以下是下拉菜单所需的HTML. , 或者声
明其他元素. 然后, 只需创建菜单.
选项
列表右对齐, 和包括一个多级的下拉菜单.
对齐
在添加, 让下拉列表右对齐.
禁用菜单选项
.
下拉菜单的子列表
添加一些简单的标记, 让下拉菜单拥有一个二级菜单, 停选效果类似OS X. 在任意的 li 添
加就会自动获得一个额外的菜单.
默认
向上显示
左边显示
按钮组
例子
两个基本选项, 带有两个更明确的变化.
单一按钮组
带有的按钮, 都放在里面.
左中右
多个按钮组组合成工具条
集合几组，再用包装就可以合成工具条组件。
1 2
5 6
8
垂直按钮组
让一组按钮垂直摆放
复选框和单选框形式
按钮组也可实现单选和复选功能。前者只有一个按钮被按下，后者可以按下多个按钮。详见JavaScript插件。
在按钮组的下拉菜单
注意!为了渲染正常，带下拉项的按钮应该被嵌套，然后再放入内。按钮式下拉菜单
简介和例子
通过将其放在并添加一些下拉菜单的标记, 让点击按钮生产一个下拉菜单.
行为
行为
危险
警告
成功
信息
适应所有按钮的尺寸
下拉按钮适应任何尺寸，可以是或。
大号按钮
小号按钮
迷你按钮
需要Javascript
下拉按钮需要Bootstrap 下拉插件实现功能。
在某些情况下（诸如使用手机浏览），下拉菜单会超出可视区域。这时要么手动对齐，要么使用定制的javascript。
带间隔的下拉按钮
在按钮组的样式和标记的基础上，我们可以很方便的创建带间隔的下拉按钮。间隔左侧是按钮，右侧是下拉链接。
动作
动作
危险
警告
成功
反向
尺寸
使用或指定大小。
大号按钮
小号按钮
迷你按钮
上弹菜单
下拉菜单也可以变成上弹菜单，只要在最近的父标签上应用即可。它
会改变的箭头方向，并将菜单底部与按钮顶部对齐。
上弹按钮
上弹按钮右对齐)
导航: 标签, 圆角, 和列表
轻巧的默认项同样的标记，不同的类
所有的导航组件都在这里, 包括标签, 圆角, 列表, 共享相同的标记和样式. 基本的标签页
对存放链接的应用：
基本圆角标签页
HTML不变，使用：
不可用状态
在任何的导航组件(标签, 圆角或列表)添加链接将变成灰色, 且没有停悬效果. 但
是链接仍然保持可点击, 除非删除了. 或者你也可用JavaScript来防止点击.
组件对齐方式
使用或让导航链接对齐. 它们都是添加了CSS float来指定方向. 叠放式导航竖直排放标签和圆角链接
默认情况下标签和圆角链接是水平排放的，使用就可以将其变成竖直叠放。
叠放式标签
叠放式圆角链接
下拉菜单改良的导航组件
添加下拉菜单需要添加一些额外的HTML代码和下拉菜单的JavaScript插件. 带下拉项的标签页
带下拉的圆角链接
导航列表构建简单的叠放式导航，适用于侧边栏
导航列表可以便捷地创建带有标头(可选)的导航链接组，非常适合用做侧边栏（与OS X中的Finder 类似）。
导航列表例子
对存放一组链接的列表使用:
?列表头
?首页
?库
?应用程序
注意对于嵌入在导航列表的任何都需要添加.
水平分隔符
添加一个水平分隔符, 像这样:
标签页切换导航通过javascript让标签生动起来
我们使用一个简单的插件切换标签页对应的内容，从而让标签页变得生动。 Bootstrap 提供了四种样式的标签页：置顶(默认)，居右，置底，居左。应用时只需修改很少的标记。
标签页切换的例子
让标签可切换, 需在.tab-content里创建.tab-pane, 并对每个标签设置一个唯一的ID.
淡入
要让内容淡入, .
需要jQuery插件
所有可切换标签都采用了轻量级的jQuery插件. 在JavaScript文档页面了解更多如果创建可切换标签.
各个方向的标签
底部
反转HTML的顺序，用将标签居底。
I'm in Section A.
左边
，用将标签居底。
右边
使用将标签居右。
导航条
基本导航条
导航条是静态的(未固定在顶部), 并包括项目名词和一些导航该有的功能. 将导航条放在任意一
个其宽度是与网站内容相同.
导航条组件
仅标题
用于展示品牌或项目名称的一个简单链接，只需要一个锚标签。
导航链接
可以简单的往导航添加列表.
添加分隔符同样的简单, 只需在每个空白的列表项添加一个属性即可. 在每个链接间添加, 如下:
表单
导航条内的表单, 用进行样式化,由或决定居左还是居右.
搜索表单
在导航条内, 对添加并在输入框添加专门的一个属性
就可获得一个搜索表单.
对齐
使用或对齐导航链接, 搜索表单或文本. 它们都是添加了CSS float 来指定方向.
使用下拉菜单
在导航添加下拉菜单只需要加入一点点标记和下拉菜单JavaScript插件.
查看更多JavaScript下拉菜单文档.
文本
在下使用文本元素, 对于需要突出或设置颜色, 通常使用标签.
可选的显示方法
在最外层div上应用, 就可以将导航条固定到顶部或是底部.
固定在顶部
添加40px的确保是添加在Bootstrap核心CSS之后, 和响应式CSS(可选的)之前.
首页
固定在底部
添加.
顶部静态导航条
通过添加创建一个全宽(full-width)的导航条. 因
为你不需要在padding.
响应式导航条
要实现一个响应式导航条, 需要把导航条包含在, 并添加一个触发
展开导航(适用在屏幕较窄的设备)
逆变化
需要变化导航条外观(变成黑色),
面包屑(路径式)导航
例子
面包屑导航栏用于展示用户当前在网站/应用中的位置，但并不是首要导航。适宜布局清爽，简洁明了的场合。即查看某个页面, 可以需要跳转多个页面, 可使用路径式导航方便使用者返回.
?首页
?首页/
?库
?首页/
?数据
分页供两种可选择内容分页
标准分页
受Rdio启发，我们设计了极为简致的页码样式，适用于应用和搜索结果。页码区域尺寸大，易于吸引注意力，易于扩展，易于点击。