أحدث البرامج التعليمية وتطوير الشبكة
 

Bootstrap Pagination

❮ السابق التالي الفصل ❯

ترقيم الصفحات الأساسية

إذا كان لديك موقع على شبكة الإنترنت مع الكثير من الصفحات، قد ترغب في إضافة نوع من ترقيم الصفحات على كل صفحة.

وترقيم الصفحات الأساسي في التمهيد يبدو مثل هذا:

لإنشاء ترقيم الصفحات الأساسية، إضافة .pagination الطبقة إلى <ul> العنصر:

مثال

<ul class="pagination">
  <li><a href="#">1</a></li>
  <li><a href="#">2</a></li>
  <li><a href="#">3</a></li>
  <li><a href="#">4</a></li>
  <li><a href="#">5</a></li>
</ul>
انها محاولة لنفسك »

الدولة النشطة

تظهر حالة نشطة ما هي الصفحة الحالية:

إضافة الطبقة .active للسماح للمستخدم معرفة الصفحة التي هو / هي على:

مثال

<ul class="pagination">
  <li><a href="#">1</a></li>
  <li class="active"><a href="#">2</a></li>
  <li><a href="#">3</a></li>
  <li><a href="#">4</a></li>
  <li><a href="#">5</a></li>
</ul>
انها محاولة لنفسك »

Disabled State

رابط معطل لا يمكن النقر:

إضافة الطبقة .disabled إذا تم تعطيل وصلة لسبب:

مثال

<ul class="pagination">
  <li><a href="#">1</a></li>
  <li><a href="#">2</a></li>
  <li><a href="#">3</a></li>
  <li class="disabled"><a href="#">4</a></li>
  <li><a href="#">5</a></li>
</ul>
انها محاولة لنفسك »

Pagination Sizing

ويمكن أيضا أن يكون الحجم كتل ترقيم الصفحات إلى حجم أكبر أو أصغر حجما:

إضافة الطبقة .pagination-lg للكتل الكبيرة أو .pagination-sm للكتل أصغر:

مثال

<ul class="pagination pagination-lg">
  <li><a href="#">1</a></li>
  <li><a href="#">2</a></li>
  <li><a href="#">3</a></li>
  <li><a href="#">4</a></li>
  <li><a href="#">5</a></li>
</ul>

<ul class="pagination pagination-sm">
  <li><a href="#">1</a></li>
  <li><a href="#">2</a></li>
  <li><a href="#">3</a></li>
  <li><a href="#">4</a></li>
  <li><a href="#">5</a></li>
</ul>
انها محاولة لنفسك »

فتات الخبز

شكل آخر للترقيم الصفحات، هو فتات الخبز:

  1. Home
  2. Private
  3. Pictures
  4. Vacation

و .breadcrumb الدرجة يشير موقع الصفحة الحالية ضمن التسلسل الهرمي ملاحي:

مثال

<ul class="breadcrumb">
  <li><a href="#">Home</a></li>
  <li><a href="#">Private</a></li>
  <li><a href="#">Pictures</a></li>
  <li class="active">Vacation</li>
</ul>
انها محاولة لنفسك »

اختبر نفسك مع تمارين!

التمرين 1 » التمرين 2» التمرين 3 » التمرين 4» التمرين 5 »

استكمال Bootstrap الإنتقال المرجعي

للإشارة كاملة من جميع الطبقات والملاحة، والذهاب إلى موقعنا على كامل Bootstrap الإنتقال المرجعي .


❮ السابق التالي الفصل ❯