Bootstrap - Pandangan: Panduan Lengkap untuk Pemula
Hai teman-teman pemula pengembang web! Hari ini, kita akan melihat salah satu fitur yang sangat berguna di Bootstrap: Utilitas pandangan. Sebagai guru komputer yang ramah di lingkungan Anda, saya di sini untuk mengajarkan Anda tentang topik ini dengan penjelasan yang jelas dan banyak contoh. Jadi, ambillah secangkir kopi (atau tea, jika itu yang Anda suka), dan mari kita mulai!
apa itu Bootstrap Pandangan?
Sebelum kita masuk ke detailnya, mari kita pahami apa yang dimaksud dengan "pandangan" di Bootstrap. Dalam pengembangan web, "pandangan" merujuk kepada bagaimana suatu elemen ditampilkan di halaman web. Bootstrap menyediakan set kelas yang memungkinkan Anda mengendalikan perilaku pandangan 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 berbeda tergantung ukuran ruangan (atau dalam kasus kita, layar).
Notasi
Bootstrap menggunakan notasi yang sederhana dan intuitif untuk kelas pandangannya. Format umumnya adalah:
.d-{value}Di mana {value} dapat berupa salah satu dari berikut ini:
| Value | Description |
|---|---|
| none | Sembunyikan elemen |
| inline | Tampilkan elemen sebagai elemen inline |
| inline-block | Tampilkan elemen sebagai kontainer 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 kita 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 inline. Mereka akan muncul bersampingan instead of vertikal.
<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 akan bertumpuk vertikal.
Variasi Responsif
Sekarang, mari kita lihat bagaimana hal ini menjadi sangat menarik! Bootstrap memungkinkan Anda menerapkan properti pandangan yang berbeda tergantung ukuran layar. Format untuk ini adalah:
.d-{breakpoint}-{value}Di mana {breakpoint} dapat berupa:
| Breakpoint | Description |
|---|---|
| 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 terlihat di layar medium dan yang lebih besar.
</div>Div ini akan disembunyikan (d-none) secara default, tetapi 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 sepenuhnya disembunyikan, tanpa memandang ukuran layar.
Tapi apa kalau Anda ingin disembunyikan elemen hanya di beberapa ukuran layar? Itu di mana variasi responsif menjadi berguna:
<div class="d-lg-none">Saya terlihat 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>Pandangan saat Cetak
Bootstrap bahkan memungkinkan Anda mengendalikan 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 dari halaman web Anda tanpa memerlukan stylesheet terpisah.
Menggabungkan Semua
mari kita buat contoh kecil yang menggunakan beberapa utilitas pandangan:
<div class="container">
<h1 class="d-none d-md-block">Selamat Datang di Website 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 judul 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 begitu, teman-teman! Kita telah melihat secara mendalam utilitas pandangan Bootstrap. Ingat, kunci untuk menguasai ini adalah praktik. Cobalah membuat layout Anda sendiri, eksperimen dengan ukuran layar yang berbeda, dan jangan takut untuk mencampur dan menyesuaikan kelas-kelas ini.
Sebagai guru komputer Anda, saya ingin menekankan betapa nilai utilitas ini dalam pengembangan web dunia nyata. Mereka akan menyelamatkan Anda banyak waktu menulis CSS khusus dan memperbaiki masalah layout.
Sekarang, pergilah dan buat layout responsif, adaptif dengan kepercayaan! Dan ingat, di dunia pengembangan web, seperti di kehidupan, kadang-kadang alat paling kuat adalah mengetahui kapan membuat sesuatu menghilang. Selamat coding!
Credits: Image by storyset