Source

Мөлкәтне күрсәтү

Тиз һәм җаваплы компонентларның күрсәтү кыйммәтен һәм башкаларны күрсәтү ярдәме белән алыштырыгыз. Кайбер киң таралган кыйммәтләргә ярдәм, шулай ук ​​бастырганда дисплейны контрольдә тоту өчен өстәмәләр кертә.

Ничек бу эшли

displayМөлкәтнең кыйммәтен безнең җаваплы күрсәтү класслары белән үзгәртегез . Без белә торып барлык мөмкин булган кыйммәтләрнең бер өлешен генә хуплыйбыз display. Дәресләр кирәк булганда төрле эффектлар өчен берләштерелергә мөмкин.

Искәрмә

Барлык өзек нокталарынаxs кагылган файдалы классларны күрсәтегез , xlаларда, кыскартулар юк. Чөнки ул класслар өстән- min-width: 0;өстән кулланыла, һәм шулай итеп медиа соравы белән бәйләнешле түгел. Калган өзекләр, ләкин кыскартуны үз эченә ала.

Шулай итеп, класслар формат ярдәмендә атала:

  • .d-{value}өченxs
  • .d-{breakpoint}-{value}өчен sm,,, һәм . md_lgxl

Кайда кыйммәт :

  • none
  • inline
  • inline-block
  • block
  • table
  • table-cell
  • table-row
  • flex
  • inline-flex

Медиа соравы бирелгән киңлек яки зуррак булган экран киңлекләренә эффект . Мәсәлән , .d-lg-noneикесендә display: none;дә lg, xlэкраннарда да.

Мисаллар

d-inline
d-inline 
<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
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
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>