Bootstrap - Kumpulan Butang: Panduan Pemula

Hello, bakat pengembang web! Hari ini, kita akan melihat dunia yang menakjubkan Kumpulan Butang Bootstrap. Sebagai guru komputer tetangga yang ramah, saya sangat gembira untuk memandu Anda dalam perjalanan ini. Jangan khawatir jika Anda belum pernah menulis baris kode sebelumnya - kita akan mulai dari dasar dan naik turun. Ayo mulai!

Apa Itu Kumpulan Butang?

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

Kumpulan butang di Bootstrap memungkinkan kita untuk mengelompokkan butang yang berkaitan bersama-sama, menciptakan antarmuka yang lebih teratur dan visually appealing. Itu seperti memberikan butang Anda sebuah tempat nyaman di mana mereka bisa 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 kelompok tiga butang berlabel "Kiri", "Tengah", dan "Kanan". mari kitauraikan ini:

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

Ketika Anda menjalankan kode ini, Anda akan melihat tiga butang biru bersamarkan seperti kacang di sepotong jagung!

Gaya Campuran

Sekarang, mari kita menambahkan sedikit perisa. Dalam dunia nyata, tidak semua butang diciptakan sama. Beberapa lebih penting daripada yang lain, dan kita bisa 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">Setuju</button>
</div>

Dalam contoh ini, kita menggunakan kelas warna Bootstrap yang berbeda:

• btn-danger untuk butang merah "Hapus"
• btn-warning untuk butang kuning "Peringatan"
• btn-success untuk butang hijau "Setuju"

Ini menciptakan kelompok butang yang visually menarik, setiap butang berwarna menyesuaikan fungsinya. Itu seperti lampu lalu lintas untuk halaman web Anda!

Gaya Outlined

kadang-kadang, Anda ingin butang Anda menjadi 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 butang dengan border dan teks berwarna, tetapi latar belakang yang transparan. Mereka sempurna untuk saat Anda ingin sentuhan yang lebih ringan dalam desain Anda.

Kumpulan Butang Checkbox dan Radio

Sekarang, mari kita menjadi lebih interaktif. Bootstrap memungkinkan kita untuk membuat kumpulan butang yang berperilaku seperti checkbox atau radio button:

<div class="btn-group" role="group" aria-label="Kumpulan butang 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 kelompok tiga butang yang berperilaku seperti checkbox. Anda bisa mengklik butang lebih dari satu, dan mereka akan tetap "ditekan" sampai Anda mengklik mereka lagi. Itu seperti memiliki daftar tugas di dalam kumpulan butang Anda!

Toolbar Butang

kadang-kadang, Anda perlu mengelompokkan kumpulan butang Anda. Itu di mana toolbar butang berguna:

<div class="btn-toolbar" role="toolbar" aria-label="Toolbar dengan kumpulan butang">
<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 kumpulan butang. Itu seperti mengatur peralatan dapur Anda - garpu di satu lemari, sendok di yang lain, dan peralatan yang aneh dari bibi Anda di tempat khususnya sendiri.

Ukuran

Seperti orang, butang datang dalam semua ukuran. Bootstrap membuatnya mudah untuk mengubah ukuran kumpulan butang Anda secara keseluruhan:

<div class="btn-group btn-group-lg" role="group" aria-label="Kumpulan butang 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 butang menjadi lebih besar. Anda juga bisa menggunakan btn-group-sm untuk butang yang lebih kecil. Itu seperti Goldilocks - Anda bisa menemukan ukuran yang tepat!

Penempatan

kadang-kadang, Anda perlu kumpulan butang di dalam kumpulan butang. Bootstrap menutupi Anda:

<div class="btn-group" role="group" aria-label="Kumpulan butang dengan dropdown yang disusun">
<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 kumpulan butang dengan dua butang biasa dan sebuah butang dropdown. Itu seperti boneka Rusia, tapi dengan butang!

Variasi Vertikal

Terakhir tapi bukan yang paling kurang, mari kita memutar hal-hal ke samping dengan kumpulan butang vertikal:

<div class="btn-group-vertical" role="group" aria-label="Kumpulan butang vertikal">
<button type="button" class="btn btn-primary">Butang</button>
<button type="button" class="btn btn-primary">Butang</button>
<button type="button" class="btn btn-primary">Butang</button>
<button type="button" class="btn btn-primary">Butang</button>
<button type="button" class="btn btn-primary">Butang</button>
</div>

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

Kesimpulan

Dan begitu, teman-teman! Kita telah berpergian melalui negeri Kumpulan Butang Bootstrap, 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 kumpulan butang yang sempurna untuk proyek Anda.

Pengembangan web adalah tentang kreativitas dan penyelesaian masalah, dan kumpulan butang adalah salah satu dari banyak alat yang tersedia bagi Anda. Terus belajar, terus mengoding, dan terutama, bersenang-senang! Sampai jumpa lagi, selamat berkoding!

Credits: Image by storyset