Tampilkan properti

Beralih dengan cepat dan responsif nilai tampilan komponen dan lainnya dengan utilitas tampilan kami. Termasuk dukungan untuk beberapa nilai yang lebih umum, serta beberapa tambahan untuk mengontrol tampilan saat mencetak.

Di halaman ini

Bagaimana itu bekerja

Ubah nilai displayproperti dengan kelas utilitas tampilan responsif kami. Kami sengaja hanya mendukung sebagian dari semua nilai yang mungkin untuk display. Kelas dapat digabungkan untuk berbagai efek sesuai kebutuhan.

Notasi

Tampilkan kelas utilitas yang berlaku untuk semua breakpoints , dari xsto xxl, tidak memiliki singkatan breakpoint di dalamnya. Ini karena kelas tersebut diterapkan dari min-width: 0;dan ke atas, dan dengan demikian tidak terikat oleh kueri media. Breakpoints yang tersisa, bagaimanapun, termasuk singkatan breakpoint.

Dengan demikian, kelas diberi nama menggunakan format:

.d-{value}untukxs
.d-{breakpoint}-{value}untuk sm, md, lg, xl, dan xxl.

Dimana 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 displaynilai yang ditentukan dalam $utilitiesdan mengkompilasi ulang SCSS.

Kueri media memengaruhi lebar layar dengan titik henti sementara yang diberikan atau lebih besar . Misalnya, .d-lg-noneset display: none;pada lg, xl, dan xxllayar.

Contoh

d-inline

html

<div class="d-inline p-2 text-bg-primary">d-inline</div>
<div class="d-inline p-2 text-bg-dark">d-inline</div>

blok-d blok-d

html

<span class="d-block p-2 text-bg-primary">d-block</span>
<span class="d-block p-2 text-bg-dark">d-block</span>

Menyembunyikan elemen

Untuk pengembangan ramah seluler yang lebih cepat, gunakan kelas tampilan responsif untuk menampilkan dan menyembunyikan elemen menurut perangkat. Hindari membuat versi yang sama sekali berbeda dari situs yang sama, alih-alih sembunyikan elemen secara responsif untuk setiap ukuran layar.

Untuk menyembunyikan elemen cukup gunakan .d-nonekelas atau salah satu .d-{sm,md,lg,xl,xxl}-nonekelas untuk variasi layar responsif apa pun.

Untuk menampilkan elemen hanya pada interval ukuran layar tertentu, Anda dapat menggabungkan satu .d-*-nonekelas dengan .d-*-*kelas, misalnya .d-none .d-md-block .d-xl-none .d-xxl-noneakan menyembunyikan elemen untuk semua ukuran layar kecuali pada perangkat sedang dan besar.

Ukuran layar	Kelas
Tersembunyi di semua	`.d-none`
Tersembunyi hanya di xs	`.d-none .d-sm-block`
Tersembunyi hanya di sm	`.d-sm-none .d-md-block`
Tersembunyi hanya di md	`.d-md-none .d-lg-block`
Tersembunyi hanya di lg	`.d-lg-none .d-xl-block`
Tersembunyi hanya di xl	`.d-xl-none`
Tersembunyi hanya di xxl	`.d-xxl-none .d-xxl-block`
Terlihat di semua	`.d-block`
Hanya terlihat di xs	`.d-block .d-sm-none`
Hanya terlihat di sm	`.d-none .d-sm-block .d-md-none`
Hanya terlihat di md	`.d-none .d-md-block .d-lg-none`
Hanya terlihat di lg	`.d-none .d-lg-block .d-xl-none`
Hanya terlihat di xl	`.d-none .d-xl-block .d-xxl-none`
Hanya terlihat di xxl	`.d-none .d-xxl-block`

sembunyikan di lg dan layar yang lebih lebar

sembunyikan di layar yang lebih kecil dari lg

html

<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>

Tampilan dalam bentuk cetak

Ubah displaynilai elemen saat mencetak dengan kelas utilitas tampilan cetak kami. Termasuk dukungan untuk nilai yang sama dengan utilitas displayresponsif kami ..d-*

.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 tampilan dapat digabungkan.

Hanya Layar (Hanya Sembunyikan saat dicetak)

Cetak Saja (Sembunyikan di layar saja)

Sembunyikan hingga besar di layar, tetapi selalu tampilkan saat dicetak

html

<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>

Kelancangan

API Utilitas

Utilitas tampilan dideklarasikan di API utilitas kami di scss/_utilities.scss. Pelajari cara menggunakan API utilitas.

    "display": (
      responsive: true,
      print: true,
      property: display,
      class: d,
      values: inline inline-block block grid table table-row table-cell flex inline-flex none
    ),