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

Nibo iye jẹ ọkan ninu:

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

Awọn iye ifihan le yipada nipasẹ yiyipada $displaysoniyipada ati ṣ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 mejeji lgati awọn xliboju.

Awọn apẹẹrẹ

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>

d-ìdènà d-ìdènà

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

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}-nonekilasi fun eyikeyi iyatọ iboju idahun.

To show an element only on a given interval of screen sizes you can combine one .d-*-none class with a .d-*-* class, for example .d-none .d-md-block .d-xl-none will hide the element for all screen sizes except on medium and large devices.

Screen Size	Class
Hidden on all	`.d-none`
Hidden only on xs	`.d-none .d-sm-block`
Hidden only on sm	`.d-sm-none .d-md-block`
Hidden only on md	`.d-md-none .d-lg-block`
Hidden only on lg	`.d-lg-none .d-xl-block`
Hidden only on xl	`.d-xl-none`
Visible on all	`.d-block`
Visible only on xs	`.d-block .d-sm-none`
Visible only on sm	`.d-none .d-sm-block .d-md-none`
Visible only on md	`.d-none .d-md-block .d-lg-none`
Visible only on lg	`.d-none .d-lg-block .d-xl-none`
Visible only on xl	`.d-none .d-xl-block`

hide on lg and wider screens

hide on screens smaller than 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>

Display in print

Change the display value of elements when printing with our print display utility classes. Includes support for the same display values as our responsive .d-* utilities.

.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

The print and display classes can be combined.

Screen Only (Hide on print only)

Print Only (Hide on screen only)

Tọju to tobi loju iboju, ṣugbọn nigbagbogbo fihan lori titẹ

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