twitter-bootstrap
Panele

Uwagi

Podstawowy przykład

Domyślnie wszystko, .panel robi .panel , polega na zastosowaniu podstawowych .panel i wypełnień, aby zawierały pewną zawartość.

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

Panel z nagłówkiem

Z łatwością dodaj kontener nagłówka do panelu za .panel-heading . Możesz również dołączyć dowolne <h1>-<h6> z .panel-title aby dodać nagłówek w stylu. Jednak rozmiary czcionek <h1>-<h6> są zastępowane przez .panel-heading .

Aby uzyskać prawidłowe kolorowanie linków, umieść linki w nagłówkach w .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 ze stopką

Zawijaj przyciski lub tekst pomocniczy w .panel-footer . Zauważ, że stopki paneli nie dziedziczą kolorów i obramowań podczas korzystania z wariacji kontekstowych, ponieważ nie powinny znajdować się na pierwszym planie.

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