码农教程 - 一技在手,衣食无忧! tools

Bootstrap .pagination

❮ 上一节 下一节 ❯

基本分页

如果您的网站有很多页面，您可能希望向每个页面添加某种分页。

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

要创建基本分页，请添加.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如果链接由于某种原因被禁用：

示例

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

面包屑

分页的另一种形式是面包屑：

  1. 家
  2. 私人的
  3. 图片
  4. 假期

这个.breadcrumbclass 指示当前页面在导航层次结构中的位置：

示例

<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 导航参考。


❮ 上一节 下一节 ❯