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.

Pada halaman ini

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 $displayspembolehubah dan 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

<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,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 .d-xxl-block`
Tersembunyi hanya pada xxl	`.d-xxl-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 .d-xxl-none`
Kelihatan hanya pada xxl	`.d-none .d-xxl-block`

hide on lg and wider screens

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

Print Only (Hide on screen only)

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>

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