الترقيم (Pagination)

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

في هذه الصفحة

نظرة عامة

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

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

html

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

html

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

نشط (Active)

أضف .active للإشارة إلى أن .page-item هو العنصر الذي يتم عرضه حالياً. في حال استخدام <a> في الصفحة الحالية، يجب إضافة aria-current="page" من أجل التقنيات المساعدة.

html

<nav aria-label="...">
  <ul class="pagination">
    <li class="page-item"><a href="#" class="page-link">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="#" aria-current="page">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> للصفحة الحالية، يمكنك حذف سمة aria-current.

<li class="page-item active">
  <span class="page-link">2</span>
</li>

تعطيل (Disabled)

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

html

<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">
      <a class="page-link" href="#" aria-current="page">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>

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

<li class="page-item disabled">
  <span class="page-link">Previous</span>
</li>

التحجيم

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

html

<nav aria-label="...">
  <ul class="pagination pagination-lg">
    <li class="page-item active" >
      <a class="page-link" aria-current="page">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>
  </ul>
</nav>

html

<nav aria-label="...">
  <ul class="pagination pagination-sm">
    <li class="page-item active">
      <a class="page-link" aria-current="page">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>
  </ul>
</nav>

محاذاة (Alignment)

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

html

<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 :

html

<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)

المتغيرات (Variables)

تمت الإضافة في الإصدار v5.2.0

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

scss/_pagination.scss

--#{$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};

متغيرات الـ (Sass)

scss/_variables.scss

$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:                     var(--#{$prefix}body-bg);
$pagination-border-radius:          var(--#{$prefix}border-radius);
$pagination-border-width:           var(--#{$prefix}border-width);
$pagination-margin-start:           calc(-1 * #{$pagination-border-width}); // stylelint-disable-line function-disallowed-list
$pagination-border-color:           var(--#{$prefix}border-color);

$pagination-focus-color:            var(--#{$prefix}link-hover-color);
$pagination-focus-bg:               var(--#{$prefix}secondary-bg);
$pagination-focus-box-shadow:       $focus-ring-box-shadow;
$pagination-focus-outline:          0;

$pagination-hover-color:            var(--#{$prefix}link-hover-color);
$pagination-hover-bg:               var(--#{$prefix}tertiary-bg);
$pagination-hover-border-color:     var(--#{$prefix}border-color); // Todo in v6: remove this?

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

$pagination-disabled-color:         var(--#{$prefix}secondary-color);
$pagination-disabled-bg:            var(--#{$prefix}secondary-bg);
$pagination-disabled-border-color:  var(--#{$prefix}border-color);

$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:       var(--#{$prefix}border-radius-sm);
$pagination-border-radius-lg:       var(--#{$prefix}border-radius-lg);

دمج/مزج الـ (Sass mixins)

scss/mixins/_pagination.scss

@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};
}