Tutoriel de base Bootstrap

Plugins Bootstrap

警告 Bootstrap

Ce chapitre explique l'avertissement (Alerts) et les classes d'avertissement fournies par Bootstrap. L'avertissement (Alerts) offre aux utilisateurs un moyen de définir le style des messages. Ils fournissent des informations de contexte de feedback pour les opérations utilisateur typiques.

Vous pouvez ajouter un bouton de fermeture optionnel à la boîte de dialogue d'avertissement. Pour créer une boîte de dialogue d'avertissement inline annulable, utilisez jQuery plug-in Avertissement (Alerts)。

Vous pouvez créer un <div> et y ajouter une .alert class et quatre classes de contexte (c'est-à-dire .alert-success、.alert-info、.alert-warning、.alert-danger）l'un d'eux, pour ajouter une boîte de dialogue d'avertissement de base. L'exemple suivant montre cela :

Exemple en ligne

Exemple

!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8">　
　　　　<title>Exemple Bootstrap　-　Avertissement (Alerts)</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="alert　alert-success">Réussite ! Bien accompli le soumission .</div>
<div　class="alert　alert-info">Information ! Notez cette information.</div>
<div　class="alert　alert-warning">Attention ! Ne soumettez pas.</div>
<div　class="alert　alert-danger">Erreur ! Effectuez quelques modifications.</div>
</body>
</html>

测试看看 ‹/›

结果如下所示：

Alertes annulables (Dismissal Alerts)

Les étapes pour créer une alerte annulable (Dismissal Alert) sont les suivantes :

Créez un <div>, et ajoutez-y un .alert class et quatre classes de contexte (c'est-à-dire .alert-success、.alert-info、.alert-warning、.alert-dangerl'un d'entre eux, pour ajouter une boîte de dialogue d'avertissement de base.
Ajoutez également une classe optionnelle au <div> class au-dessus .alert-dismissable。
Ajoutez un bouton de fermeture.

L'exemple suivant démontre cela :

Exemple en ligne

Exemple

!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8">　
	<title>Exemple Bootstrap　-　Alertes annulables (Dismissal Alerts)</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="alert　alert-alerte succès-dismissable">
	<button　type="button"　class="close"　data-dismiss="alert"
			aria-hidden="true">
		×
	</button>
	Réussi ! Bien terminé la soumission.
</div>
<div　class="alert　alert-alerte information-dismissable">
	<button　type="button"　class="close"　data-dismiss="alert"
			aria-hidden="true">
		×
	</button>
	Information ! Notez cette information.
</div>
<div　class="alert　alert-alerte avertissement-dismissable">
	<button　type="button"　class="close"　data-dismiss="alert"
			aria-hidden="true">
		×
	</button>
	Attention ! Ne soumettez pas.
</div>
<div　class="alert　alert-alerte danger-dismissable">
	<button　type="button"　class="close"　data-dismiss="alert"
			aria-hidden="true">
		×
	</button>
	Erreur ! Effectuez quelques modifications.
</div>
</body>
</html>

测试看看 ‹/›

结果如下所示：

Les liens dans les avertissements (Alerts)

Les étapes pour créer un lien dans les avertissements (Alerts) sont les suivantes :

Créez un <div>, et ajoutez-y un .alert class et quatre classes de contexte (c'est-à-dire .alert-success、.alert-info、.alert-warning、.alert-dangerl'un d'entre eux, pour ajouter une boîte de dialogue d'avertissement de base.
Utilisez .alert-link classes entités pour fournir rapidement des liens avec une couleur correspondante.

Exemple en ligne

Exemple

!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8">　
	<title>Exemple Bootstrap　-　les liens dans les avertissements (Alerts)</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="alert　alert-success">
	<a　href="#"　class="alert-link">réussi ! Bien terminé la soumission.</a>
</div>
<div　class="alert　alert-info">
	<a　href="#"　class="alert-link">信息！请注意这个信息。</a>
</div>
<div　class="alert　alert-warning">
	<a　href="#"　class="alert-link">警告！请不要提交。</a>
</div>
<div　class="alert　alert-danger">
	<a　href="#"　class="alert-link">错误！请进行一些更改。</a>
</div>
</body>
</html>

测试看看 ‹/›

结果如下所示：

进度条 Bootstrap 缩略图 Bootstrap