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

Frameworks Bootstrap Foundation Knacss

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

Bootstrap Foundation Knacss

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

Frameworks Bootstrap Foundation Knacss Web Starter Kit

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

Twitter Bootstrap

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.

Zurb Foundation

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

Secteurs d'activité Industrie Automobile Téléphonie Banque