Perbedaan Bootstrap v3 dan Bootstrap v4

Sudah banyak pengguna yang mempelajari lebih dalam Bootstrap 4, sudah banyak juga kontributor yang mengkaji kekurangan dan kelebihan Bootstrap 4, tapi mungkin masih ada juga beberapa orang yang belum mengetahui perbedaan antara Bootstrap 3 dan Bootstrap 4. Mari kita pelajari bersama di halaman ini.

Sejak peluncurannya mulai dari v4 Alpha 1, v4 Alpha 2, dst. sampai akhirnya di rilis Bootstrap v4, ini menandai bahwa Bootstrap masih terus memperbaiki sistemnya sampai benar-benar selesai untuk versi 4 nya. Dilihat dari pembaruannya yang begitu banyak, tentu banyak class, komponen, dan fitur baru didalamnya termasuk pembaruan style dari versi sebelumnya menjadi lebih compatible.

Meski demikian, banyak para kontributor yang kurang senang dengan pembaruannya terutama ketika pertama kali launching. Makanya sampai Bootstrap 4 rilis, ada beberapa fitur baru yang sempat di keluarkan tapi dicabut kembali (dihapus) karena dianggap kurang sesuai. Sampai akhirnya rilis Bootstrap v4, sepertinya tidak akan ada lagi fitur Bootstrap v4 yang dihapus di update berikutnya.

Pembaruan ke versi 4 ini lebih banyak melakukan pembaruan di bagian tema seperti tampilan warna, penggayaan, fonts, dsb. Jika harus disebutkan, banyak sekali perubahan dan penambahan dari versi sebelumnya ke versi 4. Tapi berikut ini perubahan-perubahan signifikan atau perubahan-perubahan besar seperti yang di kutip oleh quackit dan blog getbootstrap:

Perbedaan Bootstrap 3 & Bootstrap 4

#1 Global

Terdapat beberapa perubahan di Bootstrap secara global, yaitu:

#1.1 Source CSS Files (LESS to SASS)

Bootstrap mengganti sumber file CSS nya, Bootstrap 3 menggunakan LESS, sedangkan Bootstrap 4 menggunakan SASS. Untuk beberapa pengguna di Indonesia mungkin kurang menyenangi ini termasuk saya, karena menurut saya SASS agak sulit dipahami dibanding LESS. Tapi banyak juga yang menggunakan SASS, seperti yang kita tau hampir semua tema menggunakan SASS karena lebih powerful (kaya fitur) dibanding LESS.

#1.2 Ukuran Font (Global)

Bootstrap merubah ukuran font default (global), Bootstrap 3 menggunakan 14px sedangkan Bootstrap 4 menggunakan 16px. Jadi, ketika membuat tulisan (misalnya postingan) akan terlihat lebih besar dari sebelumnya. Perlu sesuaikan lagi px nya jika ingin diperkecil.

#1.3 CSS Unit (Utama)

Unit CSS yang utama atau yang primary sekarang menggunakan rem, sedangkan di Bootstrap 3 menggunakan px. Jika bergelut di dunia web desain tentu pasti memahami apa itu rem, jadi sekarang jika melakukan perubahan font (px) harus dilihat rem pada komponen bersangkutan (pembungkusnya) terlebih dahulu.

#1.4 Font Bawaan

Default font Bootstrap 3 adalah Heltvetica Neue, Helvetica, Arial, dan Sans-Serif, sedangkan di Bootstrap 4 defaul font-nya akan menggunakan font sistem dari pengguna dengan fallback Helvetica Neue, Arial, dan Sans-Serif. Jadi, jika Bootstrap tidak berhasil membaca font sistem pengguna, ia akan menggunakan font fallback tersebut.

#2 Grid Sistem

Ada 2 perubahan untuk sistem grid Bootstrap, yaitu:

#2.1 Membatasi Kolom

Sebelumnya di Bootstrap 3 harus menggunakan class “col-md-offset-3″ (contoh) untuk membatasi kolom, tapi di Bootstrap 4 sudah tidak memerlukan col- lagi, cukup gunakan offset-md-3 saja.

#2.2 Grid Tiers

