Bootstrap - Display: Panduan Komprehensif untuk Pemula
Halo sana, para pengembang web yang sedang belajar! Hari ini, kita akan mendalamkan salah satu fitur Bootstrap yang paling berguna: Utilitas Display. Sebagai guru komputer yang ramah di lingkungan Anda, saya di sini untuk membimbing Anda melalui topik ini dengan penjelasan yang jelas dan banyak contoh. Jadi, ambil secangkir kopi (atau teh, jika itu yang Anda sukai), dan mari kita mulai!
Apa Itu Bootstrap Display?
Sebelum kita masuk ke detailnya, mari pahami apa yang dimaksud dengan "display" dalam Bootstrap. Dalam pengembangan web, "display" merujuk kepada bagaimana elemen ditampilkan di halaman web. Bootstrap menyediakan set kelas yang memungkinkan Anda mengontrol perilaku display elemen secara mudah.
Pertimbangkan hal ini seperti mengatur furnitur di dalam sebuah ruangan. Kadang-kadang Anda ingin sebuah item terlihat, kadang-kadang Anda ingin menyembunyikannya, dan kadang-kadang Anda ingin perilakunya berubah tergantung ukuran ruangan (atau dalam kasus kita, layar).
Notasi
Bootstrap menggunakan notasi yang sederhana dan intuitif untuk kelas displaynya. Format umumnya adalah:
.d-{value}Di mana {value} dapat berupa salah satu dari berikut:
| Value | Deskripsi |
|---|---|
| none | Sembunyikan elemen |
| inline | Tampilkan elemen sebagai elemen inline |
| inline-block | Tampilkan elemen sebagai kontainer blok tingkat inline |
| block | Tampilkan elemen sebagai elemen blok |
| table | Tampilkan elemen sebagai tabel |
| table-cell | Tampilkan elemen sebagai sel tabel |
| table-row | Tampilkan elemen sebagai baris tabel |
| flex | Tampilkan elemen sebagai kontainer fleks tingkat blok |
| inline-flex | Tampilkan elemen sebagai kontainer fleks tingkat inline |
mari lihat beberapa contoh:
<div class="d-inline p-2 bg-primary text-white">d-inline</div>
<div class="d-inline p-2 bg-dark text-white">d-inline</div>Dalam contoh ini, kita menggunakan d-inline untuk membuat dua elemen div tampil secara inline. Mereka akan muncul bersamaan di sebelah kanan instead of stacking vertically.
<span class="d-block p-2 bg-primary text-white">d-block</span>
<span class="d-block p-2 bg-dark text-white">d-block</span>Di sini, kita menggunakan d-block untuk membuat elemen span (yang biasanya inline) tampil sebagai blok. Mereka akanbertumpuk secara vertikal.
Variasi Responsif
Sekarang, mari kita lihat yang benar-benar menarik! Bootstrap memungkinkan Anda menerapkan properti display berbeda berdasarkan ukuran layar. Format untuk ini adalah:
.d-{breakpoint}-{value}Di mana {breakpoint} dapat berupa:
| Breakpoint | Deskripsi |
|---|---|
| sm | Perangkat kecil (≥576px) |
| md | Perangkat medium (≥768px) |
| lg | Perangkat besar (≥992px) |
| xl | Perangkat ekstra besar (≥1200px) |
Misalnya:
<div class="d-none d-md-block">
Teks ini akan disembunyikan di layar kecil tetapi tampak di layar medium dan yang lebih besar.
</div>Div ini akan disembunyikan (d-none) secara default, tapi akan tampil sebagai blok (d-md-block) di layar ukuran medium dan yang lebih besar.
Sembunyikan Elemen
Menyembunyikan elemen adalah tugas umum dalam desain responsif. Bootstrap membuat ini mudah dengan kelas d-none:
<div class="d-none">Anda tidak bisa melihat saya!</div>Elemen ini akan disembunyikan sepenuhnya, tanpa menghiraukan ukuran layar.
Tapi apa jika Anda ingin menyembunyikan elemen hanya diukuran layar tertentu? Itulah di mana variasi responsif berguna:
<div class="d-lg-none">Saya tampak di semua layar kecil dari layar besar.</div>
<div class="d-none d-lg-block">Saya hanya muncul di layar besar dan ke atas.</div>Display saat Print
Bootstrap bahkan memungkinkan Anda mengontrol bagaimana elemen ditampilkan saat halaman dicetak! Gunakan kelas d-print-{value} untuk ini:
<div class="d-none d-print-block">Saya hanya muncul saat Anda mencetak halaman!</div>
<div class="d-print-none">Saya hilang saat Anda mencetak halaman!</div>Ini sangat berguna untuk membuat versi cetak yang ramah tanpa perlu menggunakan stylesheet terpisah.
Menggabungkan Semua
mari buat contoh kecil yang menggunakan beberapa utilitas display:
<div class="container">
<h1 class="d-none d-md-block">Selamat Datang di Situs Web Saya</h1>
<h2 class="d-md-none">Selamat Datang</h2>
<p class="d-inline-block bg-light p-2">Saya selalu inline-block.</p>
<p class="d-none d-lg-inline-block bg-light p-2">Saya muncul inline di layar besar.</p>
<div class="d-flex justify-content-between">
<div>Item Flex 1</div>
<div>Item Flex 2</div>
<div class="d-none d-xl-block">Saya hanya muncul di layar ekstra besar</div>
</div>
<footer class="d-print-none">Footer ini tidak akan muncul saat dicetak.</footer>
</div>Dalam contoh ini:
- Kita memiliki judul besar untuk layar medium dan ke atas, dan yang kecil untuk layar kecil.
- Kita memiliki dua paragraf, salah satunya hanya muncul di layar besar.
- Kita menggunakan flexbox, dengan item ketiga yang hanya muncul di layar ekstra besar.
- Footer tidak akan dicetak.
Kesimpulan
Dan begitulah, teman-teman! Kita telah mengeksplorasi utilitas display Bootstrap. Ingat, kunci untuk menguasai ini adalah praktik. Cobalah membuat layout Anda sendiri, eksperimen dengan ukuran layar yang berbeda, dan jangan takut untuk mencampur kelas-kelas ini.
Sebagai guru komputer Anda yang tua, saya tidak bisa menekan seberapa berharga utilitas ini adalah dalam pengembangan web dunia nyata. Mereka akan menyelamatkan Anda waktu banyak dari menulis CSS khusus dan memperbaiki masalah layout.
Sekarang, pergilah dan buat layout responsif, adaptif dengan kepercayaan! Dan ingat, dalam dunia pengembangan web, seperti dalam kehidupan, kadang-kadang alat paling kuat adalah mengetahui kapan membuat sesuatu menghilang. Selamat coding!
Credits: Image by storyset