Bootstrap分页,标签和微章

分页（Pagination）,是一种无序列表。

.pagination:在页面上显示分页.disabled,.active:通过.disabled来定义不可点击的链接，.active来指示当前的页面.pagination-lg,.pagination-sm:获取不同大小的项

1.默认的分页

<ul class="pagination"><li><a href="#">&laquo;</a></li><li><a href="#">1</a></li><li><a href="#">2</a></li><li><a href="#">3</a></li><li><a href="#">&raquo;</a></li></ul>

2.分页的状态

disable:显示为灰色
active：显示为蓝色背景
3.设置大小

<ul class="pagination pagination-lg"><li><a href="#">&laquo;</a></li><li><a href="#">1</a></li><li><a href="#">2</a></li><li><a href="#">3</a></li><li><a href="#">&raquo;</a></li></ul><ul class="pagination pagination-sm"><li><a href="#">&laquo;</a></li><li><a href="#">1</a></li><li><a href="#">2</a></li><li><a href="#">3</a></li><li><a href="#">&raquo;</a></li></ul>

4.翻页
如果想要创建一个简单的分页链接为用户提供导航，可以通过翻页实现。翻页是无序列表，默认情况下，链接式居中显示。

.pager 获得翻页链接.previous,.next:previous把链接向左对齐，使用.next把链接向右对齐.disabled 获得一个颜色变淡的外观

默认的翻页

<ul class="pager"><li><a href="#">Previous</a></li><li><a href="#">Next</a></li></ul>

对齐的链接

• ←older
• Newer →

<ul class="pager"><li class="previous"><a href="#">&larr;older</a></li><li class="next"><a href="#">Newer &rarr;</a></li></ul>

翻页的状态

• ←older
• Newer →

<ul class="pager"><li class="previous disabled"><a href="#">&larr;older</a></li><li class="next"><a href="#">Newer &rarr;</a></li></ul>

5.标签
标签可用于计数，提示或页面上的其他的标记显示。使用class.label来显示标签

<h1>标签<span class="label label-default">Label</span></h1>

使用label-default,label-primary,label-success,label-info,label-warning,label-danger

<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><span class="label label-danger">危险标签</span>

6.微章
微章和标签相似，主要区别在于徽章的边角更加圆滑
微章（Badges）主要用于突出显示新的或未读的项

QQ50
当没有新的或者未读的项时，通过css的:empty选择器，徽章会折叠起来，表示里面没有内容
激活状态

<ul class="nav nav-pills"><li class="active"><a href="#">首页<span class="badge">40</span></a></li><li><a href="#">简介</a></li><li><a href="#">消息<span class="badge">3</span></a></li></ul>