Eigenschaft anzeigen
Schalten Sie den Anzeigewert von Komponenten schnell und reaktionsschnell um und mehr mit unseren Anzeigedienstprogrammen. Enthält Unterstützung für einige der gebräuchlicheren Werte sowie einige Extras zum Steuern der Anzeige beim Drucken.
Wie es funktioniert
Ändern Sie den Wert der display
Eigenschaft mit unseren Hilfsklassen für responsive Displays. Wir unterstützen absichtlich nur eine Teilmenge aller möglichen Werte für display
. Klassen können je nach Bedarf für verschiedene Effekte kombiniert werden.
Notation
Dienstprogrammklassen anzeigen, die für alle Breakpoints gelten , von xs
bis xxl
, haben keine Breakpoint-Abkürzung in sich. Dies liegt daran, dass diese Klassen von min-width: 0;
und nach oben angewendet werden und daher nicht an eine Medienabfrage gebunden sind. Die verbleibenden Breakpoints enthalten jedoch eine Breakpoint-Abkürzung.
Daher werden die Klassen nach folgendem Format benannt:
.d-{value}
zumxs
.d-{breakpoint}-{value}
fürsm
,md
,lg
,xl
, undxxl
.
Wo Wert ist einer von:
none
inline
inline-block
block
grid
table
table-cell
table-row
flex
inline-flex
Die Anzeigewerte können geändert werden, indem die $displays
Variable geändert und das SCSS neu kompiliert wird.
Die Medienabfragen wirken sich auf Bildschirmbreiten mit dem angegebenen Breakpoint oder größer aus . .d-lg-none
Setzt zum Beispiel display: none;
auf den Bildschirmen lg
, xl
und .xxl
Beispiele
<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>
Elemente verstecken
Verwenden Sie für eine schnellere mobilfreundliche Entwicklung responsive Anzeigeklassen zum Ein- und Ausblenden von Elementen nach Gerät. Vermeiden Sie es, völlig unterschiedliche Versionen derselben Website zu erstellen, sondern blenden Sie Elemente für jede Bildschirmgröße reaktionsschnell aus.
Um Elemente auszublenden, verwenden Sie einfach die .d-none
Klasse oder eine der .d-{sm,md,lg,xl,xxl}-none
Klassen für jede responsive Bildschirmvariante.
Um ein Element nur in einem bestimmten Intervall von Bildschirmgrößen anzuzeigen, können Sie eine .d-*-none
Klasse mit einer .d-*-*
Klasse kombinieren, z. B. .d-none .d-md-block .d-xl-none .d-xxl-none
wird das Element für alle Bildschirmgrößen außer auf mittleren und großen Geräten ausgeblendet.
Bildschirmgröße | Klasse |
---|---|
Auf allen versteckt | .d-none |
Nur auf xs versteckt | .d-none .d-sm-block |
Versteckt nur auf sm | .d-sm-none .d-md-block |
Nur auf md versteckt | .d-md-none .d-lg-block |
Versteckt nur auf lg | .d-lg-none .d-xl-block |
Versteckt nur auf xl | .d-xl-none .d-xxl-block |
Versteckt nur auf xxl | .d-xxl-none |
Auf allen sichtbar | .d-block |
Nur auf xs sichtbar | .d-block .d-sm-none |
Nur auf sm sichtbar | .d-none .d-sm-block .d-md-none |
Nur auf MD sichtbar | .d-none .d-md-block .d-lg-none |
Nur sichtbar auf lg | .d-none .d-lg-block .d-xl-none |
Nur auf xl sichtbar | .d-none .d-xl-block .d-xxl-none |
Nur auf XXL sichtbar | .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>
Anzeige im Druck
Ändern Sie den display
Wert von Elementen beim Drucken mit unseren Utility-Klassen für die Druckanzeige. Beinhaltet Unterstützung für die gleichen display
Werte wie unsere responsiven .d-*
Dienstprogramme.
.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
Die Druck- und Anzeigeklassen können kombiniert werden.
<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
Dienstprogramme-API
Anzeigedienstprogramme werden in unserer Hilfsprogramm-API in deklariert scss/_utilities.scss
. Erfahren Sie, wie Sie die Utilities-API verwenden.
"display": (
responsive: true,
print: true,
property: display,
class: d,
values: inline inline-block block grid table table-row table-cell flex inline-flex none
),