in English

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

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

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

Како то ради

Промените вредност 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

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

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

Примери

д-инлине

хтмл

<div class="d-inline p-2 text-bg-primary">d-inline</div>
<div class="d-inline p-2 text-bg-dark">d-inline</div>

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

хтмл

<span class="d-block p-2 text-bg-primary">d-block</span>
<span class="d-block p-2 text-bg-dark">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-none .d-xxl-block`
Видљиво на свима	`.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`

сакрити на ЛГ и ширим екранима

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

хтмл

<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

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

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

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

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

хтмл

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