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.

Op dizze side

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 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}foar sm, md, lg, xlen xxl.

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 $displaysfariabele te feroarjen en de SCSS opnij te kompilearjen.

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

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

Om eleminten te ferbergjen, brûk gewoan de .d-noneklasse as ien fan 'e .d-{sm,md,lg,xl,xxl}-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-none .d-xxl-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 .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`

hide on lg and wider screens

ferbergje op skermen lytser as lg

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

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>

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