bootstrap3-pagination 分页

最新推荐文章于 2025-06-14 14:15:28 发布

schy_hqh

最新推荐文章于 2025-06-14 14:15:28 发布

阅读量405

点赞数

CC 4.0 BY-SA版权

分类专栏： WEB前端@BootStrap3

本文链接：https://blog.youkuaiyun.com/schy_hqh/article/details/84515653

WEB前端@BootStrap3 专栏收录该内容

21 篇文章

订阅专栏

本文介绍了一种用于网页的分页和翻页组件实现方法，并展示了不同样式的分页导航栏和翻页链接。通过这些组件可以方便地进行页面跳转。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

	<!-- 分页 -->
	<div class="container">
		<ul class="pagination pagination-sm">
			<li><a href="#">&laquo;</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="#">&raquo;</a></li>
		</ul>
		<br/>
		<ul class="pagination pagination-lg">
			<li class="disabled"><a href="#">&laquo;</a></li>
			<li class="active"><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="#">&raquo;</a></li>
		</ul>
	</div>

	<!-- 翻页 -->
	<div class="container">
		<!-- 在默认的翻页中，链接居中 -->
		<ul class="pager">
			<li><a href="#">Previous</a></li>
			<li><a href="#">Next</a></li>
		</ul>
		
		<!-- 两端对齐-->
		<ul class="pager">
			<li class="previous disabled"><a href="#">&larr; Older</a></li>
			<li class="next"><a href="#">Newer &rarr;</a></li>
		</ul>
	</div>