Bootstrap muss täglich erlernt werden_Javascript-Kenntnisse

1. Panel

Panels sind eine neue Komponente des Bootstrap-Frameworks. Ihre Hauptfunktion besteht darin, einige Funktionen zu verwalten, die von anderen Komponenten nicht ausgeführt werden können. Hat auch unterschiedliche Quellcodes in verschiedenen Versionen:

☑ Less-Version: Die entsprechende Quellcodedatei istpanels.less

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

☑ Kompilierter Bootstrap: entspricht den Zeilen 4995 bis 5302 der Datei bootstrap.css

2. Panel – Basispanel

Das Grundpanel ist sehr einfach. Es handelt sich um einen Div-Container, der den „Panel“-Stil verwendet, um einen Textanzeigeblock mit einem Rahmen zu generieren. Da „panel“ die Designfarbe nicht steuert, wird ein farbsteuerndes Design „panel-default“ basierend auf „panel“ hinzugefügt und darin ein „div.panel-body“ hinzugefügt, um den Hauptinhalt des Panels zu platzieren:

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

Der Betriebseffekt ist wie folgt:

Prinzipanalyse:

„Panel“ legt hauptsächlich bestimmte Ränder, Abstände und abgerundete Ecken fest:

/Zeile 4995~Zeile 5005 der Bootstrap.css-Datei/

.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. Panel – Panel mit Kopf und Schwanz

Das Basispanel 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-Header: wird verwendet, um den Panel-Header-Stil festzulegen

☑ Panel-Fußzeile: wird verwendet, um den Stil der Panel-Fußzeile festzulegen

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

Der Betriebseffekt ist wie folgt:

Prinzipanalyse:

Für Panel-Kopfzeile und Panel-Fußzeile sind nur Abstände und abgerundete Ecken festgelegt:

/Zeile 5006~Zeile 5030 der Bootstrap.css-Datei/

.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 – Farbpanel

Im Abschnitt „Basis-Panel“ haben wir erfahren, dass der Panel-Stil nicht den Theme-Stil festlegt, sondern dass der Theme-Stil über die Panel-Standardeinstellung festgelegt wird. Zusätzlich zum Standard-Theme-Stil umfasst die Panel-Komponente im Bootstrap-Framework auch die folgenden Theme-Stile, die ein farbenfrohes Panel bilden:

☑ Panel-Primär: Taste blau

☑ Panel-Erfolg: Erfolg grün

☑ panel-info:Information Blue

☑ Panel-Warnung: Warnung gelb

☑ Panel-Gefahr: Gefahr Rot

Die Verwendungsmethode ist sehr einfach. Sie müssen nur den benötigten Klassennamen basierend auf dem Klassennamen des Panels hinzufügen:

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

Der Betriebseffekt 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: Für den spezifischen Quellcode können Sie die Zeilen 5195 bis 5302 der Datei bootstrap.css anzeigen.

5. Panel – Verschachtelte Listengruppe im Panel

Im vorherigen Abschnitt haben wir vorgestellt, wie man eine Tabelle im Panel platziert. Schauen wir uns nun einfach ein Beispiel an:

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

Der Betriebseffekt ist wie folgt:

Code optimieren:

Wie bei verschachtelten Tabellen können Sie die Listengruppe extrahieren, wenn Sie der Meinung sind, dass der Abstand nicht gut aussieht:

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

Der Betriebseffekt ist wie folgt:

Aus dem gleichen Grund hat Bootstrap bestimmte Stiloptimierungen für in Panels verschachtelte Listengruppen vorgenommen. Für den spezifischen Quellcode können Sie die Zeilen 5031 bis 5053 der Datei bootstrap.css anzeigen.

Für Panels werden oben grundlegende Panels, Farbpanels usw. vorgestellt, damit Sie das Bootstrap-Panel umfassender erlernen können. Ich hoffe, Sie werden etwas davon gewinnen.