Skip to main content Skip to docs navigation
View on GitHub

Pagination页码导航

Documentation and examples for showing pagination to indicate a series of related content exists across multiple pages.用于显示分页以指示跨多个页面存在一系列相关内容的文档和示例。

On this page本页内容

Overview概述

We use a large block of connected links for our pagination, making links hard to miss and easily scalable—all while providing large hit areas. 我们使用大量连接的链接进行分页，使得链接很难丢失，并且很容易扩展，同时提供了大量的点击区域。Pagination is built with list HTML elements so screen readers can announce the number of available links. 分页是用列表HTML元素构建的，因此屏幕阅读器可以宣布可用链接的数量。Use a wrapping <nav> element to identify it as a navigation section to screen readers and other assistive technologies.使用包装的<nav>元素将其标识为屏幕阅读器和其他辅助技术的导航部分。

In addition, as pages likely have more than one such navigation section, it’s advisable to provide a descriptive aria-label for the <nav> to reflect its purpose. 此外，由于页面可能有多个这样的导航部分，建议为<nav>描述性的aria-label提供以反映其目的。For example, if the pagination component is used to navigate between a set of search results, an appropriate label could be aria-label="Search results pages".例如，如果分页组件用于在一组搜索结果之间导航，则合适的标签可以是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>

Working with icons使用图标

Looking to use an icon or symbol in place of text for some pagination links? 是否希望使用图标或符号代替某些分页链接的文本？Be sure to provide proper screen reader support with aria attributes.确保使用aria属性提供适当的屏幕阅读器支持。

<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>
</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>
</a>
</li>
</ul>
</nav>

Disabled and active states禁用和活动状态

Pagination links are customizable for different circumstances. 分页链接可根据不同情况进行自定义。Use .disabled for links that appear un-clickable and .active to indicate the current page.对于显示为不可单击且处于活动状态的链接，请使用.disabled以指示当前页面。

While the .disabled class uses pointer-events: none to try to disable the link functionality of <a>s, that CSS property is not yet standardized and doesn’t account for keyboard navigation. 虽然.disabled类使用pointer-events: none来尝试禁用<a>的链接功能，但该CSS属性尚未标准化，不考虑键盘导航。As such, you should always add tabindex="-1" on disabled links and use custom JavaScript to fully disable their functionality.因此，您应该始终在禁用链接上添加tabindex="-1"；并使用自定义JavaScript完全禁用其功能。

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

You can optionally swap out active or disabled anchors for <span>, or omit the anchor in the case of the prev/next arrows, to remove click functionality and prevent keyboard focus while retaining intended styles.您可以选择为<span>替换活动或禁用的锚点，或者在上一个/下一个箭头的情况下省略锚点，以删除单击功能并防止键盘聚焦，同时保留预期的样式。

<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" aria-current="page">
<span class="page-link">2</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>

Sizing尺寸

Fancy larger or smaller pagination? Add .pagination-lg or .pagination-sm for additional sizes.想要更大或更小的分页？为其他大小添加.pagination-lg或.pagination-sm。

<nav aria-label="...">
<ul class="pagination pagination-lg">
<li class="page-item active" aria-current="page">
<span class="page-link">1</span>
</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>
</ul>
</nav>
<nav aria-label="...">
<ul class="pagination pagination-sm">
<li class="page-item active" aria-current="page">
<span class="page-link">1</span>
</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>
</ul>
</nav>

Alignment对齐

Change the alignment of pagination components with flexbox utilities.使用flexbox实用程序更改分页组件的对齐方式。

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

Sass

Variables变量

$pagination-padding-y:              .375rem;
$pagination-padding-x:              .75rem;
$pagination-padding-y-sm:           .25rem;
$pagination-padding-x-sm:           .5rem;
$pagination-padding-y-lg:           .75rem;
$pagination-padding-x-lg:           1.5rem;
$pagination-color:                  $link-color;
$pagination-bg:                     $white;
$pagination-border-width:           $border-width;
$pagination-border-radius:          $border-radius;
$pagination-margin-start:           -$pagination-border-width;
$pagination-border-color:           $gray-300;
$pagination-focus-color:            $link-hover-color;
$pagination-focus-bg:               $gray-200;
$pagination-focus-box-shadow:       $input-btn-focus-box-shadow;
$pagination-focus-outline:          0;
$pagination-hover-color:            $link-hover-color;
$pagination-hover-bg:               $gray-200;
$pagination-hover-border-color:     $gray-300;
$pagination-active-color:           $component-active-color;
$pagination-active-bg:              $component-active-bg;
$pagination-active-border-color:    $pagination-active-bg;
$pagination-disabled-color:         $gray-600;
$pagination-disabled-bg:            $white;
$pagination-disabled-border-color:  $gray-300;
$pagination-transition:              color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
$pagination-border-radius-sm:       $border-radius-sm;
$pagination-border-radius-lg:       $border-radius-lg;

Mixins

@mixin pagination-size($padding-y, $padding-x, $font-size, $border-radius) {
.page-link {
padding: $padding-y $padding-x;
@include font-size($font-size);
}
.page-item {
@if $pagination-margin-start == (-$pagination-border-width) {
&:first-child {
.page-link {
@include border-start-radius($border-radius);
}
}
&:last-child {
.page-link {
@include border-end-radius($border-radius);
}
}
} @else {
//Add border-radius to all pageLinks in case they have left margin
      .page-link {
@include border-radius($border-radius);
}
}
}
}