Sahypa

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

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

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

.disabledSynp s- leriň baglanyşyk funksiýasyny öçürmek üçin pointer-events: noneulanýan bolsa - da ,<a> CSS emlägi entek standartlaşdyrylanok we klawiatura nawigasiýasy üçin hasabat bermeýär. Şonuň üçin elmydama tabindex="-1"ýapyk baglanyşyklara goşmaly we işleýşini doly öçürmek üçin ýörite JavaScript ulanmaly.

<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

Paginasiýa komponentleriniň flexbox 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>