Bootstrap - Button Groups: A Beginner's Guide

Hai, para pengembang web yang sedang belajar! Hari ini, kita akan melihat dunia yang menakjubkan Bootstrap Button Groups. Sebagai guru komputer yang ramah di lingkungan sekitar Anda, saya sangat gembira untuk mengantar Anda dalam perjalanan ini. Jangan khawatir jika Anda belum pernah menulis baris kode sebelumnya - kita akan mulai dari dasar dan maju perlahan-lahan. Ayo mulai!

Apa Itu Button Groups?

Sebelum kita masuk ke kode, mari kita pahami apa itu button groups. Bayangkan Anda membuat remote kontrol untuk TV. Daripada memiliki semua tombol tersebar di mana-mana, Anda mengelompokkan tombol yang mirip bersama-sama. Itu tepat apa yang kita lakukan dalam desain web dengan button groups!

Button groups di Bootstrap memungkinkan kita untuk mengelompokkan tombol yang berkaitan bersama-sama, menciptakan antarmuka yang lebih terorganisir dan visually appealing. Itu seperti memberikan tombol Anda sebuah tempat nyaman di mana mereka dapat hidup bersama dalam harmoni.

Contoh Dasar

Ayo mulai dengan contoh sederhana untuk merasakan air:

<div class="btn-group" role="group" aria-label="Contoh dasar">
<button type="button" class="btn btn-primary">Kiri</button>
<button type="button" class="btn btn-primary">Tengah</button>
<button type="button" class="btn btn-primary">Kanan</button>
</div>

Kode ini menciptakan grup dari tiga tombol yang diberi label "Kiri", "Tengah", dan "Kanan". Mari kitauraikan ini:

1. Kita mengelilingi tombol kami dalam <div> dengan kelas btn-group.
2. Atribut role="group" membantu pembaca layar tampilan mengerti bahwa tombol ini berkaitan.
3. aria-label menyediakan deskripsi untuk grup tombol.
4. Setiap <button> memiliki kelas btn dan btn-primary, yang memberikan mereka gaya tombol Bootstrap.

Ketika Anda menjalankan kode ini, Anda akan melihat tiga tombol biru bersusun seperti kacang di wadah!

Gaya Campuran

Sekarang, mari kita menambahkan sedikit perbedaan. Dalam dunia nyata, tidak semua tombol diciptakan sama. Beberapa lebih penting daripada yang lain, dan kita dapat menunjukkan ini secara visual:

<div class="btn-group" role="group" aria-label="Gaya campuran">
<button type="button" class="btn btn-danger">Hapus</button>
<button type="button" class="btn btn-warning">Peringatan</button>
<button type="button" class="btn btn-success">Setujui</button>
</div>

Dalam contoh ini, kita menggunakan kelas Bootstrap berbeda:

• btn-danger untuk tombol merah "Hapus"
• btn-warning untuk tombol kuning "Peringatan"
• btn-success untuk tombol hijau "Setujui"

Ini menciptakan grup tombol yang secara visual menarik, setiap tombol diberi kode warna sesuai dengan fungsiannya. Itu seperti lampu lalu lintas untuk halaman web Anda!

Gaya Outlined

kadang-kadang, Anda ingin tombol Anda menjadi sedikit lebih halus. Itu di mana gaya outlined berguna:

<div class="btn-group" role="group" aria-label="Gaya outlined">
<button type="button" class="btn btn-outline-primary">Primari</button>
<button type="button" class="btn btn-outline-secondary">Sekunder</button>
<button type="button" class="btn btn-outline-info">Info</button>
</div>

Dengan menggunakan btn-outline-* instead of btn-*, kita mendapatkan tombol dengan batas dan teks berwarna, tetapi latar belakangnya transparan. Mereka sempurna untuk saat Anda ingin sentuhan yang lebih ringan dalam desain Anda.

Grup Checkbox dan Tombol Radio

Sekarang, mari kita lebih interaktif. Bootstrap memungkinkan kita untuk membuat grup tombol yang berperilaku seperti checkbox atau tombol radio:

<div class="btn-group" role="group" aria-label="Grup toggle checkbox dasar">
<input type="checkbox" class="btn-check" id="btncheck1" autocomplete="off">
<label class="btn btn-outline-primary" for="btncheck1">Checkbox 1</label>

<input type="checkbox" class="btn-check" id="btncheck2" autocomplete="off">
<label class="btn btn-outline-primary" for="btncheck2">Checkbox 2</label>