Di Bootstrap 3 tersedia 4 sistem grid yaitu col-xs, col-sm, col-md, dan col-lg, sedangkan Bootstrap 4 memiliki 5 sistem grid yaitu col-sm, col-md, col-lg, col-xl, dan col-*. Bootstrap menghilangkan col-xs untuk perangkat super kecil (extra small) karena sebetulnya sudah bisa di wakilkan oleh col-sm, atau bisa juga menggunakan col-* sebagai definisi dari “semua perangkat” tanpa harus menentukan ukurannya.

#3 Form

Bootstrap juga melakukan pembaruan / perubahan pada sistem dan tampilan form, yaitu:

#3.1 Ukuran Form Control

Pada Bootstrap 3 hanya perlu memasukkan classinput-lg” (contoh) untuk menentukan ukuran bidang form, tapi di Bootstrap 4 perlu menulisnya lengkap langsung bersama class from control, menjadi “.form-control-sm” (contoh).

#3.2 Custom Form

Bootstrap 3 tidak mendukung custom forms, tapi Bootstrap 4 menyediakan custom forms yang dapat dibuat sesuai keinginan dan dapat menimpa bawaan browser.

#3.3 Validasi

Sebelumnya di Bootstrap 3 bisa menggunakan feedback ikon yang disedikan oleh Bootstrap (glyphicons) misalnya .has-success (contoh untuk validasi berhasil berwarna hijau) dengan ikon “glyphicons glyphicons-envelope” (ikon amplop), tapi di Bootstrap 3 validasi / feedback ini ditiadakan. Perlu custom forms jika ingin menggunakan validasi.

#3.4 Horizontal Forms

Bootstrap 3 dapat menampilkan horizontal form dengan menggunakan .form-horizontal, Bootstrap 4 tidak dapat menampilkan horizontal form (.form-horizontal dihilangkan dari sistem). Jika ingin menampilkan horizontal form di Bootstrap 4, mungkin bisa dibantu dengan menggunakan grid layout untuk form tersebut dan form label.

Catatan:  Bootstrap 3 .control-label diganti menjadi .col-form-label pada Bootstrap 4.

#3.5 Help Text

Bootstrap 3 dapat menampilkan teks bantuan pada form (help text) dengan menggunakan classhelp-block“, class tersebut dihilangkan di Bootstrap 4 (mungkin class “form-text” bisa menjadi penggantinya).

#3.6 Legends

Bootstrap 3 tidak memiliki class untuk menampilkan legend didalam form, Bootstrap 4 menyediakan .col-form-legend untuk menampilkan legend didalam form. Tapi saat ini masih perlu menggunakan class tersebut didalam tag <legend> agar terlihat benar-benar seperti label.

#3.7 Kotak Centang & Tombol Radio

Sebelumnya di Bootstrap 3 untuk menampilkan tombol radio menggunakan .radio / .radio-inline, dan menggunakan .checkbox / .checkbox-inline untuk menggunakan kotak centak. Ada sedikit perubahan di Bootstrap 4, .form-check / .form-check-label untuk radio dan .form-check-input / .form-check-inline untuk kotak centang.

#4 Table

Bootstrap juga melakukan beberapa perubahan untuk table, diantaranya:

#4.1 Table Head

Bootstrap 3 belum mendukung gaya untuk kepala / judul table (table head), tapi di Bootstrap 4 kita bisa menentukan apakah warna table head ini ingin terang (gunakan .thead-light) atau gelap (gunakan .thead-dark).

#4.2 Responsive Table

Membuat table responsive pada Bootstrap 3 perlu menambahkan .table-responsive di pembungkus dari table-nya (<div>), sedangkan di Bootstrap 4 perlu menambahkan .table-responsive nya di langsung di tag <table> nya.

#4.3 Table Cepat

Bootstrap 3 perlu menggunakan .table-condensed, sedangkan di Bootstrap 4 cukup gunakan .table-lg (contoh).

#4.4 Table Warna Gelap

Bootstrap 3 tidak mendukung fitur ini, di Bootstrap 4 bisa menentukan warna table menjadi gelap dengan menggunakan .table-dark.

#4.5 Kontekstual / Prefix

Pada Bootstrap 3 tidak memiliki prefix untuk table, misalnya cukup memasukkan .active / .success / .info / .warning, tapi di Bootstrap 4 perlu menggunakan prefix table- misalnya .table-active / .table-warning.

#5 Objek Media

Ada 1 perubahan pada media object di Bootstrap 4, yaitu:

#5.1 class

Bootstrap 3 dapat menggunakan banyak class untuk media object misalnya .media, .media-body, .media-right, tapi di Bootstrap 4 cukup masukkan .media saja dan letakkan di posisi yang diperlukan (flexbox aktif di Bootsrap 4).

