Bootstrap - Sizing: Panduan Lengkap untuk Pemula

Hai teman-teman, calon pengembang web di masa depan! Hari ini, kita akan melihat dunia yang menarik Bootstrap sizing. Sebagai guru komputer tetangga yang ramah, saya di sini untuk memandu Anda dalam perjalanan ini, langkah demi langkah. Jangan khawatir jika Anda baru dalam pemrograman - kita akan mulai dari dasar dan naik turun. Jadi, ambil secangkir kopi (atau teh, jika itu hal yang Anda sukai), dan mari kita mulai!

Apa Itu Bootstrap Sizing?

Sebelum kita masuk ke hal yang mendetail, 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 secara relatif terhadap parentnya. Ini seperti memutuskan seberapa banyak ruang yang harus diambil oleh gambar di dinding.

Kelas Lebar

Bootstrap menyediakan kelas yang memungkinkan Anda menyetel lebar elemen sebagai persentase dari lebar parentnya. Ini adalah tabel yang praktis 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 ini:

<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 sedikit padding untuk kejelasan. Anda akan melihat bahwa setiap div memenuhi persentase berbeda dari lebar kontainer parentnya.

Kelas Tinggi

Secara similar, 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

Ini adalah cara Anda mungkin menggunakannya:

<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 div ini tampil secara inline.

Relatif terhadap Lebar

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

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

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

mari lihat contoh:

<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

Similar dengan viewport width, kita juga dapat menyesuaikan 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

Ini adalah cara Anda mungkin menggunakannya:

<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 paling sedikit sama lebar dengan viewport, tapi dapat diperluas jika kontennya memerlukan lebih banyak ruang.

Min-height 100%

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

Secara similar, div ini akan paling sedikit sama tinggi dengan viewport, tapi dapat diperluas jika diperlukan.

Menggabungkan Semua

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

<div class="container">
<div class="row">
<div class="col-md-6">
<div class="w-75 p-3 mb-2" style="background-color: #e9ecef;">
Saya lebar 75% relatif terhadap parentku!
</div>
<div class="h-50 p-3" style="background-color: #ced4da;">
Saya tinggi 50% relatif terhadap parentku!
</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 dari 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 baru saja 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 ahli!

Happy coding, dan semoga website Anda selalu pas! ?

Credits: Image by storyset