Pagination（分页） - [ Bootstrap 4 中文开发手册 ] - 在线原生手册

简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)

目錄搜尋

Getting started Accessibility（无障碍） Browsers and devices（浏览器和设备） Build tools（构建工具） Contents（内容） Download（下载） JavaScript Theming Bootstrap（主题Bootstrap） Webpack Components: Alerts Alerts（警报） Components: Badges Badges（徽章） Components: Breadcrumb Breadcrumb Components: Button group Button group（按钮组） Components: Buttons Buttons（按钮） Components: Cards Components: Carousel Cards（卡） Carousel（圆盘传送带） Components: Collapse Collapse（折叠） Components: Dropdowns Dropdowns（下拉菜单） Components: Forms Forms（表单） Components: Input group Input group（输入群组） Components: Input group Jumbotron（广告大屏幕） Components: List group List group（列表组） Components: Modal Modal（互动视窗） Components: Navbar Navbar（导航栏） Components: Navs Navs（导航栏） Components: Pagination Pagination（分页） Components: Popovers Popovers（弹出框） Components: Progress Progress（进度条） Components: Scrollspy Scrollspy（滚动监听） Components: Tooltips Tooltips（提示工具） Content Code（代码） Figures（图片区） Images（图片） Reboot（重置） Tables（表格） Typography（排版） Layout Grid（网格） Layout（布局） Media object（多媒体对象） Utilities for layout（排版通用类别） Migration Migrating to v4（迁移到v4） Utilities Borders（边框） Clearfix（清除浮动） Close icon（关闭图标） Colors（颜色） Display property（显示属性） Embeds（内嵌） Flex（弹性） Float（浮动） Image replacement（图像替换） Position（位置） Screenreaders（荧幕阅读器） Sizing（尺寸） Spacing（间隔） Text（文本） Vertical alignment（垂直对齐） Visibility（能见度）

文字

用于显示分页以指示多个页面中存在的一系列相关内容的文档和示例。

概述

我们使用大量连接链接进行分页，使得链接很难丢失，并且易于扩展--所有这些都提供了大的命中区域。分页是由列表HTML元素构建的，这样屏幕阅读器就可以公布可用链接的数量。使用包装<nav>元素将其标识为用于筛选阅读器和其他辅助技术的导航部分。

此外，由于页面可能有多个这样的导航部分，因此建议提供一个描述性的aria-label为<nav>以反映它的目的。例如，如果分页组件用于在一组搜索结果之间导航，则可以使用适当的标签aria-label="Search results pages"...

<nav aria-label="Page navigation example">  <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></nav>

使用图标

寻找使用一个图标或符号代替文字的一些分页链接？确保提供适当的屏幕读取器支持aria属性和.sr-only效用。

<nav aria-label="Page navigation example">  <ul class="pagination">    <li class="page-item">      <a class="page-link" href="#" aria-label="Previous">        <span aria-hidden="true">&laquo;</span>        <span class="sr-only">Previous</span>      </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="#" aria-label="Next">        <span aria-hidden="true">&raquo;</span>        <span class="sr-only">Next</span>      </a>    </li>  </ul></nav>

禁用和活动状态

分页链接可根据不同情况定制。使用.disabled对于出现不可点击和不可点击的链接。.active若要指示当前页，请执行以下操作。

而.disabled类用途pointer-events: none到试一试的链接功能。<a>该CSS属性还没有标准化，也不考虑键盘导航。因此，您应该始终添加tabindex="-1"禁用链接，并使用自定义JavaScript完全禁用它们的功能。

<nav aria-label="...">  <ul class="pagination">    <li class="page-item disabled">      <a class="page-link" href="#" tabindex="-1">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 <span class="sr-only">(current)</span></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></nav>

您可以选择将活动的或禁用的锚交换为<span>，或者在PRV/Next箭头的情况下省略锚，以删除单击功能并在保留预期样式的同时防止键盘焦点。

<nav aria-label="...">  <ul class="pagination">    <li class="page-item disabled">      <span class="page-link">Previous</span>    </li>    <li class="page-item"><a class="page-link" href="#">1</a></li>    <li class="page-item active">      <span class="page-link">        2        <span class="sr-only">(current)</span>      </span>    </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></nav>

上浆

喜欢更大还是更小的分页？加.pagination-lg或.pagination-sm为了更大的尺寸。

<nav aria-label="...">  <ul class="pagination pagination-lg">    <li class="page-item disabled">      <a class="page-link" href="#" tabindex="-1">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></nav>

<nav aria-label="...">  <ul class="pagination pagination-sm">    <li class="page-item disabled">      <a class="page-link" href="#" tabindex="-1">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></nav>

对齐

更改分页组件的对齐方式。挠曲箱公用设施...

<nav aria-label="Page navigation example">  <ul class="pagination justify-content-center">    <li class="page-item disabled">      <a class="page-link" href="#" tabindex="-1">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></nav>

<nav aria-label="Page navigation example">  <ul class="pagination justify-content-end">    <li class="page-item disabled">      <a class="page-link" href="#" tabindex="-1">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></nav>

 © 2011–2017 Twitter, Inc.

根据麻省理工学院的许可授权的代码。

根据CreativeCommonsAttributionLicense v3.0授权的文档。