twitter-bootstrap
Панели

замечания

Основной пример

По умолчанию, все .panel делает это, применяя некоторые основные границы и отступы, чтобы содержать некоторый контент.

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

Панель с заголовком

Легко добавьте контейнер заголовка в панель с .panel-heading . Вы можете также включить любой <h1>-<h6> с .panel-title чтобы добавить заголовок с предварительным стилем. Однако размер шрифта <h1>-<h6> переопределяется .panel-heading .

Для правильной окраски ссылок обязательно размещайте ссылки в заголовках внутри .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-footer или дополнительный текст в .panel-footer . Обратите внимание, что нижние колонтитулы панели не наследуют цвета и границы при использовании контекстных вариаций, поскольку они не должны быть на переднем плане.

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