基本分页
如果你有一个网站,有很多的网页,你不妨某种分页添加到每个页面。
在引导一个基本的分页如下:
要创建一个基本的分页,添加.pagination
类的<ul>
元素:
例
<ul class="pagination">
<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="#">5</a></li>
</ul>
试一试» 活动状态
激活状态显示的是当前页面:
添加类.active
让用户知道他/她所在的网页:
例
<ul class="pagination">
<li><a href="#">1</a></li>
<li class="active"><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
</ul>
试一试» Disabled State
禁用的链接无法点击:
添加类.disabled
如果一个链接出于某种原因被禁用:
例
<ul class="pagination">
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li class="disabled"><a href="#">4</a></li>
<li><a href="#">5</a></li>
</ul>
试一试» Pagination Sizing
分页块也可以尺寸以更大的尺寸或更小的尺寸:
添加类.pagination-lg
较大块或.pagination-sm
为更小的块:
例
<ul class="pagination
pagination-lg">
<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="#">5</a></li>
</ul>
<ul class="pagination pagination-sm">
<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="#">5</a></li>
</ul>
试一试» 面包屑
为分页另一种形式,是面包屑:
该.breadcrumb
类表示一个导航层次结构中的当前页面的位置:
例
<ul class="breadcrumb">
<li><a href="#">Home</a></li>
<li><a href="#">Private</a></li>
<li><a href="#">Pictures</a></li>
<li class="active">Vacation</li>
</ul>
试一试» 自测练习用!
完成Bootstrap导航参考
对于所有的导航类的完整参考,请访问我们的完整Bootstrap的导航参考 。