Bootstrap

Bootstrap Pagination
فهرس الصفحات في BootStrap

ستتعلم في هذا الدرس عمل pagination وهو ترقيم الصفحات او فهرس الصفحات داخل صفحة للتنقل بينهم بشكل اسهل عن طريق bootstrap.

التاريخ

03 ديسمبر 2021

الدروس

34

المستوى

العامة

اللغة

انجليزي

المشاهدات

1180

المواضيع

6
الشروحات chevron_left Bootstrap Pagination chevron_left Bootstrap

Bootstrap Pagination
فهرس الصفحات في BootStrap

مراجعة تقنية
Mostafa Hefny

Mostafa Hefny

CEO & Founder CloseTag

</> 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 لاي زر يظهر هذا الزر بلون رمادي لتمييزه عن باقي الازرار ويكون ايضا غير قابل للضغط عليه.
معلومات تهمك
  • لا تنس تقييم الدروس لكي نُحدّث المُحتوى باستمرار حتى ينال إعجابك.
  • لا تنس مشاركة الموقع مع أصدقائك حتى تعمّ الفائدة وتكون سببًا في نفعهم.
مشاركة
0
0
0
0
عدد المشاركات
هل هذه المعلومات نالت إعجابك ؟
0
0
عدد التقييمات