האָפּקען צו הויפּט אינהאַלט האָפּקען צו דאָקס נאַוויגאַציע
Check
in English

פּאַginיישאַן

דאַקיומענטיישאַן און ביישפילן פֿאַר ווייַז פון פּאַדזשאַניישאַן צו אָנווייַזן אַ סעריע פון ​​פֿאַרבונדענע אינהאַלט יגזיסץ אויף קייפל בלעטער.

אויף דעם בלאַט

איבערבליק

מיר נוצן אַ גרויס בלאָק פון קאָננעקטעד פֿאַרבינדונגען פֿאַר אונדזער פּאַדזשאַניישאַן, וואָס מאכט פֿאַרבינדונגען שווער צו פאַרפירן און לייכט סקאַלאַבלע - אַלע בשעת מיר צושטעלן גרויס שלאָגן געביטן. פּאַginיישאַן איז געבויט מיט רשימה 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>

פאַרקריפּלט און אַקטיוו שטאַטן

פּאַginיישאַן פֿאַרבינדונגען זענען קוסטאָמיזאַבלע פֿאַר פאַרשידענע צושטאנדן. ניצן .disabledפֿאַר פֿאַרבינדונגען וואָס דערשייַנען ניט-קליקקאַבלע און .activeצו אָנווייַזן דעם קראַנט בלאַט.

בשעת דער .disabledקלאַס ניצט pointer-events: noneצו פּרובירן צו דיסייבאַל די לינק פאַנגקשאַנאַליטי פון <a>s, די CSS פאַרמאָג איז נישט נאָך סטאַנדערדייזד און טוט נישט חשבון פֿאַר קלאַוויאַטור נאַוויגאַציע. ווי אַזאַ, איר זאָל שטענדיק לייגן 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>

אַליינמאַנט

טוישן די אַליינמאַנט פון פּאַדזשאַניישאַן קאַמפּאָונאַנץ מיט פלעקסבאָקס יוטילאַטיז . פֿאַר בייַשפּיל, מיט .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

וועריאַבאַלז

צוגעגעבן אין וו5.2.0

ווי אַ טייל פון Bootstrap ס יוואַלווינג CSS וועריאַבאַלז צוגאַנג, פּאַדזשאַניישאַן איצט ניצט היגע CSS וועריאַבאַלז .paginationפֿאַר ימפּרוווד פאַקטיש-צייט קוסטאָמיזאַטיאָן. וואַלועס פֿאַר די CSS וועריאַבאַלז זענען באַשטימט דורך סאַס, אַזוי סאַס קוסטאָמיזאַטיאָן איז נאָך געשטיצט אויך.

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

סאָס וועריאַבאַלז

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

סאַס מיקסינס

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