Panneaux Bootstrap

Dans ce tutoriel, je vous propose de découvrir les panneaux de Bootstrap, appelés panel en anglais.

Exemple basique

Par défaut, tous les panneaux appliquent une bordure et du remplissage (padding) aux éléments contenus à l'intérieur.

       
    <div class="panel panel-default">

        <div class="panel-body">

             Exemple basique

        </div>

    </div>

Exemple

Exemple basique

Panneaux avec entête

Vous pouvez ajouter un entête au panneau avec la classe .panel-heading. Il peut de même être appliqué sur les balises d'entête h1 à h6.

 
    <div class="panel panel-default">

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

      <div class="panel-body">

        Contenu du panneau

      </div>

    </div>



    <div class="panel panel-default">

      <div class="panel-heading">

        <h3 class="panel-title">Panel title</h3>

      </div>

      <div class="panel-body">

        Contenu du panneau

      </div>

    </div>

Exemple

Panel heading without title

Panel content

Panel title

Panel content

Avec un élément en bas

Permet d'afficher un élément en bas du panneau.

      
    <div class="panel panel-default">

        <div class="panel-heading">Entête</div>

        <div class="panel-body">

          Contenu du panneau

        </div>

        <div class="panel-footer">Bas du panneau (<small> personnalisé sur fond  noir<small>)</div>

    </div>

Exemple

Entête

Contenu du panneau

bas du panneau (personnalisé sur fond noir)

Avec de la couleur

Les panneaux peuvent être personnalisés avec les jeux de couleur de Bootstrap

     
    <div class="panel panel-info">

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

      <div class="panel-body">

        Contenu du panneau

      </div>

    </div>

Exemple

Entête de panneau

Contenu du panneau

Avec les autres jeux de couleur


    <div class="panel panel-success">

    <div class="panel panel-primary">

    <div class="panel panel-warning">

    <div class="panel panel-danger">

Avec un tableau

     
    <div class="panel panel-default">

      <!-- Contenu avec la classe .panel-default -->

        <div class="panel-heading">Panel heading</div>

        <div class="panel-body" style="padding:10px">

              <p>Qui nescius e mentitum. Est labore arbitror incurreret, sed sint o fugiat, dolor  quo offendit est dolor o iudicem relinqueret te singulis ea tamen deserunt  adipisicing qui vidisse se fore si sed ubi minim anim tamen non culpa possumus aut officia.</p>

        </div>

        <!-- Avec un tableau -->

        <table class="table">

          <tr>

                <th>Ligne 1, colonne 1</th>

                <th>Ligne 1, colonne 2</th>

                <th>Ligne 1, colonne 3</th>

          </tr>

          <tr>

                <td>Ligne 2, colonne 1</td>

                <td>Ligne 2, colonne 2</td>

                <td>Ligne 2, colonne 3</td>

          </tr>

      </table>

    </div>

Exemple

Panel heading

Qui nescius e mentitum. Est labore arbitror incurreret, sed sint o fugiat, dolor quo offendit est dolor o iudicem relinqueret te singulis ea tamen deserunt adipisicing qui vidisse se fore si sed ubi minim anim tamen non culpa possumus aut officia.

Ligne 1, colonne 1	Ligne 1, colonne 2	Ligne 1, colonne 3
Ligne 2, colonne 1	Ligne 2, colonne 2	Ligne 2, colonne 3

Avec les lists groups

     
    <div class="panel panel-default">

        <!-- Contenu avec la classe .panel-default -->

        <div class="panel-heading">Entête</div>

        <div class="panel-body">

            <p>Qui nescius e mentitum. Est labore arbitror incurreret, sed sint o fugiat, dolor  quo offendit est dolor o iudicem relinqueret te singulis ea tamen deserunt  adipisicing qui vidisse se fore si sed ubi minim anim tamen non culpa possumus aut officia.</p>

        </div>

        <!-- List group -->

        <ul class="list-group">

            <li class="list-group-item">Bootstrap<li>

            <li class="list-group-item">Foundation</li>

            <li class="list-group-item">Knacss</li>

            <li class="list-group-item">Web Starter Kit</li>

        </ul>

    </div>

Exemple

Entête

Bootstrap
Foundation
Knacss
Web Starter Kit

Tutoriel Bootstrap