Source

Kuva omadus

Lülitage komponentide kuvaväärtust ja muudki kiiresti ja reageerivalt meie kuvautiliitidega. Sisaldab tuge mõnele enamlevinud väärtusele, aga ka mõningaid lisasid printimise ajal kuva juhtimiseks.

Kuidas see töötab

Muutke displaykinnisvara väärtust meie tundlike kuvatavate kasulike klasside abil. Toetame sihilikult ainult kõigi võimalike väärtuste alamhulka display. Klassid saab kombineerida erinevate efektide saamiseks vastavalt vajadusele.

Märge

Kuva kasulikud klassid, mis kehtivad kõikidele murdepunktidele alates xskuni xl, ei sisalda murdepunktide lühendit. Selle põhjuseks on asjaolu, et neid klasse rakendatakse alates min-width: 0;ja üles ning seega ei seo neid meediumipäring. Ülejäänud murdepunktid sisaldavad aga katkestuspunktide lühendit.

Sellisena nimetatakse klassid järgmises vormingus:

  • .d-{value}jaoksxs
  • .d-{breakpoint}-{value}jaoks sm, md, lg, ja xl.

Kui väärtus on üks järgmistest:

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

Meediapäringud mõjutavad ekraanilaiust antud või suurema katkestuspunktiga . Näiteks .d-lg-nonekomplektid display: none;nii lgja xlekraanidel.

Näited

d-inline
d-inline 
<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-plokk d-plokk 
<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>

Elementide peitmine

Kiiremaks mobiilisõbralikuks arendamiseks kasutage seadmete kaupa elementide kuvamiseks ja peitmiseks responsiivseid kuvaklasse. Vältige samast saidist täiesti erinevate versioonide loomist, selle asemel peitke element iga ekraanisuuruse jaoks reageerivalt.

Elementide peitmiseks kasutage lihtsalt .d-noneklassi või üht .d-{sm,md,lg,xl}-noneklassi mis tahes tundliku ekraanivariatsiooni jaoks.

Elemendi kuvamiseks ainult teatud ekraanisuuruste intervallil saate ühendada ühe .d-*-noneklassi .d-*-*klassiga, näiteks .d-none .d-md-block .d-xl-nonepeidab elemendi kõigi ekraanisuuruste jaoks, välja arvatud keskmiste ja suurte seadmete puhul.

Ekraani suurus Klass
Kõigile peidetud .d-none
Peidetud ainult xs-il .d-none .d-sm-block
Peidetud ainult sm .d-sm-none .d-md-block
Peidetud ainult md-l .d-md-none .d-lg-block
Peidetud ainult lg-l .d-lg-none .d-xl-block
Peidetud ainult xl-l .d-xl-none
Nähtav kõigil .d-block
Nähtav ainult xs-il .d-block .d-sm-none
Nähtav ainult sm-l .d-none .d-sm-block .d-md-none
Nähtav ainult md-l .d-none .d-md-block .d-lg-none
Nähtav ainult lg-l .d-none .d-lg-block .d-xl-none
Nähtav ainult xl-l .d-none .d-xl-block
hide on screens wider than lg
peida ekraanidel, mis on väiksemad kui 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>

Kuva trükis

Muutke displayelementide väärtust printimisel meie prindikuvamise utiliidiklassidega. Sisaldab tuge samadele displayväärtustele kui meie reageerivad .d-*utiliidid.

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

Trüki- ja kuvamisklasse saab kombineerida.

Ainult ekraan (peida ainult printimisel)
Print Only (Hide on screen only)
Peida ekraanil kuni suurelt, kuid kuva alati prindituna 
<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>