Bootstrap 3 之 Bootstrap 分页

Bootstrap 提供了一种简单而有效的方法来创建分页导航，使用户能够在页面之间进行导航。在本章节中，我们将学习如何使用 Bootstrap 创建分页导航。

创建基本分页

要创建一个基本的分页导航，您可以使用以下 HTML 代码：

<ul class="pagination">
  <li><a href="#">1</a></li>
  <li><a href="#">2</a></li>
  <li><a href="#">3</a></li>
</ul>

在上面的代码中，我们使用了 pagination 类来定义一个基本的分页导航。每个页面链接都被包装在一个 li 元素中，并使用 a 元素来定义链接。

分页样式

Bootstrap 提供了几种不同的样式来定制分页导航的外观。您可以使用以下类来应用不同的样式：

• pagination-lg：创建一个大号的分页导航
• pagination-sm：创建一个小号的分页导航
• pagination-centered：将分页导航居中显示
• pagination-right：将分页导航右对齐显示

添加上一页和下一页按钮

除了基本的页面链接之外，您还可以添加上一页和下一页按钮来让用户更方便地进行导航。以下是一个示例代码：

<ul class="pagination">
  <li><a href="#" aria-label="Previous"><span aria-hidden="true">&laquo;</span></a></li>
  <li><a href="#">1</a></li>
  <li><a href="#">2</a></li>
  <li><a href="#">3</a></li>
  <li><a href="#" aria-label="Next"><span aria-hidden="true">&raquo;</span></a></li>
</ul>

在上面的代码中，我们使用了 « 和 » 来表示上一页和下一页按钮，并使用 aria-label 属性来提供按钮的可访问性标签。

总结

通过本章节的学习，您可以了解如何使用 Bootstrap 创建分页导航，并定制其外观和功能。下一章节将继续介绍 Bootstrap 的其他组件和功能。