Paġnar

Dokumentazzjoni u eżempji biex juru l-paġnar biex jindikaw serje ta’ kontenut relatat teżisti fuq bosta paġni.

Fuq din il-paġna

Ħarsa ġenerali

Aħna nużaw blokk kbir ta 'links konnessi għall-paġnarazzjoni tagħna, li jagħmlu links diffiċli biex jintilfu u faċilment skalabbli—kollha filwaqt li nipprovdu żoni kbar ta' hit. Il-paġnar huwa mibni b'elementi HTML tal-lista sabiex il-qarrejja tal-iskrin ikunu jistgħu jħabbru n-numru ta 'links disponibbli. Uża element tat-tgeżwir <nav>biex tidentifikaha bħala sezzjoni tan-navigazzjoni għall-qarrejja tal-iskrin u teknoloġiji ta' assistenza oħra.

Barra minn hekk, peress li l-paġni x'aktarx għandhom aktar minn sezzjoni waħda ta' navigazzjoni bħal din, huwa rakkomandabbli li tipprovdi deskrittiva aria-labelbiex <nav>tirrifletti l-iskop tagħha. Pereżempju, jekk il-komponent tal-paġnar jintuża biex jinnaviga bejn sett ta' riżultati ta' tfittxija, tikketta xierqa tista' tkun 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>

Ħidma ma 'ikoni

Qed tfittex li tuża ikona jew simbolu minflok it-test għal xi links tal-paġinazzjoni? Kun żgur li tipprovdi appoġġ xieraq għall-qarrej tal-iskrin bl- ariaattributi.

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>

Stati b'diżabilità u attivi

Ir-rabtiet tal-paġnar huma customizable għal ċirkostanzi differenti. Uża .disabledgħal links li jidhru li ma jistgħux jiġu kklikkjati u .activebiex tindika l-paġna attwali.

Filwaqt li l- .disabledklassi tuża pointer-events: nonebiex tipprova tiddiżattiva l-funzjonalità tal-link ta ' <a>s, dik il-proprjetà CSS għadha mhix standardizzata u ma tagħtix kont għan-navigazzjoni bit-tastiera. Bħala tali, għandek dejjem iżżid tabindex="-1"links b'diżabilità u tuża JavaScript personalizzat biex tiddiżattiva kompletament il-funzjonalità tagħhom.

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>

Tista' b'għażla tbiddel l-ankri attivi jew b'diżabilità għal <span>, jew tħalli barra l-ankra fil-każ tal-vleġeġ ta' qabel/li jmiss, biex tneħħi l-funzjonalità tal-ikklikkja u tevita l-fokus tat-tastiera filwaqt li żżomm l-istili maħsuba.

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>

Daqs

Fancy paginazzjoni akbar jew iżgħar? Żid .pagination-lgjew .pagination-smgħal daqsijiet addizzjonali.

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>

Allinjament

Ibdel l-allinjament tal-komponenti tal-paġnar bl -utilitajiet tal-flexbox . Per eżempju, bi .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>

Jew bi .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

Varjabbli

Miżjud fi v5.2.0

Bħala parti mill-approċċ tal-varjabbli CSS li qed jevolvu ta 'Bootstrap, il-paġnar issa juża varjabbli CSS lokali .paginationgħal customization mtejba f'ħin reali. Il-valuri għall-varjabbli CSS huma stabbiliti permezz ta 'Sass, għalhekk il-personalizzazzjoni ta' Sass għadha appoġġjata wkoll.

  --#{$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 varjabbli

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