Bootstrap adalah toolkit sumber terbuka untuk dikembangkan dengan HTML, CSS dan JavaScript. Dapat membantu membuat purwarupa dari ide-ide Anda dengan cepat atau membangun seluruh aplikasi Anda dengan variabel dan campuran SASS, sistem grid responsif, komponen prabangun yang luas dan plugin ampuh yang dibangun pada jQuery.

Bootstrap 4 sudah ada sejak lama; tetapi secara resmi dirilis pada 19 Januari 2018 – dengan sejumlah perubahan dan trik baru dibanding dengan pendahulunya.

Berikut adalah 5 fitur utama dari Bootstrap 4:

1. Sistem Grid Flexbox

Salah satu perbaikan terbesar adalah perubahan dari float ke flexbox untuk sistem grid. Hadir dengan kekurangan kecil yaitu hilangnya dukungan untuk peramban seperti Internet Explorer 9. Namun, kekurangan tersebut datang dengan kelebihan-kelebihan baru yang dimiliki flexbox.

Dengan kekuatan flexbox, kita dapat menyelaraskan kolom dengan cara apa pun yang diinginkan menggunakan class seperti .justify-content-center atau .align-items-end. Kita dapat mengubah arah baris, membuat tata letak vertikal lebih mudah untuk diterapkan sambil mempertahankan responsivitasnya.

Tanpa membahas terlalu banyak detail, semua class yang baru dan utilitas responsif dapat ditemukan di halaman dokumentasi Bootstrap 4 Grid. Berikut adalah beberapa contoh:

KOLOM OTOMATIS

Kolom tanpa nilai tertentu sekarang akan mengambil ruang kosong, berdasarkan pada berapa banyak kolom yang berurutan. Kode berikut adalah contoh yang diambil dari dokumentasi Bootstrap yang menunjukkan bagaimana tata letak dasar 2 kolom dan 3 kolom akan dibuat.

<div class="container">
    <div class="row">
        <div class="col">
            1 of 2
        </div>
        <div class="col">
            2 of 2
        </div>
    </div>
    <div class="row">
        <div class="col">
            1 of 3
        </div>
        <div class="col">
            2 of 3
        </div>
        <div class="col">
            3 of 3
        </div>
    </div>
</div>

RESPONSIF PENUH DAN MOBILE-FIRST

Grid barunya benar-benar dioptimalkan untuk pendekatan mobile-first untuk pengembangan web dan class responsif barunya sangat memudahkan untuk memperoleh tata letak yang bagus, apa pun perangkat yang Anda gunakan. Seperti yang dapat Anda lihat dari contoh di bawah ini, kolom akan menumpuk pada perangkat yang lebih kecil dan kemudian terentang pada apa pun yang lebih besar dari breakpoint sm yang ditentukan (secara default 576px).

<div class="row">
    <div class="col-sm-8">col-sm-8</div>
    <div class="col-sm-4">col-sm-4</div>
</div>
<div class="row">
    <div class="col-sm">col-sm</div>
    <div class="col-sm">col-sm</div>
    <div class="col-sm">col-sm</div>
</div>

2. Tingkatan Grid

Dengan Bootstrap 3, kita memiliki tingkatan berikut:

• xs: kurang dari 768px
• sm: 768px dan lebih tinggi
• md: 992px dan lebih tinggi
• lg: 1200px dan lebih tinggi

Ini tampaknya dapat diterima tetapi – dengan munculnya phablets dan perangkat yang lebih kecil yang mencakup berbagai ukuran aktual – sepertinya sudah saatnya kita memiliki kontrol yang lebih besar.

Dengan Bootstrap 4, terdapat perbaikan:

• sm: 576px dan lebih tinggi
• md: 768px dan lebih tinggi
• lg: 992px dan lebih tinggi
• xl: 1200px dan lebih tinggi

