Bootstrap 4 : étiquettes et listes groupées

image_pdfimage_print

Dans ce chapitre nous allons voir les étiquettes (badges) et les listes groupées.

Voici la page d’exemple agrémentée de nouveaux éléments dont je vais parler dans ce chapitre et le suivant :

<!DOCTYPE HTML>
<html lang="fr">

  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link href="css/bootstrap.css" rel="stylesheet">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
  </head>

  <body>

    <nav class="navbar navbar-expand-md navbar-dark bg-info">
      <a class="navbar-brand" href="#">Les Tigres</a>
      <ul class="navbar-nav mr-auto">
        <li class="nav-item active">
          <a class="nav-link" href="#">Accueil</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Liens</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Témoignages</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Références</a>
        </li>
      </ul>
      <form action="search" method="get" class="form-inline">
        <div class="input-group">
          <input type="text" name="search" class="form-control" placeholder="Je cherche...">
          <span class="input-group-btn">
            <button type="submit" class="btn btn-secondary"><span class="fa fa-search"></span> Chercher</button>
          </span>
        </div>
      </form>
    </nav>

    <div class="container">
      <header class="row">
        <div class="col-12">
          <h1 class="text-center text-uppercase m-4">Mon amour pour les tigres<small class="text-muted"> et tous les félins</small></h1>
        </div>
        <div class="col">
          <p>
            Je suis passionné par les <strong>tigres</strong> depuis très longtemps. Ce site a été construit en <em>hommage à ces merveilleux félins...</em>
          </p>
          <p>
            Je fais partie de la <abbr title="Société des Amoureux des Tigres">SAT</abbr> qui a pour but de faire connaître ces splendides animaux, ainsi que du <abbr title="Centre de Recherche sur les Félins" class="initialism">CRF</abbr>. 
          </p>
          <p class="lead text-right">
            N'hésitez pas à soutenir la cause des tigres !
          </p>
          <blockquote class="blockquote text-right">
            Le Tigre (Panthera tigris) est un mammifère carnivore de la famille des félidés (Felidae) du genre Panthera. 
            Aisément reconnaissable à sa fourrure rousse rayée de noir, il est le plus grand félin sauvage et l'un des plus grands carnivores du monde. L'espèce est divisée en neuf sous-espèces possédant des différences mineures en termes de taille ou de comportement. Superprédateur, il chasse principalement les cerfs et les sangliers, bien qu'il puisse s'attaquer à des proies de taille plus importante comme les buffles. Jusqu'au XIXe siècle, le Tigre était réputé mangeur d'homme. La structure sociale des tigres en fait un animal solitaire ; le mâle possède un territoire qui englobe les domaines de plusieurs femelles et ne participe pas à l'éducation des petits.
            <footer class="blockquote-footer">Texte recueilli dans <cite>Wikipedia</cite></footer>
          </blockquote>
        </div>
      </header>
      <section class="row">
        <div class="col">
          <div class="card-columns d-none d-md-block">
            <div class="card">
              <div class="card-header">
                Les sous-espèces des tigres
              </div>
              <div class="list-group">
                <a href="#" class="list-group-item d-flex justify-content-between align-items-center">
                  Tigre de Sibérie
                  <span class="badge badge-secondary badge-pill">120</span>
                </a>
                <a href="#" class="list-group-item d-flex justify-content-between align-items-center">
                  Tigre de Chine méridionale
                  <span class="badge badge-secondary badge-pill">540</span>
                </a>
                <a href="#" class="list-group-item d-flex justify-content-between align-items-center">
                  Tigre de Bali
                  <span class="badge badge-secondary badge-pill">230</span>
                </a>
                <a href="#" class="list-group-item d-flex justify-content-between align-items-center">
                  Tigre de d'Indochine
                  <span class="badge badge-secondary badge-pill">240</span>
                </a>
                <a href="#" class="list-group-item d-flex justify-content-between align-items-center">
                  Tigre de Malaisie
                  <span class="badge badge-secondary badge-pill">1200</span>
                </a>
                <a href="#" class="list-group-item d-flex justify-content-between align-items-center">
                  Tigre de Java
                  <span class="badge badge-secondary badge-pill">710</span>
                </a>
                <a href="#" class="list-group-item d-flex justify-content-between align-items-center">
                  Tigre de Sumatra
                  <span class="badge badge-secondary badge-pill">20</span>
                </a>
                <a href="#" class="list-group-item d-flex justify-content-between align-items-center">
                  Tigre du Bengale
                  <span class="badge badge-secondary badge-pill">40</span>
                </a>
                <a href="#" class="list-group-item d-flex justify-content-between align-items-center">
                  Tigre de la Caspienne
                  <span class="badge badge-secondary badge-pill">200</span>
                </a>
              </div>
            </div>
            <div class="card">
              <img class="img-fluid rounded" src="images/tigre1.jpg" alt="Tigre">
            </div>
            <div class="card">
              <img class="img-fluid rounded" src="images/tigre2.jpg" alt="Tigre">
            </div>
            <div class="card">
              <img class="img-fluid rounded" src="images/tigre3.jpg" alt="Tigre">
            </div>
            <div class="">
            <div class="card">
              <img class="img-fluid rounded" src="images/tigre4.jpg" alt="Tigre">
            </div>
            <div class="card">
              <img class="img-fluid rounded" src="images/tigre5.jpg" alt="Tigre">
            </div>
            <div class="card">
              <img class="img-fluid rounded" src="images/tigre6.jpg" alt="Tigre">
            </div>
            <div class="card">
              <img class="img-fluid rounded" src="images/tigre8.jpg" alt="Tigre">
            </div>
            <div class="card">
              <img class="img-fluid rounded" src="images/tigre9.jpg" alt="Tigre">
            </div>
          </div>
        </div>
      </section>
      <section class="row">
          <div class="col">
            <h2 class="display-4 text-center text-danger p-md-3">Menaces pour les tigres</h2>
            <table class="table table-dark table-bordered table-sm">
              <caption>
                <h4>Les menaces pour les tigres</h4>
              </caption>
              <thead>
                <tr>
                  <th>Lieu</th>
                  <th>Menace</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td>Grand Mekong</td>
                  <td>Demande croissante de certaines parties de l’animal pour la médecine chinoise traditionnelle 
  et fragmentation des habitats du fait du développement non durable d’infrastructures</td>
                </tr>
                <tr>
                  <td>Île de Sumatra</td>
                  <td>Production d’huile de palme et de pâtes à papiers</td>
                </tr>
                <tr>
                  <td>Indonésie et Malaisie</td>
                  <td>Pâte à papier, l’huile de palme et le caoutchouc</td>
                </tr>
                <tr>
                  <td>États-Unis</td>
                  <td>Les tigres captifs représentent un danger pour les tigres sauvages</td>
                </tr>
                <tr>
                  <td>Europe</td>
                  <td>Gros appétit pour l’huile de palme</td>
                </tr>
                <tr>
                  <td>Népal</td>
                  <td>Commerce illégal de produits dérivés de tigres</td>
                </tr>
              </tbody>
            </table>
          </div>
        <div class="w-100"></div>
        <blockquote class="col blockquote">
          Il est vital de préserver un espace adapté à sa survie. Malgré l'augmentation de la pollution, malgré l’extension des zones cultivées, malgré les incendies, malgré le trafic illégal à des fins purement commerciales, il est possible de protéger son habitat tout en soutenant les intérêts des populations locales.
          <footer class="blockquote-footer">Texte recueilli dans <cite>Planète tigre</cite></footer>
        </blockquote>
        <div class="w-100"></div>
        <p class="col text-justify">
          Nous avons lancé une grande opération de préservation des tigres et nous vous convions à participer à cette démarche essentielle à la survie de ces nobles animaux.
        </p>
      </section>
      <section class="row col d-none d-md-block mb-3">
        <div class="media">
          <div class="d-flex mr-3">
            <iframe class="media-object" width="420" height="320" src="http://www.youtube.com/embed/VmnIeLmjuHA" allowfullscreen></iframe>
          </div>          
          <div class="media-body">
            <h4>Un tigre domestique dans son canapé</h4>
            <p>Admirez ce noble animal...</p>
          </div>
        </div>
      </section>
      <section class="row justify-content-center">
        <div class="col-md-8">
          <h3><span class="badge badge-secondary">Si vous voulez me laisser un message</span></h3>
          <form>            
              <p class="lead">Comment m'avez-vous trouvé ?</p>
              <div class="custom-control custom-radio custom-control-inline">
                <input id="radio1" name="origine" type="radio" class="custom-control-input" value="ami" checked>
                <label class="custom-control-label" for="radio1">Par un ami</label>
              </div>
              <div class="custom-control custom-radio custom-control-inline">
                <input id="radio2" name="origine" type="radio" class="custom-control-input" value="web">
                <label class="custom-control-label" for="radio2">Sur le web</label>
              </div>
              <div class="custom-control custom-radio custom-control-inline">
                <input id="radio3" name="origine" type="radio" class="custom-control-input" value="hasard">
                <label class="custom-control-label" for="radio3">Par hasard</label>
              </div>
              <div class="custom-control custom-radio custom-control-inline">
                <input id="radio4" name="origine" type="radio" class="custom-control-input" value="autre">
                <label class="custom-control-label" for="radio4">Autre...</label>
              </div>
              <fieldset class="form-group">
                <label for="textarea">Votre message :</label>
                <textarea id="textarea" class="form-control" rows="4"></textarea>
                <small class="form-text text-muted">Vous pouvez agrandir la fenêtre</small>
              </fieldset>
              <button class="btn btn-primary" type="submit"><span class="fa fa-send-o"></span> Envoyer</button>
            </form>
          <br>
        </div>
      </section>
    </div>
  </body>
