Bootstrap入门（十七）组件11：分页与标签
1.默认样式的分页
2.分页的大小
3.禁用的分页
4.翻页的效果
5.两端对齐的分页
6. 标签的不同样式
7. 标签的大小
先引入本地的CSS文件
<link href="css/bootstrap.min.css" rel="stylesheet">
1.默认样式的分页
在浏览网页或者搜索信息的时候，可能会遇到必须浏览几个页面的情况，分页为您的网站或应用提供带有展示页码的分页组件，或者可以使用简单的翻页组件。
我们需要在一个<nav>标签中新建<ul><li>组合来实现，制定<ul>的class为pagination
（假定当前是第三页,class="active"，没有class="active"的话每个都是看起来一样的）
<nav>
<ul class="pagination">
<li><a href="#">«</a></li>
<li><a href="#">1</a></li>
<li class="disabled"><a href="#">2</a></li>
<li class="active"><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">»</a></li>
</ul>
</nav>
效果：
2.分页的大小
分页也有响应式的大小效果，根据不同的情况使用不同的大小
<nav>
<ul class="pagination pagination-lg">
<li><a href="#">«</a></li>
<li><a href="#">1</a></li>
<li class="disabled"><a href="#">2</a></li>
<li class="active"><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">»</a></li>
</ul>
</nav> <nav>
<ul class="pagination">
<li><a href="#">«</a></li>
<li><a href="#">1</a></li>
<li class="disabled"><a href="#">2</a></li>
<li class="active"><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">»</a></li>
</ul>
</nav> <nav>
<ul class="pagination pagination-sm">
<li><a href="#">«</a></li>
<li><a href="#">1</a></li>
<li class="disabled"><a href="#">2</a></li>
<li class="active"><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">»</a></li>
</ul>
</nav>
效果：
3.禁用的分页
只需要想禁用的地方加上disabled属性就可以了
（刚刚也使用了，可以仔细看，在“2”那里，鼠标移动上去会显示禁用的图案）
4.翻页的效果
只需要两个标签，而且是居中的，<ul>的class为pager
<nav>
<ul class="pager">
<li><a href="#">上一页</a></li>
<li><a href="#">下一页</a></li>
</ul>
</nav>
效果（是在整个浏览器水平居中）
5.两端对齐的分页
只需要修改<li>的class就可以了，而且是两端对齐的
<nav>
<ul class="pager">
<li class="previous"><a href="#">←向前</a></li>
<li class="next"><a href="#">向后→</a></li>
</ul>
</nav>
效果
6. 标签的不同样式
在一些网站，我们经常能看到用不同颜色的标签、按钮等来显示当前是怎样的一个状态
有不同种类的标签（用<span>来承载）
<span class="label label-default">默认</span>
<span class="label label-primary">默认</span>
<span class="label label-success">默认</span>
<span class="label label-info">默认</span>
<span class="label label-warning">默认</span>
效果
7. 标签的大小
标签的大小受<hn>的影响
<h3>主标题<span class="label label-default">标识</span></h3>
<h2>主标题<span class="label label-default">标识</span></h2>
<h1>主标题<span class="label label-default">标识</span></h1>
效果