in English

Paparkan harta

Togol nilai paparan komponen dan banyak lagi dengan pantas dan responsif dengan utiliti paparan kami. Termasuk sokongan untuk beberapa nilai yang lebih biasa, serta beberapa tambahan untuk mengawal paparan semasa mencetak.

Bagaimana ia berfungsi

Tukar nilai displayharta dengan kelas utiliti paparan responsif kami. Kami sengaja menyokong hanya subset daripada semua nilai yang mungkin untuk display. Kelas boleh digabungkan untuk pelbagai kesan yang anda perlukan.

Notasi

Paparkan kelas utiliti yang digunakan untuk semua titik putus , dari xshingga xl, tiada singkatan titik putus di dalamnya. Ini kerana kelas tersebut digunakan dari min-width: 0;dan ke atas, dan oleh itu tidak terikat dengan pertanyaan media. Walau bagaimanapun, titik putus yang selebihnya termasuk singkatan titik putus.

Oleh itu, kelas dinamakan menggunakan format:

  • .d-{value}untukxs
  • .d-{breakpoint}-{value}untuk sm, md, lgdan xl.

Di mana nilai adalah salah satu daripada:

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

Nilai paparan boleh diubah dengan menukar $displayspembolehubah dan menyusun semula SCSS.

Pertanyaan media mempengaruhi lebar skrin dengan titik putus yang diberikan atau lebih besar . Contohnya, .d-lg-noneset display: none;pada kedua -duanya lgdan xlskrin.

Contoh

d-sebaris
d-sebaris 
<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 pembangunan mesra mudah alih yang lebih pantas, gunakan kelas paparan responsif untuk menunjukkan dan menyembunyikan elemen mengikut peranti. Elakkan membuat versi yang sama sekali berbeza untuk tapak yang sama, sebaliknya sembunyikan elemen secara responsif untuk setiap saiz skrin.

Untuk menyembunyikan elemen hanya gunakan .d-nonekelas atau salah satu .d-{sm,md,lg,xl}-nonekelas untuk sebarang variasi skrin responsif.

Untuk menunjukkan elemen hanya pada selang saiz skrin tertentu, anda boleh menggabungkan satu .d-*-nonekelas dengan .d-*-*kelas, contohnya .d-none .d-md-block .d-xl-noneakan menyembunyikan elemen untuk semua saiz skrin kecuali pada peranti sederhana dan besar.

Saiz skrin Kelas
Tersembunyi pada semua .d-none
Tersembunyi hanya pada xs .d-none .d-sm-block
Tersembunyi hanya pada sm .d-sm-none .d-md-block
Tersembunyi hanya pada md .d-md-none .d-lg-block
Tersembunyi hanya pada lg .d-lg-none .d-xl-block
Tersembunyi hanya pada xl .d-xl-none
Kelihatan pada semua .d-block
Kelihatan hanya pada xs .d-block .d-sm-none
Kelihatan hanya pada sm .d-none .d-sm-block .d-md-none
Kelihatan hanya pada md .d-none .d-md-block .d-lg-none
Kelihatan pada lg .d-none .d-lg-block .d-xl-none
Kelihatan hanya pada xl .d-none .d-xl-block
sembunyi pada skrin lg dan lebih luas
sembunyi pada skrin yang lebih kecil daripada lg 
<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>

Paparkan dalam cetakan

Tukar displaynilai elemen semasa mencetak dengan kelas utiliti paparan cetakan kami. Termasuk sokongan untuk nilai yang sama seperti utiliti 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 cetakan dan paparan boleh digabungkan.

Skrin Sahaja (Sembunyikan pada cetakan sahaja)
Cetak Sahaja (Sembunyikan pada skrin sahaja)
Sembunyikan sehingga besar pada skrin, tetapi sentiasa tunjukkan pada cetakan 
<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>