Penggunaan Tampilan (Display) dalam Bootstrap

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.

<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 😀😊😘👌👍 :)