التمهيد 4 ترقيم الصفحات
ترقيم الصفحات الأساسي
إذا كان لديك موقع ويب به الكثير من الصفحات ، فقد ترغب في إضافة نوع من ترقيم الصفحات إلى كل صفحة.
لإنشاء ترقيم صفحات أساسي ، أضف .paginationالفئة إلى <ul>عنصر. ثم أضف .page-itemإلى كل <li>عنصر .page-linkوصنفًا لكل رابط بداخله <li>:
مثال
<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>
دولة نشطة
يستخدم .activeالفصل "لتمييز" الصفحة الحالية:
مثال
<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
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="#">Next</a></li>
</ul>
دولة معاقين
يستخدم .disabledالفصل للروابط غير القابلة للنقر:
مثال
<ul class="pagination">
<li class="page-item
disabled"><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>
تحجيم ترقيم الصفحات
يمكن أيضًا تغيير حجم كتل ترقيم الصفحات إلى حجم أكبر أو أصغر:
أضف فئة .pagination-lgللكتل الأكبر أو .pagination-smللكتل الأصغر:
مثال
<ul class="pagination
pagination-lg">
<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>
<ul class="pagination pagination-sm">
<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>
محاذاة ترقيم الصفحات
استخدم فئات المنفعة لتغيير محاذاة ترقيم الصفحات:
مثال
<!-- 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>
نصيحة: اقرأ المزيد عن فصول Bootstrap 4 Utility / Helper في BS4 Utilities Chapter .
فتات الخبز
شكل آخر لترقيم الصفحات هو فتات الخبز:
تشير
الفئات والفئات إلى موقع الصفحة الحالية داخل التسلسل الهرمي للتنقل .breadcrumb:.breadcrumb-item
مثال
<ul class="breadcrumb">
<li class="breadcrumb-item"><a
href="#">Photos</a></li>
<li
class="breadcrumb-item"><a href="#">Summer 2017</a></li>
<li
class="breadcrumb-item"><a href="#">Italy</a></li>
<li class="breadcrumb-item
active">Rome</li>
</ul>