Bootstrap - Visibilitas: Membuat Element Terlihat dan Hilang

Halo sana, calon pengembang web! Hari ini, kita akan mendalamkan topik yang menarik yang saya suka menyebut "trik magis" desain web: kelas visibilitas Bootstrap. Seperti seorang magang yang dapat membuat objek muncul dan menghilang, Anda akan belajar bagaimana melakukan hal yang sama dengan element web. Mari kita mulai!

Apa Itu Bootstrap Visibilitas?

Kelas visibilitas Bootstrap adalah set alat yang kuat yang memungkinkan Anda mengendalikan kapan dan bagaimana element ditampilkan di halaman web Anda. P想象kannya seperti memiliki remote kontrol untuk konten situs web Anda, di mana Anda dapat menentukan apa yang terlihat berdasarkan ukuran layar atau kondisi yang berbeda.

Mengapa Hal Ini Penting?

Imaginasi Anda sedang mendesain situs web yang terlihat bagus di desktop, tapi ketika Anda membukanya di ponsel, semuanya ter tampar kecil dan sulit dibaca. Itu di mana kelas visibilitas datang untuk menyelamatkan! Mereka membantu Anda membuat desain responsif yang menyesuaikan dengan berbagai perangkat, memastikan situs web Anda terlihat fantastis di mana saja.

Kelas Visibilitas Dasar

Mari kita mulai dengan kelas visibilitas yang paling sederhana. Ini seperti sakelar "nyala/matikan" untuk element web Anda.

Kelas Visible

<div class="visible">Saya selalu terlihat!</div>

Element ini akan terlihat di semua perangkat dan ukuran layar. Itu seperti meninggalkan lampu menyala seluruh waktu – semua orang dapat melihatnya!

Kelas Hidden

<div class="hidden">Anda tidak bisa melihat saya!</div>

Element ini disembunyikan di semua perangkat. Itu seperti memasukkan sesuatu ke dalam kotak tak terlihat – itu ada dalam kode Anda, tapi tidak ada yang bisa melihatnya di halaman.

Kelas Visibilitas Responsif

Sekarang, mari kita maju ke level berikutnya. Bootstrap memungkinkan Anda menampilkan atau menyembunyikan element berdasarkan ukuran layar. Itu seperti memiliki berbagai pakaian untuk berbagai kesempatan!

Menyembunyikan di Ukuran Layar tertentu

<div class="hidden-xs">Saya disembunyikan di layar ekstra kecil</div>
<div class="hidden-sm">Saya disembunyikan di layar kecil</div>
<div class="hidden-md">Saya disembunyikan di layar medium</div>
<div class="hidden-lg">Saya disembunyikan di layar besar</div>

Kelas ini menyembunyikan element di ukuran layar tertentu:

• hidden-xs: disembunyikan di layar ekstra kecil (ponsel)
• hidden-sm: disembunyikan di layar kecil (tablet)
• hidden-md: disembunyikan di layar medium (desktop)
• hidden-lg: disembunyikan di layar besar (desktop besar)

Menampilkan di Ukuran Layar tertentu

<div class="visible-xs">Saya hanya terlihat di layar ekstra kecil</div>
<div class="visible-sm">Saya hanya terlihat di layar kecil</div>
<div class="visible-md">Saya hanya terlihat di layar medium</div>
<div class="visible-lg">Saya hanya terlihat di layar besar</div>

Kelas ini menampilkan element hanya di ukuran layar tertentu:

• visible-xs: terlihat hanya di layar ekstra kecil
• visible-sm: terlihat hanya di layar kecil
• visible-md: terlihat hanya di layar medium
• visible-lg: terlihat hanya di layar besar

Visibilitas Cetak

Apakah Anda tahu Anda dapat mengendalikan apa yang muncul saat seseorang mencetak halaman web Anda? Itu seperti memiliki versi khusus situs Anda untuk kertas!

<div class="visible-print">Saya hanya muncul saat Anda mencetak!</div>
<div class="hidden-print">Saya akan hilang saat Anda mencetak!</div>

• visible-print: Element ini hanya muncul saat halaman dicetak
• hidden-print: Element ini disembunyikan saat halaman dicetak

Mengkombinasikan Kelas Visibilitas

