Sahypa

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

Bu sahypada

Gysgaça syn

Sahypamyz üçin baglanyşyk baglanyşyklarynyň uly bölegini 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".

<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ň .

<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. Şonuň üçin elmydama ýapyk baglanyşyklara goşmaly we işleýşini doly öçürmek üçin ýörite JavaScript ulanmaly.pointer-events: none<a>tabindex="-1"

<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 klawiatura fokusynyň öňüni almak.

<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

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

Deňleşdirmek

Sahypa komponentleriniň flexbox kömekçi enjamlary bilen deňleşmesini üýtgediň .

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

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

Sass

Üýtgeýjiler

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