Bootstrap 3 vs Bootstrap 4

bootstrap

bootstrap 3BOOTSTRAP 3 VS BOOTSTRAP 4

Bootstrap – Penggunaan bootstrap sebagai framework front-end banyak digunakan progarmmer millenial. Sudah banyak juga yang mempelajari bootstrap 4 dan mengetahui apa saja kelebihan dan kekurangannya. Namun, banyak juga yang belum mengetahui perbedaan antara bootstrap 3 dan 4.

Dengan di rilisnya Bootstrap 4, banyak fitur baru yang bermunculan. Membuktikan bahwa bootstrap terus memperbaiki dirinya untuk menyediakan banyak fitur baru. Dilihat dari pembaruannya yang begitu banyak, tentu banyak class, komponen, dan fitur baru didalamnya termasuk pembaruan style dari versi sebelumnya menjadi lebih compatible.

Beberapa Perbedaan Bootstrap 3 & Bootstrap 4

1. Global

Terdapat beberapa perubahan di Bootstrap secara global, yaitu:

  • Source CSS Files,

Bootstrap mengganti sumber file CSS nya, Bootstrap 3 menggunakan LESS, sedangkan Bootstrap 4 menggunakan SASS.

  • Font Default

Bootstrap 3 menggunakan 14px sedangkan Bootstrap 4 menggunakan 16px. Jadi, ketika membuat tulisan (misalnya postingan) akan terlihat lebih besar dari sebelumnya.

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

  • 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.

2. Grid Sistem

Ada 2 perubahan untuk sistem grid Bootstrap, yaitu:

  • 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.

  • 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)

3. Form

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

  • Ukuran Form Control

Pada Bootstrap 3 hanya perlu memasukkan class “input-lg”  tapi di Bootstrap 4 perlu menulisnya lengkap langsung bersama class from control, menjadi “.form-control-sm”.

  • Custom Form

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

  • 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.

  • 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.

  • Help Text

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

  • 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.

  • 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:

  • 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).

  • 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.

  • Table Cepat

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

  • Table Warna Gelap

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

  • 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:

  • 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).

5 hal diatas merupakan contoh perbedaan antara Bootstrap 3 dan 4. Masih banyak lagi yang berbeda di bootstrap 4 yang mungkin sudah anda temukan. 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. Ayo coba sekarang, klik disini.

JOGJA ONE SOLUTION – Kami hadir memberi solusi untuk kebutuhan media promosi bisnis atau usaha Anda. Grafik order dan omzet meningkat. Dapatkan website murah, desain menarik, kompleks, dan full maintenance dengan harga yang terjangkau KLIK DISINI. Atau hubungi kami di Telp (0274) 5017127 | WA : 0888 0289 8802


Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *

WhatsApp chat