صفحه‌بندی
صفحه بندی ساده
اگر وب‌سایتی با تعداد صفحه‌های زیاد دارید، شاید بخواهید نوعی صفحه بندی به هر صفحه اضافه کنید.[۱]
برای ایجاد صفحه بندی ساده، کلاس .pagination را به یک عنصر <ul> اضافه کنید. سپس .page-item را به هر عنصر <li> و کلاس .page-link را به هریک از لینک های <li> داخل آن اضافه کنید:
مثال
1 <ul class="pagination">
2 <li class="page-item"><a class="page-link" href="#">Previous</a></li>
3 <li class="page-item"><a class="page-link" href="#">1</a></li>
4 <li class="page-item"><a class="page-link" href="#">2</a></li>
5 <li class="page-item"><a class="page-link" href="#">3</a></li>
6 <li class="page-item"><a class="page-link" href="#">Next</a></li>
7 </ul>
حالت فعال
کلاس .active برای «برجسته کردن» (به انگلیسی: Highlight) صفحه فعلی استفاده می‌شود:
مثال
1 <ul class="pagination">
2 <li class="page-item"><a class="page-link" href="#">Previous</a></li>
3 <li class="page-item"><a class="page-link" href="#">1</a></li>
4 <li class="page-item active"><a class="page-link" href="#">2</a></li>
5 <li class="page-item"><a class="page-link" href="#">3</a></li>
6 <li class="page-item"><a class="page-link" href="#">Next</a></li>
7 </ul>
حالت غیرفعال
کلاس .disabled برای غیرقابل کلیک کردن لینک‌ها به کار می‌رود:
مثال
1 <ul class="pagination">
2 <li class="page-item disabled"><a class="page-link" href="#">Previous</a></li>
3 <li class="page-item"><a class="page-link" href="#">1</a></li>
4 <li class="page-item"><a class="page-link" href="#">2</a></li>
5 <li class="page-item"><a class="page-link" href="#">3</a></li>
6 <li class="page-item"><a class="page-link" href="#">Next</a></li>
7 </ul>
اندازه صفحه بندی
بلوک‌های صفحه بندی را می‌توان به سایزهای بزرگتر یا کوچکتر تبدیل کرد:
کلاس .pagination-lg را برای بلوک‌های بزرگتر یا .pagination-sm را برای بلوک‌های کوچکتر اضافه کنید:
مثال
1 <ul class="pagination pagination-lg">
2 <li class="page-item"><a class="page-link" href="#">Previous</a></li>
3 <li class="page-item"><a class="page-link" href="#">1</a></li>
4 <li class="page-item"><a class="page-link" href="#">2</a></li>
5 <li class="page-item"><a class="page-link" href="#">3</a></li>
6 <li class="page-item"><a class="page-link" href="#">Next</a></li>
7 </ul>
8
9 <ul class="pagination pagination-sm">
10 <li class="page-item"><a class="page-link" href="#">Previous</a></li>
11 <li class="page-item"><a class="page-link" href="#">1</a></li>
12 <li class="page-item"><a class="page-link" href="#">2</a></li>
13 <li class="page-item"><a class="page-link" href="#">3</a></li>
14 <li class="page-item"><a class="page-link" href="#">Next</a></li>
15 </ul>
محل قرارگیری (به انگلیسی: Alignment) صفحه بندی
می‌توان از کلاس‌های کاربردی (Utility Classes) برای تغییر محل قرار گیری صفحه بندی استفاده کرد:
مثال
1 <!-- Default (left-aligned) -->
2 <ul class="pagination" style="margin:20px 0">
3 <li class="page-item">...</li>
4 </ul>
5
6 <!-- Center-aligned -->
7 <ul class="pagination justify-content-center" style="margin:20px 0">
8 <li class="page-item">...</li>
9 </ul>
10
11 <!-- Right-aligned -->
12 <ul class="pagination justify-content-end" style="margin:20px 0">
13 <li class="page-item">...</li>
14 </ul>
Breadcrumbها
Breadcrumbها شکل دیگری از صفحه بندی هستند:
کلاس‌های .breadcrumb و .breadcrumb-item محل صفحهٔ فعلی را داخل سلسله مراتب راهبردی (به انگلیسی: Navigational Hirarchy) نشان می‌دهند:
مثال
1 <ul class="breadcrumb">
2 <li class="breadcrumb-item"><a href="#">Photos</a></li>
3 <li class="breadcrumb-item"><a href="#">Summer 2017</a></li>
4 <li class="breadcrumb-item"><a href="#">Italy</a></li>
5 <li class="breadcrumb-item active">Rome</li>
6 </ul>
منابع آموزشی