Ini mungkin tidak tampak seperti perbedaan yang drastis tetapi langkah ekstra tersebut dalam rentang phablet ke tablet memungkinkan kontrol yang jauh lebih besar atas perubahan.

Kita tidak harus tetap menggunakan tata letak kolom tunggal hingga 768px; kita bisa membuat sebuah dobrakan dan cukup gunakan tingkat yang sesungguhnya.

3. Syntactically Awesome Style Sheets (SASS)

Jika Anda pernah menggunakan Bootstrap 3, Anda akan tahu itu berhasil atau tidak sama sekali dalam hal gaya yang akan Anda sertakan, kecuali jika Anda memutuskan untuk memilih versi khusus atau menggunakan paket bootstrap-sass.

Sekarang, dengan Bootstrap 4 semua gaya menggunakan SASS, sebuah preprocessor CSS yang banyak digunakan dan sangat populer. Ini memungkinkan kendali penuh dan penyesuaian bagian Bootstrap apa yang Anda sertakan.

Anda lebih suka menggunakan Normalize.css asli daripada Reboot baru? Jangan sertakan!

Anda membenci Modal dan menggigil saat menggunakannya? Singkirkan saja!

Ini tentu saja hanya akan mungkin jika Anda menggunakan manajer paket untuk menarik Bootstrap ke dalam proyek Anda dan memproses semua gaya Anda melalui beberapa bentuk proses pemaket/membangun (seperti Gulp atau Webpack). Ini sangat dianjurkan jika Anda ingin mendapatkan kekuatan penuh dari Bootstrap!

4. Kartu

Tim di Bootstrap pasti memperhatikan bahwa beberapa komponen mereka digunakan untuk tujuan yang serupa (jika tidak sama), karena sekarang kita memiliki komponen Kartu dengan fungsi umum.

Komponen ini telah menggantikan well, thumbnail dan panel sebagai “wadah konten” yang dapat digunakan dalam banyak situasi, seperti kartu profil atau tile untuk halaman informasi yang ditata secara indah.

Mereka terintegrasi secara sempurna dengan sejumlah fitur Bootstrap, seperti navigasi untuk menambahkan informasi tambahan atau sub-konten ke navigasi standar Anda. Dengan grid berbasis Flexbox baru, ukuran dan posisi kartu juga mudah; secara default mereka tidak memiliki jenis lebar yang tetap dan akan membatasi pengaturan yang mereka lakukan. Namun, jika Anda ingin lebih banyak kontrol, ada beberapa utilitas ukuran (.w-50, .w-75) untuk Anda!

5. UTILITAS JARAK

Pengembang menyetujui:

Salah satu hal yang cukup menjengkelkan adalah mengatur jarak elemen dalam tata letak.

Biasanya, Anda harus menambahkan margin dan padding khusus ke class yang dapat mengganggu tujuan class atau membuat sendiri class jarak yang berbeda.

Namun, berapa banyak tingkat kedetilan yang Anda butuhkan? Apakah mendasarkan semuanya pada sistem tata letak Anda dan membuat class berdasarkan ukuran gutter (jarak antar kolom) standar Anda ?! Bagaimana dengan class responsif!?!

Bootstrap 4 sudah mengurus semuanya dengan menghilangkan semua gangguan implementasi dengan memberikan satu set utilitas yang masuk akal dan sepenuhnya dapat dikonfigurasi.

Perlu menambahkan padding kecil di bagian atas dan bawah? Gunakan .py-3!

Seperti disebutkan di atas, utilitas-utilitas tersebut sepenuhnya dapat dikonfigurasi melalui variabel SASS seperti yang ditunjukkan di bawah ini:

PENUTUP

Jadi, demikianlah 5 hal hebat tentang Bootstrap 4.

Dengan lamanya versi ini dirilis, kita mungkin akan mendapatkan Bootstrap 5 dalam waktu dekat!

(Sumber & Gambar: evoluted.net – Luke Todd)