如何更改bootstrap的分页颜色

要更改Bootstrap的分页颜色，可以通过自定义CSS样式来实现。以下是一种常见的方法：

首先，在HTML文件中引入Bootstrap的CSS文件和自定义的CSS文件。可以使用CDN链接或本地文件引入。

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="custom.css">

在自定义的CSS文件中，添加以下代码来更改分页的颜色：

/* 更改分页链接的背景颜色 */
.page-link {
  background-color: #your_color;
  color: #fff;
}

/* 更改分页链接的悬停背景颜色 */
.page-link:hover {
  background-color: #your_hover_color;
  color: #fff;
}

/* 更改分页链接的选中背景颜色 */
.page-item.active .page-link {
  background-color: #your_active_color;
  color: #fff;
}

将上述代码中的#your_color、#your_hover_color和#your_active_color替换为你想要的颜色值，可以使用十六进制、RGB或颜色名称。

在HTML文件中使用Bootstrap的分页组件，并添加相应的CSS类名。

<nav aria-label="Page navigation">
  <ul class="pagination">
    <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>
    <!-- 更多分页链接 -->
  </ul>
</nav>

通过添加page-link类名，将自定义的CSS样式应用到分页链接上。

请注意，以上方法仅适用于Bootstrap 4及以上版本。如果你使用的是较早的版本，可能需要稍作调整。

推荐的腾讯云相关产品：腾讯云CDN（内容分发网络），详情请参考腾讯云CDN产品介绍。