Пређи на главни садржај Прескочи на навигацију докумената
Check
in English

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

Брзо и брзо промените вредност приказа компоненти и још много тога помоћу наших услужних програма за приказ. Укључује подршку за неке уобичајене вредности, као и неке додатке за контролу приказа приликом штампања.

Како то ради

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

Нотација

Прикажи услужне класе које се примењују на све тачке прекида , од xsдо xxl, немају скраћеницу за тачку прекида. То је зато што се те класе примењују од min-width: 0;и навише и стога нису везане медијским упитом. Преостале тачке прекида, међутим, укључују скраћеницу тачке прекида.

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

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

Где је вредност једна од:

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

Приказане вредности се могу променити променом displayвредности дефинисаних у $utilitiesСЦСС-у и поновним компајлирањем.

Медијски упити утичу на ширину екрана са датом тачком прекида или већом . На пример, .d-lg-noneпоставља display: none;на lg, xl, и xxlекране.

Примери

д-инлине
д-инлине
хтмл
<div class="d-inline p-2 text-bg-primary">d-inline</div>
<div class="d-inline p-2 text-bg-dark">d-inline</div>
д-блок д-блок
хтмл
<span class="d-block p-2 text-bg-primary">d-block</span>
<span class="d-block p-2 text-bg-dark">d-block</span>

Сакривање елемената

За бржи развој прилагођен мобилним уређајима, користите прилагодљиве класе приказа за приказивање и скривање елемената по уређају. Избегавајте да правите потпуно различите верзије истог сајта, уместо тога сакријте елементе на одговарајући начин за сваку величину екрана.

Да бисте сакрили елементе, једноставно користите .d-noneкласу или једну од .d-{sm,md,lg,xl,xxl}-noneкласа за било коју варијацију екрана која реагује.

Да бисте приказали елемент само на датом интервалу величина екрана, можете комбиновати једну .d-*-noneкласу са .d-*-*класом, на пример .d-none .d-md-block .d-xl-none .d-xxl-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-xxl-none .d-xxl-block
Видљиво на свима .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 .d-xxl-none
Видљиво само на ккл .d-none .d-xxl-block
сакрити на ЛГ и ширим екранима
сакрити на екранима мањим од ЛГ
хтмл
<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-grid
  • .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>

Сасс

Утилитиес АПИ

Услужни програми за приказ су декларисани у нашем АПИ-ју услужних програма у scss/_utilities.scss. Научите како да користите АПИ за услужне програме.

    "display": (
      responsive: true,
      print: true,
      property: display,
      class: d,
      values: inline inline-block block grid table table-row table-cell flex inline-flex none
    ),