Bootstrap的分页样式

2 年前

欣欣

前端小白

分页是使用list列表元素构建的，因此屏幕阅读器可以读出链接的数量，使用 <nav> 元素将其识别为屏幕阅读器和其它辅助技术的导航组件并提供辅助支持。

此外，网页可能有不止一个这样的导航部分（存在多个导航组件），建议您为 <nav> 提供一个 aria-label 的描述，以反映其功能。

示例

<div class="col">
	<ul class="pagination">
		<!-- <li class="page-item"><a href="#" class="page-link">上一页</a></li> -->
		<li class="page-item"><a href="#" class="page-link"><span>&laquo;</span></a></li>
		<li class="page-item"><a href="#" class="page-link">1</a></li>
		<li class="page-item"><a href="#" class="page-link">2</a></li>
		<li class="page-item"><a href="#" class="page-link">3</a></li>
		<!-- <li class="page-item"><a href="#" class="page-link">下一页</a></li> -->
		<li class="page-item"><a href="#" class="page-link"><span>&raquo;</span></a></li>
</div>

禁用和活动状态

使用 .active 可指引标示当前所在的分页。

.disabled 使用 pointer-events: none 来禁用 <a> 的链接功能。

<div class="row mt-5">
	<!-- span标签代替a标签，激活以及禁用状态 -->
	<div class="col">
		<ul class="pagination">
			<li class="page-item disabled"><span class="page-link">上一页</span></li>
			<li class="page-item"><span class="page-link">1</span></li>
			<li class="page-item active"><span class="page-link">2</span></li>
			<li class="page-item"><span class="page-link">3</span></li>
			<li class="page-item"><span class="page-link">下一页</span></li>
	</div>
</div>

尺寸

要更大或更小的分页，添加 .pagination-lg 或 .pagination-sm 样式定义可以获得大规格或小规格尺寸的分页组件。

<!-- 尺寸 -->
<div class="row mt-5">
	<div class="col">
		<ul class="pagination pagination-lg">
			<li class="page-item"><a href="#" class="page-link">上一页</a></li>
			<li class="page-item"><a href="#" class="page-link">1</a></li>
			<li class="page-item"><a href="#" class="page-link">2</a></li>
			<li class="page-item"><a href="#" class="page-link">3</a></li>
			<li class="page-item"><a href="#" class="page-link">下一页</a></li>
	</div>
</div>
<div class="row">
	<div class="col">
		<ul class="pagination">
			<li class="page-item"><a href="#" class="page-link">上一页</a></li>
			<li class="page-item"><a href="#" class="page-link">1</a></li>
			<li class="page-item"><a href="#" class="page-link">2</a></li>
			<li class="page-item"><a href="#" class="page-link">3</a></li>
			<li class="page-item"><a href="#" class="page-link">下一页</a></li>
	</div>
</div>
<div class="row">
	<div class="col">
		<ul class="pagination pagination-sm">
			<li class="page-item"><a href="#" class="page-link">上一页</a></li>
			<li class="page-item"><a href="#" class="page-link">1</a></li>
			<li class="page-item"><a href="#" class="page-link">2</a></li>
			<li class="page-item"><a href="#" class="page-link">3</a></li>
			<li class="page-item"><a href="#" class="page-link">下一页</a></li>
	</div>
</div>

对齐

使用 flexbox弹性布局通用样式，可更改分页组件的对齐方式。

<!DOCTYPE html>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
		integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
	<title>Bootstrap的分页样式</title>
</head>
	<div class="container">	
		<!-- 对齐方式 -->
		<div class="row mt-5">
			<div class="col">
				<ul class="pagination justify-content-end">
					<li class="page-item"><a href="#" class="page-link">上一页</a></li>
					<li class="page-item"><a href="#" class="page-link">1</a></li>
					<li class="page-item"><a href="#" class="page-link">2</a></li>
					<li class="page-item"><a href="#" class="page-link">3</a></li>
					<li class="page-item"><a href="#" class="page-link">下一页</a></li>