Mengenal Fitur Baru Bootstrap 5, Sudah Tidak Pakai JQuery?

Apa aja sih perbedaan dan fitur baru Bootstrap versi 5 dibanding versi sebelumnya, Bootstrap meru...
Penulis
Admin
Kategori
Website
Estimasi
5 menit baca
Dilihat
1.4K
Posting
09 Jul 2022
Mengenal Fitur Baru Bootstrap 5, Sudah Tidak Pakai JQuery? Apa aja sih perbedaan dan fitur baru Bootstrap versi 5 dibanding versi sebelumnya, Bootstrap merupakan framework CSS paling populer didunia yang hampir Mengenal Fitur Baru Bootstrap 5, Sudah Tidak Pakai JQuery?
2022-11-25

Kali ini kita akan membahas Apa aja sih perbedaan dan fitur baru Bootstrap versi 5 dibanding versi sebelumnya, Bootstrap merupakan framework CSS paling populer didunia yang hampir digunakan oleh website-website yang ada pada saat ini. Jika kamu belum mengetahui apa itu Bootstrap dan bagaimana cara mengunakannya dalam aplikasi web kamu, kamu bisa baca artikel kita sebelumnya mengenal bootstrap dan cara menggunakannya.

Kita sendiri sudah mengunakan Bootstrap 5 yang sebelumnya mengunakan versi 4, ternyata banyak perubahan yang saya rasakan dalam update terbaru ini, berikut adalah list perbedaan utama yang perlu kamu ketahui untuk update project lama kamu yang dibuat oleh versi 4, perubahan ini akan membantu kamu dalam membuat keputusan untuk memilih Bootstrap versi 4 atau versi 5. Yuk mari kita simak apa saja perubahan yang ada.

 

 

1. Dukungan untuk Internet Explorer 10 dan 11 dihentikan

Internet Explorer mungkin sudah banyak ditinggalkan oleh pengunanya pada saat ini, mengingat Microsoft telah membuat Microsoft Edge untuk pembaharuan saat ini dalam produk windows terbaru mereka yang lebih compatible dan modern dibandingkan Internet Explorer 10 atau 11, Microsoft Edge mengadopsi Chromium Open Source yang dimana memiliki semua fitur dalam menjalankan Javascript dan CSS modern yang setara dengan Google Chrome dan Mozilla Firefox, dalam hal ini team dari Bootstrap secara resmi menghentikan layanan pada Internet Explorer mulai dari Bootstrap 5.

 

2. Properti khusus

Pada Bootstrap 5, kali ini mendukung properti khusus CSS, pada versi 4 variabel root hanya tersedia pada warna dan font, namun Bootstrap 5 menawarkan beberapa variable CSS dan pemilihan layout/tata letak, contohnya misalnya warna yang sama mungkin kamu akan gunakan dalam layout yang sangat banyak atau memberikan akses yang mudah nilai pada warna tema, breakpoint dan lain-lain.

:root {

--bs-success: #28a745;
--bs-info: #17a2b8;
--bs-warning: #ffc107;
--bs-danger: #dc3545;
--bs-light: #f8f9fa;
--bs-dark: #343a40;
--bs-font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
--bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
--bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));

}

 

3. Kini beralih dari Jekyll ke Hugo

Jekyll merupakan open source static site generator, yang berfungsi untuk membuat website static, sementara Hugo merupakan open source static site generator paling populer dengan flexibilitas dan kecepatan yang cepat pada website kamu, yang dibuat dalam bahasa pemrograman Go yang membuat lebih cepat dan mudah dikonfigurasi.

Terdapat beberapa masalah pada Jekyll yaitu membutuhkan bahasa pemrograman Ruby untuk pemasangannya, Hugo dapat mengatur konten kamu dengan struktur URL apa pun dan Jekyll tidak mungkin untuk melakukannya.

 

4. Tidak lagi mengunakan JQuery sebagai dependensi utama

Sejak pertama kali Bootstrap diluncurkan, Bootstrap mengunakan JQuery sebagai dependensi utama dalam fitur dinamisnya seperti dropdown menu, carousel dll. Ketergantungan ini menjadi tidak disukai oleh Front-End Developer, karena dipaksa mengunakan JQuery dalam mengunakan Bootstrap pada kerangka kerja javascript.

Sementara para pengembang ingin mengunakan javascript modern seperti Vue.js dll. Pada update terbaru Bootstrap 5 ini, team dari Bootstrap menjawab keluhan dari pada developer dengan menghapus ketergantungan pada JQuery ini.

Perlu diperhatikan bahwa ini tidak berarti Bootstrap 5 tidak bergantung pada javascript seperti ingin menambahkan fitur dropdown, animasi slider, popup dll, tidak ada persyaratan jika ingin menambahkan JQuery kedalam aplikasi web kamu, jika aplikasi webmu bergantung pada JQuery, kamu tidak perlu khawatir karena kamu masih bisa menambahkannya.

 

