Bootstrap doit apprendre les panneaux tous les jours_compétences javascript

1. Panneau

Les panneaux sont un nouveau composant du framework Bootstrap. Sa fonction principale est de gérer certaines fonctions qui ne peuvent pas être complétées par d'autres composants. A également différents codes sources dans différentes versions :

☑ Version moins : Le fichier de code source correspondant est panels.less

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

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

2. Panneau – Panneau de base

Le panneau de base est très simple. Il s'agit d'un conteneur div utilisant le style "panel" pour générer un bloc d'affichage de texte avec une bordure. Puisque "panel" ne contrôle pas la couleur du thème, un thème de contrôle des couleurs "panel-default" est ajouté en fonction de "panel", et un "div.panel-body" est ajouté à l'intérieur pour placer le contenu principal du panneau :

<div class="panel panel-default">
 <div class="panel-body">我是一个基础面板，带有默认主题样式风格</div>
</div>

L'effet de l'opération est le suivant :

Analyse des principes :

"Panneau" définit principalement certaines bordures, espacements et coins arrondis :

/Ligne 4995~Ligne 5005 du fichier bootstrap.css/

.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;
}

3. Panneau – panneau avec tête et queue

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

☑ panel-heading : est utilisé pour définir le style d'en-tête du panneau

☑ panel-footer : est utilisé pour définir le style du pied de page du panneau

<div class="panel panel-default">
 <div class="panel-heading">图解CSS3</div>
 <div class="panel-body">…</div>
 <div class="panel-footer">作者：大漠</div>
</div>

L'effet de l'opération est le suivant :

Analyse des principes :

L'en-tête et le pied de page du panneau ont uniquement un espacement et des coins arrondis :

/Ligne 5006~Ligne 5030 du fichier bootstrap.css/

.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;
}

4. Panneau – panneau de couleur

Dans la section Panneau de base, nous avons appris que le style du panneau ne définit pas le style du thème, mais que le style du thème est défini via panel-default. En plus du style de thème par défaut, le composant panneau du framework Bootstrap comprend également les styles de thème suivants, qui constituent un panneau coloré :

☑ panneau-primaire : touche bleue

☑ panel-succès : réussite verte

☑ panel-info:Information Bleu

☑ panneau d'avertissement : avertissement jaune

☑ panneau-danger : Danger Rouge

La méthode d'utilisation 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 panel-default">
 <div class="panel-heading">图解CSS3</div>
 <div class="panel-body">…</div>
 <div class="panel-footer">作者：大漠</div>
</div>
…
…
…
…
…

L'effet de l'opération est le suivant :

Il n'est pas difficile de constater à partir de l'effet que ces styles ne modifient que la couleur d'arrière-plan, le texte et la couleur de la bordure du panneau : pour le code source spécifique, vous pouvez visualiser les lignes 5195 à 5302 du fichier bootstrap.css.

5. Panneau – Groupe de listes imbriquées dans le panneau

Dans la section précédente, nous avons présenté comment placer un tableau dans le panneau. Apprenons maintenant comment placer un groupe de listes dans le panneau. Regardons simplement un exemple :

<div class="panel panel-default">
 <div class="panel-heading">图解CSS3</div>
 <div class="panel-body">
  <p>详细讲解了选择器、边框、背景、文本、颜色、盒模型、伸缩布局盒模型、多列布局、渐变、过渡、动画、媒体、响应Web设计、Web字体等主题下涵盖的所有CSS3新特性
  </p>
  <ul class="list-group">
   <li class="list-group-item">我是列表项</li>
   <li class="list-group-item">我是列表项</li>
   <li class="list-group-item">我是列表项</li>
  </ul>
 </div>
 <div class="panel-footer">作者：大漠</div>
</div>

L'effet de l'opération est le suivant :

Optimiser le code :

Comme pour les tableaux imbriqués, si vous pensez que l'espacement ne semble pas bon, vous pouvez extraire le groupe de liste :

<div class="panel panel-default">
 <div class="panel-heading">图解CSS3</div>
 <div class="panel-body">…</div>
 <ul class="list-group">
  <li class="list-group-item">我是列表项</li>
  <li class="list-group-item">我是列表项</li>
  <li class="list-group-item">我是列表项</li>
 </ul>
 <div class="panel-footer">作者：大漠</div>
</div>

L'effet de l'opération est le suivant :

Pour la même raison, Bootstrap a effectué certaines optimisations de style pour les groupes de listes imbriqués dans des panneaux. Pour le code source spécifique, vous pouvez afficher les lignes 5031 à 5053 du fichier bootstrap.css.

Pour les panneaux, ce qui précède présente les panneaux de base, les panneaux de couleurs, etc. pour vous aider à apprendre le panneau Bootstrap de manière plus complète. J'espère que vous en tirerez quelque chose.