Source

Мүлктү көрсөтүү

Биздин дисплей утилиталары менен компоненттердин дисплей маанисин жана башкаларды тез жана тез которуштуруу. Кээ бир кеңири таралган баалуулуктарды колдоону, ошондой эле басып чыгарууда дисплейди башкаруу үчүн кошумчаларды камтыйт.

Бул кантип иштейт

Биздин жооп берүүчү дисплейдин пайдалуу класстары менен displayмүлктүн баасын өзгөртүңүз . Биз атайылап бардык мүмкүн болгон маанилердин бир бөлүгүн гана колдойбуз display. Класстарды ар кандай эффекттер үчүн айкалыштырса болот.

Белгилөө

дан баштап бардык үзүү чекиттерине тиешелүү дисплейдеги утилита класстарында аларда үзүлүү чекитинин аббревиатурасы жок. Себеби, ал класстар баштап жана андан жогору колдонулат, ошондуктан медиа суроо-талабы менен байланышпайт. Калган үзгүлтүккө учуроо чекиттери, бирок, үзгүлтүккө учуроо чекитинин аббревиатурасын камтыйт.xsxlmin-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;lgxl

Мисалдар

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, элементти орто жана чоң түзмөктөрдөн башка бардык экран өлчөмдөрү үчүн жашырасыз.

Screen Size Класс
Баарына жашырылган .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
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>