Source

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 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 xl, 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, lgund xl.

Wo Wert ist einer von:

  • none
  • inline
  • inline-block
  • block
  • table
  • table-cell
  • table-row
  • flex
  • inline-flex

Die Medienabfragen wirken sich auf Bildschirmbreiten mit dem angegebenen Haltepunkt oder größer aus . .d-lg-noneSetzt zum Beispiel display: none;sowohl auf lgals auch auf xlBildschirme.

Beispiele

d-inline
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}-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-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
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
hide on screens wider than lg
verstecken auf Bildschirmen kleiner als lg 
<div class="d-lg-none">hide on screens wider than lg</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-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>