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.
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.
Cara pertama untuk menyelaraskan penomboran dalam Bootstrap 4 ialah "menggunakan kelas .justify-content-*".
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
Langkah 3 - Anda mesti menambah salah satu daripada kelas berikut pada elemen
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>
Untuk menjajarkan komponen penomboran masing-masing ke kiri, tengah atau kanan, gunakan. Teks Kiri, Pusat Teks dan. Teks kelas betul.
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
<ul class="pagination text-center">
Langkah 3 - Buat elemen
<li class="page-item">
Langkah 4 - Buat elemen untuk butang atau nombor halaman di dalam setiap elemen
<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
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!
Bagaimana untuk menyemak pautan mati di tapak web anda
Apakah maksud kod sumber terbuka?
tetapan pembolehubah persekitaran java
Apakah enjin carian direktori yang ada?
Harga terkini riak
Bagaimana untuk memasukkan pemacu d dengan cmd
Platform manakah yang lebih baik untuk perdagangan mata wang maya?
Penggunaan fungsi sprintf dalam php
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
