Source

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.

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 xl, 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, dan xl.

Dimana nilai adalah salah satu dari:

  • none
  • inline
  • inline-block
  • block
  • table
  • table-cell
  • table-row
  • flex
  • inline-flex

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

Contoh

d-inline
d-inline
<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>
blok-d blok-d
<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>

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}-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-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
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
hide on screens wider than lg
sembunyikan di layar yang lebih kecil dari lg
<div class="d-lg-none">hide on screens wider than lg</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-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)
Print Only (Hide on screen only)
Sembunyikan hingga besar di layar, tetapi selalu tampilkan saat dicetak
<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>