Уласцівасць адлюстравання

Хутка і хутка пераключайце адлюстраванне значэнняў кампанентаў і многае іншае з дапамогай нашых утыліт дысплея. Уключае падтрымку некаторых найбольш распаўсюджаных значэнняў, а таксама некаторыя дадатковыя функцыі для кіравання адлюстраваннем пры друку.

На гэтай старонцы

Як гэта працуе

Змяняйце значэнне 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значэнняў, вызначаных у $utilitiesSCSS і перакампіляцыі.

Медыя-запыты ўплываюць на шырыню экрана з зададзенай кропкай разрыву або большай . Напрыклад, .d-lg-noneнаборы display: none;на экранах lg, xlі .xxl

Прыклады

д-радковы

html

<div class="d-inline p-2 text-bg-primary">d-inline</div>
<div class="d-inline p-2 text-bg-dark">d-inline</div>

d-блок d-блок

html

<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`
Схаваны толькі на md	`.d-md-none .d-lg-block`
Схаваны толькі на lg	`.d-lg-none .d-xl-block`
Схаваны толькі на xl	`.d-xl-none`
Схаваны толькі на xxl	`.d-xxl-none .d-xxl-block`
Відаць на ўсіх	`.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 .d-xxl-none`
Бачны толькі на xxl	`.d-none .d-xxl-block`

схаваць на экранах LG і шырэй

схаваць на экранах, меншых за lg

html

<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

Класы друку і дысплея можна камбінаваць.

Толькі экран (схаваць толькі пры друку)

Толькі друк (схаваць толькі на экране)

Схаваць да вялікага памеру на экране, але заўсёды паказваць у друку

html

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

Сас

API утыліт

Утыліты адлюстравання заяўлены ў нашым API утыліт у scss/_utilities.scss. Даведайцеся, як выкарыстоўваць API утыліт.

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