Tutoriel de base Bootstrap

plugin Bootstrap

Well Bootstrap Groupes de listes Bootstrap

Panneaux Bootstrap

Ce chapitre expliquera le panneau Bootstrap (Panels). Le composant de panneau est utilisé pour insérer des composants DOM dans une boîte. Créer un panneau de base nécessite simplement d'ajouter la classe .panel et class .panel-default simplement, comme dans l'exemple suivant :

Exemple en ligne

Exemple

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
　　　　<title>Exemple Bootstrap　-　panneau 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="panel panel-default">
　　　　<div class="panel-body">
　　　　　　　　Ceci est un panneau de base
　　　　</div>
</div>
</body>
</html>

Voyons si ça marche ‹/›

Les résultats sont affichés comme suit :

titre du panneau

Nous pouvons ajouter un titre au panneau de deux manières :

Utilisation .panel-en-tête class peut très simplement ajouter un conteneur de titre au panneau.
Utilisation d'une classe .panel-title class du <h1>-<h6> pour ajouter des titres avec des styles prédéfinis.

L'exemple suivant montre ces deux méthodes :

Exemple en ligne

Exemple

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Exemple Bootstrap　-　titre du panneau</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="panel panel-default">
	<div class="panel-heading">
		titre de panneau sans title
	</div>
	<div class="panel-body">
		contenu du panneau
	</div>
</div>
<div class="panel panel-default">
	<div class="panel-heading">
		<h2　class="panel-title">
			titre de panneau avec title
		</h2>
	</div>
	<div class="panel-body">
		contenu du panneau
	</div>
</div>
</body>
</html>

Voyons si ça marche ‹/›

Les résultats sont affichés comme suit :

note de bas de page du panneau

Nous pouvons ajouter des notes de bas de page dans le panneau, il suffit de placer le bouton ou le texte supplémentaire dans une classe .panel-footer dans le <div>. L'exemple suivant montre cela :

Exemple en ligne

Exemple

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Exemple Bootstrap　-　note de bas de page du panneau</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="panel panel-default">
	<div class="panel-body">
		Ceci est un panneau de base
	</div>
	<div class="panel-footer">note de bas de page du panneau</div>
</div>
</body>
</html>

Voyons si ça marche ‹/›

Les résultats sont affichés comme suit :

Les notes de bas de page du panneau ne héritent pas de la couleur et des bordures du panneau avec couleur contextuelle, car elles ne font pas partie du contenu de premier plan.

panneau avec couleur contextuelle

utilisation de l'état contextuel panneau-primary、panneau-success、panneau-info、panneau-warning、panel-danger，pour définir un panneau avec couleur de contexte, exemple suivant :

Exemple en ligne

Exemple

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Exemple Bootstrap　-　Panneau avec couleur de contexte</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="panel panel-primary">
	<div class="panel-heading">
		<h2　class="panel-title">Titre du panneau</h2>
	</div>
	<div class="panel-body">
		Ceci est un panneau de base
	</div>
</div>
<div class="panel panel-success">
	<div class="panel-heading">
		<h2　class="panel-title">Titre du panneau</h2>
	</div>
	<div class="panel-body">
		Ceci est un panneau de base
	</div>
</div>
<div class="panel panel-info">
	<div class="panel-heading">
		<h2　class="panel-title">Titre du panneau</h2>
	</div>
	<div class="panel-body">
		Ceci est un panneau de base
	</div>
</div>
<div class="panel panel-warning">
	<div class="panel-heading">
		<h2　class="panel-title">Titre du panneau</h2>
	</div>
	<div class="panel-body">
		Ceci est un panneau de base
	</div>
</div>
<div class="panel panel-danger">
	<div class="panel-heading">
		<h2　class="panel-title">Titre du panneau</h2>
	</div>
	<div class="panel-body">
		Ceci est un panneau de base
	</div>
</div>
</body>
</html>

Voyons si ça marche ‹/›

Les résultats sont affichés comme suit :

Panneau avec tableau

Pour créer un tableau sans bordure dans un panneau, nous pouvons utiliser la classe .table。Supposons qu'il y ait un <div> contenant .panel-body，nous pouvons ajouter des bordures supplémentaires en haut du tableau pour le séparer. Si .panel-body du <div>, le composant se déplace sans interruption de la tête du panneau vers le tableau.

L'exemple suivant montre cela :

Exemple en ligne

Exemple

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Exemple Bootstrap　-　Panneau avec tableau</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="panel panel-default">
	<div class="panel-heading">
		<h2　class="panel-title">Titre du panneau</h2>
	</div>
	<div class="panel-body">
		Ceci est un panneau de base
	</div>
	<table class="table">
		<th>Produit</th><th>Prix　</th>
		<tr><td>Produit A</td><td>200</td></tr>
		<tr><td>Produit B</td><td>400</td></tr>
	</table>
</div>
<div class="panel panel-default">
	<div class="panel-heading">Titre du panneau</div>
	<table class="table">
		<th>Produit</th><th>Prix　</th>
		<tr><td>Produit A</td><td>200</td></tr>
		<tr><td>Produit B</td><td>400</td></tr>
	</table>
</div>
</body>
</html>

Voyons si ça marche ‹/›

Les résultats sont affichés comme suit :

Panneau avec liste de groupes

Nous pouvons inclure des listes de groupes dans n'importe quel panneau, en ajoutant .panel et .panel-default classe pour créer un panneau, et ajouter une liste de groupes dans le panneau. Vous pouvez partir de Liste de groupes dans un chapitre comment créer une liste de groupes.

Exemple en ligne

Exemple

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Exemple Bootstrap　-　Panneau avec liste de groupes</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="panel panel-default">
	<div class="panel-heading">Titre du panneau</div>
	<div class="panel-body">
		<p>Ceci est un contenu de panneau de base. C'est un contenu de panneau de base.
			Ceci est un contenu de panneau de base. C'est un contenu de panneau de base.
			Ceci est un contenu de panneau de base. C'est un contenu de panneau de base.
			Ceci est un contenu de panneau de base. C'est un contenu de panneau de base.
		</p>
	</div>
	<ul class="list-group">
		<li　class="list-group-item">Enregistrement de domaine gratuit</li>
		<li　class="list-group-item">Hébergement gratuit Windows Space</li>
		<li　class="list-group-item">Nombre d'images</li>
		<li　class="list-group-item">24*7　Support</li>
		<li　class="list-group-item">Coût de mise à jour annuelle</li>
	</ul>
</div>
</body>
</html>

Voyons si ça marche ‹/›

Les résultats sont affichés comme suit :

Well Bootstrap Groupes de listes Bootstrap