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

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

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

Примери

d-inline
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 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-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>