Heim  >  Artikel  >  Web-Frontend  >  Wie steuere ich die Elementsichtbarkeit in Bootstrap-Responsive-Layouts?

Wie steuere ich die Elementsichtbarkeit in Bootstrap-Responsive-Layouts?

Barbara Streisand
Barbara StreisandOriginal
2024-11-06 10:06:03231Durchsuche

How to Control Element Visibility in Bootstrap Responsive Layouts?

Elemente in Bootstrap-Responsive-Layouts ausblenden

Verbessern Sie Ihr Bootstrap-Design, indem Sie die Sichtbarkeit von Inhalten auf verschiedenen Bildschirmgrößen optimieren. Bootstrap bietet Funktionen zum Anzeigen von Menüelementen auf kleineren Geräten, aber was ist mit anderen Seitenelementen?

Um dieses Problem zu beheben, stellt Bootstrap „sichtbare“ und „versteckte“ Klassen bereit, mit denen Sie Elemente basierend auf dem Bildschirm dynamisch anzeigen oder verbergen können Größe. Zu den verfügbaren Klassen gehören:

Sichtbare Klassen:

  • .visible-xs-block: Auf besonders kleinen Geräten (Telefonen) anzeigen
  • .visible-sm-block: Auf kleinen Geräten (Tablets) anzeigen
  • .visible-md-block: Auf mittleren Geräten (Desktops) anzeigen
  • .visible-lg-block: Auf großen Geräten anzeigen Geräte (Desktops)

Versteckte Klassen:

  • .hidden-xs: Auf besonders kleinen Geräten (Telefonen) verstecken
  • .hidden-sm: Auf kleinen Geräten (Tablets) ausblenden
  • .hidden-md: Auf mittleren Geräten (Desktops) ausblenden
  • .hidden-lg: Auf großen Geräten (Desktops) ausblenden

Um Ihre Navigationspillen auf kleineren Bildschirmen auszublenden, fügen Sie einfach die .hidden-xs-Klasse zum entsprechenden Container hinzu.

<code class="html"><div class="nav-pills hidden-xs float-right">...</div></code>

Alternativ können Sie die „hidden-*-down“ verwenden "-Klasse, die Elemente am angegebenen Haltepunkt oder kleiner verbirgt.

<code class="html"><div class="nav-pills hidden-sm-down float-right">...</div></code>

Denken Sie daran, die Klasse „visible-*-up“ zu verwenden, wenn Sie das Element am angegebenen Haltepunkt oder darüber hinaus anzeigen möchten.

Weitere Informationen zu den responsiven Dienstprogrammklassen von Bootstrap finden Sie in der offiziellen Dokumentation unter http://getbootstrap.com/css/#responsive-utilities.

Das obige ist der detaillierte Inhalt vonWie steuere ich die Elementsichtbarkeit in Bootstrap-Responsive-Layouts?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

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