Bootstrap - Sizing: Panduan Komprehensif untuk Pemula

Hai teman-teman, para pengembang web masa depan! Hari ini, kita akan masuk ke dunia menarik Bootstrap sizing. Sebagai guru komputer yang ramah di lingkungan sekitar Anda, saya di sini untuk mengarahkan Anda dalam perjalanan ini, langkah demi langkah. Jangan khawatir jika Anda baru dalam programming - kita akan mulai dari dasar dan naik tingkat per tingkat. Jadi, ambil secangkir kopi (atau teh, jika itu yang Anda sukai), dan mari kita mulai!

Apa Itu Bootstrap Sizing?

Sebelum kita masuk ke detail, mari kita pahami apa itu Bootstrap sizing. Bayangkan Anda sedang menghias sebuah kamar. Anda ingin beberapa furnitur yang pas, beberapa yang mengambil setengah ruang, dan yang lainnya menyesuaikan berdasarkan ukuran kamar. Itu tepat apa yang Bootstrap sizing membantu kita lakukan dengan elemen di halaman web!

Relatif terhadap Parent

Mari kita mulai dengan sizing elemen relatif terhadap parentnya. Ini seperti memutuskan seberapa banyak ruang sebuah gambar harus mengambil di dinding.

Kelas Width

Bootstrap menyediakan kelas yang memungkinkan Anda menyetel lebar elemen sebagai persentase dari lebar parentnya. Berikut adalah tabel yang berguna dari kelas-kelas ini:

Kelas	Deskripsi
w-25	Lebar 25%
w-50	Lebar 50%
w-75	Lebar 75%
w-100	Lebar 100%
w-auto	Lebar auto

mari lihat contohnya:

<div class="container">
<div class="w-25 p-3" style="background-color: #eee;">Lebar 25%</div>
<div class="w-50 p-3" style="background-color: #ddd;">Lebar 50%</div>
<div class="w-75 p-3" style="background-color: #ccc;">Lebar 75%</div>
<div class="w-100 p-3" style="background-color: #bbb;">Lebar 100%</div>
<div class="w-auto p-3" style="background-color: #aaa;">Lebar auto</div>
</div>

Dalam contoh ini, kita membuat lima elemen div, masing-masing dengan kelas lebar yang berbeda. Kelas p-3 menambahkan beberapa padding untuk kepentingan visibility. Anda akan melihat bahwa setiap div mengambil persentase berbeda dari lebar kontainer parentnya.

Kelas Height

Secara paralel, Bootstrap menawarkan kelas untuk menyetel tinggi:

Kelas	Deskripsi
h-25	Tinggi 25%
h-50	Tinggi 50%
h-75	Tinggi 75%
h-100	Tinggi 100%
h-auto	Tinggi auto

Berikut adalah contoh penggunaannya:

<div style="height: 200px;">
<div class="h-25 d-inline-block" style="width: 120px; background-color: #eee;">Tinggi 25%</div>
<div class="h-50 d-inline-block" style="width: 120px; background-color: #ddd;">Tinggi 50%</div>
<div class="h-75 d-inline-block" style="width: 120px; background-color: #ccc;">Tinggi 75%</div>
<div class="h-100 d-inline-block" style="width: 120px; background-color: #bbb;">Tinggi 100%</div>
<div class="h-auto d-inline-block" style="width: 120px; background-color: #aaa;">Tinggi auto</div>
</div>

Dalam contoh ini, kita menyetel tinggi tetap pada parent div dan kemudian menggunakan kelas tinggi pada elemen anak. Kelas d-inline-block membuat elemen div ini tampil secara inline.

Relatif terhadap Lebar

Sekarang, mari bicarakan sizing elemen relatif terhadap lebar viewport. Ini seperti menyesuaikan layar TV untuk memenuhi berbagai ukuran ruangan.

Bootstrap menggunakan unit vw, yang berarti "viewport width". Berikut adalah beberapa kelas:

Kelas	Deskripsi
vw-100	Lebar 100vw
min-vw-100	Min-width 100vw
max-vw-100	Max-width 100vw

mari lihat contohnya:

<div class="vw-100" style="background-color: #eee;">Div ini lebar 100vw.</div>

Div ini akan selalu sama lebar dengan viewport, bahkan jika Anda mengubah ukuran jendela browser.

Relatif terhadap Tinggi

Seperti viewport width, kita juga dapat mensizing elemen relatif terhadap tinggi viewport menggunakan unit vh.

Kelas	Deskripsi
vh-100	Tinggi 100vh
min-vh-100	Min-height 100vh
max-vh-100	Max-height 100vh

Berikut adalah contoh penggunaannya:

<div class="vh-100" style="background-color: #eee;">Div ini tinggi 100vh.</div>

Div ini akan selalu sama tinggi dengan viewport, menyesuaikan saat Anda mengubah ukuran jendela browser.

Relatif terhadap Viewport

Akhirnya, mari kita lihat sizing yang relatif terhadap kedua lebar dan tinggi viewport.

Min-width 100%

<div class="min-vw-100" style="background-color: #eee;">100vw</div>

Div ini akan setidaknya sama lebar dengan viewport, tetapi dapat diperluas jika kontennya memerlukan lebih banyak ruang.

Min-height 100%

<div class="min-vh-100" style="background-color: #eee;">100vh</div>

Secara paralel, div ini akan setidaknya sama tinggi dengan viewport, tetapi dapat diperluas jika diperlukan.

Menggabungkan Semua

Sekarang kita telah melihat semua opsi sizing ini, mari kita buat contoh kecil yang menggabungkan mereka:

<div class="container">
<div class="row">
<div class="col-md-6">
<div class="w-75 p-3 mb-2" style="background-color: #e9ecef;">
Saya 75% lebar relatif terhadap parent!
</div>
<div class="h-50 p-3" style="background-color: #ced4da;">
Saya 50% tinggi relatif terhadap parent!
</div>
</div>
<div class="col-md-6">
<div class="vw-100 p-3 mb-2" style="background-color: #adb5bd;">
Saya sama lebar dengan viewport!
</div>
<div class="vh-50 p-3" style="background-color: #6c757d; color: white;">
Saya setengah tinggi viewport!
</div>
</div>
</div>
</div>

Dalam contoh ini, kita menggunakan kombinasi lebar, tinggi, dan sizing relatif terhadap viewport untuk membuat tata letak yang beragam dan responsif. Cobalah mengubah ukuran jendela browser Anda untuk melihat bagaimana elemen ini menyesuaikan!

Dan itu saja, teman-teman! Anda telah mengambil langkah pertama ke dunia Bootstrap sizing. Ingat, latihan membuat sempurna, jadi jangan khawatir untuk mencoba kelas ini dalam proyek Anda sendiri. Sebelum Anda tahu, Anda akan membuat tata letak responsif seperti seorang pro!

Happy coding, dan semoga website Anda selalu pas! ?

Credits: Image by storyset