ئاساسلىق مەزمۇنغا ئاتلاڭ Docs يول باشلاش
in English

Pagination

بىر قاتار مۇناسىۋەتلىك مەزمۇنلارنى كۆرسىتىش ئۈچۈن بەتنى كۆرسىتىشنىڭ ھۆججەتلىرى ۋە مىساللىرى كۆپ بەتلەردە مەۋجۇت.

ئومۇمىي چۈشەنچە

بىز ئۇلىنىشىمىز ئۈچۈن ئۇلانغان چوڭ ئۇلىنىشلارنى ئىشلىتىمىز ، ئۇلىنىشلارنى قولدىن بېرىپ قويۇش ۋە ئاسان كېڭەيتىشكە بولىدۇ ، بۇلارنىڭ ھەممىسى چوڭ زەربە بېرىش رايونى بىلەن تەمىنلەيدۇ. بەتكۈچ تىزىملىك ​​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سىنىپ s نىڭ ئۇلىنىش ئىقتىدارىنى چەكلەشكە pointer-events: noneئۇرۇنغان بولسىمۇ<a> ، CSS خاسلىقى تېخى قېلىپلاشمىغان بولۇپ ، كۇنۇپكا تاختىسى يول باشلاشنى ھېسابلىمايدۇ. بۇنداق بولغاندا ، سىز ھەمىشە tabindex="-1"چەكلەنگەن ئۇلىنىشلارنى قوشۇشىڭىز ھەمدە خاس JavaScript ئىشلىتىپ ئۇلارنىڭ ئىقتىدارىنى تولۇق چەكلىشىڭىز كېرەك.

<nav aria-label="...">
  <ul class="pagination">
    <li class="page-item disabled">
      <a class="page-link" href="#" tabindex="-1" aria-disabled="true">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>

Sizing

چوڭراق ياكى كىچىكرەك تەسەۋۋۇرمۇ؟ قوشۇمچە .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>

توغرىلاش

ئەۋرىشىم زاپچاسلىرىنىڭ ئەۋرىشىم زاپچاسلىرى بىلەن توغرىلىنىشىنى ئۆزگەرتىڭ .

<nav aria-label="Page navigation example">
  <ul class="pagination justify-content-center">
    <li class="page-item disabled">
      <a class="page-link" href="#" tabindex="-1" aria-disabled="true">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" href="#" tabindex="-1" aria-disabled="true">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

ئۆزگەرگۈچى مىقدار

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

Mixins

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