Vis egenskab
Skift hurtigt og responsivt visningsværdien af komponenter og mere med vores skærmværktøjer. Inkluderer understøttelse af nogle af de mere almindelige værdier, samt nogle ekstrafunktioner til styring af display ved udskrivning.
Skift værdien af display
ejendommen med vores responsive display utility-klasser. Vi understøtter med vilje kun en delmængde af alle mulige værdier for display
. Klasser kan kombineres til forskellige effekter efter behov.
Vis hjælpeklasser, der gælder for alle breakpoints , fra xs
til xl
, har ingen breakpoint-forkortelse i sig. Dette skyldes, at disse klasser anvendes fra min-width: 0;
og op, og derfor ikke er bundet af en medieforespørgsel. De resterende brudpunkter inkluderer dog en brudpunktforkortelse.
Som sådan er klasserne navngivet ved hjælp af formatet:
.d-{value}
tilxs
.d-{breakpoint}-{value}
forsm
,md
,lg
, ogxl
.
Hvor værdien er en af:
none
inline
inline-block
block
table
table-cell
table-row
flex
inline-flex
Medieforespørgslerne påvirker skærmbredder med det givne brudpunkt eller større . For eksempel .d-lg-none
sæt display: none;
på både lg
og xl
skærme.
<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>
<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>
For hurtigere mobilvenlig udvikling skal du bruge responsive displayklasser til at vise og skjule elementer efter enhed. Undgå at oprette helt forskellige versioner af det samme websted, skjul i stedet element responsivt for hver skærmstørrelse.
For at skjule elementer skal du blot bruge .d-none
klassen eller en af .d-{sm,md,lg,xl}-none
klasserne til enhver responsiv skærmvariation.
For kun at vise et element på et givet interval af skærmstørrelser kan du kombinere en .d-*-none
klasse med en .d-*-*
klasse, for eksempel .d-none .d-md-block .d-xl-none
skjuler elementet for alle skærmstørrelser undtagen på mellemstore og store enheder.
Skærmstørrelse | Klasse |
---|---|
Skjult på alle | .d-none |
Skjult kun på xs | .d-none .d-sm-block |
Skjult kun på sm | .d-sm-none .d-md-block |
Skjult kun på md | .d-md-none .d-lg-block |
Skjult kun på lg | .d-lg-none .d-xl-block |
Skjult kun på xl | .d-xl-none |
Synlig på alle | .d-block |
Kun synlig på xs | .d-block .d-sm-none |
Kan kun ses på sm | .d-none .d-sm-block .d-md-none |
Kun synlig på md | .d-none .d-md-block .d-lg-none |
Kan kun ses på lg | .d-none .d-lg-block .d-xl-none |
Kun synlig på xl | .d-none .d-xl-block |
<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>
Skift display
værdien af elementer, når du udskriver med vores udskriftsvisningsværktøjsklasser. Inkluderer støtte til de samme display
værdier som vores responsive .d-*
hjælpeprogrammer.
.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
Tryk- og displayklasserne kan kombineres.
<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>