تخطي إلى المحتوى الرئيسي انتقل إلى ملاحة المستندات
Check
in English

ترقيم الصفحات

وثائق وأمثلة لإظهار ترقيم الصفحات للإشارة إلى وجود سلسلة من المحتويات ذات الصلة عبر صفحات متعددة.

على هذه الصفحة

ملخص

نحن نستخدم كتلة كبيرة من الروابط المتصلة من أجل ترقيم الصفحات ، مما يجعل الروابط صعبة الفقدان وقابلة للتطوير بسهولة — كل ذلك مع توفير مناطق وصول كبيرة. تم إنشاء ترقيم الصفحات باستخدام قائمة عناصر HTML بحيث يمكن لقارئات الشاشة الإعلان عن عدد الروابط المتاحة. استخدم <nav>عنصر التفاف لتعريفه على أنه قسم تنقل لقارئات الشاشة والتقنيات المساعدة الأخرى.

بالإضافة إلى ذلك ، نظرًا لأنه من المحتمل أن تحتوي الصفحات على أكثر من قسم تنقل واحد ، فمن المستحسن تقديم وصف وصفي aria-labelلـ <nav>ليعكس الغرض منه. على سبيل المثال ، إذا تم استخدام مكون ترقيم الصفحات للتنقل بين مجموعة من نتائج البحث ، فيمكن أن تكون التسمية المناسبة aria-label="Search results pages".

لغة البرمجة 
<nav aria-label="Page navigation example">
  <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>
</nav>

العمل مع الرموز

هل تبحث عن استخدام رمز أو رمز بدلاً من النص لبعض روابط ترقيم الصفحات؟ تأكد من تقديم دعم مناسب لقارئ الشاشة ariaبالسمات.

لغة البرمجة 
<nav aria-label="Page navigation example">
  <ul class="pagination">
    <li class="page-item">
      <a class="page-link" href="#" aria-label="Previous">
        <span aria-hidden="true">&laquo;</span>
      </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="#" aria-label="Next">
        <span aria-hidden="true">&raquo;</span>
      </a>
    </li>
  </ul>
</nav>

الدول المعوقة والنشطة

روابط ترقيم الصفحات قابلة للتخصيص لظروف مختلفة. استخدمه .disabledللارتباطات التي تبدو غير قابلة للنقر ولإشارة .activeإلى الصفحة الحالية.

بينما .disabledيستخدم الفصل لمحاولةpointer-events: none تعطيل وظيفة الارتباط الخاصة بـ s ، فإن خاصية CSS هذه لم يتم توحيدها بعد ولا تمثل التنقل باستخدام لوحة المفاتيح. على هذا النحو ، يجب عليك دائمًا إضافة الروابط المعطلة واستخدام JavaScript مخصص لتعطيل وظائفها بالكامل.<a>tabindex="-1"

لغة البرمجة 
<nav aria-label="...">
  <ul class="pagination">
    <li class="page-item disabled">
      <a class="page-link">Previous</a>
    </li>
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item active" aria-current="page">
      <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>
</nav>

يمكنك اختياريًا تبديل نقاط الارتساء النشطة أو المعطلة <span>، أو حذف المرساة في حالة الأسهم السابقة / التالية ، لإزالة وظيفة النقر ومنع تركيز لوحة المفاتيح مع الاحتفاظ بالأنماط المقصودة.

لغة البرمجة 
<nav aria-label="...">
  <ul class="pagination">
    <li class="page-item disabled">
      <span class="page-link">Previous</span>
    </li>
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item active" aria-current="page">
      <span class="page-link">2</span>
    </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>
</nav>

تحجيم

يتوهم ترقيم الصفحات أكبر أو أصغر؟ أضف .pagination-lgأو .pagination-smلأحجام إضافية.

لغة البرمجة 
<nav aria-label="...">
  <ul class="pagination pagination-lg">
    <li class="page-item active" aria-current="page">
      <span class="page-link">1</span>
    </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>
  </ul>
</nav>
لغة البرمجة 
<nav aria-label="...">
  <ul class="pagination pagination-sm">
    <li class="page-item active" aria-current="page">
      <span class="page-link">1</span>
    </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>
  </ul>
</nav>

محاذاة

قم بتغيير محاذاة مكونات ترقيم الصفحات باستخدام أدوات flexbox المساعدة . على سبيل المثال ، مع .justify-content-center:

