Tsallake zuwa babban abun ciki Tsallake zuwa kewayawa na takardu
Check
in English

Pagination

Takaddun bayanai da misalai don nuna shafi don nuna jerin abubuwan da ke da alaƙa suna wanzuwa a cikin shafuka da yawa.

A wannan shafi

Dubawa

Muna amfani da babban toshe hanyoyin haɗin yanar gizon mu, muna yin hanyoyin haɗin kai da wuya a ɓace kuma a sauƙaƙe - duk yayin samar da manyan wuraren da aka buge. An gina pagination tare da jerin abubuwan HTML don haka masu karanta allo zasu iya sanar da adadin hanyoyin haɗin yanar gizo. Yi amfani da abin rufewa <nav>don gano shi azaman sashin kewayawa don tantance masu karatu da sauran fasahar taimako.

Bugu da kari, kamar yadda yuwuwar shafuka suna da irin wannan sashin kewayawa fiye da ɗaya, yana da kyau a samar da siffata aria-labeldon <nav>nuna manufarsa. Misali, idan an yi amfani da ɓangaren rubutun don kewaya tsakanin saitin sakamakon bincike, lakabin da ya dace zai iya zama 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>

Aiki tare da gumaka

Ana neman amfani da gunki ko alama a wurin rubutu don wasu hanyoyin haɗin yanar gizo? Tabbatar da samar da ingantaccen tallafin mai karanta allo tare da ariahalaye.

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>

Jihohi naƙasassu da aiki

Ana iya daidaita hanyoyin haɗin yanar gizo don yanayi daban-daban. Yi amfani .disabledda hanyoyin haɗin da suka bayyana ba za a iya dannawa ba kuma .activedon nuna shafin na yanzu.

Yayin da .disabledajin ke amfani pointer-events: noneda shi don ƙoƙarin kashe aikin haɗin yanar gizo na <a>s, wannan kadarorin CSS ba a daidaita ba tukuna kuma baya lissafin kewayawa madannai. Don haka, koyaushe yakamata ku ƙara tabindex="-1"akan hanyoyin haɗin yanar gizo na nakasa kuma kuyi amfani da JavaScript na al'ada don musaki cikakken aikin su.

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>

Kuna iya zaɓin musanya anka masu aiki ko nakasassu don <span>, ko barin anka a cikin yanayin kiban da suka gabata/na gaba, don cire ayyukan dannawa da hana mayar da hankali kan madannai yayin riƙe da salon da aka yi niyya.

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>

Girman girma

Zaki fi girma ko ƙarami? Ƙara .pagination-lgko .pagination-smdon ƙarin girma.

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>

Daidaitawa

Canja jeri na abubuwan haɗin shafi tare da kayan aikin flexbox . Misali, tare da .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>

Ko tare da .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

Masu canji

An ƙara a cikin v5.2.0

A matsayin wani ɓangare na tsarin canza canjin CSS na Bootstrap, pagination yanzu yana amfani da masu canjin CSS na gida .paginationdon haɓaka gyare-gyare na ainihi. An saita dabi'u don masu canjin CSS ta hanyar Sass, don haka har yanzu ana tallafawa keɓancewar Sass, ma.

  --#{$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 masu canji

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

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