CSS 修改分页颜色 Bootstrap

在本文中，我们将介绍如何使用CSS来修改分页颜色，并使用Bootstrap框架来优化分页样式。

阅读更多：CSS 教程

1. 修改分页颜色

要修改分页颜色，我们需要使用CSS来覆盖默认样式。可以通过以下步骤来实现：

1.1 设置分页容器的样式

首先，我们需要给分页容器设置样式。可以使用以下代码：

.pagination {
  background-color: #f8f8f8;
}

上面的代码将把分页容器的背景颜色设置为灰色（#f8f8f8）。根据需要，你可以将颜色值替换为其他颜色。

1.2 设置页码的样式

接下来，我们需要给页码设置样式。可以使用以下代码：

.pagination .page-link {
  color: #333;
  background-color: #fff;
}

上面的代码将把页码的文字颜色设置为黑色（#333），背景颜色设置为白色（#fff）。你可以根据需要自定义颜色值。

1.3 设置活动页码的样式

最后，我们需要给活动页码设置样式，以突出显示当前所在页。可以使用以下代码：

.pagination .page-item.active .page-link {
  background-color: #007bff;
  border-color: #007bff;
}

上面的代码将把活动页码的背景颜色和边框颜色都设置为Bootstrap默认的蓝色（#007bff）。你可以根据需要自定义颜色值。

2. 使用Bootstrap优化分页样式

除了修改分页颜色外，我们还可以使用Bootstrap框架来优化分页样式。Bootstrap提供了一套现成的分页组件，可以通过简单的HTML结构来创建分页导航。

以下是一个使用Bootstrap分页组件的示例代码：

<nav aria-label="Page navigation">
  <ul class="pagination">
    <li class="page-item">
      <a class="page-link" href="#" aria-label="Previous">
        <span aria-hidden="true">«</span>
        <span class="sr-only">Previous</span>
      </a>
    </li>
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item active"><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">»</span>
        <span class="sr-only">Next</span>
      </a>
    </li>
  </ul>
</nav>

上面的代码使用<nav>元素和<ul>元素来创建分页导航，然后使用<li>元素和<a>元素来表示每个页码链接。通过为<li>元素添加page-item类，为<a>元素添加page-link类，我们可以让分页导航具有Bootstrap的样式。