twitter-bootstrap
Panels

Bemerkungen

Grundlegendes Beispiel

Standardmäßig .panel das .panel nur einige grundlegende Rahmen und Füllungen an, um Inhalte zu enthalten.

<div class="panel panel-default">
  <div class="panel-body">
    Basic panel example
  </div>
</div>

Panel mit Überschrift

.panel-heading Ihrem Panel .panel-heading einfach einen Überschriftencontainer mit .panel-heading . Sie können auch beliebige <h1>-<h6> mit einer .panel-title Klasse hinzufügen, um eine vorab gestylte Überschrift hinzuzufügen. Die Schriftgrößen von <h1>-<h6> werden jedoch durch die .panel-heading überschrieben.

.panel-title für eine korrekte Link-Farbe sicher, dass Sie Links in Überschriften innerhalb des .panel-title .

<div class="panel panel-default">
  <div class="panel-heading">Panel heading without title</div>
  <div class="panel-body">
    Panel content
  </div>
</div>

<div class="panel panel-default">
  <div class="panel-heading">
    <h3 class="panel-title">Panel title</h3>
  </div>
  <div class="panel-body">
    Panel content
  </div>
</div>

Panel mit Fußzeile

.panel-footer Sie Schaltflächen oder sekundären Text in die .panel-footer . Beachten Sie, dass Bedienfeldfußzeilen bei kontextabhängigen Variationen keine Farben und Rahmen erben, da sie nicht im Vordergrund sein sollen.

<div class="panel panel-default">
  <div class="panel-body">
    Panel content
  </div>
  <div class="panel-footer">Panel footer</div>
</div>