qu'est-ce que le panneau d'amorçage

Dans bootstrap, panel fait référence au composant "panel", qui est utilisé pour insérer des composants DOM dans une boîte ; pour créer ce composant, ajoutez simplement les styles "panel" et "panel-xxx" à l'élément div, et il le fera. Génère un bloc d'affichage de texte avec une bordure et le style "panel-xxx" est utilisé pour définir la couleur du thème.

L'environnement d'exploitation de ce tutoriel : système Windows 7, bootsrap version 3.3.7, ordinateur DELL G3

1, panel

Panel (Panels) est le Bootstrap framework Un composant nouvellement ajouté dont la fonction principale est de gérer certaines fonctions qui ne peuvent pas être complétées par d'autres composants. Il existe également différents codes sources dans différentes versions : Panels）是Bootstrap框架新增的一个组件，其主要作用就是用来处理一些其他组件无法完成的功能。同样在不同的版本中具有不同的源码：

☑ Less版本：对应的源码文件是 panels.less

☑ Sass版本：对应的源码文件是 _panels.scss

☑ 编译后的Bootstrap：对应bootstrap.css文件第4995行～第5302行

2、面板–基础面板

基础面板非常简单，就是一个div容器运用了“panel”样式，产生一个具有边框的文本显示块。由于“panel”不控制主题颜色，所以在“panel”的基础上增加一个控制颜色的主题“panel-default”，另外在里面添加了一个“dpanel-body”样式的div来放置面板主体内容：

<div>
    <div>我是一个基础面板，带有默认主题样式风格</div>
</div>

运行效果如下：

原理分析：

“panel“主要对边框，间距和圆角做了一定的设置：

/bootstrap.css文件第4995行～第5005行/

.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、面板–带有头和尾的面板

基础面板看上去太简单了，Bootstrap为了丰富面板的功能，特意为面板增加“面板头部”和“页面尾部”的效果：

☑ panel-heading：用来设置面板头部样式

☑ panel-footer：用来设置面板尾部样式

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

运行效果如下：

原理分析：

panel-heading和panel-footer也仅仅间距和圆角等样式进行了设置：

/bootstrap.css文件第5006行～第5030行/

.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、面板–彩色面板

在基础面板一节中了解到，panel样式并没有对主题进行样式设置，而主题样式是通过panel-default来设置。在Bootstrap框架中面板组件除了默认的主题样式之外，还包括以下几种主题样式，构成了一个彩色面板：

☑ panel-primary：重点蓝

☑ panel-success：成功绿

☑ panel-info:信息蓝

☑ panel-warning：警告黄

☑ panel-danger：危险红

使用方法就很简单了，只需要在panel的类名基础上增加自己需要的类名：

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

运行效果如下：

从效果中不难发现，这几个样式只是改变了面板的背景色、文本和边框颜色：具体源码可以查看bootstrap.css文件第5195行～第5302行。

5、面板–面板中嵌套列表组

在上一节，我们介绍了如何在面板中放置表格，现在我们来学习如何在面板中放置列表组，我们简单的来看一个示例：

<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>

运行效果如下：

优化代码：

和嵌套表格一样，如果你觉得这样有间距不好看，你完全可以把列表组提取出来：

<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>

运行效果如下：

同样的道理，Bootstrap将嵌套在面板中的列表组做了一定的样式优化。具体源码可以查看bootstrap.css☑ 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 au fichier bootstrap.css Ligne 4995~Ligne 5302

🎜🎜2 Panneau – Panneau de base🎜🎜 Le panneau de base. est très simple. Il s'agit d'un conteneur div qui utilise le style "panel" pour produire 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é sur la base de "panel ". De plus, un div de style "dpanel-body" est ajouté à l'intérieur pour placer le contenu principal du panneau : 🎜rrreee🎜L'effet d'exécution est le suivant :

Analyse principale : 🎜🎜" panel"Principal Certains réglages ont été effectués pour la bordure, l'espacement et les coins arrondis : 🎜🎜/bootstrap.css fichier 🎜Ligne 4995~Ligne 5005🎜/🎜rrreee🎜3. Panneau – avec panneau 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-header : 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🎜rrreee🎜L'effet de l'opération est le suivant :🎜🎜
Analyse du principe : 🎜🎜panel-heading et <code>panel-footer n'ont que des espacements et des coins arrondis définis : 🎜🎜/bootstrap.css fichier 🎜line 5006~ ligne 5030🎜/ 🎜rrreee🎜4. Panneau – Panneau coloré🎜🎜Dans la section Panneau de base, nous avons appris que le style panel ne stylise pas le thème et que le style du thème passe par le panneau . -default code> à définir. En plus du style de thème par défaut, le composant panel dans le framework <code>Bootstrap comprend également les styles de thème suivants, formant un panneau coloré : 🎜🎜☑ panel-primary : Points clés Bleu 🎜🎜☑ panel-success : succès vert 🎜🎜☑ panel-info : information bleu 🎜🎜☑ panel-warning : avertissement jaune 🎜 🎜☑ panel-danger : Danger Red🎜🎜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 panel : 🎜rrreee🎜 L'effet de course est le suivant : 🎜🎜
Il n'est pas difficile de constater à partir de l'effet que ces styles modifient uniquement la couleur d'arrière-plan, le texte et la couleur de la bordure du panneau : le code source spécifique peut être visualisé dans le bootstrap.css code> fichier🎜Ligne 5195~Ligne 5302🎜 . 🎜🎜5. Panneau – Groupe de listes imbriqué dans le panneau 🎜🎜Dans la section précédente, nous avons présenté comment placer un tableau dans le panneau. Voyons maintenant comment placer un groupe de listes dans le panneau. rrreee🎜L'effet de course est le suivant : 🎜🎜<img src="https://img.php.cn/upload/article/000/000/024/5586f512b61ff310570704070bab71e0-3.png" alt="Insérer la description de l'image ici"> <br> Code optimisé : 🎜🎜Identique aux tableaux imbriqués, si vous pensez que l'espacement ne semble pas bon, vous pouvez extraire le groupe de liste : 🎜rrreee🎜L'effet d'exécution est le suivant : 🎜🎜<img src="https://img.php.cn/upload/article/000/000/024/5586f512b61ff310570704070bab71e0-4.png" alt="Insérer la description de l'image ici"><br> Il en va de même pour <code>Bootstrap code> Une certaine optimisation du style a été effectuée sur le groupe de listes imbriqué dans le panneau. Le code source spécifique peut être consulté dans le fichier <code>bootstrap.css🎜ligne 5031~ligne 5053🎜. 🎜🎜Pour plus de connaissances sur le bootstrap, veuillez visiter : 🎜Tutoriel de base du bootstrap🎜 ! ! 🎜

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!