Esasy mazmuna geçiň Docs nawigasiýasyna geçiň
Check
in English

Sahypa

Birnäçe sahypada baglanyşykly mazmuny görkezmek üçin resminamalary we sahypalary görkezmek üçin mysallar.

Bu sahypada

Gysgaça syn

Sahypamyz üçin köp sanly baglanyşyk baglanyşyklaryny ulanýarys, baglanyşyklary ýitirmek kyn we aňsat ulaldylyp bilner - bularyň hemmesi uly hit ýerleri bilen üpjün edýär. Sahypa HTML elementleriniň sanawy bilen gurulýar, şonuň üçin ekran okyjylary elýeterli baglanyşyklaryň sanyny yglan edip bilerler. <nav>Okyjylary we beýleki kömekçi tehnologiýalary ekranlaşdyrmak üçin nawigasiýa bölümi hökmünde kesgitlemek üçin örtük elementini ulanyň .

Mundan başga-da, sahypalarda şeýle nawigasiýa bölüminiň birden köp bolmagy ähtimal, maksadyny görkezmek aria-labelüçin düşündiriş bermek maslahat berilýär. <nav>Mysal üçin, gözleg netijeleriniň toplumynyň arasynda gezmek üçin sahypa sahypasy ulanylsa, degişli bellik bolup biler 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>

Nyşanlar bilen işlemek

Käbir sahypa baglanyşyklary üçin tekstiň ýerine nyşan ýa-da nyşan ulanjak bolýarsyňyzmy? ariaSypatlar bilen dogry ekran okyjy goldawyny üpjün ediň .

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>

Maýyp we işjeň ýagdaýlar

Sahypa baglanyşyklary dürli ýagdaýlar üçin düzülip bilner. .disabledBasylmaýan ýaly görünýän baglanyşyklar we .activehäzirki sahypany görkezmek üçin ulanyň .

Synp s- leriň baglanyşyk funksiýasyny öçürmäge synanyşsa - da , CSS emlägi entek standartlaşdyrylanok we klawiatura nawigasiýasy üçin hasap bermeýär .disabled. Şeýle bolansoň, elmydama ýapyk baglanyşyklara goşmaly we işleýşini doly öçürmek üçin ýörite JavaScript ulanmaly.pointer-events: none<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>

Islege görä işjeň ýa-da ýapyk labyrlary çalşyp bilersiňiz <span>, ýa-da öňki / indiki oklar bolan ýagdaýynda labyry taşlap bilersiňiz, basmak funksiýasyny aýyrmak we göz öňünde tutulan stilleri saklamak bilen klawiaturanyň öňüni almak.

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>

Ölçeg

Ulymy ýa-da kiçi sahypa? Goşmaça ululyklar üçin .pagination-lggoşuň ..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>

Deňleşdirmek

Sahypa komponentleriniň flexbox kömekçi enjamlary bilen deňleşmesini üýtgediň . Mysal üçin, bilen .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>

Witha-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

Üýtgeýjiler

V5.2.0 goşuldy

“Bootstrap” -yň ösýän CSS üýtgeýjileriniň çemeleşmesiniň bir bölegi hökmünde, sahypa häzirki wagtda .paginationgüýçlendirilen hakyky özleşdirmek üçin ýerli CSS üýtgeýjileri ulanýar. CSS üýtgeýjileriniň bahalary Sass arkaly kesgitlenýär, şonuň üçin Sass sazlamasy henizem goldanýar.

  --#{$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 üýtgeýjileri

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

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