Perbedaan Antara Bootstrap 3 dan 4
Deskripsi
Bootstrap adalah kerangka kerja front-end seluler pertama yang kuat dan populer untuk membangun situs pertama seluler yang responsif di web dengan menggunakan kerangka kerja HTML, CSS, dan JS.
Tabel berikut menunjukkan perbedaan dalam Bootstrap 3 dan Bootstrap 4 -
| S.No. | Komponen | Bootstrap 3 | Bootstrap 4 |
|---|---|---|---|
| 1 | File sumber CSS | KURANG | SCSS |
| 2 | Sistem Grid | Sistem grid 4 tingkat (xs, sm, md, lg) | Sistem grid 5 tingkat (xs, sm, md, lg, xl) |
| 3 | Unit CSS | px | rem |
| 4 | Ukuran huruf | 14px | 16px |
| 5 | Struktur Dropdown | Dibuat dengan <ul> dan <li> | Dibuat dengan <ul> atau <div> |
| 6 | Kolom Pengimbangan | col-md-offset-4 | offset-md-4 |
| 7 | Gambar-gambar | .img-responsive class | kelas .img-fluid |
| 8 | Tabel | Tambahkan kelas .table-responsive ke elemen <div> induk | Tambahkan kelas .table-responsive ke elemen <table> |
| 9 | Glyphicons | Didukung | Tidak didukung |
| 10 | Objek Media | Menggunakan kelas untuk objek media, seperti .media , .media-body , .media-object , .media-heading , .media-right , .media-left , .media-list dan .media-body | Hanya menggunakan kelas .media untuk objek media. |
| 11 | Tabel Gelap / Terbalik | Tidak didukung | Menggunakan kelas .table-dark untuk membuat tabel gelap / terbalik |
| 12 | Kotak centang dan Tombol Radio | Menampilkan kotak centang dan tombol radio dengan menggunakan .radio , .radio-inline , .checkbox , atau .checkbox-inline kelas | Menampilkan kotak centang dan tombol radio dengan menggunakan .form-cek , .form-check-label , .form-check-masukan , atau .form-check-inline kelas |
| 13 | Ukuran Kontrol Formulir | Meningkatkan atau ukuran penurunan kontrol input dengan menggunakan .input-lg dan .input-sm kelas | Menambah atau mengurangi ukuran kontrol input dengan menggunakan .form-control-lg dan .form-control-sm kelas |
| 14 | Teks Bantuan | Tampilkan teks bantuan dengan menggunakan kelas .help-block | Tampilkan teks bantuan dengan menggunakan kelas .form-text |
| 15 | Gaya | Menggunakan kelas .btn-default dan .btn-info pada tombol | Menggunakan kelas .btn-secondary , .btn-light, dan .btn-dark pada tombol dan menghapus class .btn-default . |
| 16 | Tombol Garis Besar | Tidak didukung | Gaya tombol dengan warna outline dengan menggunakan .btn-outline- * kelas |
| 17 | Ukuran Tombol | Kelas .btn-xs tersedia | Tersedia hanya .btn-sm dan .btn-lg kelas dan menjatuhkan .btn-xs kelas |
| 18 | Header Menu | Gunakan kelas .dropdown-header ke tag li | Gunakan kelas .dropdown-header untuk tag h1 - h2 |
| 19 | Jangka pembagi garis | Gunakan kelas .divider di elemen li | Gunakan kelas .dropdown-divider dalam elemen div |
| 20 | Memperbaiki Navbar | Memperbaiki navbar ke atas atau bawah dengan menggunakan .navbar-fixed-top dan .navbar-fixed-bawah kelas | Memperbaiki navbar ke atas atau bawah dengan menggunakan .fixed-top dan .fixed-bawah kelas |
| 21 | Pager | Sejajarkan halaman dengan menggunakan .previous dan .next kelas | Tidak didukung |
| 22 | Lebar Penuh Jumbotron | Ia tidak menggunakan kelas fluida .jumbotron pada jumbotron lebar penuh | Ia menggunakan kelas fluida .jumbotron untuk jumbotron lebar penuh |
| 23 | Item Korsel | Menggunakan kelas .item untuk item carousel. | Menggunakan kelas item carousel untuk item carousel. |
| 24 | Wells, Panel, dan Thumbnail | Didukung | Tidak didukung. Gunakan kartu sebagai gantinya |
| 25 | Navs Inline | Itu tidak termasuk kelas .nav-inline | Menampilkan navs sebagai inline dengan menggunakan .nav-inline kelas |