Langkau ke kandungan utama Langkau ke navigasi dokumen
Check
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 xxl, 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, lg, xldan xxl.

Di mana nilai adalah salah satu daripada:

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

Nilai paparan boleh diubah dengan menukar displaynilai yang ditakrifkan dalam $utilitiesdan menyusun semula SCSS.

Pertanyaan media mempengaruhi lebar skrin dengan titik putus yang diberikan atau lebih besar . Contohnya, .d-lg-noneditetapkan display: none;pada lg, xl, dan xxlskrin.

Contoh

d-sebaris
d-sebaris
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 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,xxl}-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-none .d-xxl-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
Tersembunyi hanya pada xxl .d-xxl-none .d-xxl-block
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 .d-xxl-none
Kelihatan hanya pada xxl .d-none .d-xxl-block
sembunyi pada skrin lg dan lebih luas
sembunyi pada skrin yang lebih kecil daripada 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>

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-grid
  • .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
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>

Sass

API Utiliti

Utiliti paparan diisytiharkan dalam API utiliti kami dalam scss/_utilities.scss. Ketahui cara menggunakan API utiliti.

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