Bootstrap 5.3.0: Membuka Fitur Baru yang Menyenangkan

Bootstrap adalah framework front-end populer yang telah merevolusi pengembangan web. Dengan rilis terbarunya, Bootstrap 5.3.0, framework ini telah memperkenalkan banyak fitur baru yang menarik dan penyempurnaan yang memberdayakan Anda untuk membuat situs web dan aplikasi yang menakjubkan, responsif, dan kaya fitur.

Beralih Mode Gelap

Salah satu yang patut diperhatikan Bootstrap 5.3.0 tambahan adalah saklar untuk mode gelap. Beralih ini memungkinkan pengguna situs web Anda dengan mudah beralih antara mode terang dan gelap, memfasilitasi penggunaan situs web atau aplikasi Anda tanpa hambatan di berbagai kondisi pencahayaan.

Untuk menggunakan fitur ini, cukup tambahkan data-bs-toggle="mode gelap" atribut ke tombol atau elemen tautan apa pun.

Berikut contohnya:

<tomboljenis="tombol"kelas="btn btn-primer"data-bs-beralih="mode gelap">
 Alihkan Mode Gelap
tombol>

Utilitas Skala Font

Bootstrap 5.3.0 memperkenalkan seperangkat utilitas skala font yang memungkinkan Anda menyesuaikan ukuran teks dengan cepat berdasarkan skala yang telah ditentukan, tanpa harus pilih sendiri nilai font tertentu.

Anda dapat menggunakan utilitas ini dalam kombinasi dengan kelas tipografi Bootstrap lainnya untuk mencapai tipografi yang dapat diskalakan dan konsisten di seluruh situs web atau aplikasi Anda.

Berikut adalah beberapa contoh bagaimana Anda dapat menggunakan utilitas skala font:

<Pkelas="fs-1">Ini adalah ukuran font terbesarP>
<Pkelas="fs-2">Ini adalah ukuran font yang sedikit lebih kecilP>
<Pkelas="fs-3">Ini adalah ukuran font sedangP>
<Pkelas="fs-4">Ini adalah ukuran font yang kecilP>
<Pkelas="fs-5">Ini adalah ukuran font terkecilP>

Utilitas Talang

Tambahan baru lainnya di Bootstrap 5.3.0 adalah pengenalan utilitas selokan. Utilitas ini memudahkan untuk menambahkan selokan di antara kolom dalam tata letak kisi Bootstrap Anda tanpa harus menulis CSS khusus.

Berikut adalah contoh bagaimana Anda dapat menggunakan utilitas selokan:

<divkelas="baris gx-3">
<divkelas="col">Kolom 1div>
<divkelas="col">Kolom 2div>
div>

Contoh ini menggunakan gx-3 kelas untuk menambahkan selokan 3 unit (atau 1.5rem) antara dua kolom.

Kontrol Formulir Diperbarui

Itu bentuk kontrol di Bootstrap telah diperbarui dalam versi 5.3.0 untuk meningkatkan konsistensi dan kegunaan. Kontrol formulir baru menyertakan gaya yang diperbarui untuk kotak centang, tombol radio, dan kotak pilih, serta umpan balik validasi yang ditingkatkan.

Kotak centang dan Tombol Radio

Bootstrap 5.3.0 memperkenalkan gaya baru untuk kotak centang dan tombol radio yang membuatnya lebih mudah digunakan dan lebih mudah diakses. Desain baru menampilkan area hit yang lebih besar dan indikator fokus yang ditingkatkan, memudahkan Anda untuk berinteraksi dengan input ini.

Berikut adalah contoh bagaimana Anda dapat menggunakan gaya kotak centang baru:

<divkelas="pemeriksaan formulir">
<memasukkankelas="form-check-input"jenis="kotak centang"nilai=""pengenal="periksa1">
<labelkelas="form-check-label"untuk="periksa1">Kotak centang defaultlabel>
div>

Dan inilah contoh bagaimana Anda dapat menggunakan gaya tombol radio baru:

<divkelas="pemeriksaan formulir">
<memasukkankelas="form-check-input"jenis="radio"nama="contohRadio"pengenal="radio1"nilai="Pilihan 1">
<labelkelas="form-check-label"untuk="radio1"> Pilihan 1 label>
div>

Perhatikan bagaimana markup ini menggunakan the .form-periksa-input kelas untuk menata elemen input itu sendiri, dan .form-periksa-label kelas untuk menata label.

Kotak Pilih

Kotak pilihan juga telah diperbarui di Bootstrap 5.3.0 dengan gaya baru untuk konsistensi dan kegunaan yang lebih baik. Gaya kotak pilih yang baru menampilkan area hit yang lebih besar dan indikator fokus yang ditingkatkan, memudahkan Anda untuk berinteraksi dengan input ini.

Berikut adalah contoh bagaimana Anda dapat menggunakan gaya kotak pilih yang baru:

<Pilihkelas="bentuk-pilih"aria-label="Contoh pilih default">
<pilihanterpilih>Buka menu pilih inipilihan>
<pilihannilai="1">Satupilihan>
<pilihannilai="2">Duapilihan>
<pilihannilai="3">Tigapilihan>
Pilih>

Perhatikan bagaimana Anda dapat menggunakan .bentuk-pilih kelas untuk menata kotak pilih itu sendiri.

Umpan Balik Validasi

Bootstrap 5.3.0 juga memperkenalkan gaya umpan balik validasi baru untuk kontrol formulir. Gaya ini memudahkan untuk memberikan umpan balik visual kepada pengguna situs web Anda saat mereka salah mengisi formulir.

Berikut adalah contoh bagaimana Anda bisa menggunakan gaya validasi baru:

<divkelas="bentuk-grup">
<labeluntuk="contohInputPassword1">Kata sandilabel>
<memasukkanjenis="kata sandi"kelas="kontrol formulir tidak valid"pengenal="contohInputPassword1"placeholder="Kata sandi"diperlukan>
<divkelas="umpan balik tidak valid"> Berikan kata sandi yang valid. div>
div>

Perhatikan bagaimana .tidak valid kelas menunjukkan bahwa field input tidak valid, dan .invalid-umpan balik class menampilkan pesan kepada pengguna.

Dengan gaya baru ini, semakin mudah untuk membuat formulir yang mudah diakses dan konsisten untuk situs web atau aplikasi Anda.

Peningkatan Menyenangkan di Bootstrap 5.3.0

Bootstrap 5.3.0 adalah pembaruan signifikan untuk kerangka kerja CSS populer yang menghadirkan beberapa fitur dan peningkatan baru. Dari sakelar mode gelap ke utilitas skala font dan utilitas selokan, ada banyak alat baru yang dapat Anda gunakan untuk membantu Anda membangun situs web dan aplikasi yang lebih baik.