Die Display-Helfer erlauben es Ihnen die Anzeige von Inhalten zu steuern. Dazu gehört die bedingte Sichtbarkeit basierend auf dem aktuellen Viewport oder dem tatsächlichen Element-Anzeigetyp.
| Device | Code | Types | Range |
|---|---|---|---|
| Extra small | xs | small to large handset | < 600px |
| Small | sm | small to medium tablet | 600px > < 960px |
| Medium | md | large tablet to laptop | 960px > < 1264px* |
| Large | lg | desktop | 1264px* > < 1904px* |
| Extra large | xl | 4k and ultra-wides | > 1904px* |
| * -16px on Desktop | |||
Geben Sie die Elemente display-Eigenschaft an. Diese Klassen können auf alle Haltepunkte angewendet werden, von xs bis xl und haben keinen angegebenen Haltepunkt.
.d-{value}fürxs.d-{breakpoint}-{value}fürsm,md,lgundxl
Die Eigenschaft value ist eine von:
noneinlineinline-blockblocktabletable-celltable-rowflexinline-flex
Wenn ein spezieller Haltepunkt für eine Display-Helfer-Klasse gesetzt wird, wird er auf alle Bildschirmbreiten der Bezeichnung und höher angewendet. Zum Beispiel wird d-lg-flex auf lg und xl Großbildschirme angewandt.
Zeigt ein Element auf der Basis des aktuellen Viewport an. Haltepunkt-Utility-Klassen gelten immer von unten nach oben. Das bedeutet, wenn Sie .d-none setzen, wird es sich auf alle Breakpoints auswirken. Allerdings wird sich .d-md-none nur auf md und höher auswirken.
| Screen Size | Class |
|---|---|
| Hidden on all | .d-none |
| Hidden only on xs | .d-none .d-sm-flex |
| Hidden only on sm | .d-sm-none .d-md-flex |
| Hidden only on md | .d-md-none .d-lg-flex |
| Hidden only on lg | .d-lg-none .d-xl-flex |
| Hidden only on xl | .d-xl-none |
| Visible on all | .d-flex |
| Visible only on xs | .d-flex .d-sm-none |
| Visible only on sm | .d-none .d-sm-flex .d-md-none |
| Visible only on md | .d-none .d-md-flex .d-lg-none |
| Visible only on lg | .d-none .d-lg-flex .d-xl-none |
| Visible only on xl | .d-none .d-xl-flex |
Zusätzlich können Sie ein Element basierend auf dem aktuellen Viewport mit Hilfe von seitlichen Displayhelfer-Klassen anzeigen. Diese Klassen können im Format hidden-{breakpoint}-{condition} angewendet werden
Die condition wendet die Klassenbasis wie folgt an:
only- Versteckt das Element nur vonxsbisxlHaltepunktenand-down- Versteckt das Element an dem angegebenen Haltepunkt und abwärts vonsmbislgHaltepunkteand-up- Versteckt das Element an dem angegebenen Haltepunkt und aufwärts vonsmbislgHaltepunkte
Zusätzlich können Medientypen mit der only Bedingung gezielt angesprochen werden. Sowohl hidden-screen-only als auch hidden-print-only werden derzeit unterstützt.
Sie können auch die Anzeigeeigenschaften beim Drucken ändern.
.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
Druckwerkzeuge lassen sich auch mit "none print display"-Werkzeug kombinieren.
Use the d-sr utility classes to conditionally hide content on all devices except screen readers.
d-sr-onlyvisually hides elements but will still announce to screen readers.d-sr-only-focusablevisually hides an element until it is focused. This is useful when implementing skip links.
Bereit für mehr? Weiter lesen mit: