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

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

Бу биттә

Ничек бу эшли

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

Искәрмә

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

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

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

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

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

Дисплей кыйммәтләре SCSS белән displayбилгеләнгән кыйммәтләрне үзгәртеп үзгәртелергә мөмкин .$utilities

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

Мисаллар

d-inline

html

<div class="d-inline p-2 text-bg-primary">d-inline</div>
<div class="d-inline p-2 text-bg-dark">d-inline</div>

d-блок d-блок

html

<span class="d-block p-2 text-bg-primary">d-block</span>
<span class="d-block p-2 text-bg-dark">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`
Xxlда гына яшерелгән	`.d-xxl-none .d-xxl-block`
Барысына да күренеп тора	`.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`

lg һәм киң экраннарда яшерегез

lg-тан кечерәк экраннарда яшерегез

html

<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

Басма һәм күрсәтү класслары берләштерелергә мөмкин.

Экран гына (Басмада гына яшерегез)

Бары тик бастырыгыз (Экранда гына яшерегез)

Экранда зурга кадәр яшерегез, ләкин һәрвакыт басмада күрсәтегез

html

<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
    ),