صفحات‌بندی Bootstrap 5
- صفحه قبلی بارگذاردهنده BS5
- صفحه بعدی لیست گروه BS5
ناوبری پایه
اگر وب‌سایت شما صفحات زیادی دارد، ممکن است بخواهید برای هر صفحه نوعی ناوبری اضافه کنید.
برای ایجاد ناوبری ساده، .pagination کلاس به <ul> عنصر اضافه کنید. سپس .page-item به هر <li> عنصر اضافه کنید و .page-link کلاس به <li> برای هر لینک در
مثال
<ul class="pagination"> <li class="page-item"><a class="page-link" href="#">قبلی</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="#">صفحه بعدی</a></li> </ul>
وضعیت فعال
.active کلاس برای "تیرگی" صفحه فعلی استفاده می‌شود:
مثال
<ul class="pagination"> <li class="page-item"><a class="page-link" href="#">قبلی</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="#">3</a></li> <li class="page-item"><a class="page-link" href="#">صفحه بعدی</a></li> </ul>
وضعیت غیرفعال
.disabled کلاس برای لینک‌های غیرقابل کلیک استفاده می‌شود:
مثال
<ul class="pagination"> <li class="page-item disabled"><a class="page-link" href="#">قبلی</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="#">صفحه بعدی</a></li> </ul>
اندازه ناوبری
بلوک‌های ناوبری نیز می‌توانند به اندازه‌های بزرگتر یا کوچکتر تنظیم شوند:
لطفاً برای بلوک‌های بزرگتر کلاس اضافه کنید .pagination-lg یا برای بلوک‌های کوچکتر اضافه کنید .pagination-sm کلاس:
مثال
<ul class="pagination pagination-lg"> <li class="page-item"><a class="page-link" href="#">قبلی</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="#">صفحه بعدی</a></li> </ul> <ul class="pagination pagination-sm"> <li class="page-item"><a class="page-link" href="#">قبلی</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="#">صفحه بعدی</a></li> </ul>
نحوه قرارگیری صفحات گسترده
برای تغییر نحوه قرارگیری صفحات گسترده از کلاس‌های utilitarian استفاده کنید:
مثال
<!-- پیش‌فرض (با چپ‌چینی) --> <ul class="pagination" style="margin:20px 0"> <li class="page-item">...</li> </ul> <!-- با چپ‌چینی --> <ul class="pagination justify-content-center" style="margin:20px 0"> <li class="page-item">...</li> </ul> <!-- با چپ‌چینی --> <ul class="pagination justify-content-end" style="margin:20px 0"> <li class="page-item">...</li> </ul>
نان‌بری (Breadcrumbs)
یک شکل دیگر از صفحات گسترده به صورت نان‌بری است:
.breadcrumb و .breadcrumb-item کلاس تعیین موقعیت فعلی صفحه در ساختار ناوبری:
مثال
<ul class="breadcrumb"> <li class="breadcrumb-item"><a href="#">عکس</a></li> <li class="breadcrumb-item"><a href="#">بهار 2019</a></li> <li class="breadcrumb-item"><a href="#">چین</a></li> <li class="breadcrumb-item active">پکن</li> </ul>
- صفحه قبلی بارگذاردهنده BS5
- صفحه بعدی لیست گروه BS5
