Source

Прикажи својство

Брзо и брзо промените вредност приказа компоненти и још много тога помоћу наших услужних програма за приказ. Укључује подршку за неке уобичајене вредности, као и неке додатке за контролу приказа приликом штампања.

Како то ради

Промените вредност displayсвојства помоћу наших реактивних услужних класа за приказ. Намерно подржавамо само подскуп свих могућих вредности за display. Класе се могу комбиновати за различите ефекте по потреби.

Нотација

Прикажи услужне класе које се примењују на све тачке прекида , од xsдо xl, немају скраћеницу за тачку прекида. То је зато што се те класе примењују од min-width: 0;и навише и стога нису везане медијским упитом. Преостале тачке прекида, међутим, укључују скраћеницу тачке прекида.

Као такве, класе се именују користећи формат:

.d-{value}заxs
.d-{breakpoint}-{value}за sm, md, lg, и xl.

Где је вредност једна од:

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

Медијски упити утичу на ширину екрана са датом тачком прекида или већом . На пример, .d-lg-noneсетови и display: none;на екранима.lgxl

Примери

д-инлине

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

д-блок д-блок

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

Сакривање елемената

За бржи развој прилагођен мобилним уређајима, користите прилагодљиве класе приказа за приказивање и скривање елемената по уређају. Избегавајте да правите потпуно различите верзије истог сајта, уместо тога сакријте елемент на одговарајући начин за сваку величину екрана.

Да бисте сакрили елементе, једноставно користите .d-noneкласу или једну од .d-{sm,md,lg,xl}-noneкласа за било коју варијацију екрана која реагује.

Да бисте приказали елемент само на датом интервалу величина екрана, можете комбиновати једну .d-*-noneкласу са .d-*-*класом, на пример .d-none .d-md-block .d-xl-none, сакрићете елемент за све величине екрана осим на средњим и великим уређајима.

Величина екрана	Класа
Скривено на свима	`.d-none`
Скривен само на кс	`.d-none .d-sm-block`
Скривен само на см	`.d-sm-none .d-md-block`
Скривен само на мд	`.d-md-none .d-lg-block`
Скривен само на лг	`.d-lg-none .d-xl-block`
Скривен само на кл	`.d-xl-none`
Видљиво на свима	`.d-block`
Видљиво само на кс	`.d-block .d-sm-none`
Видљиво само на см	`.d-none .d-sm-block .d-md-none`
Видљиво само на мд	`.d-none .d-md-block .d-lg-none`
Видљиво само на лг	`.d-none .d-lg-block .d-xl-none`
Видљиво само на кл	`.d-none .d-xl-block`

hide on screens wider than lg

сакрити на екранима мањим од ЛГ

<div class="d-lg-none">hide on screens wider than lg</div>
<div class="d-none d-lg-block">hide on screens smaller than lg</div>

Прикажи у штампи

Промените displayвредност елемената приликом штампања помоћу наших услужних класа за приказ за штампање. Укључује подршку за исте displayвредности као и наши прилагодљиви .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

Класе штампања и приказа могу се комбиновати.

Само екран (сакриј само при штампању)

Print Only (Hide on screen only)

Сакријте до великог на екрану, али увек прикажите на штампању

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