Bootstrap 3 vs Bootstrap 4 – Gambaran Umum

Bootstrap telah menjadi kerangka kerja front-end sumber terbuka paling tepercaya untuk mengembangkan situs web yang responsif dan mengutamakan seluler. Bootstrap adalah framework yang terkenal, Kenapa??? Karena yang dibutuhkan hanyalah pengetahuan dasar tentang HTML dan CSS dan kita dapat membangun situs web yang menarik dan fungsional dengan menggunakan kelas bootstrap yang telah ditentukan sebelumnya yang menangani daya tanggap pada perangkat yang berbeda.

Bootstrap 3 dirilis pada tahun 2013 dan versi stabil terakhir Bootstrap 3.3.7 dirilis pada Juli 2016. Pada Oktober 2014, Twitter mengumumkan bahwa Bootstrap 4 sedang dalam pengembangan. Bootstrap 4 versi alpha pertama dirilis pada Agustus 2015. Dan sekarang pada Agustus 2017, Bootstrap versi 4.0.0-beta dirilis. Anda dapat melihat tutorial Bootstrap mendalam ini jika Anda ingin mulai belajar dari 0 .

Pusat perhatian dari posting ini akan menjadi perbedaan utama, penambahan, dan pengurangan dari versi 3 ke versi 4.0.0-beta yang baru dirilis.

Apa yang Berbeda Dalam Versi 4:

Sekarang kita dapat mulai berbicara tentang fitur-fitur baru Bootstrap 4. Seiring berkembangnya teknologi dengan cepat, bahasa yang lebih baru dan lebih cerdas dikembangkan untuk membuat pembuatan situs web yang bersih dan cepat menjadi lebih sederhana. Seperti halnya dengan rilis Bootstrap terbaru. Tim mengatakan bahwa "versi 4 ini adalah penulisan ulang utama dari hampir seluruh proyek". Kami akan merangkum beberapa perubahan utama dari perbaikan ini.

Perubahan Global:

• Beralih dari Less ke Sass untuk file CSS sumber.
• Beralih dari px rem sebagai unit CSS utama Bootstrap, meskipun piksel masih digunakan untuk kueri media dan perilaku kisi karena area pandang perangkat tidak terpengaruh oleh ukuran jenis.
• Ukuran font global meningkat dari 14px menjadi 16px .
• Menambahkan tingkat kisi baru untuk ~480px dan di bawahnya.

Sistem jaringan:

Langkah utama Bootstrap 4 menuju peningkatan adalah gerakannya menuju mengadopsi Flexbox. Sebagai bagian dari flexbox, termasuk dukungan untuk kelas penyelarasan vertikal dan horizontal. Bootstrap 4 menempatkan banyak penekanan pada kustomisasi. Sistem grid tier barunya memungkinkan Bootstrap 4 menikmati kehadiran hingga 5 tingkatan grid ( contoh 5 tingkatan: .col-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xl-4 ). Seseorang dapat dengan mudah mengatakan bahwa Bootstrap 4 menyediakan akses ke sistem grid yang ditingkatkan.

• Menambahkan tier grid sm baru di bawah 768px untuk kontrol yang lebih terperinci. Sekarang ada xs, sm, md, lg, dan xl. Ini juga berarti setiap tingkat telah dinaikkan satu tingkat (jadi .col-md-6 di v3 sekarang menjadi .col-lg-6 di v4).
• Mengubah titik henti sementara kueri media sistem kisi dan lebar wadah untuk memperhitungkan tingkat kisi baru dan memastikan kolom dapat dibagi secara merata dengan 12 pada lebar maksimumnya.
• Breakpoint grid dan lebar container sekarang ditangani melalui peta Sass ($grid-breakpoints dan $container-max-widths) alih-alih beberapa variabel terpisah. Ini menggantikan variabel @screen-* sepenuhnya dan memungkinkan Anda untuk sepenuhnya menyesuaikan tingkat kisi.
• Kueri media juga telah berubah. Alih-alih mengulangi deklarasi kueri media dengan nilai yang sama setiap kali, sekarang ada @include media-breakpoint-up/down/only. Sekarang, daripada menulis @media (min-width: @screen-sm-min) { … }, Anda dapat menulis @include media-breakpoint-up(sm) { … }.

Dukungan Peramban:

• Menjatuhkan dukungan IE8 dan iOS 6. v4 sekarang hanya IE9+ dan iOS 7+. Untuk situs yang membutuhkan salah satu dari itu, gunakan v3.

