Bootstrap 分页

前言 🔗

  • Bootstrap 支持分页特性。分页(Pagination),是一种无序列表,Bootstrap 像处理其他界面元素一样处理分页。

1、分页

  • 下表列出了 Bootstrap 提供的处理分页的 class。
描述 备注 🔗
.pagination 分页链接 🔗
.pagination-lg 更大尺寸的分页链接 🔗
.pagination-sm 更小尺寸的分页链接 🔗
.disabled 禁用链接 🔗
.active 当前访问页面链接样式 🔗

1.1 默认分页

  • 下面的实例演示了上表中所讨论的 class .pagination 的用法。

  • 实例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    <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="#">4</a></li>
    <li><a href="#">5</a></li>
    <li><a href="#">&raquo;</a></li>
    </ul>
  • 效果 🔗

1.2 分页状态

  • 下面的实例演示了上表中所讨论的 class .disabled.active 的用法。

  • 实例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    <ul class="pagination">
    <li><a href="#">&laquo;</a></li>
    <li class="active"><a href="#">1</a></li>
    <li class="disabled"><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
    <li><a href="#">&raquo;</a></li>
    </ul>
  • 效果 🔗

1.3 分页大小

  • 下面的实例演示了上表中所讨论的 class .pagination-* 的用法。

  • 实例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    <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="#">4</a></li>
    <li><a href="#">5</a></li>
    <li><a href="#">&raquo;</a></li>
    </ul><br>
    <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="#">4</a></li>
    <li><a href="#">5</a></li>
    <li><a href="#">&raquo;</a></li>
    </ul><br>
    <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="#">4</a></li>
    <li><a href="#">5</a></li>
    <li><a href="#">&raquo;</a></li>
    </ul>
  • 效果 🔗

2、翻页

  • 如果想要创建一个简单的分页链接为用户提供导航,可通过翻页来实现。与分页链接一样,翻页也是无序列表。默认情况下,链接是居中显示。下表列出了 Bootstrap 处理翻页的 class。
描述 备注 🔗
.pager 一个简单的分页链接,链接居中对齐 🔗
.previous .pager 中上一页的按钮样式,左对齐 🔗
.next .pager 中下一页的按钮样式,右对齐 🔗
.disabled 禁用链接 🔗

2.1 默认翻页

  • 下面的实例演示了上表中所讨论的 class .pager 的用法。

  • 实例

    1
    2
    3
    4
    <ul class="pager">
    <li><a href="#">Previous</a></li>
    <li><a href="#">Next</a></li>
    </ul>
  • 效果 🔗

2.2 对齐链接

  • 下面的实例演示了上表中所讨论的 class .previous.next 的用法。

  • 实例

    1
    2
    3
    4
    <ul class="pager">
    <li class="previous"><a href="#">&larr; Older</a></li>
    <li class="next"><a href="#">Newer &rarr;</a></li>
    </ul>
  • 效果 🔗

2.3 翻页状态

  • 下面的实例演示了上表中所讨论的 class .disabled 的用法。

  • 实例

    1
    2
    3
    4
    <ul class="pager">
    <li class="previous disabled"><a href="#">&larr; Older</a></li>
    <li class="next"><a href="#">Newer &rarr;</a></li>
    </ul>
  • 效果 🔗

文章目录
  1. 1. 前言 🔗
  2. 2. 1、分页
    1. 2.1. 1.1 默认分页
    2. 2.2. 1.2 分页状态
    3. 2.3. 1.3 分页大小
  3. 3. 2、翻页
    1. 3.1. 2.1 默认翻页
    2. 3.2. 2.2 对齐链接
    3. 3.3. 2.3 翻页状态
隐藏目录