通过 🎓 在线互动课程、📺 教育视频和 🧑🏻‍💻 项目构建教程学习 CSS。
下载

从这里开始

功能

Sass 工具

自定义

CSS 库

CSS 助手

赞助

Route Planner and Route Optimizer

分页

一个响应式、可用且灵活的 分页 组件

分页组件由几个元素组成

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

所有元素都是可选的，因此您可以根据需要组成您的分页。

示例

HTML 

<nav class="pagination" role="navigation" aria-label="pagination">
  <a href="#" class="pagination-previous">Previous</a>
  <a href="#" class="pagination-next">Next page</a>
  <ul class="pagination-list">
    <li>
      <a href="#" class="pagination-link" aria-label="Goto page 1">1</a>
    </li>
    <li>
      <span class="pagination-ellipsis">&hellip;</span>
    </li>
    <li>
      <a href="#" 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 href="#" class="pagination-link" aria-label="Goto page 47">47</a>
    </li>
    <li>
      <span class="pagination-ellipsis">&hellip;</span>
    </li>
    <li>
      <a href="#" 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 href="#" 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 href="#" class="pagination-link" aria-label="Goto page 2">2</a>
    </li>
    <li>
      <a href="#" 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 href="#" class="pagination-previous">Previous</a>
  <a href="#" class="pagination-next">Next page</a>
  <ul class="pagination-list">
    <li><a href="#" class="pagination-link" aria-label="Goto page 1">1</a></li>
    <li><span class="pagination-ellipsis">&hellip;</span></li>
    <li><a href="#" 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 href="#" class="pagination-link" aria-label="Goto page 47">47</a></li>
    <li><span class="pagination-ellipsis">&hellip;</span></li>
    <li><a href="#" 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 href="#" class="pagination-previous">Previous</a>
  <a href="#" class="pagination-next">Next page</a>
  <ul class="pagination-list">
    <li><a href="#" class="pagination-link" aria-label="Goto page 1">1</a></li>
    <li><span class="pagination-ellipsis">&hellip;</span></li>
    <li><a href="#" 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 href="#" class="pagination-link" aria-label="Goto page 47">47</a></li>
    <li><span class="pagination-ellipsis">&hellip;</span></li>
    <li><a href="#" 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 href="#" class="pagination-previous">Previous</a>
  <a href="#" class="pagination-next">Next page</a>
  <ul class="pagination-list">
    <li><a href="#" class="pagination-link" aria-label="Goto page 1">1</a></li>
    <li><span class="pagination-ellipsis">&hellip;</span></li>
    <li><a href="#" 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 href="#" class="pagination-link" aria-label="Goto page 47">47</a></li>
    <li><span class="pagination-ellipsis">&hellip;</span></li>
    <li><a href="#" 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 href="#" class="pagination-previous">Previous</a>
  <a href="#" class="pagination-next">Next page</a>
  <ul class="pagination-list">
    <li><a href="#" class="pagination-link" aria-label="Goto page 1">1</a></li>
    <li><span class="pagination-ellipsis">&hellip;</span></li>
    <li><a href="#" 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 href="#" class="pagination-link" aria-label="Goto page 47">47</a></li>
    <li><span class="pagination-ellipsis">&hellip;</span></li>
    <li><a href="#" 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 href="#" class="pagination-previous">Previous</a>
  <a href="#" class="pagination-next">Next page</a>
  <ul class="pagination-list">
    <li><a href="#" class="pagination-link" aria-label="Goto page 1">1</a></li>
    <li><span class="pagination-ellipsis">&hellip;</span></li>
    <li><a href="#" 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 href="#" class="pagination-link" aria-label="Goto page 47">47</a></li>
    <li><span class="pagination-ellipsis">&hellip;</span></li>
    <li><a href="#" 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 href="#" class="pagination-previous">Previous</a>
  <a href="#" class="pagination-next">Next page</a>
  <ul class="pagination-list">
    <li><a href="#" class="pagination-link" aria-label="Goto page 1">1</a></li>
    <li><span class="pagination-ellipsis">&hellip;</span></li>
    <li><a href="#" 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 href="#" class="pagination-link" aria-label="Goto page 47">47</a></li>
    <li><span class="pagination-ellipsis">&hellip;</span></li>
    <li><a href="#" class="pagination-link" aria-label="Goto page 86">86</a></li>
  </ul>
</nav>

Sass 和 CSS 变量 #

Sass 变量
CSS 变量
值
 
$pagination-margin
 
var(--bulma-pagination-margin)
 
-0.25rem
 
$pagination-min-width
 
var(--bulma-pagination-min-width)
 
var(--bulma-control-height)
 
$pagination-item-border-style
 
var(--bulma-pagination-item-border-style)
 
solid
 
$pagination-item-border-width
 
var(--bulma-pagination-item-border-width)
 
var(--bulma-control-border-width)
 
$pagination-item-font-size
 
var(--bulma-pagination-item-font-size)
 
1em
 
$pagination-item-margin
 
var(--bulma-pagination-item-margin)
 
0.25rem
 
$pagination-item-padding-left
 
var(--bulma-pagination-item-padding-left)
 
0.5em
 
$pagination-item-padding-right
 
var(--bulma-pagination-item-padding-right)
 
0.5em
 
$pagination-nav-padding-left
 
var(--bulma-pagination-nav-padding-left)
 
0.75em
 
$pagination-nav-padding-right
 
var(--bulma-pagination-nav-padding-right)
 
0.75em
 
$pagination-disabled-color
 
var(--bulma-pagination-disabled-color)
 
var(--bulma-text-weak)
 
$pagination-disabled-background-color
 
var(--bulma-pagination-disabled-background-color)
 
var(--bulma-border)
 
$pagination-disabled-border-color
 
var(--bulma-pagination-disabled-border-color)
 
var(--bulma-border)
 
$pagination-current-color
 
var(--bulma-pagination-current-color)
 
var(--bulma-link-invert)
 
$pagination-current-background-color
 
var(--bulma-pagination-current-background-color)
 
var(--bulma-link)
 
$pagination-current-border-color
 
var(--bulma-pagination-current-border-color)
 
var(--bulma-link)
 
$pagination-ellipsis-color
 
var(--bulma-pagination-ellipsis-color)
 
var(--bulma-text-weak)
 
$pagination-shadow-inset
 
var(--bulma-pagination-shadow-inset)
 
inset 0 0.0625em 0.125em hsla(
  var(--bulma-scheme-h),
  var(--bulma-scheme-s),
  var(--bulma-scheme-invert-l),
  0.2
)

如何支持 Bulma

一次性 捐赠

通过以下方式进行 浏览器测试

访问我们的 赞助商

每月 捐赠

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

Primary

Hue

Saturation

Lightness

Link

Hue

Saturation

Lightness

Info

Hue

Saturation

Lightness

Success

Hue

Saturation

Lightness

Warning

Hue

Saturation

Lightness

Danger

Hue

Saturation

Lightness

免费开始使用
免费开始使用