Bootstrap 分页学习笔记

Bootstrap 是一个流行的前端框架，提供了丰富的组件和样式，可以帮助我们快速构建美观、响应式的网页。分页（Pagination）是其中一个常用的组件之一，它可以让我们更好地组织页面内容，提供更好的用户体验。

基本用法

Bootstrap 的分页组件提供了几种不同的样式，可以选择适合自己的样式来使用。下面是一个基本的分页用法示例：

htmlCopy Code
<nav>
  <ul class="pagination">
    <li class="page-item disabled"><a class="page-link" href="#">Previous</a></li>
    <li class="page-item active"><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>
    <li class="page-item"><a class="page-link" href="#">Next</a></li>
  </ul>
</nav>

在这个示例中，我们使用了 ul.pagination 和 li.page-item 来构建分页组件。disabled 和 active 类分别表示禁用和当前选中的分页项。需要注意的是，分页组件只是一个静态的 HTML 结构，需要通过 JavaScript 来实现页面跳转和更新。

大小和对齐方式

Bootstrap 的分页组件提供了不同大小的样式，可以选择适合自己的样式来使用。下面是一个示例代码：

htmlCopy Code
<nav>
  <ul class="pagination pagination-lg justify-content-center">
    <li class="page-item disabled"><a class="page-link" href="#">Previous</a></li>
    <li class="page-item active"><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>
    <li class="page-item"><a class="page-link" href="#">Next</a></li>
  </ul>
</nav>

在这个示例中，我们使用了 pagination-lg 和 justify-content-center 类来设置分页组件的大小和对齐方式。

实例应用

分页组件可以应用在很多不同的场景中，下面是一个示例应用：

htmlCopy Code
<div class="container">
  <h1>文章列表</h1>
  <ul class="list-group">
    <li class="list-group-item">文章 1</li>
    <li class="list-group-item">文章 2</li>
    <li class="list-group-item">文章 3</li>
    <li class="list-group-item">文章 4</li>
    <li class="list-group-item">文章 5</li>
    <li class="list-group-item">文章 6</li>
    <li class="list-group-item">文章 7</li>
    <li class="list-group-item">文章 8</li>
    <li class="list-group-item">文章 9</li>
    <li class="list-group-item">文章 10</li>
  </ul>
  <nav class="mt-3">
    <ul class="pagination justify-content-center">
      <li class="page-item disabled"><a class="page-link" href="#">Previous</a></li>
      <li class="page-item active"><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>
      <li class="page-item"><a class="page-link" href="#">Next</a></li>
    </ul>
  </nav>
</div>

在这个示例中，我们使用了 Bootstrap 的分页组件来实现文章列表的分页。使用 list-group 类来实现带有边框的列表效果，使用 mt-3 类来设置间距，使分页组件与列表有一定的间隔。