Bootstrap - Penyedut
Selamat datang, para pengembang web yang berambisi! Hari ini, kita akan melamun ke dunia yang menarik Bootstrap penyedut. Sebagai guru komputer tetangga yang ramah, saya di sini untuk mengorbit Anda melalui perjalanan ini, langkah demi langkah. Jadi, ambil minuman kesukaan Anda, rasa nyaman, dan mari kita memutar cara kita melalui panduan ini!
Bagaimana cara kerjanya
Penyedut di Bootstrap digunakan untuk menunjukkan keadaan pemuatan di aplikasi web Anda. Mereka seperti lingkaran kecil yang berputar yang Anda lihat saat website sedang memuat konten. Komponen ini membantu meningkatkan pengalaman pengguna dengan menyediakan umpan balik visual bahwa ada sesuatu yang terjadi di belakang layar.
Penyedut Bootstrap dibangun dengan HTML, CSS, dan sedikit sihir JavaScript. Mereka menggunakan CSS khusus untuk menciptakan animasi berputar, memastikan penampilan yang mulus dan konsisten di berbagai browser dan perangkat.
Penyedut batas
mari kita mulai dengan penyedut paling dasar: penyedut batas. Ini adalah gaya penyedut default di Bootstrap.
<div class="spinner-border" role="status">
<span class="visually-hidden">Memuat...</span>
</div>Dalam contoh ini, kita memiliki elemen div dengan dua kelas: spinner-border dan role="status". Kelas spinner-border menerapkan animasi berputar, sedangkan role="status" membantu pembaca layar mencerna bahwa ini adalah penunjuk status.
Dalam div, kita memiliki span dengan kelas visually-hidden. Teks ini tidak terlihat di layar tapi dapat dibaca oleh pembaca layar, meningkatkan aksesibilitas bagi pengguna dengan gangguan visual.
Warna
Seperti kameleon yang mengubah warna, penyedut kita dapat menyesuaikan dengan tema yang berbeda! Bootstrap memungkinkan Anda untuk menyesuaikan warna penyedut Anda menggunakan utilitas warna teks.
<div class="spinner-border text-primary" role="status">
<span class="visually-hidden">Memuat...</span>
</div>
<div class="spinner-border text-secondary" role="status">
<span class="visually-hidden">Memuat...</span>
</div>
<div class="spinner-border text-success" role="status">
<span class="visually-hidden">Memuat...</span>
</div>
<div class="spinner-border text-danger" role="status">
<span class="visually-hidden">Memuat...</span>
</div>
<div class="spinner-border text-warning" role="status">
<span class="visually-hidden">Memuat...</span>
</div>
<div class="spinner-border text-info" role="status">
<span class="visually-hidden">Memuat...</span>
</div>
<div class="spinner-border text-light" role="status">
<span class="visually-hidden">Memuat...</span>
</div>
<div class="spinner-border text-dark" role="status">
<span class="visually-hidden">Memuat...</span>
</div>Setiap penyedut dalam contoh ini memiliki kelas tambahan seperti text-primary, text-secondary, dll. Kelas ini mengubah warna penyedut agar cocok dengan skema warna Bootstrap.
Penyedut tumbuh
Jika penyedut batas bukan pilihan Anda, Bootstrap menawarkan rasa lain: penyedut tumbuh. Penyedut ini tumbuh dan menyusut instead of berputar.
<div class="spinner-grow" role="status">
<span class="visually-hidden">Memuat...</span>
</div>Strukturnya mirip dengan penyedut batas, tetapi kita menggunakan kelas spinner-grow instead of spinner-border.
Penjajaran
Menjajaran penyedut adalah hal yang mudah seperti pai dengan utilitas flexbox Bootstrap. mari kita lihat beberapa contoh:
<div class="d-flex justify-content-center">
<div class="spinner-border" role="status">
<span class="visually-hidden">Memuat...</span>
</div>
</div>
<div class="d-flex align-items-center">
<strong>Memuat...</strong>
<div class="spinner-border ms-auto" role="status" aria-hidden="true"></div>
</div>Dalam contoh pertama, kita menggunakan justify-content-center untuk mengatur penyedut di tengah secara horizontal. Dalam yang kedua, kita menjajaran penyedut secara vertikal dengan teks menggunakan align-items-center.
Margin
Butuh ruang di sekitar penyedut Anda? Utilitas margin Bootstrap datang untuk menyelamatkan!
<div class="spinner-border m-5" role="status">
<span class="visually-hidden">Memuat...</span>
</div>Kelas m-5 menambahkan margin ukuran 5 (yang biasanya adalah 3rem) di sekitar penyedut.
Penempatan
Penyedut dapat ditempatkan dalam berbagai elemen lain. mari kita lihat bagaimana Anda dapat menempatkan penyedut dalam tombol:
<button class="btn btn-primary" type="button" disabled>
<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
<span class="visually-hidden">Memuat...</span>
</button>
<button class="btn btn-primary" type="button" disabled>
<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
Memuat...
</button>Dalam contoh ini, kita menempatkan penyedut dalam tombol dan menggunakan spinner-border-sm untuk membuatnya lebih kecil.
Flex
Utilitas Flexbox dapat membantu Anda menciptakan tata letak yang lebih kompleks dengan penyedut:
<div class="d-flex justify-content-center">
<div class="spinner-border" role="status">
<span class="visually-hidden">Memuat...</span>
</div>
</div>Ini mengatur penyedut di tengah secara horizontal dalam wadahnya.
Float
Untuk saat Anda memerlukan penyedut untuk terapung, utilitas float Bootstrap ada untuk membantu:
<div class="clearfix">
<div class="spinner-border float-end" role="status">
<span class="visually-hidden">Memuat...</span>
</div>
</div>Kelas float-end membuat penyedut terapung ke kanan wadahnya.
Penjajaran teks
Utilitas penjajaran teks juga dapat digunakan dengan penyedut:
<div class="text-center">
<div class="spinner-border" role="status">
<span class="visually-hidden">Memuat...</span>
</div>
</div>Ini mengatur penyedut di tengah dalam wadah menggunakan penjajaran teks.
Ukuran
kadang-kadang, ukuran benar-benar penting! Anda dapat menyesuaikan ukuran penyedut Anda menggunakan kelas ukuran Bootstrap:
<div class="spinner-border spinner-border-sm" role="status">
<span class="visually-hidden">Memuat...</span>
</div>
<div class="spinner-grow spinner-grow-sm" role="status">
<span class="visually-hidden">Memuat...</span>
</div>
<div class="spinner-border" style="width: 3rem; height: 3rem;" role="status">
<span class="visually-hidden">Memuat...</span>
</div>
<div class="spinner-grow" style="width: 3rem; height: 3rem;" role="status">
<span class="visually-hidden">Memuat...</span>
</div>Gunakan spinner-border-sm atau spinner-grow-sm untuk penyedut yang lebih kecil. Untuk ukuran khusus, Anda dapat menggunakan gaya inline untuk menetapkan dimensi tertentu.
Tombol
Terakhir tetapi bukan yang paling penting, mari kita lihat bagaimana Anda dapat menggunakan penyedut dalam tombol:
<button class="btn btn-primary" type="button" disabled>
<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
<span class="visually-hidden">Memuat...</span>
</button>
<button class="btn btn-primary" type="button" disabled>
<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
Memuat...
</button>
<button class="btn btn-primary" type="button" disabled>
<span class="spinner-grow spinner-grow-sm" role="status" aria-hidden="true"></span>
<span class="visually-hidden">Memuat...</span>
</button>
<button class="btn btn-primary" type="button" disabled>
<span class="spinner-grow spinner-grow-sm" role="status" aria-hidden="true"></span>
Memuat...
</button>Contoh ini menunjukkan bagaimana untuk menggabungkan penyedut border dan tumbuh ke dalam tombol, dengan dan tanpa teks pendamping.
Dan itu adalah, teman-teman! Anda sekarang ahli penyedut Bootstrap. Ingat, latihan membuat sempurna, jadi jangan takut untuk mencoba komponen ini dalam proyek Anda. Selamat coding, dan semoga halaman web Anda selalu berputar dengan gaya!
Credits: Image by storyset