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

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

Как работи

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

Нотация

Показване на полезни класове, които се прилагат за всички точки на прекъсване , от xsдо xl, нямат съкращение на точката на прекъсване в тях. Това е така, защото тези класове се прилагат от min-width: 0;и нагоре и по този начин не са обвързани с медийна заявка. Останалите точки на прекъсване обаче включват съкращение на точката на прекъсване.

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

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

Където стойността е едно от:

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

Медийните заявки влияят върху ширините на екрана с дадената точка на прекъсване или по-голяма . Например, .d-lg-noneкомплекти display: none;на двете lgи xlекрани.

Примери

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}-noneкласовете за всяка вариация на реагиращ екран.

За да покажете елемент само на даден интервал от размери на екрана, можете да комбинирате един .d-*-noneклас с .d-*-*клас, например .d-none .d-md-block .d-xl-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-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`

hide on screens wider than lg

скрий на екрани по-малки от lg

<div class="d-lg-none">hide on screens wider than lg</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-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>