Tutoriel Bootstrap

Bootstrap

Découvez les bases du plus célébre des frameworks CSS.

HTML HTML5 CSS Dreamweaver PHP

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

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

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.

  • Bootstrap
  • Foundation
  • Knacss
  • Web Starter Kit

Ce site est liste dans la categorie Enseignement et formation : Formations professionnelles de l'annuaire Référencement et Dictionnaire

Frédéric création Jardin | Concinnatis | Au petit grandeur | Lestrem TP | Jerico | Solumetal | Comonmarket | Chez Beau J'ai | Beukenne Traiteur | PDP Recouvrement | Agroé - Achat groupé d'énérgie | Achat goupé Sorea | CE LM énergie | placedesenergies.com | Gazon de la Folie | Dépannage pôele à  pellet | Création site web Nord | Rénovation habitat Pas de calais | Cuisine Bois | Créperie à  Valenciennes | Repar Coudre | DNS service | Archis 2 | 3MI | Tests d'orientation professionnels - Solutests | Ircl | Leblan promotion | Formation webmaster, PAO, CAO / DAO | Formateur Web, référencement et PAO | Formateur bureautique |