Bootstrap 基础教程

Bootstrap 插件

Bootstrap Glyphicons Bootstrap Helper Classes

Bootstrap Responsive Utilities

Bootstrap 提供了一些辅助类，以便更快地实现对移动设备友好的开发。这些可以通过媒体查询结合大型、小型和中型设备，实现内容对设备的显示和隐藏。

需要谨慎使用这些工具，避免在同一个站点创建完全不同的版本。响应式实用工具目前只适用于块和表切换。

	超小屏幕手机 (<768px)	小屏幕平板 (≥768px)	中等屏幕桌面 (≥992px)	大屏幕桌面 (≥1200px)
.visible-xs-*	Visible	Hidden	Hidden	Hidden
.visible-sm-*	Hidden	Visible	Hidden	Hidden
.visible-md-*	Hidden	Hidden	Visible	Hidden
.visible-lg-*	Hidden	Hidden	Hidden	Visible
.hidden-xs	Hidden	Visible	Visible	Visible
.hidden-sm	Visible	Hidden	Visible	Visible
.hidden-md	Visible	Visible	Hidden	Visible
.hidden-lg	Visible	Visible	Visible	Hidden

从 v3.2从 .0 版本起，形如 .visible-*-* 的类针对每种屏幕大小都有了三种变体，每个针对 CSS 中不同的 display 属性，列表如下：

类组	CSS display
.visible-*-Block	display: block;
.visible-*-Inline	display: inline;
.visible-*-Inline-Block	display: inline-block;

Daher, zum Beispiel bei ultrakleinen Bildschirmen (xs), verfügbare .visible-*-* Klasse ist: .visible-xs-block, .visible-xs-inline und .visible-xs-Inline-block.

.visible-xs, .visible-sm, .visible-md und .visible-lg existieren. Aber ab v3.2.0 ab nicht mehr empfohlen. Abgesehen von den Sonderfällen der <table>-relevanten Elemente sind sie gleichzeitig mit .visible-*-Block sind im Allgemeinen gleich.

Print Classes

Die folgende Tabelle listet die Druckklassen auf. Verwenden Sie diese, um den Druckinhalt umzuschalten.

Class	Browser	Printer
.visible-Print-Block .visible-Print-Inline .visible-Print-Inline-Block	Hidden	Visible
.hidden-Print	Visible	Hidden

Online Example

Die folgenden Beispiele zeigen die Verwendung der Hilfsklassen, die oben aufgelistet wurden. Passen Sie die Größe des Browserfensters an oder laden Sie die Beispiele auf verschiedenen Geräten, um die responsiven Utility-Klassen zu testen.

Online Example

Example

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Bootstrap Example　-　Responsive Utility Tools</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">　　
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container" style="padding:　40px;">
	<div class="row visible-on">
		<div class="col-xs-6　col-sm-3" style="background-color: #dedef8;box-shadow: inset　1px　-1px　1px #444, inset　-1px　1px　1px #444">
			<span class="hidden-xs">Besonders klein</span>
			<span class="visible-xs">✔ Sichtbar auf besonders kleinen Geräten</span>
		</div>
		<div class="col-xs-6　col-sm-3" style="background-color: #dedef8;box-shadow: inset　1px　-1px　1px #444, inset　-1px　1px　1px #444">
			<span class="hidden-sm">Klein</span>
			<span class="visible-sm">✔ Sichtbar auf kleinen Geräten</span>
		</div>
		<div class="clearfix visible-xs"></div>
		<div class="col-xs-6　col-sm-3" style="background-color: #dedef8;box-shadow: inset　1px　-1px　1px #444, inset　-1px　1px　1px #444">
			<span class="hidden-md">Mittel</span>
			<span class="visible-md">✔ Sichtbar auf mittleren Geräten</span>
		</div>
		<div class="col-xs-6　col-sm-3" style="background-color: #dedef8;box-shadow: inset　1px　-1px　1px #444, inset　-1px　1px　1px #444">
			<span class="hidden-lg">Large</span>
			<span class="visible-lg">✔ Visible on large devices</span>
		</div>
	</div>
</div>
</body>
</html>

Test and see ‹/›

The results are as follows:

Checkmark (✔) Indicates that the element is visible in the current viewport.

Bootstrap Glyphicons Bootstrap Helper Classes