</html>

Tester en ligne

Les Étiquettes (Badges)

Pour créer des repères visuels textuels attractifs, il est possible de créer de belles étiquettes avec 8 variations :

<span class="badge badge-primary">Primary</span><br>
<span class="badge badge-secondary">Secondary</span><br>
<span class="badge badge-success">Success</span><br>
<span class="badge badge-danger">Danger</span><br>
<span class="badge badge-warning">Warning</span><br>
<span class="badge badge-info">Info</span><br>
<span class="badge badge-light">Light</span><br>
<span class="badge badge-dark">Dark</span><br>

Ces étiquettes peuvent s’adapter en dimension en utilisant les balises de titres (en fait elles occupent toute la place disponible dans le conteneur parent) :

<h1><span class="badge badge-success">H1</span></h1>
<h2><span class="badge badge-success">H2</span></h2>
<h3><span class="badge badge-success">H3</span></h3>
<h4><span class="badge badge-success">H4</span></h4>
<h5><span class="badge badge-success">H5</span></h5>
<h6><span class="badge badge-success">H6</span></h6>

On peut obtenir des bords plus arrondis avec la classe label-pill pour les nostalgiques des badges de la précédente version :

J’ai utilisé une étiquette dans le formulaire de contact de la page d’exemple :

Comme une étiquette se trouve dans une balise <span>, il est facile de l’intégrer par exemple à un bouton  :

