Eigenskip werjaan
Skeakelje fluch en responsyf de werjeftewearde fan komponinten en mear mei ús display-hulpprogramma's. Omfettet stipe foar guon fan 'e meast foarkommende wearden, lykas ek wat ekstra's foar it kontrolearjen fan werjefte by it printsjen.
Hoe't it wurket
Feroarje de wearde fan it display
pân mei ús responsive display-nutsklassen. Wy stypje doelbewust mar in subset fan alle mooglike wearden foar display
. Klassen kinne wurde kombinearre foar ferskate effekten as jo nedich hawwe.
Notaasje
Toan nutsklassen dy't jilde foar alle brekpunten , fan xs
oant xxl
, hawwe gjin brekpuntôfkoarting yn har. Dit komt omdat dy klassen wurde tapast fan min-width: 0;
en omheech, en dus binne net bûn troch in media query. De oerbleaune brekpunten befetsje lykwols in brekpuntôfkoarting.
As sadanich wurde de klassen neamd mei it formaat:
.d-{value}
foarxs
.d-{breakpoint}-{value}
foarsm
,md
,lg
,xl
enxxl
.
Wêr't wearde ien fan is:
none
inline
inline-block
block
grid
table
table-cell
table-row
flex
inline-flex
De werjeftewearden kinne wurde feroare troch de $displays
fariabele te feroarjen en de SCSS opnij te kompilearjen.
De mediafragen beynfloedzje skermbreedtes mei it opjûne brekpunt of grutter . Bygelyks, .d-lg-none
sets display: none;
op lg
, xl
, en xxl
skermen.
Foarbylden
<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>
Hiding eleminten
Foar rapper mobylfreonlike ûntwikkeling, brûk responsive displayklassen foar it sjen en ferbergjen fan eleminten per apparaat. Foarkom it meitsjen fan folslein ferskillende ferzjes fan deselde side, ferbergje ynstee eleminten responsyf foar elke skermgrutte.
Om eleminten te ferbergjen, brûk gewoan de .d-none
klasse as ien fan 'e .d-{sm,md,lg,xl,xxl}-none
klassen foar elke responsive skermfariaasje.
Om sjen litte in elemint allinnich op in opjûne ynterval fan skerm maten kinne jo kombinearje ien .d-*-none
klasse mei in .d-*-*
klasse, bygelyks .d-none .d-md-block .d-xl-none .d-xxl-none
sil ferbergje it elemint foar alle skerm maten útsein op middelgrutte en grutte apparaten.
Skermôfmjitting | Klasse |
---|---|
Ferburgen op alles | .d-none |
Ferburgen allinich op xs | .d-none .d-sm-block |
Ferburgen allinnich op sm | .d-sm-none .d-md-block |
Ferburgen allinnich op md | .d-md-none .d-lg-block |
Ferburgen allinnich op lg | .d-lg-none .d-xl-block |
Ferburgen allinich op xl | .d-xl-none .d-xxl-block |
Ferburgen allinich op xxl | .d-xxl-none |
Sjoch op alle | .d-block |
Allinnich sichtber op xs | .d-block .d-sm-none |
Allinne sichtber op sm | .d-none .d-sm-block .d-md-none |
Allinne sichtber op md | .d-none .d-md-block .d-lg-none |
Allinnich sichtber op lg | .d-none .d-lg-block .d-xl-none |
Allinne sichtber op xl | .d-none .d-xl-block .d-xxl-none |
Allinnich sichtber op 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 yn print
Feroarje de display
wearde fan eleminten by it printsjen mei ús klassen foar printdisplayprogramma's. Omfettet stipe foar deselde display
wearden as ús responsive .d-*
nutsbedriuwen.
.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
De print- en displayklassen kinne wurde kombinearre.
<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
Display utilities wurde ferklearre yn ús utilities API yn scss/_utilities.scss
. Learje hoe't jo de utilities API brûke.
"display": (
responsive: true,
print: true,
property: display,
class: d,
values: inline inline-block block grid table table-row table-cell flex inline-flex none
),