Wie verstecke ich Elemente in responsiven Layouts mit Bootstrap?

Elemente in responsiven Layouts mit Bootstrap ausblenden

Wie Sie bemerkt haben, bietet Bootstrap native Unterstützung für das Reduzieren von Navigationsmenüelementen auf kleineren Bildschirmen. In ähnlichen Situationen möchten Sie jedoch möglicherweise auch andere Elemente auf der Seite ausblenden.

Einführung in die Sichtbarkeitsklassen von Bootstrap

Um diesem Bedarf gerecht zu werden, bietet Bootstrap eine Reihe von Sichtbarkeiten Klassen, mit denen Sie das Vorhandensein von Elementen basierend auf der Bildschirmgröße steuern können. Zu diesen Klassen gehören:

• visible-xs-block, Hidden-xs: Elemente auf besonders kleinen Geräten ausblenden (weniger als 768 Pixel).
• sichtbarer-sm-block, versteckt-sm: Elemente auf kleinen Geräten ausblenden (768px und höher).
• visible-md-block, versteckt-md: Elemente auf Medium ausblenden Geräte (992 Pixel und höher).
• sichtbarer-lg-block, versteckter-lg: Elemente auf großen Geräten ausblenden (1200 Pixel und höher).

Verwendung

Um ein Element auf einem kleinen Bildschirm auszublenden, fügen Sie ihm einfach die entsprechende ausgeblendete Klasse hinzu. Um beispielsweise die von Ihnen erwähnten Navigationssymbole auszublenden, können Sie Folgendes verwenden:

<code class="html"><ul class="nav nav-pills navbar-right hidden-sm">
  ...
</ul></code>

Zusätzliche Optionen

In Bootstrap 4 gibt es zwei zusätzliche Arten von Sichtbarkeitsklassen:

• hidden-*-up: Versteckt das Element, wenn sich das Ansichtsfenster am angegebenen Haltepunkt oder weiter befindet.
• hidden-* -down: Versteckt das Element, wenn sich das Ansichtsfenster am angegebenen Haltepunkt oder kleiner befindet.

Hinweis: Ältere Versionen von Bootstrap verwendeten Klassen wie .hidden-phone und . Visible-Tablet, die mittlerweile veraltet sind.

Fazit

Durch die Verwendung der Sichtbarkeitsklassen von Bootstrap können Sie die Anzeige von Elementen auf verschiedenen Bildschirmgrößen effektiv verwalten. Dank dieser Vielseitigkeit können Sie ansprechende Layouts erstellen, die sich problemlos an unterschiedliche Geräteabmessungen anpassen.

Das obige ist der detaillierte Inhalt vonWie verstecke ich Elemente in responsiven Layouts mit Bootstrap?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!