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