Source

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 displaypâ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 xsoant xl, 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}foar sm,,, en . md_lgxl

Wêr't wearde ien fan is:

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

De mediafragen beynfloedzje skermbreedtes mei it opjûne brekpunt of grutter . Bygelyks, .d-lg-nonesets display: none;op beide lgen xlskermen.

Foarbylden

d-ynline

<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-blok d-blok

<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 elemint responsyf foar elke skermgrutte.

Om eleminten te ferbergjen, brûk gewoan de .d-noneklasse as ien fan 'e .d-{sm,md,lg,xl}-noneklassen foar elke responsive skermfariaasje.

Om sjen litte in elemint allinnich op in opjûne ynterval fan skerm maten kinne jo kombinearje ien .d-*-noneklasse mei in .d-*-*klasse, bygelyks .d-none .d-md-block .d-xl-nonesil 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`
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`

hide on screens wider than lg

ferbergje op skermen lytser as 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 yn print

Feroarje de displaywearde fan eleminten by it printsjen mei ús klassen foar printdisplayprogramma's. Omfettet stipe foar deselde displaywearden as ús responsive .d-*nutsbedriuwen.

.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

De print- en displayklassen kinne wurde kombinearre.

Allinnich skerm (allinich op print ferbergje)

Print Only (Hide on screen only)

Ferbergje oant grut op skerm, mar lit altyd sjen op print

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