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

Вредностите на екранот може да се променат со менување на$displays променливата и прекомпајлирање на SCSS.

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

Примери

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

<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`
Скриени само на 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 .d-xxl-block`
Скриено само на xxl	`.d-xxl-none`
Видливо на сите	`.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`

hide on lg and wider screens

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

Сас

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