分页导航（Pagination）

一款自适应、实用的、具有弹性的分页导航（pagination）

分页组件包含：

  • pagination-previous 和 pagination-next 用于增量导航
  • pagination-list 显示页：
    • pagination-link 是页码
    • pagination-ellipsis 是范围分隔符

所有元素可选，所以您可以随意组合。

示例

HTML 

<nav class="pagination" role="navigation" aria-label="pagination">
  <a class="pagination-previous">Previous</a>
  <a class="pagination-next">Next page</a>
  <ul class="pagination-list">
    <li>
      <a class="pagination-link" aria-label="Goto page 1">1</a>
    </li>
    <li>
      <span class="pagination-ellipsis">&hellip;</span>
    </li>
    <li>
      <a class="pagination-link" aria-label="Goto page 45">45</a>
    </li>
    <li>
      <a class="pagination-link is-current" aria-label="Page 46" aria-current="page">46</a>
    </li>
    <li>
      <a class="pagination-link" aria-label="Goto page 47">47</a>
    </li>
    <li>
      <span class="pagination-ellipsis">&hellip;</span>
    </li>
    <li>
      <a class="pagination-link" aria-label="Goto page 86">86</a>
    </li>
  </ul>
</nav>

您可以对非激活链接使其不可用，或者修改可用页码数目。

示例

HTML 

<nav class="pagination" role="navigation" aria-label="pagination">
  <a class="pagination-previous is-disabled" title="This is the first page">Previous</a>
  <a class="pagination-next">Next page</a>
  <ul class="pagination-list">
    <li>
      <a class="pagination-link is-current" aria-label="Page 1" aria-current="page">1</a>
    </li>
    <li>
      <a class="pagination-link" aria-label="Goto page 2">2</a>
    </li>
    <li>
      <a class="pagination-link" aria-label="Goto page 3">3</a>
    </li>
  </ul>
</nav>

平板上默认数字列表在左侧，上页/下页按钮在右侧。您可以通过使用 is-centered 和 is-right 修饰符来修改这些元素的 顺序。

示例

HTML 

<nav class="pagination is-centered" role="navigation" aria-label="pagination">
  <a class="pagination-previous">Previous</a>
  <a class="pagination-next">Next page</a>
  <ul class="pagination-list">
    <li><a class="pagination-link" aria-label="Goto page 1">1</a></li>
    <li><span class="pagination-ellipsis">&hellip;</span></li>
    <li><a class="pagination-link" aria-label="Goto page 45">45</a></li>
    <li><a class="pagination-link is-current" aria-label="Page 46" aria-current="page">46</a></li>
    <li><a class="pagination-link" aria-label="Goto page 47">47</a></li>
    <li><span class="pagination-ellipsis">&hellip;</span></li>
    <li><a class="pagination-link" aria-label="Goto page 86">86</a></li>
  </ul>
</nav>

示例

HTML 

<nav class="pagination is-right" role="navigation" aria-label="pagination">
  <a class="pagination-previous">Previous</a>
  <a class="pagination-next">Next page</a>
  <ul class="pagination-list">
    <li><a class="pagination-link" aria-label="Goto page 1">1</a></li>
    <li><span class="pagination-ellipsis">&hellip;</span></li>
    <li><a class="pagination-link" aria-label="Goto page 45">45</a></li>
    <li><a class="pagination-link is-current" aria-label="Page 46" aria-current="page">46</a></li>
    <li><a class="pagination-link" aria-label="Goto page 47">47</a></li>
    <li><span class="pagination-ellipsis">&hellip;</span></li>
    <li><a class="pagination-link" aria-label="Goto page 86">86</a></li>
  </ul>
</nav>

样式 #

添加 is-rounded 修饰符使分页项变成圆角。

示例

HTML 

<nav class="pagination is-rounded" role="navigation" aria-label="pagination">
  <a class="pagination-previous">Previous</a>
  <a class="pagination-next">Next page</a>
  <ul class="pagination-list">
    <li><a class="pagination-link" aria-label="Goto page 1">1</a></li>
    <li><span class="pagination-ellipsis">&hellip;</span></li>
    <li><a class="pagination-link" aria-label="Goto page 45">45</a></li>
    <li><a class="pagination-link is-current" aria-label="Page 46" aria-current="page">46</a></li>
    <li><a class="pagination-link" aria-label="Goto page 47">47</a></li>
    <li><span class="pagination-ellipsis">&hellip;</span></li>
    <li><a class="pagination-link" aria-label="Goto page 86">86</a></li>
  </ul>
</nav>

型号 #

分页导航有 3 扩展型号。
您只需追加修饰符 is-small、is-medium 和 is-large 到 pagination 组件即可。

