Hello guys! Bootstrap merupakan salah satu Framework CSS yang paling terkenal dan sering digunakan. Kali ini kita akan membahas tentang Penggunaan Tampilan (Display) dalam Bootstrap.
Sumber : Getbootstrap.com
Dengan cepat dan responsif, Anda dapat mengatur nilai tampilan (display value) dari komponen dan elemen lainnya menggunakan display utilities. Fitur ini mendukung berbagai nilai umum yang sering digunakan, serta menyediakan opsi tambahan untuk mengatur tampilan ketika halaman dicetak.
1. Cara Kerja
Anda dapat mengubah nilai properti display menggunakan utility class yang bersifat responsif. Secara sengaja, hanya sebagian dari semua kemungkinan nilai display yang disediakan untuk mendukung penggunaan umum. Kelas-kelas ini juga bisa dikombinasikan untuk menghasilkan berbagai efek tampilan sesuai kebutuhan Anda.
2. Notasi
Kelas display utility yang berlaku untuk semua breakpoint — mulai dari xs hingga xxl — tidak memiliki singkatan breakpoint di dalam namanya. Hal ini karena kelas tersebut diterapkan mulai dari min-width: 0; ke atas, sehingga tidak dibatasi oleh media query.
Namun, untuk breakpoint lainnya, singkatan sesuai ukuran layar akan disertakan dalam nama kelasnya.
Oleh karena itu, kelas-kelas tersebut diberi nama menggunakan format :
- .d-{value} for xs
- .d-{breakpoint}-{value} for sm, md, lg, xl, and xxl.
Di mana nilai adalah salah satu dari :
- none
- inline
- inline-block
- block
- grid
- table
- table-cell
- table-row
- flex
- inline-flex
Nilai tampilan dapat diubah dengan mengubah variabel $displays dan mengompilasi ulang SCSS.
Media query memengaruhi lebar layar dengan breakpoint yang diberikan atau lebih besar. Misalnya, .d-lg-none menetapkan display: none; pada layar lg, xl, dan xxl.
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>
<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>
4. Menyembunyikan Elemen
Untuk mempercepat pengembangan yang ramah terhadap perangkat seluler, Anda dapat menggunakan kelas display responsif untuk menampilkan atau menyembunyikan elemen berdasarkan ukuran perangkat.
Alih-alih membuat versi situs web yang sepenuhnya berbeda untuk setiap perangkat, cukup sembunyikan elemen tertentu secara responsif sesuai ukuran layar.
Untuk menyembunyikan elemen, gunakan kelas .d-none, atau salah satu kelas berikut sesuai dengan variasi ukuran layar responsif seperti .d-{sm, md, lg, xl, xxl}-none.
Jika Anda ingin menampilkan elemen hanya pada ukuran layar tertentu, kombinasikan kelas .d-*-none dengan kelas .d-*-*.
Contohnya :
.d-none .d-md-block .d-xl-none .d-xxl-none
Kombinasi ini akan menyembunyikan elemen di semua ukuran layar, kecuali pada perangkat berukuran medium dan large.
Ukuran Layar | Kelas |
Hidden on all | .d-none |
Hidden only on xs | .d-none .d-sm-block |
Hidden only on sm | .d-sm-none .d-md-block |
Hidden only on md | .d-md-none .d-lg-block |
Hidden only on lg | .d-lg-none .d-xl-block |
Hidden only on xl | .d-xl-none .d-xxl-block |
Hidden only on xxl | .d-xxl-none |
Visible on all | .d-block |
Visible only on xs | .d-block .d-sm-none |
Visible only on sm | .d-none .d-sm-block .d-md-none |
Visible only on md | .d-none .d-md-block .d-lg-none |
Visible only on lg | .d-none .d-lg-block .d-xl-none |
Visible only on xl | .d-none .d-xl-block .d-xxl-none |
Visible only on xxl | .d-none .d-xxl-block |
<div class="d-lg-none">hide on lg and wider screens</div><div class="d-none d-lg-block">hide on screens smaller than lg</div>
5. Tampilan saat dicetak
Ubah nilai tampilan elemen saat mencetak dengan kelas utilitas tampilan cetak kami. Termasuk dukungan untuk nilai tampilan yang sama dengan utilitas .d-* responsif kami.
- .d-print-none
- .d-print-inline
- .d-print-inline-block
- .d-print-block
- .d-print-grid
- .d-print-table
- .d-print-table-row
- .d-print-table-cell
- .d-print-flex
- .d-print-inline-flex
Kelas cetak dan kelas pajang dapat digabungkan.
<div class="d-print-none">Screen Only (Hide on print only)</div><div class="d-none d-print-block">Print Only (Hide on screen only)</div><div class="d-none d-lg-block d-print-block">Hide up to large on screen, but always show on print</div>
Mohon maaf apabila ada kesalahan sedikit pun pada Kode Program ini.
Terima Kasih 😀😊😘👌👍 :)