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