پروگرس بار (Progress)

توضیحات

نمونه هایی برای نمایش صفحه بندی برای نشان دادن یک سری محتوای مرتبط در چندین صفحه وجود دارد.

علاوه بر این، از آنجایی که صفحات امکان دارد بیش از یک بخش داشته باشد، توصیه می‌شود یک برچسب aria-label برای <nav> ارائه شود تا هدف آن را منعکس کند به عنوان مثال، صفحه بندی ای برای پیمایش بین مجموعه ای از نتایج جستجو باید،یک برچسب مناسب مثلا aria-label="Search results pages" استفاده شود.

<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>  
با آیکُن
<nav aria-label="Page navigation example">
	<ul class="pagination">
		<li class="page-item">
			<a class="page-link" href="#" aria-label="Previous">
				<span aria-hidden="true">&laquo;</span>
			</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="#" aria-label="Next">
				<span aria-hidden="true">&raquo;</span>
			</a>
		</li>
	</ul>
</nav>
سایزهای مختلف
کوچک
متوسط
بزرگ
<div class="col-12">
	<h5 class="text-center">Pagination sm</h5>
	<nav class="mb-5" aria-label="navigation">
		<ul class="pagination pagination-sm d-inline-block d-md-flex justify-content-center">
			<li class="page-item disabled">
				<a class="page-link" href="#" tabindex="-1" aria-disabled="true">Prev</a>
			</li>
			<li class="page-item"><a class="page-link" href="#">1</a></li>
			<li class="page-item active"><a class="page-link" href="#">2</a></li>
			<li class="page-item disabled"><a class="page-link" href="#">..</a></li>
			<li class="page-item"><a class="page-link" href="#">15</a></li>
			<li class="page-item">
				<a class="page-link" href="#">Next</a>
			</li>
		</ul>
	</nav>
	<h5 class="text-center">Pagination default</h5>
	<nav class="mb-5" aria-label="navigation">
		<ul class="pagination d-inline-block d-md-flex justify-content-center">
			<li class="page-item disabled">
				<a class="page-link" href="#" tabindex="-1" aria-disabled="true">Prev</a>
			</li>
			<li class="page-item"><a class="page-link" href="#">1</a></li>
			<li class="page-item active"><a class="page-link" href="#">2</a></li>
			<li class="page-item disabled"><a class="page-link" href="#">..</a></li>
			<li class="page-item"><a class="page-link" href="#">15</a></li>
			<li class="page-item">
				<a class="page-link" href="#">Next</a>
			</li>
		</ul>
	</nav>
	<h5 class="text-center">Pagination lg</h5>
	<nav class="mb-5" aria-label="navigation">
		<ul class="pagination pagination-lg d-inline-block d-md-flex justify-content-center">
			<li class="page-item disabled">
				<a class="page-link" href="#" tabindex="-1" aria-disabled="true">Prev</a>
			</li>
			<li class="page-item"><a class="page-link" href="#">1</a></li>
			<li class="page-item active"><a class="page-link" href="#">2</a></li>
			<li class="page-item disabled"><a class="page-link" href="#">..</a></li>
			<li class="page-item"><a class="page-link" href="#">15</a></li>
			<li class="page-item">
				<a class="page-link" href="#">Next</a>
			</li>
		</ul>
	</nav>
</div>
با پس زمینه
<nav class="mt-4" aria-label="navigation">
	<ul class="pagination pagination-primary-soft rounded">
		<li class="page-item"><a class="page-link" href="#" tabindex="-1"><i class="fas fa-angle-double-left"></i></a></li>
		<li class="page-item"><a class="page-link" href="#">1</a></li>
		<li class="page-item active"><a class="page-link" href="#">2</a></li>
		<li class="page-item"><a class="page-link" href="#">..</a></li>
		<li class="page-item"><a class="page-link" href="#">6</a></li>
		<li class="page-item"><a class="page-link" href="#"><i class="fas fa-angle-double-right"></i></a></li>
	</ul>
</nav>
مشاهده بیشتر

<a href="#" class="btn btn-primary-soft mb-0">View more<i class="fas fa-sync ms-2"></i></a>
ترازبندی

تراز اجزای صفحه بندی را با ابزارهای flexbox تغییر دهید.

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