Gean nei haadynhâld Gean nei dokumintnavigaasje
in English

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