Bootstrap - Button Tutup

Hai, para pengembang web yang sedang mencari ilmu! Hari ini, kita akan mempelajari salah satu komponen kecil tapi berguna di Bootstrap: tombol tutup. Mungkin terlihat kecil, tapi percayalah, ini adalah alat yang kuat dalam kotak alat desain web Anda. Jadi, mari kita kerjakan ini!

Apa Itu Tombol Tutup?

Sebelum kita masuk ke kode, mari kita pahami apa itu tombol tutup. Anda telah melihat tanda 'x' kecil ini di seluruh web, kan? Biasanya di sudut pop-up, peringatan, atau modal, menunggu Anda mengkliknya dan membuat elemen menghilang. Itu tombol tutup kita!

Contoh Dasar

Mari kita mulai dengan versi paling dasar dari tombol tutup Bootstrap.

<button type="button" class="btn-close" aria-label="Close"></button>

Baris kode sederhana ini memberikan Anda tombol tutup yang terdesain sempurna. Mari kitauraikan ini:

• <button>: Ini adalah elemen tombol HTML kita.
• type="button": Ini menghindari pengiriman tombol ke formulir jika ada di dalamnya.
• class="btn-close": Kelas Bootstrap ini memberikan tombol gaya tombol tutup.
• aria-label="Close": Ini untuk aksesibilitas, memberitahu pembaca layar bahwa tombol ini menutup sesuatu.

Ketika Anda menggunakan kode ini, Anda akan melihat tombol 'x' yang rapi muncul di halaman Anda. Keren, kan?

Menyesuaikan Tombol Tutup Dasar

Sekarang, mari kita katakan Anda ingin tombol tutup Anda menjadi sedikit lebih besar. Bootstrap menangani Anda:

<button type="button" class="btn-close" aria-label="Close" style="font-size: 2rem;"></button>

Di sini, kita menambahkan gaya inline untuk meningkatkan ukuran font. Bebas untuk mengatur nilai 2rem ke ukuran yang cocok dengan kebutuhan Anda.

Status Nonaktif

kadang-kadang, Anda mungkin ingin tombol tutup yang dapat dilihat oleh pengguna tetapi tidak dapat diklik. Itu di mana status nonaktif berguna.

<button type="button" class="btn-close" disabled aria-label="Close"></button>

Dengan menambahkan atribut disabled, kita membuat tombol tutup yang terlihat sedikit pucat dan tidak merespon klik. Itu seperti memberikan tanda "Jangan Sentuh" di tombol Anda!

Varian Gelap

Bekerja di situs web dengan tema gelap? Tak perlu khawatir! Bootstrap memiliki varian gelap tombol tutup untuk Anda.

<button type="button" class="btn-close btn-close-white" aria-label="Close"></button>

Dengan menambahkan kelas btn-close-white, kita mendapatkan tombol tutup yang menonjol secara cantik di latar belakang gelap. Itu seperti memberikan tombol tutup Anda smoking putih untuk acara black-tie!

Menggabungkan Varian Gelap dengan Status Nonaktif

Anda bahkan dapat menggabungkan varian gelap dengan status nonaktif:

<button type="button" class="btn-close btn-close-white" disabled aria-label="Close"></button>

Ini memberikan Anda tombol tutup putih yang terlihat nonaktif. Itu sempurna untuk antarmuka gelap tempat Anda ingin menunjukkan tombol tutup noninteraktif.

Contoh Praktis: Membuat Alert Dapat Ditutup

Sekarang, mari kita gunakan tombol tutup dalam situasi dunia nyata. Kita akan membuat alert yang dapat ditutup:

<div class="alert alert-warning alert-dismissible fade show" role="alert">
<strong>Wah, guacamole!</strong> Anda seharusnya memeriksa beberapa field di bawah ini.
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>

Dalam contoh ini:

• Kita membuat alert dengan kelas alert dan alert-warning.
• alert-dismissible dan fade show kelas menjadikan alert dapat ditutup dan menambahkan efek pudar.
• Tombol tutup kita berada di dalam alert, dengan atribut data-bs-dismiss="alert" yang memberitahu Bootstrap untuk menutup alert induk saat diklik.

Tabel Metode

Berikut adalah tabel metode yang paling sering digunakan untuk bekerja dengan tombol tutup di Bootstrap:

Metode	Deskripsi
$().button('toggle')	Toggles push state. Memberikan tombol penampilan yang telah diaktifkan.
$().button('dispose')	Hancurkan tombol elemen.
$().button('reset')	Reset tombol state - menukar teks ke teks asli.

Ingat, untuk menggunakan metode ini, Anda perlu menyertakan file JavaScript Bootstrap di proyek Anda.

Kesimpulan

Dan itu dia, teman-teman! Anda sekarang dilengkapi pengetahuan untuk menambahkan dan menyesuaikan tombol tutup di proyek Bootstrap Anda. Dari tombol dasar ke varian gelap, dari status aktif ke nonaktif, Anda siap untuk menutup hal-hal dengan gaya!

Ingat, kunci untuk menjadi ahli pengembang web adalah latihan. Jadi, cobalah tombol tutup ini dalam berbagai situasi. Mungkin buat modal dengan tombol tutup, atau kartu yang dapat ditutup. Kesempatan tak terbatas!

Selamat coding, dan may your close buttons always click smoothly!

Credits: Image by storyset