Bootstrap CSS Klasse D-*-Keine

Eine Vielzahl von vorgezeichneten Elementen und Klassen wird von Bootstrap bereitgestellt. Entwickler verwenden sie, um schnell ansprechende und reaktionsschnelle Websites zu erstellen. Responsive Websites machen ihr Layout entsprechend der Bildschirmgröße des Geräts. Einer von ihnen ist der "d-*-keineKlasse, die verwendet wird, um Elemente basierend auf der Bildschirmgröße zu verbergen.

In diesem Artikel wird die Bootstrap-CSS-Klasse beschrieben “d-*-keine”.

• Was ist Bootstrap-CSS-Klasse: "D-*-Keine"?
• So verbergen Sie Elemente auf einem extra großen Bildschirm?
• So verbergen Sie Elemente auf einem großen Bildschirm?
• So verbergen Sie Elemente auf mittelgroßem Bildschirm?
• So verbergen Sie Elemente auf einem kleinen Bildschirm?

Was ist Bootstrap-CSS-Klasse: "D-*-Keine"?

Der "d-*-keineDie Klasse ist eine der Bootstrap -Utility -Klassen, die zur Steuerung der Sichtbarkeit des Elements basierend auf der Bildschirmgröße verwendet werden. Das CSS “Anzeige"Die Eigenschaft für diese Versorgungsklassen ist auf" festgelegt "keiner.”. Der "D”Gibt die Eigenschaft" Anzeige "an und"*”Symbolisiert die Breakpoints der Bildschirmgröße, ich.e., “xs","xl","md", Und "lg”. Der "keinerAm Ende bedeutet das Element, dass das Element beim Anbringen dieser Klasse verborgen wird.

Um das Element auf allen Bildschirmen zu verbergen, das “D-None”Klasse wird verwendet. Lassen Sie uns die Klassen in den folgenden Abschnitten implementieren, um zu sehen, wie sie funktionieren.

So verbergen Sie Elemente auf einem extra großen Bildschirm?

Der "D-XL-NoneDie Klasse wird verwendet, um die Elemente auf einem extra großen Bildschirm zu verbergen. Diese Klasse hat ein vordefiniertes CSS of Media -Abfrage “@media (Min-Width: 1200px)”, Was bedeutet, dass diese Klasse für die Bildschirme mit einer Breite von mehr als 1200 PX gilt.

Beispiel

Schauen Sie sich das Beispiel an, indem Sie die folgenden Anweisungen implementieren:

• Zuerst fügen Sie eine "hinzu"Element mit "P-4" Und "BG-Licht" Klassen.
• In diesem „“ -Tag schließen Sie die “ein

  "Und" "Elemente für die Überschrift und einen Text.

• Das "" Element zuweisen "Karte","Text-Weiß","P-2","BG-Primary", Und "D-XL-None" Klassen.

Html

Dies ist Hauptdiv

Zeigen Sie mir auf der Bildschirmbreite weniger als 1200px

Ausgang

So verbergen Sie HTML -Elemente auf einem großen Bildschirm?

Der "D-LG-None”Klassen versteckt Komponenten auf dem großen Bildschirm. Diese Klasse hat ein vordefiniertes CSS of Media -Abfrage “@media (Min-Width: 992px)”, Was bedeutet, dass diese Klasse für Bildschirme mit einer Breite von mehr als 992px gilt.

Beispiel

Fügen Sie im laufenden Beispiel das hinzu “D-LG-NoneKlasse zum "" Element.

Html

Zeigen Sie mir auf Bildschirmbreite weniger als 992px

Siehe, die Eigenschaft „Anzeige: Keine“ wurde erfolgreich bis zum Bildschirm in 992px angewendet:

So verbergen Sie Elemente auf mittelgroßem Bildschirm?

Der "D-MD-NoneDie Klasse kann verwendet werden, um die Sichtbarkeit des Elements auf dem Bildschirm mittelgroß zu verbergen. Diese Klasse hat ein vordefiniertes CSS of Media -Abfrage “@media (Min-Width: 768px)”Was bedeutet, dass diese Klasse für Bildschirme mit einer Breite von mehr als 768px gilt.

Beispiel

Fügen Sie das "D-MD-None" -Klass in das "" -Element hinzu.

Html

Zeigen Sie mir auf Bildschirmbreite weniger als 768px

Ausgang

So verbergen Sie Elemente auf einem kleinen Bildschirm?

Der "D-SM-NoneDie Klasse verbirgt die Sichtbarkeit des Elements auf einem kleinen Bildschirm. Diese Klasse hat ein vordefiniertes CSS of Media -Abfrage “@media (Min-Width: 576px)”Was bedeutet, dass diese Klasse für die Bildschirme mit einer Breite von mehr als 576px gilt.

Beispiel

Fügen Sie im laufenden Beispiel die Klasse "D-SM-None" dem "" "Element" hinzu.

Html

Zeigen Sie mir auf Bildschirmbreite weniger als 576px

Ausgang

Wichtiger Hinweis

Der "d-*-keineDie Klasse wird verwendet, um nur die Elemente zu verbergen. Andere Elemente oder Layouts sind nicht betroffen. Das Element wird vollständig aus dem Layout entfernt, wenn das CSS “Anzeige" ist eingestellt auf "keiner”.

Abschluss

Der "d-*-keineDie Klasse wird verwendet, um die Sichtbarkeit des Elements auf verschiedenen Bildschirmgrößen zu verbergen. Das Sternchen "*”Bezeichnet das"lg","xl","sm", Und "mdDas zeigt die großen, extra großen, kleinen und mittleren Bildschirme an. Insbesondere das CSS “Anzeige”Eigenschaft mit dem Wert“keiner”Wird verwendet, um das Element aus dem Layout zu beseitigen. Dieser Artikel hat die Bootstrap "D-*-None" -Klasse mit Beispielen beschrieben.