Ini di mana hal ini menjadi sangat menyenangkan! Anda dapat mengkombinasikan kelas ini untuk membuat aturan visibilitas yang kompleks. Itu seperti menjadi DJ visibilitas, mencampur dan mencocokkan untuk menciptakan pandangan yang sempurna untuk setiap situasi.

<div class="visible-xs visible-md">
Saya terlihat di ponsel dan desktop medium, tapi disembunyikan di tablet dan layar besar!
</div>

Element ini akan terlihat di layar ekstra kecil (ponsel) dan medium (desktop), tapi disembunyikan di layar kecil (tablet) dan besar.

Contoh Praktis

Mari kita terapkan pengetahuan baru ini dengan beberapa contoh dunia nyata!

Menu Navigasi Responsif

<nav>
<ul class="hidden-xs">
<li>Beranda</li>
<li>Tentang</li>
<li>Kontak</li>
</ul>
<div class="visible-xs">
<button>Menu</button>
</div>
</nav>

Dalam contoh ini, kita memiliki menu navigasi penuh untuk layar besar, tapi digantikan oleh tombol "Menu" di ponsel. Itu seperti memiliki ruang makan mewah untuk tamu dan ruang dapur yang nyaman untuk penggunaan sehari-hari!

Konten Adaptif

<article>
<h1>Selamat Datang di Situs Saya</h1>
<p class="visible-lg">Ini adalah deskripsi detil yang terlihat bagus di layar besar.</p>
<p class="hidden-lg">Selamat datang! Klik untuk lebih info.</p>
</article>

Di sini, kita menampilkan deskripsi detil di layar besar, tapi versi pendek di perangkat kecil. Itu seperti memiliki novel dan versi cliff notes nya!

Praktik dan Tips

1. Jangan terlalu banyak penggunaan: Hanya karena Anda dapat disembunyikan element, itu tidak berarti Anda harus melakukannya. Selalu pertimbangkan jika konten itu benar-benar diperlukan.

2. Pikirkan mobile-first: Desain untuk layar kecil terlebih dahulu, kemudian tambahkan konten untuk layar besar. Lebih mudah menambah daripada mengurangi!

3. Uji, uji, uji: Selalu periksa situs Anda di berbagai perangkat untuk memastikan kelas visibilitas Anda bekerja seperti yang diinginkan.

4. Gabungkan dengan fitur lain Bootstrap: Kelas visibilitas bekerja sangat baik dengan sistem grid dan komponen Bootstrap lainnya.

5. Aksesibilitas penting: Ingat bahwa konten disembunyikan mungkin masih dibaca oleh pembaca layar. Gunakan atribut aria jika diperlukan.

Kesimpulan

Selamat! Anda telah belajar menjadi ahli visibilitas dengan Bootstrap. Dengan keterampilan ini, Anda dapat membuat situs web yang menyesuaikan dengan indah ke mana pun ukuran layar. Ingat, desain web yang bagus seperti kameleon – itu harus terlihat sempurna di mana saja.

Sekarang giliran Anda untuk berlatih. Cobalah membuat halaman web sederhana dan eksperimen dengan kelas visibilitas ini. Jangan takut untuk membuat kesalahan – itu adalah bagaimana kita belajar! Dan siapa tahu, mungkin Anda akan menemukan cara baru untuk menggunakan kelas ini yang bahkan saya belum pikirkan.

Selamat coding, dan semoga element Anda selalu terlihat (atau disembunyikan) tepat saat Anda inginkannya!

Kelas	Deskripsi
visible	Element terlihat di semua perangkat
hidden	Element disembunyikan di semua perangkat
hidden-xs	disembunyikan di layar ekstra kecil (ponsel)
hidden-sm	disembunyikan di layar kecil (tablet)
hidden-md	disembunyikan di layar medium (desktop)
hidden-lg	disembunyikan di layar besar (desktop besar)
visible-xs	terlihat hanya di layar ekstra kecil
visible-sm	terlihat hanya di layar kecil
visible-md	terlihat hanya di layar medium
visible-lg	terlihat hanya di layar besar
visible-print	Element hanya muncul saat dicetak
hidden-print	Element disembunyikan saat dicetak

Credits: Image by storyset