Уласцівасць адлюстравання
Хутка і хутка пераключайце адлюстраванне значэнняў кампанентаў і многае іншае з дапамогай нашых утыліт дысплея. Уключае падтрымку некаторых найбольш распаўсюджаных значэнняў, а таксама некаторыя дадатковыя функцыі для кіравання адлюстраваннем пры друку.
Як гэта працуе
Змяняйце значэнне 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
Адлюстраваныя значэнні можна змяніць шляхам змены $displays
зменнай і перакампіляцыі SCSS.
Медыя-запыты ўплываюць на шырыню экрана з зададзенай кропкай разрыву або большай . Напрыклад, .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 |
Схаваны толькі на хз | .d-none .d-sm-block |
Схаваны толькі на гл | .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 |
<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-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>