Hai teman – teman bertemu lagi dengan saya, Pada kesempatan kali ini kita akan membahas mengenai versi terbaru dari CSS Framework yaitu Bootstrap 5 (pada saat saya menulis artikel ini versi Bootstrap 5 Beta telah rilis). Karena masih dalam versi beta maka kedepannya tentu masih akan ada banyak penambahan fitur-fitur yang berguna tentunya. Okelah langsung saja kita mulai
Section Artikel
Pembaruan Bootstrap 5
Bootstrap 5 dilaunching atau keluarkan pertama kali pada 16 juni 2020, dengan versi Dengan diikuti versi Alpha 1. Versi alpha 2 pada 29 September 2020, Kemudian Versi Bootstrap 5 Alpha 3 pada tanggal 11 November 2020, dan yang terbaru saat artikel ini ditulis adalah versi Bootstrap 5 Beta 1 pada tanggal 7 Desember 2020. Dan Berikut adalah sesuatu yang baru pada Bootstrap 5 :
1. Tidak lagi menggunakan jQuery
Sejak pertama dirilis Bootstrap menggunakan jQuery sebagai dependensinya untuk menawarkan fitur dinamis seperti carousel, dropdown, dan lainnya. Namun, Ketergantungan ini membuat beberapa pengembang kurang menyukainya karena mereka lebih memilih menggunakan kerangka JavaScript modern seperti React dan VueJS. (memang react dan VueJS mantap banget menurut saya)
Ini ibukan berarti kita tidak bisa menggunakan JavaScript di Bootstrap 5 ya, karena di bootstrap 5 akan bergantung pada popper dengan VanillaJS didalamnya. Bagaimana jika project kita masih menggunakan jQuery ? tenang saja teman – teman karena kita masih tetap bisa menggunakan jQuery seperti biasa.
2. Dukungan untuk IE 10 dan IE 11 dihapus
Kita sudah sama tau bahwa Microsoft telah memindahkan banyak sumber daya nya untuk mengembangkan Edge Browser mengakibatkan Internet Explorer kehilangan pasarnya dengan cepat. Selain itu juga Edge Browser telah mengadopsi chromium yang membuatnya dapat menjalankan fitur JavaScript dan CSS yang terbaru setara dengan Chrome dan Firefox. Dengan Microsoft memindahkan upayanya sepenuhnya ke browser Edge, Internet Explorer dengan cepat kehilangan pangsa pasar.
Selain itu, Edge telah mengadopsi mesin chromium open source yang memungkinkannya memiliki semua fitur JavaScript dan CSS modern yang setara dengan versi terbaru Chrome dan Firefox. Mengingat hal ini, tim Bootstrap telah menghentikan dukungan untuk Internet Explorer yang memungkinkannya menyediakan serangkaian fitur modern seperti variabel CSS, JavaScript yang lebih cepat, dan API yang lebih baik.
3. Sistem Grid
Pada bootstrap 5 sistem grid terdapat beberapa peningkatan yaitu dengan menambahkan beberapa kelas baru dikarenakan ukuran layar yang semakin besar . Peningkatan pada Bootstrap 5 ini tetap mempertahankan sistem grid pada versi bootstrap sebelumnya ya. berikut beberapa hal yang ditingkatkan :
- Class baru .
xxl(extra extra large) untuk ukuran layar >= 1400 px. - Class untuk
.gutterdapat diganti dengan menggunakan.g*, dengan ukuran font menggunakan rem - Opsi tata lek form diganti dengan sistem grid yang baru
- class untuk spasi vertikal telah ditambahkan
- atrribute coloum bukan lagi
position:relativesecara default
4. Menambahkan Ikon Bootstrap
Pada bootstrap sebelumnya (versi 4), tidak terdapat ikon SVG didalam bootstrap sehingga kita harus menggunakan library dari pihak ketiga seperti font-awesom dan lainny. Nah pada bootstrap versi terbaru atau 5 ini telah tersedia ikon SVG milik bootstrap sendiri dengan lebih dari 1000+ ikon tersedia. Kita dapat memasukkan ikon – ikon ini seperti biasa dengan inline code atau SVG sprite. Jika teman – teman menggunakan Bootstrap versi 5 silahkan lihat ikon nya di Sini
5. RTL Support
Tidak sperti bootstrp versi sebelumnya, pada Bootstrap 5 menyertakan dukungan terhadap RTL (right-to-left) yang berarti kita dapat membuat website dengan bahasa arab, hebrew, pastho, urdu, dan shindi. Tulisan-tulisan dalam bahasa ini dimulai dari kanan halaman dan berlanjut ke kiri yang menuntut pengaturan gaya spesifik bahasa sendiri untuk mengakomodasi desain teman – teman secara keseluruhan. Sekarang Bootstrap 5 memiliki dukungan RTL di-buildnya, kita akan dapat menggunakan versi RTL dari file CSS Bootstrap untuk membuat situs web RTL.
Bootstrap 4 vs 5
| Hal Dasar | Bootstrap 4 | Bootstrap 5 |
|---|---|---|
| System Grid | Mempunyai 5 tier (xs, sm, md, lg, xl) | Mempunyai 6 tier (xs, sm, md, lg, xl, xxl) |
| jQuery | Mempunyai dukunagn jQuery dan semua fitur yang terkait | Tidak menggunakan jQuery dan sebagai gantinya mengunakan VanillaJS dengan beberapa plugin |
| Internet Explorer | Support IE10 dan IE 11 | Tidak lagi support IE 10 dan IE 11 |
| Form | Radio Button dan checkbox memiliki tampilan yang berbeda disetiap OS dan browser yang dipakai pengguna | Tampilan akan sama meskipun OS atau browser yang dipakai berbeda |
| Utilitas API | Tidak bisa mengubah utilitas di bootstrap 4 | Bootstrap 5 memberi kebebasan mengubah dan membuat utilitas baru |
| Gutter | menggunakan class .gutter dengan ukuran font dalam px (pixel) | mengunakan clas .g* dengan ukuran font dalam rem |
| Class vertikal | kolom dapat diposisikan default relatif | Kolom tidak lagi pada posisi defult relatif |
| Bootstrap ikon | Bootstrap 4 tidak memiliki ikon sendiri sehingga harus menggunakan library milik pihak ke tiga seperti font-awesom | Bootstrap 5 memiliki SVG ikon sendiri |
| Jumbotron | Mendukung adanya Jumbotron | tidak mendukung Jumbotron |
| Card | dapat menggunakan Card deck untuk membuat card dengan width dan height yang seimbang | class card deck tidak dapat digunakan di bootstrap 5 |
| Navbar | Mempunyai properti inline-block dan pada class dropdown-menu-dark akan mempunyai dropdown berwarna putih secara default | Properti inline-block telah dihapus dan akan memperoleh dropdown warna hitam jika menggunakan class dropdown-menu-dark |
