twitter-bootstrap
pannelli

Osservazioni

Esempio di base

Per impostazione predefinita, tutto il .panel fa applicare alcuni bordi e padding di base per contenere del contenuto.

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

Pannello con intestazione

Aggiungi facilmente un contenitore di .panel-heading al tuo pannello con .panel-heading . Puoi anche includere qualsiasi <h1>-<h6> con una classe .panel-title per aggiungere un'intestazione pre-styled. Tuttavia, le dimensioni dei caratteri di <h1>-<h6> sono sovrascritte da .panel-heading .

Per una corretta colorazione del link, assicurati di inserire collegamenti nei titoli all'interno di .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>

Pannello con il piè di pagina

Avvolgi i pulsanti o il testo secondario in .panel-footer . Si noti che i piè di pagina del pannello non ereditano colori e bordi quando si usano variazioni contestuali in quanto non sono pensati per essere in primo piano.

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