BootStrap布局组件
BootStrap字体图标（Glyphicons）
BootStrap下拉菜单：下拉菜单是可以切换的，是以列表格式显示链接的上下文菜单。
| 类 | 描述 |
| .dropdown | 指定下拉菜单 |
| .dropdown-menu | 创建下拉菜单 |
| .dropdown-menu-right | 下拉菜单右对齐 |
| .dropdown-header | 下拉菜单中添加标题 |
| .dropup | 指定向上弹出的下拉菜单 |
| .disable | 下拉菜单中的禁止项 |
| .divider | 下拉菜单中的分割线 |
BootStrap按钮组允许多个按钮被堆叠在同一行上
| 类 | 描述 |
| .btn-group | 形成基本的按钮组，可以在一个按钮组内嵌套另一个按钮组 |
| .btn-toolbar | |
| .btn-group-lg,.btn-group-sm,.btn-group-xs | 整个按钮组的大小调整，而不需要对每个按钮进行大小调整 |
| .btn-group-vertical | 让一组按钮垂直堆叠显示 |
BootStrap按钮添加下拉菜单，在.btn_group中放置按钮和下拉菜单即可
各种大小按钮的下拉菜单：.btn-lg,.btn-sm,.btn-xs
按钮上拉菜单：向.btn-group容器添加.dropup
BootStrap输入框组：使用输入框组，可以向基于文本的输入框添加作为前缀和后缀文本或按钮
向.form-control添加前缀或后缀元素：1、将前缀或后缀元素放在一个带有class.input-group的div中
2、在相同的<div>内，在class为.input-group-addon的<span>内放置额外的内容
3、把<span>放置在<input>元素的前面或者后面
| 类 | 描述 |
| .input-group | 输入框组 |
| .input-group-lg | 输入框组的宽度为大 |
| .input-group-sm | 输入框组的宽度为小 |
| .input-hroup-btn | 包裹按钮和下拉菜单 |
表格导航或标签
创建一个标签式的导航菜单：以一个带有class.nav的无序列表开始，添加class.nav-tabs
| 类 | 描述 |
| .nav nav-tabs | 标签页 |
| .nav nav-pills | 胶囊式标签 |
| .nav nav-pills nav-stacked | 胶囊式标签页以垂直方向堆列的 |
| .nav-justified | 两端对齐的标签页 |
| .disable | 禁用的标签页 |
| 带下拉菜单的胶囊标签页 | |
| .tab-pane | 设置标签页对应的内容随标签的切换更改 |
| .tab-content | 设置标签页对应的内容随标签的切换更改 |
BootStrap导航栏：向<nav>标签添加class .navbar .navbar-default,添加role="navigation"有助于增加可访问性，向<div>元素添加一个class .navbar-header
.navbar-form clas:确保了表单适当的垂直对齐和在较窄的视口中折叠的行为
class .navbar-btn向不在<form>中的<button>元素添加按钮
导航栏中的文本： class .navbar-text
结合图标的导航链接 class glyphicon glyphicon_*
组件对齐：class .navbar-left或.navbar-right
固定到顶部： .navbar class添加.narbar-fixed-top，固定到底部：.navbar class添加.narbar-fixed-bottom，静态的顶部：.navbar-static-top class
为了创建一个带有黑色背景白色文本的反色的导航栏，只需要简单地向 .navbar class 添加 .navbar-inverse class 即可
BootStrap中的面包屑导航是一个简单的带有.breadcrumb class的无序列表。
BootStrap支持分页特性，分页（Pagination），是一种无序列表，«前进图标，»后退图标
| 类 | 描述 |
| .pagination | 添加该class来在页面上显示分页 |
| .disable .active | 通过使用.disable来定义不可点击的链接，通过使用.active来指示当前访问的页面 |
.pagination-lg, .pagination-sm | 来获取不同大小的项 |
翻页
| 类 | 描述 |
| .pager | 获得翻页链接 |
| .previous,.next | .previous把链接向左对齐，使用.next把链接向右对齐 |
| .disable | 禁止使用 |
BootStrap标签
| 类 | 描述 |
| .label label-default | 默认灰色标签 |
| .label label-primary | 蓝色标签 |
| .label label-success | 绿色标签 |
| .label label-info | 浅蓝色标签 |
| .label label-warning | 黄色标签 |
| .label label-danger | 红色标签 |
徽章（Badgs）主要用于突出显示新的或未读的项
当没有新的或未读的项时，通过css的empty选择器，徽章会折叠起来，表示里面没有内容
超大屏幕（Jumbotron）：增加标题的大小
页面标题（Page Header）是个不错的功能，它会在网页标题四周添加适当的间距
警告（Alerts）向用户提供了一种定义消息样式的方式。
交替的进度条：
创建不同样式的进度条的步骤如下：
交替的进度条
- 添加一个带有 class .progress 的 <div>。
- 接着，在上面的 <div> 内，添加一个带有 class .progress-bar 和 class progress-bar-* 的空的 <div>。其中，* 可以是 success、info、warning、danger。
- 添加一个带有百分比表示的宽度的 style 属性，例如 ; 表示进度条在 60% 的位置
条纹的进度条
- 添加一个带有 class .progress 和 .progress-striped 的 <div>。
- 接着，在上面的 <div> 内，添加一个带有 class .progress-bar 和 class progress-bar-* 的空的 <div>。其中，* 可以是 success、info、warning、danger。
- 添加一个带有百分比表示的宽度的 style 属性，例如 ; 表示进度条在 60% 的位置。
动画的进度条：
- 添加一个带有 class .progress 和 .progress-striped 的 <div>。同时添加 class .active。
- 接着，在上面的 <div> 内，添加一个带有 class .progress-bar 的空的 <div>。
- 添加一个带有百分比表示的宽度的 style 属性，例如 ; 表示进度条在 60% 的位置。
堆叠的进度条：把多个进度条放在相同的 .progress 中即可实现堆叠
在<div>元素上添加.media类来创建一个多媒体对象
.media-left让多媒体对象来实现左对齐，.media-right类实现了右对齐，.media-bottom让图片位于底部
.media-body:主体内容，.media-heading来设置标题.media-list媒体对象列表
向元素<ul>添加class .list-group,向<li>添加.list-group-item
向列表元素添加徽章:在<li>元素中添加<span class="badge">新</span>
创建一个基本的面板，只需要向 <div> 元素添加 class .panel 和 class .panel-default 即可
- 上一篇 »Bootstrap栅格系统
- 下一篇 »表格布局----基于bootstrap样式 布局