Bootstrap Panneaux
Ce chapitre expliquera les panneaux Bootstrap. Le composant panneau est utilisé pour insérer des composants DOM dans une boîte. Pour créer un panneau de base, ajoutez simplement la classe à l'élément <div>.panelet la classe.panel-defaultet c'est tout, comme le montre l'exemple ci-dessous :
Exemple
<div class="panel panel-default">
<div class="panel-body">Ceci est un panneau de base</div>
</div>
Essayez-le vous-même »
Le résultat est le suivant :
Titre du panneau
Nous pouvons ajouter des titres de panneau de deux manières :
- En utilisant.panel-headingla classe permet d'ajouter facilement un conteneur de titre au panneau.
- En utilisant.panel-titleles <h1>-<h6> avec la classe pour ajouter un titre avec des styles prédéfinis.
L'exemple suivant illustre ces deux manières :
Exemple
<div class="panel panel-default">
<div class="panel-heading">En-tête de panneau sans titre</div>
<div class="panel-body">Contenu du panneau</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">En-tête de panneau avec titre</h3>
</div>
<div class="panel-body">Contenu du panneau</div>
</div>
Essayez-le vous-même »
Le résultat est le suivant :
Pied de panneau
Nous pouvons ajouter un pied de page au panneau en plaçant un bouton ou du texte secondaire dans un <div> avec la classe.panel-footerdans le <div> et c'est tout. L'exemple suivant le démontre :
Exemple
<div class="panel panel-default">
<div class="panel-body">Ceci est un panneau de base</div>
<div class="panel-footer">Pied de panneau</div>
</div>
Essayez-le vous-même »
Le résultat est le suivant :
Le pied de page du panneau n'hérite pas des couleurs et des bordures du panneau contextuel car il ne se trouve pas dans le contenu de premier plan.
Panneaux avec couleurs contextuelles
Utilisez les classes d'état contextuellespanel-primary、panel-success、panel-info、panel-warning、panel-danger, pour définir des panneaux avec des couleurs contextuelles. Voici quelques exemples :
Exemple
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">Titre du panneau</h3>
</div>
<div class="panel-body">Ceci est un panneau de base</div>
</div>
<div class="panel panel-success">
<div class="panel-heading">
<h3 class="panel-title">Titre du panneau</h3>
</div>
<div class="panel-body">Ceci est un panneau de base</div>
</div>
<div class="panel panel-info">
<div class="panel-heading">
<h3 class="panel-title">Titre du panneau</h3>
</div>
<div class="panel-body">Ceci est un panneau de base</div>
</div>
<div class="panel panel-warning">
<div class="panel-heading">
<h3 class="panel-title">Titre du panneau</h3>
</div>
<div class="panel-body">Ceci est un panneau de base</div>
</div>
<div class="panel panel-danger">
<div class="panel-heading">
<h3 class="panel-title">Titre du panneau</h3>
</div>
<div class="panel-body">Ceci est un panneau de base</div>
</div>
Essayez-le vous-même »
Le résultat est le suivant :
Panneaux avec tableaux
Pour créer un tableau sans bordures dans un panneau, nous pouvons utiliser la classe.tabledans le panneau. Supposons qu'il y ait un <div> contenant.panel-body, nous pouvons ajouter une bordure supplémentaire en haut du tableau pour le séparer. S'il n'y a pas de.panel-body<div>, alors le composant se déplacera sans interruption de l'en-tête du panneau au tableau.
L'exemple suivant le démontre :
Exemple
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Titre du panneau</h3>
</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>
Essayez-le vous-même »
Le résultat est le suivant :
Panneaux avec groupes de listes
Nous pouvons inclure un groupe de liste dans n'importe quel panneau en ajoutant à l'élément <div>.panelet.panel-defaultla classe pour créer le panneau, et ajouter un groupe de liste au panneau. Vous pouvez consulter le chapitre Groupes de liste pour apprendre à créer des groupes de liste.
Exemple
<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. Ceci est un contenu de panneau de base.
Ceci est un contenu de panneau de base. Ceci est un contenu de panneau de base.
Ceci est un contenu de panneau de base. Ceci est un contenu de panneau de base.
Ceci est un contenu de panneau de base. Ceci 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 d'espace Windows gratuit</li>
<li class="list-group-item">Nombre d'images</li>
<li class="list-group-item">Support 24*7</li>
<li class="list-group-item">Coût de mise à jour annuel</li>
</ul>
</div>
Essayez-le »
Les résultats sont les suivants :
Autres extensions