#6 Navigasi

Ada beberapa perubahan juga pada nav dan navbar, yaitu:

#6.1 Nav Inline

Bootstrap 3 tidak mendukung .nav-inline, Bootstrap 4 mendukung .nav-inline untuk menampilkan navigasi secara inline.

#6.2 Fixed Navbar

Sebelumnya di Bootstrap 3 perlu menggunakan .navbar-fixed-top / .navbar-fixed-bottom untuk membuat bar navigasi menetap di atas / di bawah, sedangkan di Bootstrap 4 cukup gunakan .fixed-top / .fixed-bottom saja.

#6.3 Warna / Preset

Bootstrap 3 hanya memiliki preset warna bawaan (terang) dan preset warna gelap (.navbar-dark), di Bootstrap 4 tidak hanya .navbar-dark dan .navbar-light saja tapi juga diperbolehkan hanya warna background navbar saja misalnya .bg-dark.

#6.4 Navbar Form

Bootstrap 3 bisa menampilkan form didalam navbar dengan menggunakan .navbar-form, tapi ini dihilangkan di Bootstrap 4 karena dianggap tidak perlu. Mungkin harus membuat sendiri jika ingin menampilkan form di navbar.

#6.5 Penjajaran Navbar

Bootstrap 3 hanya mendukung .navbar-right dan .navbar-left, Bootstrap 4 memungkinkan pengguna menggunakan utilities flexbox dan utiliti spasi untuk penjajaran navbar.

#7 Tombol & Grup

Tidak hanya itu, Bootstrap juga melakukan pembaruan pada tombol dan tombol grup:

#7.1 Style

Bootstrap 3 tidak mendukung .btn-secondary melainkan hanya .btn-default, .btn-info, dan lainnya, Bootstrap 4 mendukung .btn-secondary, .btn-light, .btn-dark, dan menghilangkan .btn-default.

#7.2 Ukuran Tombol

Sebelumnya di Bootstrap 3 terdapat ukuran .btn-xs, .btn-sm, .btn-lg, tapi di Bootstrap 4 hanya ada .btn-sm, dan .btn-lg saja (.btn-xs dihilangkan).

#7.3 Garis Luar

Bootstrap 3 tidak mendukung warna outline pada tombol, Bootstrap 4 memberikan leluasa untuk berkarya di bagian tombol dengan memberikan warna outline (contoh: .btn-outline-primary / .btn-outline-info).

#7.4 xs Tombol Grup

Bootstrap 3 support button groups ukuran super kecil alias extra small / xs (.btn-group-xs), tapi Bootstrap 4 tidak.

#7.5 Justify Tombol Grup

Bootstrap 4 tidak mendukung .btn-group-justified.

#8 Label, Jumbotron & Badge

Hanya ada 1 perubahan pada masing-masing komponen, yaitu:

#8.1 Badge (baru)

Bootstrap 4 mengganti nama .label (Bootstrap 3) menjadi .badge.

#8.2 Pill Label

Bootstrap 3 mendukung label yang berbentuk pil (.label-pill), tapi Bootstrap 4 tidak, karena label diganti dengan class badge (contoh: .badge-primary / .badge-success).

#8.3 Jumbotron Full Width

Bootstrap 4 memerlukan .jumbotron-fluid untuk jumbotron lebar penuh layar.

#9 Dropdown

Ada beberapa perubahan pada dropdown, diantaranya:

#9.1 Pembatas

Bootstrap 3 perlu memasukkan .divider pada tag <li> untuk menciptakan pembatas dropdown, Bootstrap 4 cukup tambahkan .dropdown-divider pada <div>.

#9.2 Struktur

Bootstrap 3 menggunakan struktur <ul> dan <li>, Bootstrap 4 bisa membuat dropdown dengan <ul> atau <div>. Kemudian tambahkan .dropdown-item pada <a> yang didalam <ul> atau <div> tadi, pastikan <ul> atau <div> menggunakan .dropdown-menu.

#9.3 Disable Menu Item

Bootstrap 3 menggunakan .disabled pada <li> untuk meniadakan sebuah menu, Bootstrap 4 menaruh .disabled nya di dalam <a>.

#9.4 Header Menu