示例

HTML 

<nav class="pagination is-small" role="navigation" aria-label="pagination">
  <a class="pagination-previous">Previous</a>
  <a class="pagination-next">Next page</a>
  <ul class="pagination-list">
    <li><a class="pagination-link" aria-label="Goto page 1">1</a></li>
    <li><span class="pagination-ellipsis">&hellip;</span></li>
    <li><a class="pagination-link" aria-label="Goto page 45">45</a></li>
    <li><a class="pagination-link is-current" aria-label="Page 46" aria-current="page">46</a></li>
    <li><a class="pagination-link" aria-label="Goto page 47">47</a></li>
    <li><span class="pagination-ellipsis">&hellip;</span></li>
    <li><a class="pagination-link" aria-label="Goto page 86">86</a></li>
  </ul>
</nav>

示例

HTML 

<nav class="pagination is-medium" role="navigation" aria-label="pagination">
  <a class="pagination-previous">Previous</a>
  <a class="pagination-next">Next page</a>
  <ul class="pagination-list">
    <li><a class="pagination-link" aria-label="Goto page 1">1</a></li>
    <li><span class="pagination-ellipsis">&hellip;</span></li>
    <li><a class="pagination-link" aria-label="Goto page 45">45</a></li>
    <li><a class="pagination-link is-current" aria-label="Page 46" aria-current="page">46</a></li>
    <li><a class="pagination-link" aria-label="Goto page 47">47</a></li>
    <li><span class="pagination-ellipsis">&hellip;</span></li>
    <li><a class="pagination-link" aria-label="Goto page 86">86</a></li>
  </ul>
</nav>

示例

HTML 

<nav class="pagination is-large" role="navigation" aria-label="pagination">
  <a class="pagination-previous">Previous</a>
  <a class="pagination-next">Next page</a>
  <ul class="pagination-list">
    <li><a class="pagination-link" aria-label="Goto page 1">1</a></li>
    <li><span class="pagination-ellipsis">&hellip;</span></li>
    <li><a class="pagination-link" aria-label="Goto page 45">45</a></li>
    <li><a class="pagination-link is-current" aria-label="Page 46" aria-current="page">46</a></li>
    <li><a class="pagination-link" aria-label="Goto page 47">47</a></li>
    <li><span class="pagination-ellipsis">&hellip;</span></li>
    <li><a class="pagination-link" aria-label="Goto page 86">86</a></li>
  </ul>
</nav>

Variables #

Name
Type
Value
Computed Value
Computed Type 
$pagination-color
variable
$text-strong
hsl(0, 0%, 21%)
color
$pagination-border-color
variable
$border
hsl(0, 0%, 86%)
color
$pagination-margin
size
-0.25rem
$pagination-min-width
variable
$control-height
$pagination-item-font-size
size
1em
$pagination-item-margin
size
0.25rem
$pagination-item-padding-left
size
0.5em
$pagination-item-padding-right
size
0.5em
$pagination-nav-padding-left
size
0.75em
$pagination-nav-padding-right
size
0.75em
$pagination-hover-color
variable
$link-hover
hsl(0, 0%, 21%)
color
$pagination-hover-border-color
variable
$link-hover-border
hsl(0, 0%, 71%)
color
$pagination-focus-color
variable
$link-focus
hsl(0, 0%, 21%)
color
$pagination-focus-border-color
variable
$link-focus-border
hsl(229, 53%,  53%)
color
$pagination-active-color
variable
$link-active
hsl(0, 0%, 21%)
color
$pagination-active-border-color
variable
$link-active-border
hsl(0, 0%, 29%)
color
$pagination-disabled-color
variable
$text-light
hsl(0, 0%, 48%)
color
$pagination-disabled-background-color
variable
$border
hsl(0, 0%, 86%)
color
$pagination-disabled-border-color
variable
$border
hsl(0, 0%, 86%)
color
$pagination-current-color
variable
$link-invert
#fff
color
$pagination-current-background-color
variable
$link
hsl(229, 53%,  53%)
color
$pagination-current-border-color
variable
$link
hsl(229, 53%,  53%)
color
$pagination-ellipsis-color
variable
$grey-light
hsl(0, 0%, 71%)
color
$pagination-shadow-inset
size
inset 0 1px 2px rgba($scheme-invert, 0.2)

Made with Bulma 此页面为开放源码页面。 发现排版问题？或者表达模糊？
在 GitHub 改进该页内容

支持 Bulma 😃

一次性捐献

访问我们的赞助商

Stock APIs kasinohai casinoutanlicens

按月捐献

成为赞助商
#native_company# #native_desc#
#native_cta#

简讯 功能、版本、展柜……实时新闻滚动发布！