Tutoriel Bootstrap

Bootstrap

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

HTML HTML5 CSS Dreamweaver PHP

List group Bootstrap

Dans ce tutoriel, je vous propose de découvrir les lists groups de Bootstrap, trés utiles pour afficher des éléments de liste facilement personnalisables. Les blocs que vous voyez à droite sur mon site sont des lists groups.

Exemple basique

L'exemple le plus basique est constitité de liste à puce avec les classes appropriées.
<ul class="list-group">
  <li class="list-group-item">Glyphicons</li>
  <li class="list-group-item">Font awesome</li>
  <li class="list-group-item">Dropdown</li>
  <li class="list-group-item">Navbar</li>
</ul>

Exemple

  • Glyphicons
  • Font awesome
  • Dropdown
  • Navbar

Avec des badges

Dès que vous ajoutez le composant badge, il se placera automatiquement sur la droite.
<ul class="list-group">
  <li class="list-group-item"><span class="badge">8</span> Glyphicons</li>
  <li class="list-group-item"><span class="badge">9</span> Font awesome</li>
  <li class="list-group-item"><span class="badge">10</span> Dropdown</li>
  <li class="list-group-item"><span class="badge">11</span> Navbar</li>
</ul>

Exemple

  • 8 Glyphicons
  • 9 Font awesome
  • 10 Dropdown
  • 11 Navbar

Avec des liens

On peut de même utiliser des liens hypertextes (généralement le cas le plus utilisé). Pour cela on remplace les balises ul par des div et l'on met des liens a à la place des balises li.
<div class="list-group">
  <a href="#" class="list-group-item active" title="Frameworks">
    Frameworks
  </a>
  <a href="#" class="list-group-item" title="Bootstrap">Bootstrap</a>
  <a href="#" class="list-group-item" title="Foundation">Foundation</a>
  <a href="#" class="list-group-item" title="Knacss">Knacss</a>
</div>

Exemple

Avec des boutons

On peut de même utiliser des balises button. Pour cela on remplace les balises ul par des div et l'on met des balises button à la place des balises li.
<div class="list-group">
  <button class="list-group-item" title="Bootstrap">Frameworks</button>
  <button class="list-group-item" title="Foundation">Foundation</button>
  <button class="list-group-item" title="Knacss">Knacss</button>
</div>

Exemple

Désactivé

<div class="list-group">
  <a href="#" class="list-group-item" title="Bootstrap">
    Bootstrap
  </a>
  <a href="#" class="list-group-item" title="Foundation">Foundation</a>
  <a href="#" class="list-group-item disabled" title="Knacss">Knacss</a>
</div>

Exemple

Avec des couleurs

On pourra de même y ajouter les jeux de couleurs de Bootstrap.
<div class="list-group">
  <a href="#" class="list-group-item active" title="Frameworks">
    Frameworks
  </a>
  <a href="#" class="list-group-item list-group-item-success" title="Bootstrap">Bootstrap</a>
  <a href="#" class="list-group-item list-group-item-info" title="Foundation">Foundation</a>
  <a href="#" class="list-group-item list-group-item-warning" title="Knacss">Knacss</a>
  <a href="#" class="list-group-item list-group-item-danger" title="Web Starter Kit">Web Starter Kit</a>
</div>

Exemple

Personnalisé

On pourra de même les personnaliser.
<div class="list-group">
<a href="#" class="list-group-item active">
<h4 class="list-group-item-heading">Twitter Bootstrap</h4>
<p class="list-group-item-text">Cillum voluptatibus laboris illum admodum, nam non aute multos anim. Occaecat praesentibus hic laboris quo amet cupidatat concursionibus, o hic exercitation, est excepteur sempiternum, si amet pariatur de legam iis senserit, magna cupidatat e eiusmod eu se amet arbitror despicationes.</p>
</a>
<a href="#" class="list-group-item">
<h4 class="list-group-item-heading">Zurb Foundation</h4>
<p class="list-group-item-text">Cillum voluptatibus laboris illum admodum, nam non aute multos anim. Occaecat praesentibus hic laboris quo amet cupidatat concursionibus, o hic exercitation, est excepteur sempiternum, si amet pariatur de legam iis senserit, magna cupidatat e eiusmod eu se amet arbitror despicationes.</p>
</a>
</div>

Exemple

Avec les font awesome

<div class="list-group">
   <a href="#" class="list-group-item active" title="Secteurs d'activité">
  Secteurs d'activité
   </a>
   <a href="#" class="list-group-item" title="Industrie"><i class="fa fa-industry"></i> Industrie</a>
  <a href="#" class="list-group-item" title="Automobile"><i class="fa fa-automobile"></i> Automobile</a>
  <a href="#" class="list-group-item" title="Téléphonie"><i class="fa fa-mobile"></i> Téléphonie</a>
  <a href="#" class="list-group-item" title="Banque"><i class="fa fa-bank"></i> Banque</a>
</div>

Exemple

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 |