Wie man Elemente mit Bootstrap4 zeigt und versteckt
Für eine schnellere Entwicklung mobiler Geräte verwenden Sie responsive Anzeigeklassen, um Elemente nach Gerät anzuzeigen und auszublenden. Vermeide es, komplett verschiedene Versionen derselben Seite zu erstellen, sondern verstecke Elemente entsprechend für jede Bildschirmgröße.
Um Elemente zu verstecken, verwenden Sie einfach.d-noneKlasse oder eine davon.d-{sm,md,lg,xl}-keineKlasse, um alle reaktionsschnellen Bildschirmänderungen vorzunehmen.
Um Elemente nur auf einem bestimmten Bildschirmgrößenintervall anzuzeigen, kann man eines festlegen.d-*-noneKlasse und eins.d-*-*Klassen werden gruppiert, zum Beispiel,.d-none .d-md-block .d-xl-noneElemente aller Bildschirmgrößen werden versteckt, außer bei mittelgroßen und großen Geräten.
Renderings:
Zeigen/verstecken für Breakpoint und Down:
- Hidden-xs-down (hidden-xs) = d-nichts d-sm-block
- hidden-sm-down (hidden-sm hidden-xs) = d-none d-md-block
- hidden-md-down (hidden-md hidden-sm hidden-xs) = d-none d-lg-block
- hidden-lg-down = d-none d-xl-block
- Hidden-XL-Down (n/a 3.x) = D-None (wie Hidden)
Zeigen/verstecken für den Breakpoint und höher:
- hidden-xs-up = d-none (wie hidden)
- hidden-sm-up = d-sm-none
- hidden-md-up = d-md-none
- hidden-lg-up = d-lg-none
- hidden-xl-up (n/a 3.x) = d-xl-none
Nur für einen einzigen Breakpoint anzeigen/ausblenden:
- hidden-xs (nur) = d-none d-sm-block (wie hidden-xs-down)
- hidden-sm (nur) = d-block d-sm-none d-md-block
- hidden-md (nur) = d-block d-md-none d-lg-block
- hidden-lg (nur) = d-block d-lg-none d-xl-block
- hidden-xl (n/a 3.x) = d-block d-xl-none
- visible-xs (nur) = d-block d-sm-none
- visible-sm (nur) = d-none d-sm-block d-md-none
- visible-md (nur) = d-none d-md-block d-lg-none
- visible-lg (nur) = d-none d-lg-block d-xl-none
- sichtbar-xl (n/a 3.x) = d-nichts d-xl-block
Visualisierung:
Referenzlinks:https://getbootstrap.com/docs/4.0/utilities/display/
|
Veröffentlicht am 04.04.2019 10:46:25
|
|
|
|