<button class="btn btn-danger">Envoi <span class="badge badge-pill badge-success">42</span></button>

J’ai ajouté des étiquettes sur la page d’exemple pour représenter le nombre de tigres :

Nous verrons le code plus loin dans ce chapitre

Les listes groupées

Les listes groupées proposent une mise en forme des listes non ordonnées. Voici un premier exemple avec la visualisation d’une liste sans et avec formatage pour comparer :

<div class="container">
  <div class="col">
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
      <li>Item 4</li>
    </ul>
  </div>
  <div class="col-lg-2">
    <ul class="list-group">
      <li class="list-group-item">Item 1</li>
      <li class="list-group-item">Item 2</li>
      <li class="list-group-item">Item 3</li>
      <li class="list-group-item">Item 4</li>
    </ul>
  </div>
</div>

Liste avec étiquettes

Il est possible d’ajouter des étiquettes tout simplement en intégrant une balise <span>, pour qu’elles se positionnent à droite il faut ajouter quelques classes :

<ul class="col-lg-2 list-group">
  <li class="list-group-item d-flex justify-content-between align-items-center">
    Item 1
    <span class="badge badge-secondary badge-pill">22</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-center">
    Item 2
    <span class="badge badge-secondary badge-pill">12</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-center">
    Item 3
    <span class="badge badge-secondary badge-pill">33</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-center">
    Item 4
    <span class="badge badge-secondary badge-pill">87</span>
  </li>
</ul>

Listes avec liens ou boutons

Les éléments de la liste peuvent aussi être des liens. Il suffit de prévoir des balises <a>, l’item actif est repéré avec la classe active, un item inactif est repéré avec la classe disabled. D’autre part il faut ajouter la classe list-group-item-action :

<ul class="list-group">
  <a href="#" class="list-group-item list-group-item-action">Item 1</a>
  <a href="#" class="list-group-item list-group-item-action active">Item 2</a>
  <a href="#" class="list-group-item list-group-item-action">Item 3</a>
  <a href="#" class="list-group-item list-group-item-action disabled">Item 4</a>
</ul>

Il est possible d’obtenir le même résultat avec des boutons au lieu des liens :

<div class="list-group">
  <button type="button" class="list-group-item list-group-item-action">Item 1</button>
  <button type="button" class="list-group-item list-group-item-action active">Item 2</button>
  <button type="button" class="list-group-item list-group-item-action">Item 3</button>
  <button type="button" class="list-group-item list-group-item-action" disabled>Item 4</button>
</div>

Un peu de couleurs

On peut changer la couleur du fond avec les couleurs classiques de Bootstrap :

<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action list-group-item-primary">Primary</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-secondary">Secondary</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-warning">Warning</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-danger">Danger</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-success">Success</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-info">Info</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-light">Light</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-dark">Dark</a>
</div>

Contenus divers

La liste est suffisamment versatile pour contenir des éléments variés. On peut alors avoir recours aux utilitaires flexbox pour organiser le contenu :

<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action flex-column align-items-start active">
    <div class="d-flex w-100 justify-content-between">
      <h4>Tigre 1</h4>
      <p>Mon joli tigre 1</p>
    </div>
    <img src="images/t1.jpg">
  </a>
  <a href="#" class="list-group-item list-group-item-action flex-column align-items-start">
    <div class="d-flex w-100 justify-content-between">
      <h4>Tigre 2</h4>
      <p>Mon joli tigre 2</p>
    </div>
    <img src="images/t2.jpg">
  </a>
</div>

Utilisation d’une liste groupée sur la page d’exemple

J’ai utilisé une liste groupée sur la page d’exemple pour les sous-espèces de tigres (avec étiquettes, le tout intégré dans un panneau dont nous allons bientôt parler) :

En résumé

  • On peut créer des étiquettes colorées de différentes tailles.
  • On peut créer des listes groupées qui peuvent inclure des liens, des images, du texte.

Laisser un commentaire