Bootstrap 5 telah tiba
Haloo semuanyaa…
Ternyata Bootstrap 5 telah tiba !!! setelah kurang lebih 2 tahun Bootstrap 4 menemani kita, sekarang lah saatnya Bootstrap 5 muncul ke permukaan. Untuk boostrap 5 ini masih versi alpha, itu artinya versi ini masih dalam tahap pengembangan, belum stabil, dan tidak disarankan untuk penggunaan selain development.
Bootstrap 4 merilis versi stable release” sejak tahun 2018, tahukah kalian tahun berapa versi alpha dari bootstrap 4 ? ternyata bootstrap 4 rilis versi alpha sejak tahun 2015. Selama 3 tahun adalah pengembangan dari versi alpha ke stable release. Cukup lama bukan ? daripada kita hanya menunggu bootstrap 5 mencapai stable release, alangkah lebih baiknya kita mencari tahu apa sih yang ditawarkan di versi 5 ini ? dan apa beda nya dengan bootstrap versi 4 ? Mari kita eksplorasi !!
1. Logo
Coba kalian perhatikan, logo dari bootrap 5 seperti terinspirasi dari css, seolah olah logo bootstrap berada di dalam kurung kurawal css dan terlihat lebih fresh daripada bootstrap 4.
2. Website
Perubahan pertama pada website boostrap 5 terdapat pada navbar nya. Pada Bootstrap 4, navbar berada di pojok yang mempersulit jika mengakses website dengan layar besar. Namun pada bootstrap 5, ketika menggunakan layar berukuran besar, navbar berada di tengah. Ini jauh lebih mudah untuk dijangkau.
Selain navbar, perbedaan pada website terletak pada dokumentasi nya. Pada Bootstrap 4, untuk melihat sub menu kita harus membuka menu tersebut barulah dapat melihat sub menu nya, contohnya jika kita ingin membuka sub menu form, maka kita harus membuka menu components terlebih dahulu. Selain itu pada bootstrap 4, sub menu forms dan input group dipisah menjadi 2 sub menu yang sebenarnya menurutku input group itu bagian dari forms.
Nah pada bootstrap 5 ini, website lebih accessible karena submenu dapat dilihat tanpa harus membuka menu, dan juga grouping setiap komponen nya sudah tertata rapih dan lebih enak digunakan.
3. Bye bye JQuery
Saat ini JQuery sudah mulai ditinggalkan dan digantikan oleh Javascript modern, sama dengan bootstrap 5 versi alpha ini, JQuery tidak digunakan. Bisa kalian lihat sendiri pada starter template bootstrap 5 yang tidak lagi memanggil cdn jquery seperti pada bootstrap 4.
Lalu coba kita lihat perbedaan kode jika JQuery digantikan oleh Javascript modern. Kita ambil salah satu contoh behavior penggunaan alerts pada bootstrap
Walaupun terlihat lebih banyak, pasti dengan Javascript modern ini pemrosesan nya akan lebih cepat dibandingkan dengan menggunakan JQuery yang akan memanggil library dari luar terlebih dahulu.
4. Customize CSS (IE not supported)
Pada bootstrap 5 ini terlihat ingin memaksimalkan fitur customize css, oleh karena itu browser Internet Explorer tidak akan di support lagi karena sudah tidak se update browser modern saat ini. Dengan custumize css ini kalian dapat menggunakan sass untuk mendapatkan warna yang sangat bervariasi seperti layaknya materialize (https://materializecss.com/color.html)
5. Bootstrap Icons
Sekarang bootstrap punya icons sendiri lho ! , sebenarnya fitur ini bukan dari bootstrap 5, melainkan fitur baru bootstrap. Jadi mungkin kalian bisa mencoba icon ini pada boostrap 4. Saat ini kurang lebih sudah ada 1000 icons yang bisa kalian gunakan.
6. Form
Perubahan juga terdapat pada beberapa style input seperti radio button dibawah ini
Selain itu pada Bootstrap 5 juga terdapat custom checkbox dengan style switch seperti ini
7. Add 1 Breakpoint Grid System
Pasti kalian sering menggunakan fitur Grid System kan ? dengan fitur ini kita dapat mengatur ukuran elemen yang ditampilkan pada monitor atau juga bisa dibilang kita dapat mengatur website kita menjadi responsive dengan cara dibagi menjadi 12 grid. Pada Bootstrap 5, terdapat 1 breakpoint baru yaitu xxl yang ditujukan bagi pengguna layar besar. Mungkin tambahan breakpoint baru ini hasil dari pengamatan / statistik penggunaan Bootstrap yang menunjukkan peningkatan pada pengguna dengan layar besar.
Bagaimana ? Menarik bukan ? Mungkin masih banyak perbedaan dari Bootstrap versi 4 dan 5, jika kalian tertarik untuk eksplorasi lebih lanjut dan ingin tahu informasi terbaru tentang Bootstrap 5 ini. Dapat mengunjungi blog dari Bootstrap disini. Mungkin itu saja, sampai jumpa pada update selanjutnya. Sekian dan Terimakasih.
