Hidup di kampung pasti pernah mendengar istilah "kontainer". Istilah ini ditujukan untuk peti kemas yang dibawa oleh mobil besar. Jika kebetulan ada mobil yang membawa peti kemas. Maka disebutlah mobil yang lewat tadi sebagai mobil kontainer.
Begitu juga ketika menjumpai barang-barang di dapur. Salah satunya saya fotokan di bawah ini. Sebuah tempat yang tertulis pada labelnya yaitu:"Fresh Smoothie Container". Sebuah wadah terbuat dari plastik yang cocok untuk menyimpan benda atau barang. Namun bukan itu fokus pembahasan kita melainkan "container" yang akan kita kaitkan dengan istilah dalam Bootstrap.
Karena ketika belajar framework CSS yang satu ini ada juga istilah "container". Dalam Bootstrap, container merupakan elemen paling dasar untuk menyusun tata letak website. Container juga dipersyaratkan ketika membangun website menggunakan sistem grid dari Bootstrap.
Jika grid diibaratkan seperti garis bantu yang melintang dan membujur. Maka container merupakan wadah yang menampung elemen-elemen tersebut serta elemen tambahan lainnya. Sebagaimana dilansir dari getbootstrap, container adalah block penyusun dasar Bootstrap yang menyelaraskan konten dengan perangkat atau viewport terentu.
Memahami Istilah 'Container' dalam Bootstrap dengan Contoh
Penulisan "container" dalam Bootstrap terdiri atas 3 macam, yaitu: container-fluid, container dan container-{breakpoint}. Ketiga macam container tersebut memiliki karakteristik masing-masing. Untuk lebih jelasnya mari kita lihat perbedaannya melalui contoh. Dan contoh pada kali ini kita menggunakan mesin Blogger. Berikut ini langkah-langkah memahami istilah "container" dengan contoh.
1. Login ke Blogger, klik "Tema", klik "tanda panah kecil", klik Edit HTML.
2. Gunakan template Blogspot dasar yang sudah disertai Boostrap seperti contoh di bawah ini.
3. Tempatkan kode container-fluid berikut setelah <body>.
4. Maka tampilan website akan terlihat penuh memenuhi layar. Layar terlihat penuh tetap berlaku meskipun kita naik turunkan view. Dan tampilan dengan width: 100% ini berlaku untuk semua breakpoints. Termasuk menggunakan perangkat mobile akan tetap penuh ketika mengakses website dengan kode container-fluid tersebut. (Lihat urutan terakhir pada tabel breakpoint nomor 9 di bawah)
5. Contoh yang kedua yaitu container, silahkan ganti kode nomor 3 di atas dengan kode di bawah ini.
6. Jika menggunakan layar komputer maka lebar layoutnya terlihat tidak penuh. Terlihat tampilan website dengan ruang kosong di sisi kanan dan kiri. Perhatikan gambar di bawah ini!
7. Namun jika diakses melalui perangkat mobil maka terlihat penuh. Sebagaimana dimaklumi, lebar layar komputer dengan perangkat mobile tidaklah sama. Ini menunjukan jika kode container ini akan mengatur nilai maksimal untuk setiap breakpoint yang responsif. Adapun untuk ukuran nilai maksimal dari tipe container ini bisa dilihat pada menu breakpoint yang tersedia di Boostrap pada tabel di bawah ini (Lihat pada menu urutan paling pertama pada tabel nomor 9).
8. Pun begitu ketika layar monitor dibesarkan pada titik tertentu akhirnya akan memenuhi layar.
9. Jenis yang ketiga yaitu container-{breakpoint}. Jenis ini menetapkan width: 100% sampai titik breakpoint yang ditentukan. Adapun breakpoint yang tersedia dalam Boostrap adalah sebagai berikut:
9. Untuk contoh silahkan ganti kode container atau container-fluid pada nomor 3 dan 5 di atas menjadi container-sm, container-md, container-lg, container-xl atau ontainer-xxl. Setelah itu perhatikan perbedaannya jika diakses menggunakan perangkat dengan lebar layar yang berbeda.
Penutup
Bootstrap yang saya pelajari secara otodidak saat ini versi 5. Dalam hal ini, ada sedikit perbedaan dengan versi sebelumnya. Dimana titik breakpoint tertinggi pada versi 4 yaitu Extra large (≥1200px). Sedangkan pada versi 5 yaitu XXL breakpoint (≥1400px). Sesuatu yang baru ini sebagaimana dikutip dari w3schools,
Semoga bermanfaat.
Tidak ada komentar:
Posting Komentar