分页
默认分页（Pagination）
分页（Pagination）是一种无序列表，Bootstrap 像处理其他界面元素一样处理分页。
下表列出了 Bootstrap 提供的处理分页的类:
翻页（Pager）
我们可以通过翻页（Pager）来实现上一页和下一页的简单翻页功能。
与分页链接一样，翻页也是无序列表。
在默认的翻页中，链接居中对齐。
下表列出了 Bootstrap 处理翻页的类。
<!--默认分页并设置大的分页-->
<ul class="pagination pagination-lg">
<li>
<a href="#">«</a>
</li>
<li class="active">
<a href="#">1</a>
</li>
<li class="disabled">
<a href="#">2</a>
</li>
<li>
<a href="#">3</a>
</li>
<li>
<a href="#">4</a>
</li>
<li>
<a href="#">5</a>
</li>
<li>
<a href="#">»</a>
</li>
</ul>
<!--并设置对齐翻页链接-->
<ul class="pager">
<li class="previous">
<a href="#">上一页</a>
</li>
<li class="next">
<a href="#">下一页</a>
</li>
</ul>
标签
使用.label类来显示标签，如下实例所示：
<!--在文本后面带上标签-->
<h3>标签 <span class="label label-default">new</span></h3>
我们可以使用修饰的 label-default、label-primary、label-success 等类来改变标签的外观。
代码：
<h6>标签 <span class="label label-primary">new</span></h6>
<h5>标签 <span class="label label-success">new</span></h5>
<h4>标签 <span class="label label-info">new</span></h4>
<h3>标签 <span class="label label-warning">new</span></h3>
<h2>标签 <span class="label label-danger">new</span></h2>
效果如图:
徽章
徽章与标签相似，主要的区别在于徽章的边角更加圆滑。
我们给链接、导航等元素嵌套 span class="badge" 元素，可以很醒目的展示新的或未读的信息条目。
以下是徽章的一些具体实例:
- 未读信息数量徽章
给链接元素嵌套徽章展示未读信息条数:
<a href="#">信息 <span class="badge">10</span></a>
- 按钮中使用徽章
<button class="btn btn-success"> 提交 <span class="badge">3</span>
</button>
- 激活状态自动适配色调
我们可以在激活状态的胶囊式导航和列表导航中放置徽章。通过使用 span class="badge" 来激活链接，如下面的实例所示：
<ul class="nav nav-pills">
<li class="active">
<a href="#">首页
<span class="badge">2</span></a>
</li>
<li>
<a href="#">资讯</a>
</li>
</ul>
巨幕
我们先来看一下巨幕(Jumbotron) 组件,巨幕组件主要是展示网站的关键性区域。具体实例如下所示:
<!--在固定范围内，有圆角-->
<div class="container">
<div class="jumbotron">
<h2>W3Cschool</h2>
<p> 这是一个学习性的网站！ </p>
<p>
<a href="#" class="btn btn-default">更多内容</a>
</p>
</div>
</div>
如果需要让巨幕组件的宽度与浏览器宽度一致并且没有圆角，步骤如下:
把此组件放在所有 .container 元素的外面
在组件内部添加一个 .container 元素
如下实例所示：
<div class="jumbotron">
<div class="container">
...
</div>
</div>
页头
当一个网页中有多个标题且每个标题之间需要添加一定的间距时，页头这个组件就显得特别有用。
页头组件能够为 h1 标签增加适当的空间，并且与页面的其他部分形成一定的分隔。
如果需使用页头（Page Header），请把标题放置在带有 .page-header 类 的 div 中,如下实例所示:
<div class="page-header">
<h1>大标题 <small>小标题</small></h1>
</div>
缩略图
通过缩略图组件扩展 Bootstrap 的 栅格系统，可以很容易地展示栅格样式的图像、视频、文本等内容。
将图像放在带有 .thumbnail 类的 a 标签中即可创建缩略图,具体实例如下：
缩略图配合响应式
<div class="container">
<div class="row">
<div class="col-xs-6 col-md-3 col-sm-4">
<a class="thumbnail">
<img src="img/pic.png" alt="">
</a>
</div>
<div class="col-xs-6 col-md-3 col-sm-4">
<a class="thumbnail">
<img src="img/pic.png" alt="">
</a>
</div>
</div>
</div>
运行结果如下所示：
添加自定义的内容
现在我们有了一个基本的缩略图，我们可以向缩略图添加各种 HTML 内容，比如标题、段落或按钮。具体如下:
<div class="thumbnail">
<img src="img/pic.png" alt="">
<div class="caption">
<h3>图文并茂</h3>
<p> 这是一个图片结合文字的缩略图 </p>
<p>
<a href="#" class="btn btn-default">按钮</a>
</p>
</div>
</div>
警告框
警告框组件是一组预定义消息。
将任意文本和一个可选的关闭按钮组合在一起就能组成一个警告框，.alert类是必须要设置的，另外 bootstrap 还提供了有特殊意义的4个类,代表不同的警告信息。
基本警告框实例:
<div class="alert alert-success">成功</div>
<div class="alert alert-info">消息</div>
<div class="alert alert-warning">警告</div>
<div class="alert alert-danger">危险</div>
带关闭的警告框(为警告框添加一个可选的 .alert-dismissible 类和一个关闭按钮):
<div class="alert alert-success"> Bootstrap <button type="button" class="close" data-dismiss="alert">
<span>×</span>
</button>
</div>
警告框中的链接(用.alert-link工具类，可以为链接设置与当前警告框相符的颜色)
<div class="alert alert-success"> Bootstrap，请到官网 <a href="http://www.bootcss.com/" class="alert-link">下载</a>
</div>
列表组
创建一个基本的列表组的步骤如下：
向 ul 添加.list-group类
向 li 添加.list-group-item类
基本实例：
<ul class="list-group">
<li class="list-group-item"> 1.这是起始 </li>
<li class="list-group-item"> 2.这是第二条数据 </li>
<li class="list-group-item"> 3.这是末尾 </li>
</ul>
带徽章的列表组
向列表组添加徽章
给列表组加入徽章组件，它会自动被放在右边，具体做法如下：
<li class="list-group-item"> 1.这是起始 <span class="badge">10</span>
</li>
列表组 -- 定制内容
向列表组添加链接和按钮
用 a 标签代替 li 标签可以组成一个全部是链接的列表组，具体实例如下：
<a href="#" class="list-group-item">W3Cschool</a>
注意：我们需要将 ul 标签替换为 div 标签。
列表组中的元素也可以直接就是按钮，例子如下：
<button class="list-group-item">...</button>
定制内容
列表组中的每个元素都可以是任何 HTML 内容，如下所示：
<div class="list-group">
<a href="#" class="list-group-item active">
<h4>内容标题</h4>
<p class="list-group-item-text"> 这里是相关内容详情！ </p>
</a>
...
面板
简直不要太简单,我发现bootstrap就是直接用class类就好了
面板（Panels）组件就是一个存放内容的容器组件。
面板类
下表列出了 bootstrap 提供的一些面板相关的类:
创建一个基本的面板，只需要向 div 元素添加 .panel 和 .panel-default 类即可
表格类面板
为了在面板中创建一个无边框的表格，我们可以在面板中使用 .table 类。
具体实例如下:
<div class="panel panel-default">
<div class="panel-heading"> 表格标题 </div>
<div class="panel-body">
<p> 这里是表格标题的详细内容！ </p>
</div>
<table class="table">
<tr>
<th>1</th>
<th>2</th>
<th>3</th>
</tr>
......
</table>
</div>
列表类面板
之前我们已经在上一小节中学过如何创建列表组。通过以下步骤我们可以在任何面板中包含列表组:
通过在 div 元素中添加 .panel 和 .panel-default 类来创建面板；
在面板中添加列表组。
<div class="panel panel-default">
<div class="panel-heading">面板标题</div>
<div class="panel-body">
<p>这是一个基本的面板内容</p>
</div>
<ul class="list-group">
<li class="list-group-item"> 1.这里是首页 </li>
<li class="list-group-item"> 2.这里是第二个项目 </li>
<li class="list-group-item"> 3.这里是第三个项目 </li>
</ul>
</div>
进度条
- 基本进度条
<div class="progress">
<div class="progress-bar" style="width: 60%;"> 60% </div>
</div>
style="width: 60%"; 表示进度条在 60% 的位置
2. 结合情境的进度条
进度条组件使用与按钮和警告框相同的类，根据不同情境展现相应的效果。
<div class="progress">
<div class="progress-bar progress-bar-info" style="min-width: 20px; width: 2%;">2%</div>
</div>
在展示很低的百分比时，如果需要让文本提示能够清晰可见，可以为进度条设置 min-width 属性
3. 条纹状进度条
<div class="progress">
<div class="progress-bar progress-bar-success
progress-bar-striped" style="min-width:20px;width:60%"> 60% </div>
</div>
为 .progress-bar-striped 添加 .active 类，可以使进度条呈现出由右向左运动的动画效果
