Bootstrap - Tombol Close

Hai, para pengembang web yang bersemangat! Hari ini, kita akan mempelajari salah satu komponen kecil tapi powerfull Bootstrap: tombol close. Mungkin terlihat kecil, tapi percayalah, ini adalah sebuah tool yang kuat dalam peralatan desain web Anda. Jadi, mari kita mulai kerjanya!

Apa Itu Tombol Close?

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

Contoh Dasar

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

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

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

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

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

Menyesuaikan Tombol Close Dasar

Sekarang, mari kita katakan Anda ingin tombol close Anda sedikit lebih besar. Bootstrap telah menyiapkan untuk 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 untuk Anda.

Status Nonaktif

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

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

Dengan menambahkan atribut disabled, kita menciptakan tombol close yang terlihat agak pudar dan tidak merespon klik. Seperti memberi tanda "Jangan Sentuh" pada tombol Anda!

Varian Gelap

Bekerja di website tema gelap? Tak perlu khawatir! Bootstrap memiliki varian gelap tombol close untuk Anda.

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

Dengan menambahkan kelas btn-close-white, kita mendapatkan tombol close yang menonjol cantik melawan latar belakang gelap. Seperti memberi tombol close Anda baju tuxedo 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 close putih yang terlihat nonaktif. Hal ini sempurna untuk antarmuka tema gelap tempat Anda ingin menunjukkan tombol close yang tidak interaktif.

Contoh Praktis: Membuat Alert Dapat Ditutup

Sekarang, mari kita gunakan tombol close kita dalam sebuah konteks dunia nyata. Kita akan membuat alert yang dapat ditutup:

<div class="alert alert-warning alert-dismissible fade show" role="alert">
<strong>Wah!</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 menciptakan alert dengan kelas alert dan alert-warning.
• alert-dismissible dan fade show kelas menjadikan alert dapat ditutup dan menambahkan efek pudar.
• Tombol close 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 close di Bootstrap:

Metode	Deskripsi
$().button('toggle')	Mengaktifkan/menonaktifkan state tekan. Memberikan tombol penampilan bahwa itu sudah diaktifkan.
$().button('dispose')	Menghancurkan tombol elemen.
$().button('reset')	Mengatur ulang state tombol - menukar teks ke teks asli.

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

Kesimpulan

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

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

Semangat coding, dan mayatombol close Anda selalu mengklik mulus!

Credits: Image by storyset