Heim > Web-Frontend > CSS-Tutorial > Hauptteil

Wie verstecke ich Elemente in responsiven Layouts mit Bootstrap?

Barbara Streisand
Freigeben: 2024-11-06 03:03:02
Original
860 Leute haben es durchsucht

How to Hide Elements in Responsive Layouts using 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>
Nach dem Login kopieren

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!

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage