Негизги мазмунга өтүү Документтердин навигациясына өтүү
Check
in English

Барактоо

Документация жана мисалдар бир нече беттерде тиешелүү мазмундун сериясы бар экенин көрсөтүү үчүн баракчаларды көрсөтүү.

Бул бетте

Обзор

Биз баракчаларыбыз үчүн туташкан шилтемелердин чоң блогун колдонобуз, бул шилтемелерди өткөрүп жиберүүнү кыйындатат жана оңой масштабдалат — мунун баары чоң хит аймактарды камсыз кылат. Беттештирүү тизме 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>

Өчүрүлгөн жана активдүү мамлекеттер

Пагинация шилтемелери ар кандай жагдайлар үчүн ыңгайлаштырылган. Чыкылбай .disabledтурган шилтемелер үчүн жана .activeучурдагы баракты көрсөтүү үчүн колдонуңуз.

.disabledКласс s шилтемесинин функционалдуулугун өчүрүүгө pointer-events: noneаракет кылып жатканда <a>, ал 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" 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>каалаган стилдерди сактап, чыкылдатуу функциясын алып салуу жана клавиатуранын фокусунан сактануу үчүн, жигердүү же өчүрүлгөн анкерлерди алмаштырсаңыз болот, же мурунку/кийинки жебелер болсо, анкерди өткөрүп жиберсеңиз болот.

html 
<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кошумча өлчөмдөр үчүн.

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

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

Өзгөрмөлөр

v5.2.0 кошулган

.paginationBootstrap'тин өнүгүп жаткан CSS өзгөрмөлөр ыкмасынын бир бөлүгү катары, барактоо азыр реалдуу убакытта жакшыртылган ыңгайлаштыруу үчүн жергиликтүү CSS өзгөрмөлөрүн колдонот . 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};

Sass өзгөрмөлөрү

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

Sass аралашмасы

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