Намоиши моликият
Бо ёрии утилитаҳои дисплейи мо арзиши намоиши ҷузъҳо ва ғайраро зуд ва зуд иваз кунед. Дастгирии баъзе арзишҳои маъмултарин ва инчунин баъзе изофаҳоро барои назорати намоиш ҳангоми чоп дар бар мегирад.
Он чӣ гуна кор мекунад
Бо синфҳои хидматрасонии намоишии мо арзиши 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
Қиматҳои намоишро тавассути тағир додани $displays
тағирёбанда ва аз нав тартиб додани SCSS тағир додан мумкин аст.
Дархостҳои медиавӣ ба паҳнои экран бо нуқтаи қатъии додашуда ё калонтар таъсир мерасонанд . Масалан, .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>
<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 |
Танҳо дар xs пинҳон аст | .d-none .d-sm-block |
Пинҳон танҳо дар sm | .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 |
<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-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>