Source

penomboran

Dokumentasi dan contoh untuk menunjukkan penomboran untuk menunjukkan satu siri kandungan berkaitan wujud merentas berbilang halaman.

Gambaran keseluruhan

Kami menggunakan blok besar pautan bersambung untuk penomboran kami, menjadikan pautan sukar dilepaskan dan mudah berskala—semuanya sambil menyediakan kawasan hit yang besar. Penomboran dibina dengan elemen HTML senarai supaya pembaca skrin boleh mengumumkan bilangan pautan yang tersedia. Gunakan elemen pembalut <nav>untuk mengenal pasti ia sebagai bahagian navigasi kepada pembaca skrin dan teknologi bantuan lain.

Di samping itu, memandangkan halaman mungkin mempunyai lebih daripada satu bahagian navigasi sedemikian, adalah dinasihatkan untuk menyediakan deskriptif aria-labeluntuk <nav>menggambarkan tujuannya. Contohnya, jika komponen penomboran digunakan untuk menavigasi antara set hasil carian, label yang sesuai boleh 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>

Bekerja dengan ikon

Ingin menggunakan ikon atau simbol sebagai ganti teks untuk beberapa pautan penomboran? Pastikan anda menyediakan sokongan pembaca skrin yang betul dengan ariaatribut dan .sr-onlyutiliti.

<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>
        <span class="sr-only">Previous</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>
        <span class="sr-only">Next</span>
      </a>
    </li>
  </ul>
</nav>

Keadaan kurang upaya dan aktif

Pautan penomboran boleh disesuaikan untuk keadaan yang berbeza. Gunakan .disableduntuk pautan yang kelihatan tidak boleh diklik dan .activeuntuk menunjukkan halaman semasa.

Walaupun .disabledkelas menggunakan pointer-events: noneuntuk cuba melumpuhkan fungsi pautan <a>s, sifat CSS itu belum lagi diseragamkan dan tidak mengambil kira navigasi papan kekunci. Oleh itu, anda harus sentiasa menambah tabindex="-1"pautan yang dilumpuhkan dan menggunakan JavaScript tersuai untuk melumpuhkan sepenuhnya fungsinya.

<nav aria-label="...">
  <ul class="pagination">
    <li class="page-item disabled">
      <a class="page-link" href="#" tabindex="-1">Previous</a>
    </li>
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item active">
      <a class="page-link" href="#">2 <span class="sr-only">(current)</span></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>

Anda boleh menukar sauh aktif atau dilumpuhkan secara pilihan untuk <span>, atau abaikan sauh dalam kes anak panah sebelumnya/seterusnya, untuk mengalih keluar fungsi klik dan menghalang fokus papan kekunci sambil mengekalkan gaya yang dimaksudkan.

<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">
      <span class="page-link">
        2
        <span class="sr-only">(current)</span>
      </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>

Saiz

Inginkan penomboran yang lebih besar atau lebih kecil? Tambah .pagination-lgatau .pagination-smuntuk saiz tambahan.

<nav aria-label="...">
  <ul class="pagination pagination-lg">
    <li class="page-item disabled">
      <a class="page-link" href="#" tabindex="-1">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>
  </ul>
</nav>

<nav aria-label="...">
  <ul class="pagination pagination-sm">
    <li class="page-item disabled">
      <a class="page-link" href="#" tabindex="-1">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>
  </ul>
</nav>

Penjajaran

Tukar penjajaran komponen penomboran dengan utiliti flexbox .

<nav aria-label="Page navigation example">
  <ul class="pagination justify-content-center">
    <li class="page-item disabled">
      <a class="page-link" href="#" tabindex="-1">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" href="#" tabindex="-1">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>