Bootstrap 基础教程

Bootstrap 插件

Icones de police Bootstrap (Glyphicons)Classes d'assistance Bootstrap

Outils utiles responsifs Bootstrap

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

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

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

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

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

Par conséquent, pour le cas d'écran extrêmement petit (xs), les .visible-*-* est : .visible-xs-block, .visible-xs-inline et .visible-xs-inline-block.

.visible-xs, .visible-sm, .visible-md et .visible-lg. Mais à partir de la version v3.2à partir de la version .0, il n'est plus recommandé d'utiliser. Sauf dans les cas spéciaux des éléments liés à <table>, ils existent en même temps que .visible-*-block sont essentiellement identiques.

Classes d'impression

Le tableau suivant liste les classes d'impression. Utilisez ces commutateurs pour masquer ou afficher le contenu d'impression.

class	Navigateur	Imprimante
.visible-Imprimer-block .visible-Imprimer-inline .visible-Imprimer-inline-block	Caché	Visible
.hidden-Imprimer	Visible	Caché

Exemple en ligne

Les exemples ci-dessous montrent l'utilisation des classes d'aide mentionnées précédemment. Ajustez la taille de la fenêtre du navigateur ou chargez l'exemple sur différents appareils pour tester les classes d'outils réactifs.

Exemple en ligne

Exemple

!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Exemple Bootstrap　-　Outils pratiques réactifs</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="fond"-couleur: #dedef8;boîte-ombre: inset　1px　-1px　1px #444, inset　-1px　1px　1px #444">
			<span class="hidden-xs">très petite taille</span>
			<span class="visible-xs">✔ Visible sur les appareils de très petite taille</span>
		</div>
		<div class="col-xs-6　col-sm-3"style="fond"-couleur: #dedef8;boîte-ombre: inset　1px　-1px　1px #444, inset　-1px　1px　1px #444">
			<span class="hidden-sm">petite taille</span>
			<span class="visible-sm">✔ Visible sur les appareils de petite taille</span>
		</div>
		<div class="clearfix visible-xs"></div>
		<div class="col-xs-6　col-sm-3"style="fond"-couleur: #dedef8;boîte-ombre: inset　1px　-1px　1px #444, inset　-1px　1px　1px #444">
			<span class="hidden-md">taille moyenne</span>
			<span class="visible-md">✔ Visible sur les appareils de taille moyenne</span>
		</div>
		<div class="col-xs-6　col-sm-3"style="fond"-couleur: #dedef8;boîte-ombre: inset　1px　-1px　1px #444, inset　-1px　1px　1px #444">
			<span class="hidden-lg">Grand</span>
			<span class="visible-lg">✔ Visible sur les grands appareils</span>
		</div>
	</div>
</div>
</body>
</html>

Voyons si ça marche ‹/›

Les resultats sont affiches comme suit :

Coche (✔) Indique que l'element est visible dans la fenetre d'affichage actuelle.

Icones de police Bootstrap (Glyphicons)Classes d'assistance Bootstrap