Rekọja si akoonu akọkọ Rekọja si lilọ kiri awọn docs
Check
in English

Ifihan ohun ini

Ni kiakia ati ni idahun yipada iye ifihan ti awọn paati ati diẹ sii pẹlu awọn ohun elo ifihan wa. Pẹlu atilẹyin fun diẹ ninu awọn iye ti o wọpọ, bakanna bi diẹ ninu awọn afikun fun ṣiṣakoso ifihan nigba titẹ sita.

Bawo ni o ṣe n ṣiṣẹ

Yi iye ohun- displayini pada pẹlu awọn kilasi IwUlO ifihan idahun wa. A ṣe atilẹyin pẹlu ipinnu nikan ipin kan ti gbogbo awọn iye to ṣeeṣe fun display. Awọn kilasi le ṣe idapo fun awọn ipa oriṣiriṣi bi o ṣe nilo.

Akọsilẹ

Ṣe afihan awọn kilasi ohun elo ti o kan si gbogbo awọn aaye fifọ , lati xssi xxl, ko ni abbreviation breakpoint ninu wọn. Eyi jẹ nitori awọn kilasi wọnyẹn lo lati min-width: 0;ati si oke, ati nitorinaa ko ṣe adehun nipasẹ ibeere media kan. Awọn aaye isinmi ti o ku, sibẹsibẹ, pẹlu abbreviation kan breakpoint.

Bii iru bẹẹ, awọn kilasi ni orukọ ni lilo ọna kika:

  • .d-{value}funxs
  • .d-{breakpoint}-{value}fun sm, md, lg, xlati xxl.

Nibo iye jẹ ọkan ninu:

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

Awọn iye ifihan le ṣe paarọ nipasẹ yiyipada awọn displayiye asọye ninu $utilitiesati ṣiṣatunṣe SCSS.

Awọn ibeere media ni ipa lori awọn iwọn iboju pẹlu aaye fifọ ti a fun tabi tobi julọ . Fun apẹẹrẹ, .d-lg-noneṣeto display: none;lori lg, xl, ati xxlawọn iboju.

Awọn apẹẹrẹ

d-inline
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>
d-ìdènà d-ìdènà
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>

Awọn eroja pamọ

Fun idagbasoke ore-alagbeka yiyara, lo awọn kilasi ifihan idahun fun iṣafihan ati fifipamọ awọn eroja nipasẹ ẹrọ. Yago fun ṣiṣẹda awọn ẹya ti o yatọ patapata ti aaye kanna, dipo tọju awọn eroja ni idahun fun iwọn iboju kọọkan.

Lati tọju awọn eroja nirọrun lo .d-nonekilasi tabi ọkan ninu awọn .d-{sm,md,lg,xl,xxl}-nonekilasi fun eyikeyi iyatọ iboju idahun.

Lati ṣafihan ipin kan nikan ni aarin aarin ti awọn iwọn iboju o le darapọ .d-*-nonekilasi kan pẹlu .d-*-*kilasi kan, fun apẹẹrẹ .d-none .d-md-block .d-xl-none .d-xxl-noneyoo tọju nkan naa fun gbogbo awọn iwọn iboju ayafi lori awọn ẹrọ alabọde ati nla.

Iwọn iboju Kilasi
Farasin lori gbogbo .d-none
Farasin nikan lori xs .d-none .d-sm-block
Farasin nikan lori sm .d-sm-none .d-md-block
Farasin nikan lori md .d-md-none .d-lg-block
Farasin nikan lori lg .d-lg-none .d-xl-block
Farasin nikan lori xl .d-xl-none
Farasin nikan lori xxl .d-xxl-none .d-xxl-block
Han lori gbogbo .d-block
O han nikan lori xs .d-block .d-sm-none
O han nikan lori sm .d-none .d-sm-block .d-md-none
Ti o han nikan lori md .d-none .d-md-block .d-lg-none
O han nikan lori lg .d-none .d-lg-block .d-xl-none
O han nikan lori xl .d-none .d-xl-block .d-xxl-none
O han nikan lori xxl .d-none .d-xxl-block
tọju lori lg ati awọn iboju gbooro
tọju loju iboju ti o kere ju 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>

Ṣe afihan ni titẹ

Yi displayiye awọn eroja pada nigba titẹ pẹlu awọn kilasi IwUlO ifihan titẹjade. Pẹlu atilẹyin fun awọn displayiye kanna bi awọn ohun elo idahun wa .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

Awọn kilasi titẹjade ati ifihan le ni idapo.

Iboju Nikan (Fipamọ lori titẹ nikan)
Tẹjade Nikan (Tọju loju iboju nikan)
Tọju to tobi loju iboju, ṣugbọn nigbagbogbo fihan lori titẹ
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 Awọn ohun elo

Awọn ohun elo ifihan jẹ ikede ni API awọn ohun elo wa ni scss/_utilities.scss. Kọ ẹkọ bi o ṣe le lo API awọn ohun elo.

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