Мөлкәтне күрсәтү
Тиз һәм җаваплы компонентларның күрсәтү кыйммәтен һәм башкаларны күрсәтү ярдәме белән алыштырыгыз. Кайбер киң таралган кыйммәтләргә ярдәм, шулай ук бастырганда дисплейны контрольдә тоту өчен өстәмәләр кертә.
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>
<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 |
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-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 |
<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
Басма һәм күрсәтү класслары берләштерелергә мөмкин.
<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>