Bootstrap 组件：分页组件的使用

作者:WangMin
格言:努力做好自己喜欢的每一件事
CSDN原创文章
博客地址 👉 WangMin

给网站或应用提供带有展示页码的分页组件，或者可以使用简单的翻页组件。

默认分页样式

注意：

标记分页组件。分页组件应该包装在nav元素中，以将其标识为屏幕阅读器和其他辅助技术的导航部分。此外，由于一个页面可能已经有多个这样的导航部分（例如标题中的主导航或侧栏导航），建议为nav提供一个描述性的aria标签，以说明它的用途。例如，如果分页组件用于在一组搜索结果之间导航，则适当的标签可以是aria label=“search results pages”。

<nav aria-label="Page navigation">
          <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="##">4</a></li>
		<li><a href="##">5</a></li>
		<li><a href="##">6</a></li>
		<li>
			<a href="##" aria-label="Next"><span aria-hidden="true">&raquo;</span></a>
		</li>
	</ul>
</nav>

1. 禁用和激活状态

链接在不同情况下可以定制。你可以给不能点击的链接添加.disabled类、给当前页添加.active类。

<nav aria-label="Page navigation">
          <ul class="pagination">
		<li>
			<a href="##" aria-label="Previous"><span aria-hidden="true">&laquo;</span>