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.
Hvordan det virker
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.
Notation
Vis hjælpeklasser, der gælder for alle breakpoints , fra xs
til xxl
, 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
,xl
ogxxl
.
Hvor værdien er en af:
none
inline
inline-block
block
grid
table
table-cell
table-row
flex
inline-flex
Visningsværdierne kan ændres ved at ændre $displays
variablen og genkompilere SCSS.
Medieforespørgslerne påvirker skærmbredder med det givne brudpunkt eller større . For eksempel .d-lg-none
indstiller display: none;
til lg
, xl
, og xxl
skærme.
Eksempler
<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>
Skjul elementer
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 elementer 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,xxl}-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 .d-xxl-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 .d-xxl-block |
Skjult kun på xxl | .d-xxl-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 .d-xxl-none |
Kun synlig på xxl | .d-none .d-xxl-block |
<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>
Vises på tryk
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-grid
.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>
Sass
Hjælpeprogrammer API
Visningsværktøjer er deklareret i vores hjælpeprogrammer API i scss/_utilities.scss
. Lær, hvordan du bruger utilities API.
"display": (
responsive: true,
print: true,
property: display,
class: d,
values: inline inline-block block grid table table-row table-cell flex inline-flex none
),