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

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

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

Змяняйце значэнне 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;на абодвух lgі xlэкранах.

Прыклады

д-радковы

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

hide on screens wider than lg

схаваць на экранах, меншых за 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>