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.

Auf dieser Seite

Wie es funktioniert

Ändern Sie den Wert der displayEigenschaft 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 xsbis 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ür sm, md, lg, xl, und xxl.

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 $displaysVariable geändert und das SCSS neu kompiliert wird.

Die Medienabfragen wirken sich auf Bildschirmbreiten mit dem angegebenen Breakpoint oder größer aus . .d-lg-noneSetzt zum Beispiel display: none;auf den Bildschirmen lg, xlund .xxl

Beispiele

d-inline

<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>

D-Block D-Block

<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-noneKlasse oder eine der .d-{sm,md,lg,xl,xxl}-noneKlassen für jede responsive Bildschirmvariante.

Um ein Element nur in einem bestimmten Intervall von Bildschirmgrößen anzuzeigen, können Sie eine .d-*-noneKlasse mit einer .d-*-*Klasse kombinieren, z. B. .d-none .d-md-block .d-xl-none .d-xxl-nonewird 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`

hide on lg and wider screens

verstecken auf Bildschirmen kleiner als lg

<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 displayWert von Elementen beim Drucken mit unseren Utility-Klassen für die Druckanzeige. Beinhaltet Unterstützung für die gleichen displayWerte 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.

Nur Bildschirm (nur beim Drucken ausblenden)

Print Only (Hide on screen only)

Auf dem Bildschirm zu groß ausblenden, aber immer auf dem Druck anzeigen

<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
    ),