Показване на собственост

Бързо и отзивчиво превключвайте показваната стойност на компонентите и други с нашите помощни програми за показване. Включва поддръжка за някои от по-често срещаните стойности, както и някои екстри за контролиране на дисплея при печат.

На тази страница

Как работи

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

<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`
Скрити само на хс	`.d-none .d-sm-block`
Скрити само на см	`.d-sm-none .d-md-block`
Скрити само на md	`.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`
Вижда се само на md	`.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>

дързък

API за помощни програми

Помощните програми за показване са декларирани в нашия API за помощни програми в scss/_utilities.scss. Научете как да използвате 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
    ),