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

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

На овој страници

Како то ради

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

Нотација

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

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

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

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

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

Приказане вредности се могу променити променом $displaysпроменљиве и поновним компајлирањем СЦСС-а.

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

Примери

д-инлине

<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,xxl}-noneкласа за било коју варијацију екрана која реагује.

Да бисте приказали елемент само на датом интервалу величина екрана, можете комбиновати једну .d-*-noneкласу са .d-*-*класом, на пример .d-none .d-md-block .d-xl-none .d-xxl-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-xxl-block`
Скривен само на ккл	`.d-xxl-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 .d-xxl-none`
Видљиво само на ккл	`.d-none .d-xxl-block`

hide on lg and wider screens

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

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

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

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

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>

Сасс

Утилитиес АПИ

Услужни програми за приказ су декларисани у нашем АПИ-ју услужних програма у scss/_utilities.scss. Научите како да користите АПИ за услужне програме.

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