Detaillierte Einführung in das Bootstrap-Panel

1. Panels

Panels sind eine neue Komponente des Bootstrap-Frameworks. Ihre Hauptfunktion besteht darin, einige Funktionen zu verwalten, die andere Komponenten nicht ausführen können. Es gibt 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

Basispanel

Das Basispanel ist sehr einfach, es ist ein Div-Container mit „panel“ Stil, generiert einen Textanzeigeblock mit einem Rahmen und fügt einen „div.panel-body“ hinzu, um den Inhalt des Panel-Körpers zu platzieren

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

【Komponenten】

Das Basispanel sieht zu einfach aus. Um die Funktionen des Panels zu bereichern, fügt Bootstrap speziell „Panel Header“ und „Page Footer“ hinzu Der Effekt:

　☑ Panel-Header: Wird zum Festlegen des Panel-Kopfstils verwendet.

　☑ Panel-Fußzeile: Wird zum Festlegen des Panel-Endstils verwendet.

Panel- Überschrift und Panel – Die Fußzeile hat nur den Abstand und die abgerundeten Ecken festgelegt

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

Farbiges Panel

Der Panel-Stil hat Keine Auswirkung auf das Thema. Legen Sie den Stil fest. Der Themenstil wird über die Panel-Standardeinstellung festgelegt. Im Bootstrap-Framework enthält die Panel-Komponente zusätzlich zum Standard-Themenstil auch die folgenden Themenstile, die ein farbiges Panel bilden:

　☑ Panel-Primary: Key Blue

　☑ Panel- Erfolg: Erfolg grün

☑ Panel-Info: Information blau

☑ Panel-Warnung: Warnung gelb

☑ Panel-Gefahr: Gefahr rot

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

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

Tabellenverschachtelung

Unter normalen Umständen , das Panel kann verstanden werden Als Bereich wird bei Verwendung des Panels der erforderliche Inhalt im Panel-Körper platziert, bei dem es sich um Bilder, Tabellen oder Listen usw. handeln kann.

Fügen Sie die Klasse .table hinzu zu den Tischen, die keine Ränder im Panel benötigen, sodass das gesamte Panel eher wie ein monolithisches Design aussieht. Wenn es sich um ein Panel mit .panel-body handelt, fügen wir über der Tabelle einen Rahmen ein, der wie ein Trenneffekt aussieht

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

Wenn kein .panel-body vorhanden ist, der Paneltitel ist dasselbe wie Tabellen werden lückenlos verbunden

Verschachtelte Listengruppen

Sie können einfach einer Listengruppe mit der maximalen Breite in jedem Panel beitreten

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

Das obige ist der detaillierte Inhalt vonDetaillierte Einführung in das Bootstrap-Panel. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!