لغة البرمجة 
<nav aria-label="Page navigation example">
  <ul class="pagination justify-content-center">
    <li class="page-item disabled">
      <a class="page-link">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>
</nav>

أو مع .justify-content-end:

لغة البرمجة 
<nav aria-label="Page navigation example">
  <ul class="pagination justify-content-end">
    <li class="page-item disabled">
      <a class="page-link">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>
</nav>

CSS

المتغيرات

تمت الإضافة في الإصدار 5.2.0

كجزء من نهج متغيرات CSS المتطور في Bootstrap ، يستخدم ترقيم الصفحات الآن متغيرات CSS المحلية .paginationلتحسين التخصيص في الوقت الفعلي. يتم تعيين قيم متغيرات CSS عبر Sass ، لذلك لا يزال تخصيص Sass مدعومًا أيضًا.

  --#{$prefix}pagination-padding-x: #{$pagination-padding-x};
  --#{$prefix}pagination-padding-y: #{$pagination-padding-y};
  @include rfs($pagination-font-size, --#{$prefix}pagination-font-size);
  --#{$prefix}pagination-color: #{$pagination-color};
  --#{$prefix}pagination-bg: #{$pagination-bg};
  --#{$prefix}pagination-border-width: #{$pagination-border-width};
  --#{$prefix}pagination-border-color: #{$pagination-border-color};
  --#{$prefix}pagination-border-radius: #{$pagination-border-radius};
  --#{$prefix}pagination-hover-color: #{$pagination-hover-color};
  --#{$prefix}pagination-hover-bg: #{$pagination-hover-bg};
  --#{$prefix}pagination-hover-border-color: #{$pagination-hover-border-color};
  --#{$prefix}pagination-focus-color: #{$pagination-focus-color};
  --#{$prefix}pagination-focus-bg: #{$pagination-focus-bg};
  --#{$prefix}pagination-focus-box-shadow: #{$pagination-focus-box-shadow};
  --#{$prefix}pagination-active-color: #{$pagination-active-color};
  --#{$prefix}pagination-active-bg: #{$pagination-active-bg};
  --#{$prefix}pagination-active-border-color: #{$pagination-active-border-color};
  --#{$prefix}pagination-disabled-color: #{$pagination-disabled-color};
  --#{$prefix}pagination-disabled-bg: #{$pagination-disabled-bg};
  --#{$prefix}pagination-disabled-border-color: #{$pagination-disabled-border-color};

متغيرات ساس

$pagination-padding-y:              .375rem;
$pagination-padding-x:              .75rem;
$pagination-padding-y-sm:           .25rem;
$pagination-padding-x-sm:           .5rem;
$pagination-padding-y-lg:           .75rem;
$pagination-padding-x-lg:           1.5rem;

$pagination-font-size:              $font-size-base;

$pagination-color:                  var(--#{$prefix}link-color);
$pagination-bg:                     $white;
$pagination-border-radius:          $border-radius;
$pagination-border-width:           $border-width;
$pagination-margin-start:           ($pagination-border-width * -1);
$pagination-border-color:           $gray-300;

$pagination-focus-color:            var(--#{$prefix}link-hover-color);
$pagination-focus-bg:               $gray-200;
$pagination-focus-box-shadow:       $input-btn-focus-box-shadow;
$pagination-focus-outline:          0;

$pagination-hover-color:            var(--#{$prefix}link-hover-color);
$pagination-hover-bg:               $gray-200;
$pagination-hover-border-color:     $gray-300;

$pagination-active-color:           $component-active-color;
$pagination-active-bg:              $component-active-bg;
$pagination-active-border-color:    $pagination-active-bg;

$pagination-disabled-color:         $gray-600;
$pagination-disabled-bg:            $white;
$pagination-disabled-border-color:  $gray-300;

$pagination-transition:              color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;

$pagination-border-radius-sm:       $border-radius-sm;
$pagination-border-radius-lg:       $border-radius-lg;

ميكس ساس

@mixin pagination-size($padding-y, $padding-x, $font-size, $border-radius) {
  --#{$prefix}pagination-padding-x: #{$padding-x};
  --#{$prefix}pagination-padding-y: #{$padding-y};
  @include rfs($font-size, --#{$prefix}pagination-font-size);
  --#{$prefix}pagination-border-radius: #{$border-radius};
}