Мөлкәтне күрсәтү
Тиз һәм җаваплы компонентларның күрсәтү кыйммәтен һәм башкаларны күрсәтү ярдәме белән алыштырыгыз. Кайбер киң таралган кыйммәтләргә ярдәм, шулай ук бастырганда дисплейны контрольдә тоту өчен өстәмәләр кертә.
Ничек бу эшли
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>
<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 |
X-ларда гына яшерелгән | .d-none .d-sm-block |
Смда гына яшерелгән | .d-sm-none .d-md-block |
МДда гына яшерелгән | .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 |
X-ларда гына күренеп тора | .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 |
<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>
Сасс
Коммуналь 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
),