5. Color palette yang diperluas lagi

Terdapat banyak CSS Framework seperti Tailwind CSS yang populer dimana digunakan untuk memperluas palet warna yang banyak digunakan pada front-end developer, pada update Bootstrap 5, kini telah diperluas palette warna yang dapat memasukan banyak warna, ini memungkinkan kamu untuk menyesuaikan tampilan atau nuansa warna pada aplikasi web kamu tanpa harus meninggalkan baris code.

 

6. Form control yang diupdate dari sebelumnya

Kini Bootstrap 5 menambahkan custom design untuk form control kamu, dalam versi 4 form control mengunakan default yang disediakan oleh browser, dalam Bootstrap 5 menawarkan nuansa berbeda dan konsisten pada semua browser karena didesign khusus oleh Bootstrap 5.

Form Control terbaru ini sepenuhnya semantic dan tidak perlu menambahkan markup tambahan pada form atau label

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

<div class="form-check">
  <input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault1">
  <label class="form-check-label" for="flexRadioDefault1">
    Default radio
  </label>
</div>

 

7. Utilities untuk API

Fitur baru ini merupakan fitur hebat dalam Bootstrap 5, Utilities API bergantung dan bekerja pada pada sass, dengan API utilitas yang kamu gunakan untuk mengubah atau memperluas class Bootstrap sesuai dengan yang kamu inginkan sendiri. dalam contoh, kamu bisa menambahkan state option pada variasi pseudo-class seperti :hover dan :focus, contohnya kira-kira seperti ini:

$utilities: (
  "opacity": (
    property: opacity,
    class: opacity,
    state: hover,
    values: (
      0: 0,
      25: .25,
      50: .5,
      75: .75,
      100: 1,
    )
  )
);

 

8. Sistem grid yang lebih ditingkatkan

Bootstrap 5 mempertahankan struktur pada sistem grid yang sebelumnya sudah diperkenalkan pada versi 4, ini berarti ada sedikit upaya yang diperlukan untuk memindahkan struktur grid dari versi lama ke versi yang baru.

Berikut adalah beberapa perubahan pada sistem grid pada Bootstrap 5:

  • Peningkatkan tingkat grid xxl
  • Gutter class dapat ditambahkan menggunakan utilitas .g*
  • Tata letak opsi Form kini telah diganti dengan sistem grid yang baru
  • Class Vertical Spacing kini telah ditambahkan
  • Kolom tidak lagi diposisikan: relatif secara default.

 

9. Update Popper.js Versi 2

Tooltips dan popover dalam Bootstrap didukung oleh popper.js, dalam Bootstrap 5 popper.js versi 2 ini terdapat beberapa perubahan kecil yaitu:

  • Opsi offset dihapus dari tooltips dan popover, sekarang dapat digunakan dengan mengunakan parameter popperConfig
  • Opsi fallbackPlacement menjadi fallbackPlacements

 

10. Lebih mudah dalam penemaan dan customisasi

Bootstrap 5 mengupdate beberapa customisasi baru yang diperluas lagi daripada versi 4 dengan lebih banyak konten dan code. NPM juga disediakan untuk membantu kamu dalam memulai dengan penyesuaian Bootstrap lebih cepat, persiapan dengan parcel juga kini sudah ditambahkan dalam dokumentasinya.

 

11. Dokumentasi yang jauh lebih baik

Dalam versi terbarunya, tampilan pada situs dokumentasi Bootstrap 5 ini telah diubah untuk meningkatkan penguna dalam membaca, navigasi sidebar yang dapat diperluas untuk menghasilkan dokumentasi yang lebih cepat, kamu juga akan menemukan dokumen sass yang membantu kamu untuk menyesuaikan pengalaman pada Bootstrap default.

Beberapa contoh baru yang ditambahkan seperti header, jumbotron, sidebar, hero dll.

 

12. Penambahan library SVG icons

Bootstrap 5 kini menawarkan banyak sekali library icon lebih dari 1000+ yang dengan mudah dapat diintegrasikan kedalam code proyek aplikasi web kamu. Kamu dapat menambahkan icon-icon ini dengan sebaris kode, versi web font juga diperkenalkan dalam perilisan dalam library icon ini. kesan saya mengunakan library icon ini cukup membuat saya lebih mudah jika ingin menambahkan icon baru pada proyek web saya dan ternyata cukup ektensif.

Kamu bisa mengecek list library icon Bootstrap versi 5 disini!

 

Kesimpulan

Beberapa perubahan besar pada update Bootstrap versi 5 dibandingkan pada versi sebelumnya, yang mungkin beberapa fitur yang sudah ada diperbaiki kembali dan penambahan fitur baru untuk mempermudah developer dalam mengerjakan aplikasi website mereka.

Share