in English

Sahifalar

Bir nechta sahifalarda bir qator tegishli kontent mavjudligini ko'rsatish uchun sahifalarni ko'rsatish uchun hujjatlar va misollar.

Ushbu sahifada

Umumiy koʻrinish

Biz sahifalash uchun bog'langan havolalarning katta blokidan foydalanamiz, bu havolalarni o'tkazib yuborishni qiyinlashtiradi va osonlik bilan kengaytiriladi - barchasi katta zarba joylarini ta'minlaydi. Sahifalar roʻyxat HTML elementlari bilan tuzilgan, shuning uchun ekran oʻquvchilari mavjud havolalar sonini eʼlon qilishlari mumkin. Oʻrash <nav>elementidan foydalanib, uni ekran oʻquvchilari va boshqa yordamchi texnologiyalar uchun navigatsiya boʻlimi sifatida aniqlang.

Bundan tashqari, sahifalarda bir nechta bunday navigatsiya bo'limlari bo'lishi mumkinligi sababli, uning maqsadini aks ettirish aria-labeluchun tavsifni taqdim etish tavsiya etiladi. <nav>Misol uchun, agar sahifalash komponenti qidiruv natijalari to'plami o'rtasida harakat qilish uchun ishlatilsa, tegishli yorliq bo'lishi mumkin 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>

Belgilar bilan ishlash

Ba'zi sahifalash havolalari uchun matn o'rniga belgi yoki belgidan foydalanmoqchimisiz? ariaAtributlar bilan to'g'ri ekranni o'qishni qo'llab-quvvatlaganingizga ishonch hosil qiling .

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

O'chirilgan va faol holatlar

Sahifalar havolalari turli holatlar uchun sozlanishi mumkin. .disabledBosish mumkin bo'lmagan havolalar uchun .activeva joriy sahifani ko'rsatish uchun foydalaning .

.disabledSinf s ning havola funksiyasini o'chirishga harakatpointer-events: none qilsa -da , bu CSS xususiyati hali standartlashtirilmagan va klaviatura navigatsiyasini hisobga olmaydi. Shunday qilib, siz doimo o'chirilgan havolalarni qo'shishingiz va ularning funksiyalarini to'liq o'chirish uchun maxsus JavaScript-dan foydalanishingiz kerak.<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>

Siz ixtiyoriy ravishda faol yoki o‘chirilgan langarlarni ga almashtirishingiz yoki <span>oldingi/keyingi o‘qlar holatida langarni tashlab qo‘yishingiz mumkin, bosish funksiyasini olib tashlash va mo‘ljallangan uslublarni saqlab qolgan holda klaviatura fokuslanishini oldini olish.

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

Hajmi

Kattaroq yoki kichikroq sahifalashni xohlaysizmi? Qo'shish .pagination-lgyoki .pagination-smqo'shimcha o'lchamlar uchun.

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

Hizalama

Flexbox yordam dasturlari bilan sahifalash komponentlarining hizalanishini o'zgartiring .

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

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

Sass

O'zgaruvchilar

$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-color:                  $link-color;
$pagination-bg:                     $white;
$pagination-border-width:           $border-width;
$pagination-border-radius:          $border-radius;
$pagination-margin-start:           -$pagination-border-width;
$pagination-border-color:           $gray-300;

$pagination-focus-color:            $link-hover-color;
$pagination-focus-bg:               $gray-200;
$pagination-focus-box-shadow:       $input-btn-focus-box-shadow;
$pagination-focus-outline:          0;

$pagination-hover-color:            $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;

Aralashmalar

@mixin pagination-size($padding-y, $padding-x, $font-size, $border-radius) {
  .page-link {
    padding: $padding-y $padding-x;
    @include font-size($font-size);
  }

  .page-item {
    @if $pagination-margin-start == (-$pagination-border-width) {
      &:first-child {
        .page-link {
          @include border-start-radius($border-radius);
        }
      }

      &:last-child {
        .page-link {
          @include border-end-radius($border-radius);
        }
      }
    } @else {
      //Add border-radius to all pageLinks in case they have left margin
      .page-link {
        @include border-radius($border-radius);
      }
    }
  }
}