Мүлктү көрсөтүү
Биздин дисплей утилиталары менен компоненттердин дисплей маанисин жана башкаларды тез жана тез которуштуруу. Кээ бир кеңири таралган баалуулуктарды колдоону, ошондой эле басып чыгарууда дисплейди башкаруу үчүн кошумчаларды камтыйт.
Бул кантип иштейт
Биздин жооп берүүчү дисплейдин пайдалуу класстары менен display
мүлктүн баасын өзгөртүңүз . Биз атайылап бардык мүмкүн болгон маанилердин бир бөлүгүн гана колдойбуз display
. Класстарды ар кандай эффекттер үчүн айкалыштырса болот.
Белгилөө
дан баштап бардык үзүү чекиттерине тиешелүү дисплейдеги утилита класстарында аларда үзүлүү чекитинин аббревиатурасы жок. Себеби, ал класстар баштап жана андан жогору колдонулат, ошондуктан медиа суроо-талабы менен байланышпайт. Калган үзгүлтүккө учуроо чекиттери, бирок, үзгүлтүккө учуроо чекитинин аббревиатурасын камтыйт.xs
xxl
min-width: 0;
Ошентип, класстар форматты колдонуу менен аталат:
.d-{value}
үчүнxs
.d-{breakpoint}-{value}
үчүнsm
,md
,lg
,xl
жанаxxl
.
Бул жерде баалуулук төмөнкүлөрдүн бири болуп саналат:
none
inline
inline-block
block
grid
table
table-cell
table-row
flex
inline-flex
$displays
Дисплейдин маанилери өзгөрмөлөрдү өзгөртүү жана SCSSти кайра компиляциялоо аркылуу өзгөртүлүшү мүмкүн .
Медиа сурамдары берилген үзүү чекити же андан чоңураак экрандын кеңдигине таасир этет . Мисалы, , , жана .d-lg-none
экрандарына орнотулат.display: none;
lg
xl
xxl
Мисалдар
<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,xxl}-none
класстардын бирин каалаган жооп берүүчү экрандын вариациясы үчүн колдонуңуз.
.d-*-none
Элементти экран өлчөмдөрүнүн берилген интервалында гана көрсөтүү үчүн бир классты класс менен айкалыштыра аласыз .d-*-*
, мисалы .d-none .d-md-block .d-xl-none .d-xxl-none
, элементти орто жана чоң түзмөктөрдөн башка бардык экран өлчөмдөрү үчүн жашырасыз.
Экран өлчөмү | Класс |
---|---|
Баарына жашырылган | .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-xxl-block |
xxlде гана жашырылган | .d-xxl-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 .d-xxl-none |
xxlде гана көрүнөт | .d-none .d-xxl-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-grid
.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>
Sass
Utilities 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
),