<input type="checkbox" class="btn-check" id="btncheck3" autocomplete="off">
<label class="btn btn-outline-primary" for="btncheck3">Checkbox 3</label>
</div>

Kode ini menciptakan grup dari tiga tombol yang berperilaku seperti checkbox. Anda dapat mengklik tombol yang banyak, dan mereka akan tetap "ditekan" sampai Anda mengklik mereka lagi. Itu seperti memiliki daftar tugas di dalam grup tombol Anda!

Toolbar Tombol

kadang-kadang, Anda perlu mengelompokkan grup tombol Anda. Itu di mana toolbar tombol masuk:

<div class="btn-toolbar" role="toolbar" aria-label="Toolbar dengan grup tombol">
<div class="btn-group me-2" role="group" aria-label="Grup pertama">
<button type="button" class="btn btn-primary">1</button>
<button type="button" class="btn btn-primary">2</button>
<button type="button" class="btn btn-primary">3</button>
</div>
<div class="btn-group me-2" role="group" aria-label="Grup kedua">
<button type="button" class="btn btn-secondary">4</button>
<button type="button" class="btn btn-secondary">5</button>
</div>
<div class="btn-group" role="group" aria-label="Grup ketiga">
<button type="button" class="btn btn-info">6</button>
</div>
</div>

Ini menciptakan toolbar dengan tiga grup tombol. Itu seperti mengatur alat dapur Anda - garpu di salah satu lemari, sendok di lemari lain, dan alat yang aneh dari bibi Anda di tempat khususnya sendiri.

Ukuran

Seperti orang, tombol datang dalam berbagai ukuran. Bootstrap membuatnya mudah untuk mengubah ukuran grup tombol Anda secara keseluruhan:

<div class="btn-group btn-group-lg" role="group" aria-label="Grup tombol besar">
<button type="button" class="btn btn-outline-dark">Kiri</button>
<button type="button" class="btn btn-outline-dark">Tengah</button>
<button type="button" class="btn btn-outline-dark">Kanan</button>
</div>

Dengan menambahkan btn-group-lg ke kontainer, kita membuat semua tombol menjadi lebih besar. Anda juga dapat menggunakan btn-group-sm untuk tombol yang lebih kecil. Itu seperti Goldilocks - Anda dapat menemukan ukuran yang tepat!

Penyusunan

kadang-kadang, Anda perlu grup tombol dalam grup tombol. Bootstrap menutupi Anda:

<div class="btn-group" role="group" aria-label="Grup tombol dengan dropdown yang disembunyikan">
<button type="button" class="btn btn-primary">1</button>
<button type="button" class="btn btn-primary">2</button>

<div class="btn-group" role="group">
<button id="btnGroupDrop1" type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown
</button>
<ul class="dropdown-menu" aria-labelledby="btnGroupDrop1">
<li><a class="dropdown-item" href="#">Tautan dropdown</a></li>
<li><a class="dropdown-item" href="#">Tautan dropdown</a></li>
</ul>
</div>
</div>

Ini menciptakan grup tombol dengan dua tombol biasa dan tombol dropdown. Itu seperti boneka Rusia bersarang, tapi dengan tombol!

Variasi Vertikal

Akhirnya, mari kita balikkan halangan dengan grup tombol vertikal:

<div class="btn-group-vertical" role="group" aria-label="Grup tombol vertikal">
<button type="button" class="btn btn-primary">Tombol</button>
<button type="button" class="btn btn-primary">Tombol</button>
<button type="button" class="btn btn-primary">Tombol</button>
<button type="button" class="btn btn-primary">Tombol</button>
<button type="button" class="btn btn-primary">Tombol</button>
</div>

Dengan menggunakan btn-group-vertical instead of btn-group, kita menempatkan tombol kami secara vertikal. Itu sempurna untuk saat Anda ingin tombol Anda membentuk menara bukannya baris!

Kesimpulan

Dan itu dia, teman-teman! Kita telah melakukan perjalanan melalui dunia Bootstrap Button Groups, dari contoh dasar hingga variasi vertikal. Ingat, latihan membuat sempurna, jadi jangan khawatir untuk mencoba contoh ini. Campur dan cocok gaya, ukuran, dan tata letak untuk menciptakan grup tombol yang sempurna untuk proyek Anda.

Pengembangan web tentang kreativitas dan pemecahan masalah, dan grup tombol adalah salah satu dari banyak alat yang tersedia bagi Anda. Terus belajar, terus mengoding, dan yang paling penting, bersenang-senang! Sampai jumpa lagi, selamat berkoding!

Credits: Image by storyset