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>
تنسيق التصفح
استخدم الفئة الاستراتيجية لتحديد تنسيق التصفح:
مثال
<!-- Default (left-aligned) --> <ul class="pagination" style="margin:20px 0"> <li class="page-item">...</li> </ul> <!-- Center-aligned --> <ul class="pagination justify-content-center" style="margin:20px 0"> <li class="page-item">...</li> </ul> <!-- Right-aligned --> <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
