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

Брзо и одговорно сменете ја вредноста на екранот на компонентите и повеќе со нашите алатки за приказ. Вклучува поддршка за некои од повообичаените вредности, како и некои додатоци за контролирање на екранот при печатење.

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

Како работи

Променете ја вредноста на 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и повторно компајлирање на SCSS.

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

Примери

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-блок

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>

Криење елементи

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

За да ги скриете елементите, едноставно користете ја .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`
Скриени само на xs	`.d-none .d-sm-block`
Скриено само на см	`.d-sm-none .d-md-block`
Скриено само на мд	`.d-md-none .d-lg-block`
Скриен само на lg	`.d-lg-none .d-xl-block`
Скриено само на xl	`.d-xl-none`
Скриено само на xxl	`.d-xxl-none .d-xxl-block`
Видливо на сите	`.d-block`
Видливо само на xs	`.d-block .d-sm-none`
Видливо само на см	`.d-none .d-sm-block .d-md-none`
Видливо само на мд	`.d-none .d-md-block .d-lg-none`
Видливо само на lg	`.d-none .d-lg-block .d-xl-none`
Видливо само на xl	`.d-none .d-xl-block .d-xxl-none`
Видливо само на xxl	`.d-none .d-xxl-block`

скриј на lg и пошироки екрани

скриј на екрани помали од 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>

Приказ во печатење

Променете ја 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

Класите за печатење и прикажување може да се комбинираат.

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

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

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

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>

Сас

Utilities API

Услугите за прикажување се декларирани во нашите API за комунални услуги во scss/_utilities.scss. Научете како да ги користите Utilities API.

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