Bootstrap Pagination
فهرس الصفحات في BootStrap
ستتعلم في هذا الدرس عمل pagination وهو ترقيم الصفحات او فهرس الصفحات داخل صفحة للتنقل بينهم بشكل اسهل عن طريق bootstrap.
التاريخ
03 ديسمبر 2021
الدروس
34
المستوى
العامة
اللغة
انجليزي
المشاهدات
1180
المواضيع
6
Bootstrap Pagination
فهرس الصفحات في BootStrap
</>
Bootstrap Pagination
فهرس الصفحات في bootstrap
- يستخدم pagination فهرس الصفحات في حالة وجود موقع يحتوي على العديد من الصفحات ونريد تسهيل عملية التنقل بينهم عن طريق وضع ترقيم لها.
- لانشاء pagination نقوم بانشاء عنصر <ul> قائمة ونضيف له كلاس pagination بهذا الشكل <"ul class= "pagination>. ثم نقوم باضافة كلاس page-item داخل كل عنصر <li> في القائمة.
- بداخل كل عنصر <li> نضع عنصر <a> لينك ونضيف له كلاس page-link.
BootStrap Pagination
عمل فهرس للصفحات في bootstrap
<div 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> </div>
</>
BootStrap Pagination Active and Disabled State
الحالة النشطة والغير نشطة لفهرس الصفحات في bootstrap
- كلاس active يضاف الى عنصر <li> ويستخدم لاعطاء خلفية لهذا الزر لتمييزه عن باقي الازرار.
- لتعطيل الازرار الموجودة في pagination نقوم باضافة كلاس disabled داخل عنصر <li>, فيصبح الزر غير قابلا للضغط عليه.
Pagination Active State
استخدام كلاس active لتمييز احد الازرار في pagination.
<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>
Pagination Disabled State
استخدام كلاس disabled لايقاف تشغيل احد الازرار في pagination.
<ul class="pagination"> <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>
</>
BootStrap Pagination Sizing
تغيير حجم فهرس الصفحات في bootstrap
يمكن استخدام كلاس pagination-lg بجانب كلاس pagination داخل عنصر <ul> لتكبير حجم الازرار, ولتصغير الحجم يمكن استخدام كلاس pagination-sm.
Pagination Sizing
تكبير وتصغير حجم pagination.
<ul class="pagination pagination-lg"> <li class="page-item"><a class="page-link" href="#">Previous</a></li> </ul> <!-- Default --> <ul class="pagination pagination"> <li class="page-item"><a class="page-link" href="#">Previous</a></li> </ul> <ul class="pagination pagination-sm"> <li class="page-item"><a class="page-link" href="#">Next</a></li> </ul>
</>
BootStrap Pagination Breadcrumbs
المسار التفصيلي لفهرس الصفحات في bootstrap
- breadcrumbs هو list افقية من links تعرض تفرع الصفحة الحالية من سلسلة صفحات الموقع,ويعتبر احد صور pagination.
- يستخدم breadcrumb بنفس طريقة pagination حيث يتم اضافة كلاس breadcrumb الى عنصر <ul>, ثم نضيف كلاس breadcrumb-element بداخل عناصر <li>.
BootStrap Breadcrumbs
عمل مسار تفصيلي لاحد الصفحات باستخدام كلاس breadcrumb.
<ul class="breadcrumb"> <li class="breadcrumb-item"><a href="#">Photos</a></li> <li class="breadcrumb-item active">Rome</li> </ul>
ملاحظة
عند اضافة كلاس active لاي زر يظهر هذا الزر بلون رمادي لتمييزه عن باقي الازرار ويكون ايضا غير قابل للضغط عليه.