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" 链接被标记为当前的页面。