انتقل إلى محتوى الدرس
ابدأ رحلتك
الدرس 15
دورة Bootstrap

فهرس الصفحات في BootStrapBootstrap Pagination

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

ابدأ التعلّم استكشف الأمثلة
أقسام الدرس
4
الأمثلة
5
اللغة
العربية
تاريخ النشر
غير محدد
المشاهدات
2,455
محتوى الدرس
في هذا الدرس 4تصفّح المواضيع

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

  • يستخدم pagination فهرس الصفحات في حالة وجود موقع يحتوي على العديد من الصفحات ونريد تسهيل عملية التنقل بينهم عن طريق وضع ترقيم لها.
  • لانشاء pagination نقوم بانشاء عنصر <ul> قائمة ونضيف له كلاس pagination بهذا الشكل <"ul class= "pagination>. ثم نقوم باضافة كلاس page-item داخل كل عنصر <li> في القائمة.
  • بداخل كل عنصر <li> نضع عنصر <a> لينك ونضيف له كلاس page-link.
جرّب بنفسك

BootStrap Pagination

عمل فهرس للصفحات في bootstrap

HTML 
<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.

HTML 
<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.

HTML 
<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.

HTML 
<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.

HTML 
<ul class="breadcrumb">
   <li class="breadcrumb-item"><a href="#">Photos</a></li>
   <li class="breadcrumb-item active">Rome</li>
</ul>
جرّب بنفسك

مشاركة

هل كان هذا الدرس مفيدًا؟

جارٍ تحميل الآراء…