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.

Sellel lehel

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 xxl, 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, xlja xxl.

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

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

Kuvatavaid väärtusi saab muuta $displaysmuutuja muutmise ja SCSS-i uuesti kompileerimisega.

Meediapäringud mõjutavad antud või suurema katkestuspunktiga ekraani laiust . Näiteks .d-lg-noneseab display: none;, lgja ekraanid xl.xxl

Näited

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 elemendid iga ekraanisuuruse jaoks reageerivalt.

Elementide peitmiseks kasutage lihtsalt .d-noneklassi või üht .d-{sm,md,lg,xl,xxl}-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-none .d-xxl-nonepeidab elemendi kõigi ekraanisuuruste jaoks, välja arvatud keskmise 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 .d-xxl-block`
Peidetud ainult xxl-l	`.d-xxl-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 .d-xxl-none`
Nähtav ainult xxl-l	`.d-none .d-xxl-block`

hide on lg and wider screens

peida ekraanidel, mis on väiksemad kui 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>

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

Sass

Utiliidide API

Kuva utiliidid on deklareeritud meie utiliitide API-s scss/_utilities.scss. Siit saate teada, kuidas utiliitide API-t kasutada.

    "display": (
      responsive: true,
      print: true,
      property: display,
      class: d,
      values: inline inline-block block grid table table-row table-cell flex inline-flex none
    ),