Sebelumnya di Bootstrap 3 menyimpan .dropdown-header di dalam <li>, karena Bootstrap 4 sudah tidak menggunakan <li> lagi maka letakkan .dropdown-header nya didalam <h1> <h2>.

#10 Gambar

Gambar pun dilakukan sedikit pembaruan, diantaranya:

#10.1 Penjajaran Gambar

Bootstrap 3 menggunakan .pull-right, .pull-left, dan .center-block untuk penjajaran gambar, Bootstrap 4 seperti biasa menggunakan utiliti spasi lagi misalnya .mx.auto = .center-block. Bisa juga gunakan varian helper class di induk gambarnya (contoh: .pull-*-right / .pull-*-left). Bisa juga menggunakan .pull-*-none untuk gambar tanpa perataan.

#10.2 Gambar Responsive

Bootstrap 3 menggunakan .img-responsive, Bootstrap 4 menggunakan .img-fluid.

#11 Glyphicons & Non-Responsive

Ada 1 perubahan lumayan besar pada masing-masing komponen ini, yaitu:

#11.1 Glyphicons

Bootstrap 4 memutuskan untuk tidak lagi menggunakan Glyphicons.

#11.2 Penggunaan Non-Responsive

Di Bootstrap 3 bisa menggunakan layout menjadi tidak responsive, tapi Bootstrap 4 tidak mengizinkan itu.

#12 Paginasi

Ada sedikit perubahan juga pada sistem paginasi:

#12.1 Default Pagination

Bootstrap 3 hanya memerlukan .pagination pada <ul> untuk mempresentasikan daftar halaman, tapi di Bootstrap 4 harus juga memasukkan .page-item kedalam masing-masing <li> dan .page-link kedalam masing-masing <a>.

#12.2 Halaman

Bootstrap 3 menggunakan .previous / .next untuk perataan selanjutnya dan sebelumnya, Bootstrap 4 tidak lagi menggunakan itu.

#13 List Groups, Cards, Wells, Panels, & Thumbnails

Masing-masing komponen ini memiliki 1 perubahan yang lumayan juga, yaitu:

#13.1 Linked List Item / Tombol List Item

Bootstrap 3 hanya perlu menyisipkan .list-group-item didalam <a>, sedangkan Bootstrap 4 harus .list-group-item-action didalam <a>.

#13.2 Cards

Komponen baru yang mengganti fungsi Well, Panel, dan Thumbnail.

#13.3 Wells

Bootstrap 4 sudah tidak memerlukan ini, gunakan Cards,

#13.4 Panels

Bootstrap 4 sudah tidak memerlukan ini, gunakan Cards,

#13.5 Thumbnails

Bootstrap 4 sudah tidak memerlukan ini, gunakan Cards,

#14 Collapse, Carousel, Affix, dan Breadcrumbs

Bootstrap juga melakukan perubahan pada masing-masing komponen ini, diantaranya:

#14.1 Menampilkan Konten

Sebelumnya di Bootstrap 3 menggunakan .in, Bootstrap 4 menggantinya dengan .show.

#14.2 Carousel Item

Bootstrap 3 menggunakan .item untuk item carousel, sedangkan Bootstrap 4 menggunakan .carousel-item.

#14.3 Affix

Bootstrap 4 tidak mendukung affix.

#14.4 Class Breadcrumbs

Sebelumnya di Bootstrap 3 menggunakan .breadcrumb pada <ul>, Bootstrap 4 memerlukan tindakan lebih yaitu memasukkan juga .breadcrumb-item didalam semua <li> untuk membuat breadcrumb. Selain itu, breadcrumb juga dapat dibangun diluar daftar (tidak hanya <li>) dengan menyisipkan .breadcrumb-item didalam <a> yang terbungkus didalam .breadcrumb.

Akhir Kata

Itulah perubahan-perubahan yang saya dapatkan sejauh ini, jika ada perubahan baru yang belum saya bagikan diatas silahkan beritahu di kolom komentar. Jika nanti ditemukan ada perubahan baru lagi, akan ditambahkan lagi ke postingan ini. Mungkin memerlukan waktu karena saat ini saya belum terlalu lama menggunakan Bootstrap 4. Jadi, gimana menurut kalian ? Apakah versi 4 lebih melengkapi kebutuhan web development atau tidak ? Tapi, menurut saya tidak ada salahnya kita mencoba v4 untuk pengalaman baru.

Selamat mencoba !

Lihat Post Lainnya:
Komentar
Memuat...