Негізгі мазмұнға өту Құжаттар шарлауына өту
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 , бұл CSS сипаты әлі стандартталмаған және пернетақта шарлауын есепке алмайды. Осылайша, сіз әрқашан өшірілген сілтемелерді қосуыңыз керек және олардың функционалдығын толығымен өшіру үшін теңшелетін JavaScript пайдалануыңыз керек.<a>tabindex="-1"

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