分页
1、默认分页
代码段:
<h1 class="page-header">默认分页</h1>
<ul class="pagination">
<li><a href="#">«</a></li>
<li><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>
预览:
激活和禁用
链接在不同情况下可以定制。给不能点击的链接用.disabled
并且用.active
显示是当前页。
你还可以将active或disabled应用于<span>
标签,这样就可以让其保持需要的样式并移除点击功能。
<ul class="pagination">
<li class="disabled"><span>«</span></li>
<li class="active"><span>1 <span class="sr-only">(current)</span></span></li>
...
</ul>
尺寸
想要更小或更大的分页?要得到更多尺寸,加上.pagination-lg
或.pagination-sm
吧。
2、翻页
用轻便的标记和样式,就能做个上一页和下一页的简单翻页。用在像博客和杂志这样的简单站点上棒极了。
默认案例:
代码:
<ul class="pager">
<li><a href="#">Previous</a></li>
<li><a href="#">Next</a></li>
</ul>
预览:
对齐连接
您可以把链接向两端对齐作为替代。
<ul class="pager"> <li class="previous"><a href="#">← Older</a></li> <li class="next"><a href="#">Newer →</a></li></ul>
可选的禁用状态
翻页链接也用分页中的.disabled
工具类。
给链接,Bootstrap导航等等加入<span class="badge">
,可以容易地高亮新的或未读的条目。
代码:<a href="#">Inbox <span class="badge">42</span></a>
自动消失(self colapsing)
当没有新的或未读的条目时,里面没有内容的徽章会消失(通过CSS的:empty
选择器实现)。
跨浏览器兼容性
徽章在Internet Explorer 8中不会自动消失,因为它需要对:empty
选择器的支持。
适应导航的激活状态
在胶囊式导航和列表式导航中的徽章有内置的样式。
<ul class="nav nav-pills nav-stacked"> <li class="active"> <a href="#"> <span class="badge pull-right">42</span> Home </a> </li> <li><a href="#">School</a></li> <li><a href="#">School</a></li> <li><a href="#">School</a></li> </ul>
![](http://images.cnitblog.com/blog/401119/201311/10120735-82087a37e7c34b66aad0f7d45729bfcf.png)