Bootstrap 分页


基本分页

如果你有一个有很多页面的网站,你可能希望在每个页面上添加一些分页。

Bootstrap 中的基本分页如下所示:

要创建一个基本的分页可以在 <ul> 元素上添加 .pagination类:

实例

<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 类可以设置分页链接不可点击:

实例

<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-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>
亲自试一试 »

学习训练

练习题:

添加正确的类名,将下面的列表转换为分页菜单。

<ul class="">
  <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>

开始实验


完整 Bootstrap 导航参考

有关导航的完整参考,请访问 Bootstrap 导航参考