Kelas utilitas:

Di Bootstrap 4, kelas utilitas baru telah dimasukkan tanpa menghambat fungsionalitas yang ada, apa pun. Penambahan penting tersebut adalah seperti kelas perataan teks responsif, float responsif, dan embedding responsif. Selain menawarkan banyak pintasan, ini, masing-masing, memungkinkan untuk mengubah perataan teks, mengambangkan elemen, dan penskalaan rasio aspek media yang disematkan. (contoh: .hidden-md-up menyembunyikan elemen pada viewport sedang, besar, dan ekstra besar. Sekarang, alih-alih .hidden-md-up , gunakan .d-md-none ).

Gambar-gambar:

• Berganti nama .img-responsive menjadi .img-fluid .
• Berganti nama .img-rounded menjadi .rounded
• Berganti nama .img-circle menjadi .rounded-circle

Tabel:

• Tabel responsif tidak lagi memerlukan elemen pembungkus. Dengan kata sederhana, di Bootstrap 3, kelas .table-responsive harus ditambahkan ke <div> induk. Tapi di Bootstrap 4 , kelas .table-responsive akan ditambahkan ke elemen <table> .
• Menambahkan opsi .table-inverse baru.
• Menambahkan pengubah header tabel: .thead-default dan. .thead-inverse
• Mengganti nama kelas kontekstual menjadi .table- -prefix. Oleh karena itu, .active .success , .warning , .danger dan .table-info menjadi .table-active , .table-success , .table-warning , .table-danger dan .table-info.

Navigasi:

Di Bootstrap 4, komponen Navigasi telah disederhanakan untuk sebagian besar. Seseorang diperlukan untuk membuat daftar elemen baru yang menggunakan kelas dasar nav terbaru. Ada beberapa tambahan terbaru seperti kelas nav-link, kelas nav-item, dan gaya bilah navigasi juga.

• Tulis ulang komponen dengan flexbox.
• .navbar-default sekarang .navbar-light , meskipun .navbar-dark tetap sama. Namun, kelas-kelas ini tidak lagi mengatur background-color s; sebaliknya mereka pada dasarnya hanya mempengaruhi color .
• .navbar-toggle sekarang menjadi .navbar-toggler dan memiliki gaya dan markup dalam yang berbeda (tidak lebih dari tiga <span> ).
• Menjatuhkan kelas .navbar-form seluruhnya. Itu tidak lagi diperlukan; sebagai gantinya, cukup gunakan .form-inline dan terapkan utilitas margin seperlunya.
• Navbars tidak lagi menyertakan margin-bottom atau border-radius secara default.

Tabel Perbandingan Bootstrap Versi 3 dan Versi 4

Seperti yang telah kami katakan, tim Bootstrap telah menulis ulang kerangka kerja. Jadi perubahan di atas hanyalah perubahan utama yang kami tulis di sini. Untuk membaca secara mendalam silahkan ikuti link Bootstrap 4.

Haruskah kita bermigrasi ke Bootstrap 4 atau tetap di Bootstrap 3

Kami telah berbicara tentang fitur yang ditawarkan Bootstrap 4. Kita dapat melihat ada banyak pekerjaan yang dilakukan dalam mengoptimalkan dan membersihkan elemen dan kelas yang tidak perlu di seluruh kerangka kerja. Bootstrap 4 menjanjikan untuk menjadi jauh lebih cepat dan efisien untuk fleksibilitas dan kemudahan yang lebih besar saat membuat situs web ramah seluler yang mengagumkan.

Bootstrap 4, pindah ke flexbox. Ini dapat dianggap sebagai salah satu pencapaian terbesar dan signifikan. Ini akan memberikan manfaat berikut:

• Kisi berbasis Flexbox
• Tingkat jaringan XLl baru
• Kisi tata letak otomatis terbaru
• Opsi penyesuaian Navbar
• Utilitas Spasi Baru
• Konfigurasi Sans Glyphicons (zona bebas Bloat)
• Ukuran responsif
• Float Responsif
• Margin Otomatis
• Pemusatan Vertikal

Kesimpulan

Bootstrap selalu memudahkan kehidupan para pengembang dan dengan memperbarui versi, sekarang bootstrap memiliki lebih banyak fitur dan opsi baru untuk membuat segalanya, bahkan lebih, lebih mudah bagi para pengembang dan itulah sebabnya orang bermigrasi dari Bootstrap 3 ke Bootstrap 4 karena lebih nyaman dan mudah diakses daripada rekan sebelumnya.