如何在CSS中使用Bulma制作分页按钮？Bulma pagination类怎么控制排列样式

来源：程序开发作者：泰国程序员头衔：程序员

导读：本期聚焦于小伙伴创作的《如何在CSS中使用Bulma制作分页按钮？Bulma pagination类怎么控制排列样式》，敬请观看详情，探索知识的价值。以下视频、文章将为您系统阐述其核心内容与价值。如果您觉得《如何在CSS中使用Bulma制作分页按钮？Bulma pagination类怎么控制排列样式》有用，将其分享出去将是对创作者最好的鼓励。

在前端页面开发中，分页功能是列表展示类页面的必备模块，手动编写分页按钮的CSS样式需要处理对齐、间距、交互状态等多项细节，而Bulma框架内置的pagination相关类可以大幅简化这个流程。Bulma的pagination类是一套完整的分页组件解决方案，不仅包含基础的分页结构样式，还提供了多个修饰类用于控制排列效果，开发者只需按照规范编写HTML结构并添加对应类即可快速实现需求。

Bulma分页按钮的基础结构

Bulma的分页组件最外层需要添加pagination类，内部的按钮元素根据功能不同使用不同的子元素标签，基础结构如下：

<nav class="pagination" role="navigation" aria-label="pagination">
  <a class="pagination-previous" disabled>上一页</a>
  <a class="pagination-next">下一页</a>
  <ul class="pagination-list">
    <li><a class="pagination-link" aria-label="第1页">1</a></li>
    <li><a class="pagination-link is-current" aria-label="第2页，当前页">2</a></li>
    <li><a class="pagination-link" aria-label="第3页">3</a></li>
  </ul>
</nav>

上述结构中，pagination-previous和pagination-next分别对应上一页和下一页按钮，pagination-list是无序列表容器，内部的pagination-link是页码按钮，is-current类用于标记当前选中页。

控制分页按钮的排列样式

水平对齐方式调整

Bulma默认将分页按钮居中对齐，如果需要调整对齐方式，可以在最外层的pagination类上添加对应的修饰类：

添加is-centered类：强制分页按钮居中对齐，这是默认效果，可以不显式添加
添加is-right类：将分页按钮整体靠右对齐

靠右对齐的分页示例代码：

<nav class="pagination is-right" role="navigation" aria-label="pagination">
  <a class="pagination-previous" disabled>上一页</a>
  <a class="pagination-next">下一页</a>
  <ul class="pagination-list">
    <li><a class="pagination-link" aria-label="第1页">1</a></li>
    <li><a class="pagination-link is-current" aria-label="第2页，当前页">2</a></li>
    <li><a class="pagination-link" aria-label="第3页">3</a></li>
  </ul>
</nav>

按钮间距与圆角控制

Bulma的分页按钮默认带有统一的圆角和间距，如果需要调整按钮之间的间距或者圆角样式，可以结合Bulma的通用修饰类实现：

添加is-rounded类：将分页按钮的圆角调整为圆形，更适合现代简约风格的设计
可以通过自定义CSS调整pagination-list的gap属性控制按钮之间的间距

圆形分页按钮的示例代码：

<nav class="pagination is-rounded" role="navigation" aria-label="pagination">
  <a class="pagination-previous" disabled>上一页</a>
  <a class="pagination-next">下一页</a>
  <ul class="pagination-list">
    <li><a class="pagination-link" aria-label="第1页">1</a></li>
    <li><a class="pagination-link is-current" aria-label="第2页，当前页">2</a></li>
    <li><a class="pagination-link" aria-label="第3页">3</a></li>
  </ul>
</nav>

响应式排列适配

在移动端屏幕宽度较小时，默认的分页排列可能会出现换行或者显示不全的问题，Bulma的pagination类本身已经做了基础的响应式处理，在窄屏下会自动调整上一页和下一页按钮的位置。如果需要更精细的控制，可以结合Bulma的响应式断点类，比如在小屏幕下隐藏部分页码只保留上下页按钮：

<nav class="pagination" role="navigation" aria-label="pagination">
  <a class="pagination-previous" disabled>上一页</a>
  <a class="pagination-next">下一页</a>
  <ul class="pagination-list is-hidden-mobile">
    <li><a class="pagination-link" aria-label="第1页">1</a></li>
    <li><a class="pagination-link is-current" aria-label="第2页，当前页">2</a></li>
    <li><a class="pagination-link" aria-label="第3页">3</a></li>
  </ul>
</nav>

上述代码中is-hidden-mobile类会在移动端屏幕下隐藏页码列表，只保留上下页按钮，避免窄屏下的布局错乱。

自定义分页按钮排列样式

如果Bulma内置的排列样式无法满足需求，也可以基于pagination类的基础样式做自定义扩展，比如调整按钮的整体尺寸：

/* 自定义分页按钮尺寸 */
.pagination.custom-size .pagination-link,
.pagination.custom-size .pagination-previous,
.pagination.custom-size .pagination-next {
  padding: 8px 16px;
  font-size: 14px;
}

对应的HTML结构添加自定义类即可生效：

<nav class="pagination custom-size" role="navigation" aria-label="pagination">
  <a class="pagination-previous" disabled>上一页</a>
  <a class="pagination-next">下一页</a>
  <ul class="pagination-list">
    <li><a class="pagination-link" aria-label="第1页">1</a></li>
    <li><a class="pagination-link is-current" aria-label="第2页，当前页">2</a></li>
    <li><a class="pagination-link" aria-label="第3页">3</a></li>
  </ul>
</nav>

完整示例整合

下面是一个整合了靠右对齐、圆形按钮、响应式适配的完整分页示例：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Bulma分页按钮示例</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css">
</head>
<body>
  <div class="container" style="margin-top: 50px;">
    <nav class="pagination is-right is-rounded" role="navigation" aria-label="pagination">
      <a class="pagination-previous" disabled>上一页</a>
      <a class="pagination-next">下一页</a>
      <ul class="pagination-list is-hidden-mobile">
        <li><a class="pagination-link" aria-label="到第1页">1</a></li>
        <li><span class="pagination-ellipsis">…</span></li>
        <li><a class="pagination-link" aria-label="到第3页">3</a></li>
        <li><a class="pagination-link is-current" aria-label="第4页，当前页">4</a></li>
        <li><a class="pagination-link" aria-label="到第5页">5</a></li>
        <li><span class="pagination-ellipsis">…</span></li>
        <li><a class="pagination-link" aria-label="到第10页">10</a></li>
      </ul>
    </nav>
  </div>
</body>
</html>

该示例在桌面端会显示靠右对齐的圆形分页按钮，包含省略号样式，在移动端会自动隐藏页码列表，只保留上下页按钮，适配不同屏幕的排列需求。

Bulma pagination 分页按钮 CSS 前端布局修改时间：2026-07-18 10:03:16

免责声明：已尽一切努力确保本网站所含信息的准确性。网站内容多为原创整理与精心编撰，观点力求客观中立。本站旨在免费分享，内容仅供个人学习、研究或参考使用。若引用了第三方作品，版权归原作者所有。如内容涉及您的权益，请联系我们处理。