Visa egendom
Växla snabbt och lyhört visningsvärdet för komponenter och mer med våra skärmverktyg. Innehåller stöd för några av de vanligare värdena, samt några extrafunktioner för att styra displayen vid utskrift.
Hur det fungerar
Ändra värdet på display
fastigheten med våra responsiva visningsverktygsklasser. Vi stöder avsiktligt endast en delmängd av alla möjliga värden för display
. Klasser kan kombineras för olika effekter efter behov.
Notation
Visa verktygsklasser som gäller för alla brytpunkter , från xs
till xl
, har ingen brytpunktsförkortning i sig. Detta beror på att dessa klasser tillämpas uppifrån min-width: 0;
och upp och därför inte är bundna av en mediefråga. De återstående brytpunkterna inkluderar dock en brytpunktsförkortning.
Som sådan namnges klasserna med formatet:
.d-{value}
förxs
.d-{breakpoint}-{value}
försm
,md
,lg
ochxl
.
Där värdet är ett av:
none
inline
inline-block
block
table
table-cell
table-row
flex
inline-flex
Visningsvärdena kan ändras genom att ändra $displays
variabeln och kompilera om SCSS.
Mediefrågorna påverkar skärmbredder med den givna brytpunkten eller större . Till exempel .d-lg-none
set display: none;
på både lg
och xl
skärmar.
Exempel
Dölja element
För snabbare mobilvänlig utveckling, använd responsiva displayklasser för att visa och dölja element per enhet. Undvik att skapa helt olika versioner av samma webbplats, dölj istället element responsivt för varje skärmstorlek.
För att dölja element använd helt enkelt .d-none
klassen eller en av .d-{sm,md,lg,xl}-none
klasserna för alla responsiva skärmvarianter.
To show an element only on a given interval of screen sizes you can combine one .d-*-none
class with a .d-*-*
class, for example .d-none .d-md-block .d-xl-none
will hide the element for all screen sizes except on medium and large devices.
Screen Size | Class |
---|---|
Hidden on all | .d-none |
Hidden only on xs | .d-none .d-sm-block |
Hidden only on sm | .d-sm-none .d-md-block |
Hidden only on md | .d-md-none .d-lg-block |
Hidden only on lg | .d-lg-none .d-xl-block |
Hidden only on xl | .d-xl-none |
Visible on all | .d-block |
Visible only on xs | .d-block .d-sm-none |
Visible only on sm | .d-none .d-sm-block .d-md-none |
Visible only on md | .d-none .d-md-block .d-lg-none |
Visible only on lg | .d-none .d-lg-block .d-xl-none |
Visible only on xl | .d-none .d-xl-block |
Display in print
Change the display
value of elements when printing with our print display utility classes. Includes support for the same display
values as our responsive .d-*
utilities.
.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
The print and display classes can be combined.