组件
Bootstrap内置了很多可以重复利用的组件，导航菜单，警告，popovers ...
分页两个选项为分页内容
多图标分页
啥时候用？
超级简约的分页设计，非常适合在应用程序与搜索结果中使用，大区块，易扩展，拥有超大的可点击区域。
页面链接状态
.disabled 为不可点击的链接， .active 为当前页面。
灵活的对齐方式
两种分页链接对齐方式 .pagination-centered 与 .pagination-right 。
标签
封装在 <div> 里面，分页其实就是一个 <ul> 无序列表。
<div class="pagination">
<ul>
<li><a href="#">前一页</a></li>
<li class="active">
<a href="#">1</a>
</li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">下一页</a></li>
</ul>
</div>
分页器 快速向前向后的链接
关于分页器
分页器就是一组简单的链接，简单的标签，简单的样式，非常适合博客与杂志使用。
可选禁用状态
分页链接同样可以使用 .disabled 类。
默认示例
默认情况下分页器会居中显示。
<ul class="pager">
<li>
<a href="#">前一页</a>
</li>
<li>
<a href="#">下一页</a>
</li>
</ul>
行内标签 注释文本
| 标签 | HTML标签 |
|---|---|
| 默认 |
<span class="label">默认</span>
|
| 成功 |
<span class="label label-success">成功</span>
|
| 警告 |
<span class="label label-warning">警告</span>
|
| 重要 |
<span class="label label-important">重要</span>
|
| 信息 |
<span class="label label-info">相息</span>
|
| 反相 |
<span class="label label-inverse">反相</span>
|
徽章 提示与未读计数
关于
徽章用来显示计数，比如在电子邮件里未读的邮件数，移动设备应用的提醒。
可用类
| 名称 | 示例 | HTML标签 |
|---|---|---|
| 默认 | 1 |
<span class="badge">1</span>
|
| 成功 | 2 |
<span class="badge badge-success">2</span>
|
| 警告 | 4 |
<span class="badge badge-warning">4</span>
|
| 错误 | 6 |
<span class="badge badge-error">6</span>
|
| 信息 | 8 |
<span class="badge badge-info">8</span>
|
| 反相 | 10 |
<span class="badge badge-inverse">10</span>
|
排版组件 页面标题与 hero unit
Hero unit
Bootstrap 提供一个轻便灵活的组件叫 hero unit 用来显示你网站的内容。
标签
把内容封装在 div 标签里：
<div class="hero-unit">
<h1>标题</h1>
<p>标语</p>
<p>
<a class="btn btn-primary btn-large">
阅读更多
</a>
</p>
</div>
Hello, world!
This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.
页头
在 h1 周围添加一个带有 .page-header 的 div ，在h1的里面使用 small 元素添加子文本。
页面标题示例 标题的子文本
<div class="page-header"> <h1>页面标题示例</h1> </div>
缩略图 图像，视频，文本网格...
默认缩略图
Bootstrap 的缩略图是用简单的标签来展示带有链接的图片。
高度可定制
加上点额外的标签，可以在缩略图中添加像标签，段落或按钮等内容。
为什么使用缩略图
缩略图可以很好的用网格显示图像，视频，商品，作品等等，可以是链接或静态内容。
简单灵活的标签
Thumbnail markup is simple—a ul with any number of li elements is all that is required. It's also super flexible, allowing for any type of content with just a bit more markup to wrap your contents.
使用网格栏尺寸
Lastly, the thumbnails component uses existing grid system classes—like .span2 or .span3—for control of thumbnail dimensions.
标签
As mentioned previously, the required markup for thumbnails is light and straightforward. Here's a look at the default setup for linked images:
<ul class="thumbnails">
<li class="span3">
<a href="#" class="thumbnail">
<img src="http://placehold.it/260x180" alt="">
</a>
</li>
...
</ul>
For custom HTML content in thumbnails, the markup changes slightly. To allow block level content anywhere, we swap the <a> for a <div> like so:
<ul class="thumbnails">
<li class="span3">
<div class="thumbnail">
<img src="http://placehold.it/260x180" alt="">
<h5>Thumbnail label</h5>
<p>Thumbnail caption right here...</p>
</div>
</li>
...
</ul>
更多示例
Explore all your options with the various grid classes available to you. You can also mix and match different sizes.
成功，警告或错误信息的样式
Lightweight defaults
重写了基础类
With Bootstrap 2, we've simplified the base class: .alert instead of .alert-message. We've also reduced the minimum required markup—no <p> is required by default, just the outer <div>.
Single alert message
For a more durable component with less code, we've removed the differentiating look for block alerts, messages that come with more padding and typically more text. The class also has changed to .alert-block.
使用 javascript 效果更好
Bootstrap comes with a great jQuery plugin that supports alert messages, making dismissing them quick and easy.
示例
Wrap your message and an optional close icon in a div with simple class.
<div class="alert"> <a class="close" data-dismiss="alert">×</a> <strong>Warning!</strong> Best check yo self, you're not looking too good. </div>
Easily extend the standard alert message with two optional classes: .alert-block for more padding and text controls and .alert-heading for a matching heading.
Warning!
Best check yo self, you're not looking too good. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
<div class="alert alert-block"> <a class="close" data-dismiss="alert">×</a> <h4 class="alert-heading">Warning!</h4> Best check yo self, you're not... </div>
Contextual alternatives Add optional classes to change an alert's connotation
Error or danger
<div class="alert alert-error"> ... </div>
Success
<div class="alert alert-success"> ... </div>
Information
<div class="alert alert-info"> ... </div>
进步条 加载，重定向或动作状态
示例与标签
基本
Default progress bar with a vertical gradient.
<div class="progress">
<div class="bar"
style="width: 60%;"></div>
</div>
条纹
Uses a gradient to create a striped effect (no IE).
<div class="progress progress-striped">
<div class="bar"
style="width: 20%;"></div>
</div>
动画
Takes the striped example and animates it (no IE).
<div class="progress progress-striped
active">
<div class="bar"
style="width: 40%;"></div>
</div>
选项与浏览器支持
颜色
Progress bars use some of the same button and alert classes for consistent styles.
条纹
Similar to the solid colors, we have varied striped progress bars.
行为
Progress bars use CSS3 transitions, so if you dynamically adjust the width via javascript, it will smoothly resize.
If you use the .active class, your .progress-striped progress bars will animate the stripes left to right.
浏览器支持
Progress bars use CSS3 gradients, transitions, and animations to achieve all their effects. These features are not supported in IE7-9 or older versions of Firefox.
Opera and IE do not support animations at this time.
杂项 轻便实用的组件
Wells
Use the well as a simple effect on an element to give it an inset effect.
<div class="well"> ... </div>
关闭图标
Use the generic close icon for dismissing content like modals and alerts.
<a class="close">×</a>