Perbincangan ringkas tentang cara menggunakan komponen Penomboran Bootstrap5

Artikel ini akan memperkenalkan kepada anda cara menggunakan komponen Penomboran dalam Bootstrap5. Saya harap ia akan membantu anda!

[Cadangan berkaitan: "tutorial bootstrap"]

1. Contoh mudah

Navigasi halaman biasanya digunakan untuk halaman senarai artikel, senarai muat turun, senarai imej, dll. Kerana terdapat banyak data, adalah mustahil untuk memaparkannya pada satu halaman Secara amnya, navigasi halaman termasuk halaman sebelumnya, halaman seterusnya, digital nombor halaman, dsb. Berikut ialah contoh mudah:

      <nav aria-label="Page navigation">
        <ul class="pagination">
        <li class="page-item"><a class="page-link" href="#">上一页</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="#">下一页</a></li>
        </ul>
        </nav>

2. Gunakan ikon

Gunakan ikon atau simbol untuk menggantikan halaman tertentu Teks pautan.

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

3. Status orang kurang upaya dan aktif

Pautan halaman boleh disesuaikan mengikut situasi yang berbeza. Gunakan dilumpuhkan untuk pautan yang kelihatan tidak boleh diklik dan aktif untuk pautan yang kelihatan pada halaman semasa.

Walaupun kelas .disabled menggunakan acara penuding: tiada satu pun untuk cuba melumpuhkan fungsi pautan a, sifat CSS belum lagi diseragamkan dan navigasi papan kekunci tidak dipertimbangkan. Oleh itu, anda harus sentiasa menambah tabindex="-1" pada 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" aria-disabled="true">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>

4. Saiz

Lebih suka penomboran yang lebih besar atau lebih kecil? Tambah penomboran-lg atau penomboran-sm, atau gunakan saiz lain.

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

5. Penjajaran

Navigasi paging lalai dijajar ke kiri. Anda boleh menggunakan kotak fleksibel Kelas generik yang mengubah penjajaran komponen halaman. Cuma tambah justify-content-center pada kelas ul. Sudah tentu, anda juga boleh menggunakan justify-content-end untuk menjajarkan ke kanan, walaupun ini jarang berlaku.

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

Jika artikel ini membantu anda, sila ingat untuk menyukainya!

Untuk lebih banyak pengetahuan berkaitan pengaturcaraan, sila lawati: Video Pengaturcaraan! !

Atas ialah kandungan terperinci Perbincangan ringkas tentang cara menggunakan komponen Penomboran Bootstrap5. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!