Introduction détaillée au panneau Bootstrap

1. Panneaux

Les panneaux sont un nouveau composant du framework Bootstrap. Sa fonction principale est de gérer certaines fonctions que d'autres composants ne peuvent pas remplir. Il existe également différents codes sources dans différentes versions :

☑ Version Less : le fichier de code source correspondant est panels.less

☑ Version Sass : le fichier de code source correspondant est _panels.scss

☑ Bootstrap compilé : Correspondant aux lignes 4995 à 5302 du fichier bootstrap.css

Panneau de base

Le panneau de base est très simple, c'est un conteneur div utilisant "panel" Style, génère un bloc d'affichage de texte avec une bordure et ajoute un "div.panel-body" à l'intérieur pour placer le contenu du corps du panneau

.panel {
  margin-bottom: 20px;
  background-color: #fff;
  border: 1px solid transparent;
  border-radius: 4px;
  -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .05);  box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
}.panel-body {
  padding: 15px;
}

<div class="panel"><div class="panel-body">我是一个基础面板</div></div>

【Composants】

Le panneau de base semble trop simple Afin d'enrichir les fonctions du panneau, Bootstrap ajoute spécialement "Panel Header" et "Page Footer". le panneau. L'effet :

　☑ panel-heading : utilisé pour définir le style de la tête du panneau

　☑ panel-footer : utilisé pour définir le style de la queue du panneau

panel- titre et panneau - Le pied de page n'a défini que l'espacement et les coins arrondis

.panel-heading {
  padding: 10px 15px;
  border-bottom: 1px solid transparent;
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
}.panel-heading > .dropdown .dropdown-toggle {
  color: inherit;
}.panel-title {
  margin-top: 0;
  margin-bottom: 0;
  font-size: 16px;
  color: inherit;
}.panel-title > a {
  color: inherit;
}.panel-footer {
  padding: 10px 15px;
  background-color: #f5f5f5;
  border-top: 1px solid #ddd;
  border-bottom-right-radius: 3px;
  border-bottom-left-radius: 3px;
}

<div class="panel"><div class="panel-heading">小火柴的蓝色理想</div><div class="panel-body">前端学习博客</div><div class="panel-footer">作者：小火柴</div></div>

Panneau coloré

Le style du panneau ne n'affecte pas le thème Définissez le style et le style du thème est défini via le panneau par défaut. Dans le framework Bootstrap, en plus du style de thème par défaut, le composant panel comprend également les styles de thème suivants, formant un panneau coloré :

　☑ panel-primary : key blue

　☑ panel- succès : succès vert

☑ panneau-info : information bleu

☑ panneau-avertissement : avertissement jaune

☑ panneau-danger : danger rouge

Utilisation La méthode est très simple. Il vous suffit d'ajouter le nom de classe dont vous avez besoin en fonction du nom de classe du panneau

<div class="panel"><div class="panel-heading">小火柴的蓝色理想</div>
<div class="panel-body">前端学习博客</div><div class="panel-footer">作者：小火柴</div></div><div class="panel panel-default"><div class="panel-heading">小火柴的蓝色理想</div><div class="panel-body">前端学习博客</div><div class="panel-footer">作者：小火柴</div></div><div class="panel panel-primary"><div class="panel-heading">小火柴的蓝色理想</div><div class="panel-body">前端学习博客</div><div class="panel-footer">作者：小火柴</div></div>
<div class="panel panel-success">
<div class="panel-heading">小火柴的蓝色理想</div>
<div class="panel-body">前端学习博客</div><div class="panel-footer">作者：小火柴</div>
</div><div class="panel panel-info"><div class="panel-heading">小火柴的蓝色理想</div>
<div class="panel-body">前端学习博客</div><div class="panel-footer">作者：小火柴</div>
</div><div class="panel panel-warning"><div class="panel-heading">小火柴的蓝色理想</div>
<div class="panel-body">前端学习博客</div><div class="panel-footer">作者：小火柴</div></div>
<div class="panel panel-danger"><div class="panel-heading">小火柴的蓝色理想</div>
<div class="panel-body">前端学习博客</div><div class="panel-footer">作者：小火柴</div></div>

Imbrication de tables

Dans des circonstances normales. , le panneau peut être compris comme une zone, lors de l'utilisation du panneau, le contenu requis sera placé dans le corps du panneau, qui peut être des images, des tableaux ou des listes, etc.

Ajouter la classe .table aux tableaux qui ne nécessitent pas de bordures dans le panneau, de sorte que l'ensemble du panneau ressemble davantage à une conception monolithique. S'il s'agit d'un panneau avec .panel-body, on ajoute une bordure au dessus du tableau, qui ressemble à un effet de séparation

<div class="panel panel-default"><div class="panel-heading">小火柴的蓝色理想</div><div class="panel-body"><p>前端学习博客</p></div><table class="table"><thead>  <tr><th>#</th><th>名称</th><th>博客数量</th><th>难度</th>  </tr></thead><tbody>  <tr><th scope="row">1</th><td>HTML</td><td>30</td><td>较难</td>  
</tr>  <tr><th scope="row">2</th><td>CSS</td><td>60</td><td>较难</td>  </tr>  <tr><th scope="row">3</th><td>javascript</td><td>200</td><td>很难</td>  </tr></tbody></table></div>

S'il n'y a pas de .panel-body, le titre du panneau sera le même que les tableaux sont connectés sans espaces

Groupes de listes imbriqués

Vous pouvez simplement rejoindre le groupe de listes avec la largeur maximale dans n'importe quel panneau

<div class="panel panel-default"><div class="panel-heading">小火柴的蓝色理想</div>
<div class="panel-body"><p>前端学习博客</p></div><ul class="list-group">
<li class="list-group-item">HTML</li><li class="list-group-item">CSS</li>
<li class="list-group-item" >javascript</li>
<li class="list-group-item">bootstrap</li>
<li class="list-group-item">jquery</li>
</ul>
</div>

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!