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 dan penyempurnaan baru yang menarik yang memberdayakan Anda untuk membuat situs web dan aplikasi yang memukau, responsif, dan kaya fitur.

Beralih Mode Gelap

Salah satu yang patut diperhatikan Bootstrap 5.3.0 tambahan adalah sakelar untuk mode gelap. Pengalihan 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.

Baca Juga:

Mau Berkarir di Dunia blockchain? Ini Dia 10 Skill yang Harus Kamu Dalami!

Berikut contohnya:

 <button type="button" class="btn btn-primary" data-bs-toggle="dark-mode">
   Toggle Dark Mode
</button> 

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 sebelumnya, tanpa harus memilih 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:

 <p class="fs-1">This is the largest font size</p>
<p class="fs-2">This is a slightly smaller font size</p>
<p class="fs-3">This is a medium font size</p>
<p class="fs-4">This is a small font size</p>
<p class="fs-5">This is the smallest font size</p> 

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:

 <div class="row gx-3"> 
    <div class="col">Column 1</div> 
    <div class="col">Column 2</div>
</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:

 <div class="form-check">
    <input class="form-check-input" type="checkbox" value="" id="check1"> 
    <label class="form-check-label" for="check1">Default checkbox</label>
</div> 

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

 <div class="form-check"> 
    <input class="form-check-input" type="radio" name="exampleRadios" id="radio1" value="option1"> 
    <label class="form-check-label" for="radio1"> Option 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:

 <select class="form-select" aria-label="Default select example"> 
  <option selected>Open this select menu</option> 
  <option value="1">One</option> 
  <option value="2">Two</option> 
  <option value="3">Three</option>
</select> 

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:

 <div class="form-group"> 
  <label for="exampleInputPassword1">Password</label> 
  <input type="password" class="form-control is-invalid" id="exampleInputPassword1" placeholder="Password" required> 
   <div class="invalid-feedback"> Please provide a valid password. </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.