跳到主要内容

Bootstrap中设置分页的class？

参考答案：

在Bootstrap中，用于设置分页的类主要是 .pagination。

下面是一个基本的Bootstrap分页组件的HTML结构：

<nav aria-label="Page navigation example">
  <ul class="pagination">
    <li class="page-item"><a class="page-link" href="#">Previous</a></li>
    <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>
    <li class="page-item"><a class="page-link" href="#">Next</a></li>
  </ul>
</nav>

在这个例子中，.pagination 类被应用于 <ul> 元素，它包含了所有的分页链接。每个分页链接都是一个 <li> 元素，并且被赋予 .page-item 类。链接本身被赋予 .page-link 类。

此外，Bootstrap还提供了一些额外的类，用于改变分页组件的样式和行为：

  • .disabled：这个类可以用于禁用一个分页链接。例如，你可能希望禁用 "Previous" 或 "Next" 链接，当没有更多的页面可以浏览时。
  • .active：这个类可以用于标记当前的页面。它通常被应用于一个 <li> 元素，并且使得对应的链接看起来像是被选中的。

例如：

<nav aria-label="Page navigation example">
  <ul class="pagination">
    <li class="page-item disabled"><a class="page-link" href="#" tabindex="-1" aria-disabled="true">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>

在这个例子中，"Previous" 链接被禁用了，而 "1" 链接被标记为当前的页面。