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），是一种无序列表，&laquo前进图标，&raquo后退图标

类	描述
.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 属性，例如 style="60%"; 表示进度条在 60% 的位置

条纹的进度条

• 添加一个带有 class .progress 和 .progress-striped 的 <div>。
• 接着，在上面的 <div> 内，添加一个带有 class .progress-bar 和 class progress-bar-* 的空的 <div>。其中，* 可以是 success、info、warning、danger。
• 添加一个带有百分比表示的宽度的 style 属性，例如 style="60%"; 表示进度条在 60% 的位置。

动画的进度条：

• 添加一个带有 class .progress 和 .progress-striped 的 <div>。同时添加 class .active。
• 接着，在上面的 <div> 内，添加一个带有 class .progress-bar 的空的 <div>。
• 添加一个带有百分比表示的宽度的 style 属性，例如 style="60%"; 表示进度条在 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 即可