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

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

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

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

Змяняйце значэнне 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

Адлюстраваныя значэнні можна змяніць шляхам змены $displaysзменнай і паўторнай кампіляцыі SCSS.

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

Прыклады

д-радковы

<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,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 .d-xxl-block`
Схаваны толькі на xxl	`.d-xxl-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 .d-xxl-none`
Бачны толькі на xxl	`.d-none .d-xxl-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-grid
.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>

Сас

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