Welche versteckten Klassen sind im Bootstrap enthalten?

Bootstraps eigene versteckte Klassen sind: „.hidden“, „.visible-xs-*“, „.visible-sm-*“, „.visible-md-*“, „.visible-lg-*“, „ .hidden-xs“, „.hidden-sm“ und so weiter.

Die Betriebsumgebung dieses Tutorials: Windows 7-System, Bootsrap-Version 3.3.7, DELL G3-Computer

Bootstrap bietet einige Hilfsklassen, um eine schnellere, mobilgerätefreundliche Entwicklung zu erreichen. Diese können durch Medienabfragen mit großen, kleinen und mittleren Geräten kombiniert werden, um das Ein- und Ausblenden von Inhalten auf dem Gerät zu ermöglichen.

Diese Tools müssen mit Vorsicht verwendet werden, um zu vermeiden, dass völlig unterschiedliche Versionen derselben Website erstellt werden. Reaktive Dienstprogramme funktionieren derzeit nur mit Block- und Tabellenwechsel.

Klasse	Beschreibung
.show	Force-Element zum Anzeigen
.hidden	Force-Element zum Ausblenden

	Super kleiner Bildschirm ​ ​ ​ Mobiltelefon (<768px)	Kleiner Bildschirm Tablet (≥768px)	mittlerer Bildschirm Desktop (≥992px)	Großer Bildschirm Desktop (≥1200px)
.visible-xs-*	visible	hide	hide	hide
.visible-sm-*	hide	sichtbar	Verstecken	Verstecken
.visible-md-*	Hide	Hide	Visible	Hide
.visible-lg-*	Hide	Hide	H idee	Sichtbar
.hidden-xs	hidden	visible	visible	visible
.hidden-sm	visible	hidden	visible	visible
.hidden-md	sichtbar	Visible	Hide	Visible
.hidden-lg	Visible	Visible	Visible	Hide

Ab v3.2.0 Klassen in der Form .visible-*-* sind gezielt. Es gibt drei Varianten für jede Bildschirmgröße, die jeweils auf ein anderes Anzeigeattribut in CSS abzielen, wie unten aufgeführt:

Klassengruppe	CSS-Anzeige
.visible-*-block	Anzeige : block;
.visible-*-inline	display: inline;
.visible-*-inline-block	display: inline-block;

Bildschirm (xs) nehmen als Als Beispiel sind die verfügbaren .visible-*-*-Klassen: .visible-xs-block, .visible-xs-inline und .visible-xs-inline-block.

Es gibt auch die Klassen .visible-xs, .visible-sm, .visible-md und .visible-lg. Der Einsatz wird jedoch ab v3.2.0 nicht mehr empfohlen. Sie sind größtenteils mit .visible-*-block identisch, mit Ausnahme des Sonderfalls von

Weitere Informationen zu Bootstrap finden Sie unter: Bootstrap-Grundlagen-Tutorial! !

Das obige ist der detaillierte Inhalt vonWelche versteckten Klassen sind im Bootstrap enthalten?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!