Bootstrap - Pagination: Panduan Komprehensif untuk Pemula

Hai teman-teman developer web yang ambisius! Hari ini, kita akan mendalamkan dunia Bootstrap pagination. Sebagai guru komputer yang ramah di lingkungan sekitar Anda, saya sangat gembira untuk mengorbitasi Anda dalam perjalanan ini. Jangan khawatir jika Anda baru saja memulai berkode – kita akan mulai dari dasar dan naik turun. Pada akhir panduan ini, Anda akan menjadi ahli pagination!

Apa Itu Pagination?

Sebelum kita melompat ke Bootstrap, mari kita mengerti apa itu pagination. Bayangkan Anda membaca buku panjang. Daripada memakai semua konten di satu halaman, itu dibagi menjadi bagian yang dapat dikelola – itu adalah pagination di dunia digital. Ini membantu mengatur jumlah besar konten di beberapa halaman, membuatnya mudah bagi pengguna untuk menavigasi.

Bootstrap Pagination: Dasar-Dasar

Bootstrap, alat front-end yang dapat dipercaya, menyediakan cara mudah dan stylish untuk membuat pagination. Mari kita mulai dari dasar.

Pagination Sederhana

Untuk membuat pagination dasar di Bootstrap, kita menggunakan elemen <nav> dan <ul> dengan kelas tertentu. Ini adalah contoh sederhana:

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

mari kitauraikan ini:

• Elemen <nav> membungkus pagination kita untuk tujuan semantik.
• <ul> memiliki kelas pagination, yang menerapkan gaya pagination Bootstrap.
• Setiap <li> mewakili halaman dan memiliki kelas page-item.
• Tag <a> dalam setiap <li> memiliki kelas page-link, yang menggaya bagian yang dapat diklik.

Bekerja dengan Ikon

Ingin membuat pagination Anda terlihat lebih keren? Mari kita tambahkan beberapa ikon! Bootstrap bekerja sangat baik dengan pustaka ikon seperti Font Awesome. Berikut cara Anda dapat menggunakan ikon dalam pagination Anda:

<nav aria-label="Page navigation">
<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>

Dalam contoh ini, kita menggunakan « dan » untuk membuat ikon panah kiri dan kanan. Ini adalah entitas HTML yang muncul sebagai « dan » masing-masing.

Status Pagination: Dinonaktifkan dan Aktif

kadang-kadang, Anda mungkin ingin menyorot halaman saat ini atau menonaktifkan opsi navigasi tertentu. Bootstrap membuat ini mudah dengan kelas active dan disabled.

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

Di sini, tautan "Sebelumnya" dinonaktifkan ( Anda tidak dapat mengkliknya), dan halaman 2 ditandai sebagai aktif (saat ini dipilih).

Ukuran

Seperti Goldilocks, kadang-kadang Anda memerlukan pagination dalam ukuran yang tepat. Bootstrap menawarkan opsi ukuran yang berbeda:

<!-- Pagination Besar -->
<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>

<!-- Pagination Kecil -->
<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>

Tambahkan pagination-lg untuk pagination yang besar atau pagination-sm untuk pagination yang kecil. Itu seperti memilih antara grande atau tall di kedai kopi favorit Anda!

Penjajaran

Secara default, pagination berjejer ke kiri. Tetapi apa bila Anda ingin menengahkan atau mendorongnya ke kanan? Bootstrap punya solusi untuk Anda:

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

<!-- Penjajaran Kanan -->
<nav aria-label="Page navigation">
<ul class="pagination justify-content-end">
<li class="page-item disabled">
<a class="page-link" href="#" tabindex="-1" aria-disabled="true">Sebelumnya</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="#">Selanjutnya</a>
</li>
</ul>
</nav>

Gunakan justify-content-center untuk menengahkan pagination Anda, atau justify-content-end untuk mengalignnya ke kanan.

Penjajaran Menggunakan Utilitas Flex

Untuk kontrol penjajaran pagination Anda yang lebih detil, Anda dapat menggunakan utilitas flex Bootstrap:

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

Di sini, kita membungkus pagination kita dalam <div> dengan kelas d-flex dan justify-content-center. Ini memberikan Anda fleksibilitas lebih besar dalam menempatkan pagination Anda.

Kesimpulan

Dan begitu, teman-teman! Anda telah melakukan perjalanan besar di Bootstrap pagination. Dari struktur dasar hingga penjajaran yang keren, Anda sekarang memiliki alat untuk membuat pagination yang indah dan fungsional untuk proyek web Anda. Ingat, latihan membuat sempurna, jadi jangan khawatir untuk mencoba contoh ini.

Berikut adalah tabel referensi cepat kelas yang kita pelajari:

Kelas	Tujuan
pagination	Membuat struktur pagination dasar
page-item	Menggayakan setiap item di pagination
page-link	Menggayakan bagian yang dapat diklik di setiap item
active	Menyorot halaman saat ini
disabled	Menonaktifkan item pagination
pagination-lg	Membuat pagination yang besar
pagination-sm	Membuat pagination yang kecil
justify-content-center	Menengahkan pagination
justify-content-end	Mengalign pagination ke kanan
d-flex	Membuat container flex

Happy coding, dan semoga halaman Anda selalu terpaginasi secara sempurna!

Credits: Image by storyset