Rumah > Artikel > hujung hadapan web > Bagaimana untuk menyelaraskan penomboran dalam Bootstrap 4?

Bagaimana untuk menyelaraskan penomboran dalam Bootstrap 4?

王林ke hadapan: 2023-09-16 10:05:021322semak imbas

如何在 Bootstrap 4 中对齐分页？

Bootstrap 4 ialah rangka kerja pengaturcaraan bahagian hadapan yang popular untuk mencipta tapak web yang responsif dan mengutamakan mudah alih. Ia menyediakan pelbagai elemen CSS dan JavaScript seperti bar navigasi, borang, butang, modal, dsb. yang boleh digunakan untuk membina tapak web dengan cepat dengan rupa moden dan cantik.

Penjajaran penomboran dalam Bootstrap 4 merujuk kepada cara kedudukan komponen penomboran halaman web. Walau bagaimanapun, penomboran biasanya dipusatkan. Kelas justify-content-* membenarkan penjajaran kiri atau kanan.

kaedah

Terdapat banyak cara yang mungkin untuk menyelaraskan penomboran dalam Bootstrap 4 -

Gunakan kelas .justify-content-*
Guna teks-* kelas

Sekarang mari kita fahami setiap kaedah secara terperinci dengan contoh.

Kaedah 1: Gunakan “.justify-content-* class”

Cara pertama untuk menyelaraskan penomboran dalam Bootstrap 4 ialah "menggunakan kelas .justify-content-*".

Contoh

Di sini kami akan melaksanakan kaedah ini dengan contoh langkah demi langkah -

Langkah 1 - Pastikan fail JavaScript dan CSS Bootstrap 4 disertakan dalam kepala dokumen HTML.

Langkah 2 - Untuk membina komponen penomboran, cipta elemen ff6d136ddc5fdfeffaf53ff6ee95f185 Untuk setiap halaman, tambahkan elemen 3499910bf9dac5ae3c52d5ede7383485 dengan pautan seperti halaman dan elemen 25edfb22a4f469ecb59f1190150159c6

Langkah 3 - Anda mesti menambah salah satu daripada kelas berikut pada elemen ff6d136ddc5fdfeffaf53ff6ee95f185 untuk menjajarkan komponen penomboran ke kiri, tengah atau kanan -

Komponen penomboran menggunakan gaya .justify-content-start untuk penjajaran kiri.
Komponen penomboran dipusatkan apabila menggunakan gaya justify-content-center.
align-pagination-end: Gerakkan elemen penomboran ke kanan

Langkah 4 - Ini ialah contoh rupa kod HTML apabila penomboran dibiarkan sejajar -

<ul class="pagination justify-content-start">
   <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="#">Next</a>
   </li>
</ul>

Langkah 5 - Selepas menambah kelas yang diperlukan, komponen penomboran harus sejajar seperti yang anda jangkakan.

Langkah 6 - Kod akhir kelihatan seperti ini -

<!DOCTYPE html>
<html>
<head>
   <link rel= "stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
   <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
</head>
<body>
   <div class="container">
      <div class="row justify-content-center">
         <nav aria-label="Page navigation example">
            <ul class="pagination justify-content-center">
               <li class="page-item">
                  <a class="page-link" href="#" aria-label="Previous">
                     <span aria-hidden="true">«</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">»</span>
                     <span class="sr-only">Next</span>
                  </a>
               </li>
            </ul>
         </nav>
      </div>
   </div>
</body>
</html>

Kaedah 2: Gunakan teks-* kelas

Untuk menjajarkan komponen penomboran masing-masing ke kiri, tengah atau kanan, gunakan. Teks Kiri, Pusat Teks dan. Teks kelas betul.

Contoh

Sekarang kita akan melihat contoh langkah demi langkah untuk melaksanakan kaedah ini -

Langkah 1 - Buat elemen div bekas dan berikannya kelas justify-content-center. Akibatnya, penomboran akan dipusatkan dalam bekas.

<div class="justify-content-center">

Langkah 2 - Cipta elemen ff6d136ddc5fdfeffaf53ff6ee95f185 -kiri, teks kanan) )

<ul class="pagination text-center">

Langkah 3 - Buat elemen 25edfb22a4f469ecb59f1190150159c6 untuk setiap nombor halaman atau butang sebelumnya dan seterusnya di dalam elemen ff6d136ddc5fdfeffaf53ff6ee95f185 Tentukan kelas "item halaman" untuk setiap elemen li.

<li class="page-item">

Langkah 4 - Buat elemen 3499910bf9dac5ae3c52d5ede7383485 untuk butang atau nombor halaman di dalam setiap elemen 25edfb22a4f469ecb59f1190150159c6 Berikan kelas "pautan halaman" kepada elemen 3499910bf9dac5ae3c52d5ede7383485

<a class="page-link" href="#">1</a>

Langkah 5 - Kod akhir kelihatan seperti ini -




   
   
   
   


   <div class="justify-content-center">
      <ul class="pagination text-center">
         <li class="page-item">
            Previous
         
         <li class="page-item">
            <a class="page-link" href="#">1</a>
         
         <li class="page-item">
            2
         
         <li class="page-item">
            3
         
         <li class="page-item">
            Next

KESIMPULAN

Menggunakan kelas terbina dalam yang disediakan oleh rangka kerja akan menjadikan penjajaran penomboran dalam Bootstrap 4 mudah. Dengan menggunakan proses langkah demi langkah di atas, anda boleh membuat komponen penomboran berpusatkan halaman yang berfungsi sepenuhnya dan visual. Sertakan fail CSS Bootstrap dan JavaScript dalam projek, buat elemen nav dengan atribut label aria dan sediakan elemen senarai tidak tertib yang mengandungi pautan penomboran. Kelas pusat teks akan melakukan ini. Strategi ini memudahkan untuk menukar warna dan orientasi penomboran tanpa perlu mencipta banyak CSS unik.

Atas ialah kandungan terperinci Bagaimana untuk menyelaraskan penomboran dalam Bootstrap 4?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

JavaScript css bootstrap html ul li

Kenyataan：

Artikel ini dikembalikan pada:tutorialspoint.com. Jika ada pelanggaran, sila hubungi admin@php.cn Padam

Artikel sebelumnya：CSS memudar kesan animasiArtikel seterusnya：CSS memudar kesan animasi

Artikel berkaitan

Lihat lagi