文章: 阅读:

Bootstrap4 分页

CSSBootstrap

前言 🔗

  • 网页开发过程，如果碰到内容过多，一般都会做分页处理。Bootstrap4 可以很简单的实现分页效果。

1、分页

  • 要创建一个基本的分页可以在 <ul> 元素上添加 .pagination 类。然后在 <li> 元素上添加 .page-item 类：

  • 实例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    <div class="container">
        <ul class="pagination">
            <li class="page-item"><a class="page-link" href="#">Previous</a></li>
            <li class="page-item"><a class="page-link" href="#">1</a></li>
            <li class="page-item"><a class="page-link" href="#">2</a></li>
            <li class="page-item"><a class="page-link" href="#">3</a></li>
            <li class="page-item"><a class="page-link" href="#">Next</a></li>
        </ul>
    </div>

  • 效果 🔗

2、当前页页码状态

  • 当前页可以使用 .active 类来高亮显示：

  • 实例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    <div class="container">
        <ul class="pagination">
            <li class="page-item"><a class="page-link" href="#">Previous</a></li>
            <li class="page-item"><a class="page-link" href="#">1</a></li>
            <li class="page-item active"><a class="page-link" href="#">2</a></li>
            <li class="page-item"><a class="page-link" href="#">3</a></li>
            <li class="page-item"><a class="page-link" href="#">Next</a></li>
        </ul>
    </div>

  • 效果 🔗

3、不可点击的分页链接

  • .disabled 类可以设置分页链接不可点击:

  • 实例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    <div class="container">
        <ul class="pagination">
            <li class="page-item disabled"><a class="page-link" href="#">Previous</a></li>
            <li class="page-item"><a class="page-link" href="#">1</a></li>
            <li class="page-item"><a class="page-link" href="#">2</a></li>
            <li class="page-item"><a class="page-link" href="#">3</a></li>
            <li class="page-item"><a class="page-link" href="#">Next</a></li>
        </ul>
    </div>

  • 效果 🔗

4、分页显示大小

  • 可以将分页条目设置为不同的大小。.pagination-lg 类设置大字体的分页条目，.pagination-sm 类设置小字体的分页条目:

  • 实例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    <div class="container">
        <ul class="pagination pagination-lg">
            <li class="page-item"><a class="page-link" href="#">Previous</a></li>
            <li class="page-item"><a class="page-link" href="#">1</a></li>
            <li class="page-item"><a class="page-link" href="#">2</a></li>
            <li class="page-item"><a class="page-link" href="#">3</a></li>
            <li class="page-item"><a class="page-link" href="#">Next</a></li>
        </ul>

        <ul class="pagination pagination-sm">
            <li class="page-item"><a class="page-link" href="#">Previous</a></li>
            <li class="page-item"><a class="page-link" href="#">1</a></li>
            <li class="page-item"><a class="page-link" href="#">2</a></li>
            <li class="page-item"><a class="page-link" href="#">3</a></li>
            <li class="page-item"><a class="page-link" href="#">Next</a></li>
        </ul>
    </div>

  • 效果 🔗

5、面包屑导航

  • .breadcrumb 和 .breadcrumb-item 类用于设置面包屑导航：

  • 实例

    1
    2
    3
    4
    5
    6
    7
    8
    <div class="container">
        <ul class="breadcrumb">
            <li class="breadcrumb-item"><a href="#">Photos</a></li>
            <li class="breadcrumb-item"><a href="#">Summer 2017</a></li>
            <li class="breadcrumb-item"><a href="#">Italy</a></li>
            <li class="breadcrumb-item active">Rome</li>
        </ul>
    </div>

  • 效果 🔗

如果您觉得阅读本文对您有帮助，请用微信、支付宝 or QQ 扫码赞助，您的支持是我写作最大的动力！欢迎各位转载，但是未经作者本人同意，转载文章之后必须在文章页面明显位置给出作者和原文链接，否则保留追究法律责任的权利。

Qian Chia

Posted @ 2019-11-11 20:12


评论


文章目录
  1. 1. 前言 🔗
  2. 2. 1、分页
  3. 3. 2、当前页页码状态
  4. 4. 3、不可点击的分页链接
  5. 5. 4、分页显示大小
  6. 6. 5、面包屑导航
隐藏目录