Was ist ein Bootstrap-Panel?

In Bootstrap bezieht sich Panel auf die Komponente „panel“, die zum Einfügen von DOM-Komponenten in eine Box verwendet wird. Um diese Komponente zu erstellen, fügen Sie einfach die Stile „panel“ und „panel-xxx“ zum div-Element hinzu Erzeugt einen Textanzeigeblock mit Rahmen und der Stil „panel-xxx“ wird zum Festlegen der Designfarbe verwendet.

Die Betriebsumgebung dieses Tutorials: Windows 7-System, Bootsrap-Version 3.3.7, DELL G3-Computer

1, Panel

Panel (Panels) ist der Bootstrap Framework Eine neu hinzugefügte Komponente, deren Hauptfunktion darin besteht, einige Funktionen zu verarbeiten, die von anderen Komponenten nicht ausgeführt werden können. Es gibt auch verschiedene Quellcodes in unterschiedlichen Versionen: 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☑ Less-Version: die entsprechende Quellcodedatei istpanels.less

☑ Sass-Version: die entsprechende Quellcodedatei ist _panels.scss

☑ Kompilierter Bootstrap: Entspricht der Datei bootstrap.css Zeile 4995~Zeile 5302

🎜🎜2. Panel – Basispanel🎜🎜 Das Basispanel ist sehr einfach. Es handelt sich um einen div-Container, der den „panel“-Stil verwendet, um einen Textanzeigeblock mit einem Rahmen zu erstellen. Da „panel“ die Theme-Farbe nicht steuert, wird auf Basis von „panel“ ein farbsteuerndes Theme „panel-default“ hinzugefügt ". Darüber hinaus wird ein Div im Stil „dpanel-body" hinzugefügt, um den Hauptinhalt des Panels zu platzieren: 🎜rrreee🎜Der laufende Effekt ist wie folgt:

Prinzipanalyse: 🎜🎜" Panel"Main Bestimmte Einstellungen wurden für den Rand, den Abstand und die abgerundeten Ecken vorgenommen: 🎜🎜/bootstrap.css Datei 🎜Zeile 4995~Zeile 5005🎜/🎜rrreee🎜3. Panel – mit Head- und Tail-Panel 🎜🎜Das Basis-Panel sieht zu einfach aus. Um die Funktionen des Panels zu bereichern, fügt Bootstrap dem Panel speziell die Effekte „Panel-Kopfzeile“ und „Seitenfuß“ hinzu: 🎜 🎜☑ panel-heading: Wird zum Festlegen des Panel-Kopfstils verwendet🎜🎜☑ panel-footer: Wird zum Festlegen des Panel-Endstils verwendet🎜rrreee🎜Der Betriebseffekt ist wie folgt :🎜🎜
Prinzipanalyse : 🎜🎜panel-heading und <code>panel-footer haben nur Abstände und abgerundete Ecken eingestellt: 🎜🎜/bootstrap.css Datei 🎜Zeile 5006~ Zeile 5030🎜/ 🎜rrreee🎜4. Panel – Farbiges Panel🎜🎜Im Abschnitt „Grundlegendes Panel“ haben wir erfahren, dass der panel-Stil das Design nicht formatiert und der Theme-Stil durch panel erfolgt -default code> zum Festlegen. Zusätzlich zum Standard-Themenstil umfasst die Panel-Komponente im <code>Bootstrap-Framework auch die folgenden Themenstile, die ein farbiges Panel bilden: 🎜🎜☑ panel-primary: Wichtige Punkte Blau 🎜🎜☑ panel-success: Erfolg grün 🎜🎜☑ panel-info: Information blau 🎜🎜☑ panel-warning: Warnung gelb 🎜 🎜☑ panel-danger: Danger Red🎜🎜Die Verwendungsmethode ist sehr einfach. Sie müssen nur den Klassennamen hinzufügen, den Sie basierend auf dem Klassennamen von panel benötigen. 🎜rrreee🎜 Der Laufeffekt ist wie folgt: 🎜🎜
Aus dem Effekt ist nicht schwer zu erkennen, dass diese Stile nur die Hintergrundfarbe, den Text und die Rahmenfarbe des Panels ändern: Der spezifische Quellcode kann in der bootstrap.css angezeigt werden Code> Datei🎜Zeile 5195~Zeile 5302🎜 . 🎜🎜5. Panel – Verschachtelte Listengruppe im Panel 🎜🎜Im vorherigen Abschnitt haben wir vorgestellt, wie man eine Tabelle im Panel platziert. Schauen wir uns nun ein einfaches Beispiel an: 🎜 rrreee🎜Der Laufeffekt ist wie folgt: 🎜🎜<img src="https://img.php.cn/upload/article/000/000/024/5586f512b61ff310570704070bab71e0-3.png" alt="Bildbeschreibung hier einfügen"> <br> Optimierter Code: 🎜🎜Wie bei verschachtelten Tabellen. Wenn Sie der Meinung sind, dass der Abstand nicht gut aussieht, können Sie die Listengruppe extrahieren: 🎜rrreee🎜Der laufende Effekt ist wie folgt: 🎜🎜<img src="https:/%20/img.php.cn/upload/article/000/000/024/5586f512b61ff310570704070bab71e0-4.png" alt="Bildbeschreibung hier einfügen"><br> Das Gleiche gilt für <code>Bootstrap code> Einige Stiloptimierungen wurden an der im Panel verschachtelten Listengruppe vorgenommen. Der spezifische Quellcode kann in der Datei <code>bootstrap.css eingesehen werden🎜Zeile 5031~Zeile 5053🎜. 🎜🎜Weitere Informationen zu Bootstrap finden Sie unter: 🎜Bootstrap-Grundlagen-Tutorial🎜! ! 🎜

Das obige ist der detaillierte Inhalt vonWas ist ein Bootstrap-Panel?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!