English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

Tutoriel de base Bootstrap

Plugins Bootstrap

Bootstrap Well

Le Well est un conteneur <div> qui crée un effet de凹陷 ou d'illustration du contenu. Pour créer un Well, il suffit de placer le contenu dans une classe .well dans le <div>. L'exemple suivant montre un Well par défaut :

Exemple en ligne

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Exemple Bootstrap　-　Well par défaut/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="well">Bonjour, je suis dans le Well !</div>
</body>
</html>
Test and see ‹/›

The results are as follows:

taille

Vous pouvez utiliser les classes optionnelles well-lg ou well-sm pour modifier la taille du Well. Ces deux classes sont associées à .well Ces deux classes affectent la marge interne (padding), et selon la classe utilisée, le Well peut s'afficher plus grand ou plus petit.

Exemple en ligne

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Exemple Bootstrap　-　Well de dimension/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="well well-lg">Hello, I am in a large Well!"/div>
<div class="well well-sm">Hello, I am in a small Well!"/div>
</body>
</html>
Test and see ‹/›

The results are as follows:

Bootstrap Create a WebpageBootstrap Panels