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;на екранима.lgxl

Примери

д-инлине
д-инлине 
<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>
д-блок д-блок 
<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
Скривен само на мд .d-md-none .d-lg-block
Скривен само на лг .d-lg-none .d-xl-block
Скривен само на кл .d-xl-none
Видљиво на свима .d-block
Видљиво само на кс .d-block .d-sm-none
Видљиво само на см .d-none .d-sm-block .d-md-none
Видљиво само на мд .d-none .d-md-block .d-lg-none
Видљиво само на лг .d-none .d-lg-block .d-xl-none
Видљиво само на кл .d-none .d-xl-block
hide on screens wider than 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>