in English

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

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

Как работи

Променете стойността на 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-вграден
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
скрий на lg и по-широки екрани
скрий на екрани по-малки от 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

Класовете за печат и дисплей могат да се комбинират.

Само екран (Скриване само при печат)
Само печат (Скриване само на екрана)
Скриване до големи на екрана, но винаги показване на печат 
<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>