Source

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

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

Како работи

Променете ја вредноста на 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-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}-noneкласите за која било одговорна варијација на екранот.

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

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>