Bootstrap 4 : boutons, icônes et images

image_pdfimage_print

Dans cet article nous allons voir comment créer de beaux boutons colorés, utiliser des icônes pour animer nos pages et insérer des images en les rendant autant que possible « responsives ».

La page d’exemple

Voici la nouvelle version de la page d’exemple :

<!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>
    <div class="container">
      <header class="row">
        <div class="col-md-12 col-lg-7">
          <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-md-12 col-lg-5 align-self-center mb-3">
          <form action="search" method="get" class="form-inline">
            <div class="input-group">
              <input type="text" name="search" class="form-control" placeholder="Je cherche...">
              <div class="input-group-btn">
                <button type="submit" class="btn btn-info"><span class="fa fa-search"></span>
                  Chercher
                </button>
              </div>
            </div>
          </form>
        </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>
        <div class="row">
          <div class="col">
            <h2 class="display-3 text-center bg-info py-4 mb-3 d-none d-md-block">Quelques photos de tigres</h2>
          </div>
        </div>
        <div class="row">
          <div class="col-6 col-sm-4 col-md-3 col-lg-2 mb-3"><img class="img-fluid rounded" src="images/t1.jpg" alt="Tigre"></div>
          <div class="col-6 col-sm-4 col-md-3 col-lg-2 mb-3"><img class="img-fluid rounded" src="images/t2.jpg" alt="Tigre"></div>
          <div class="col-6 col-sm-4 col-md-3 col-lg-2 mb-3"><img class="img-fluid rounded" src="images/t3.jpg" alt="Tigre"></div>
          <div class="col-6 col-sm-4 col-md-3 col-lg-2 mb-3"><img class="img-fluid rounded" src="images/t4.jpg" alt="Tigre"></div>
          <div class="col-6 col-sm-4 col-md-3 col-lg-2 mb-3"><img class="img-fluid rounded" src="images/t5.jpg" alt="Tigre"></div>
          <div class="col-6 col-sm-4 col-md-3 col-lg-2 mb-3"><img class="img-fluid rounded" src="images/t6.jpg" alt="Tigre"></div>
          <div class="col-6 col-sm-4 col-md-3 col-lg-2 mb-3"><img class="img-fluid rounded" src="images/t7.jpg" alt="Tigre"></div>
          <div class="col-6 col-sm-4 col-md-3 col-lg-2 mb-3"><img class="img-fluid rounded" src="images/t8.jpg" alt="Tigre"></div>
          <div class="col-6 col-sm-4 col-md-3 col-lg-2 mb-3"><img class="img-fluid rounded" src="images/t9.jpg" alt="Tigre"></div>
          <div class="col-6 col-sm-4 col-md-3 col-lg-2 mb-3"><img class="img-fluid rounded" src="images/t10.jpg" alt="Tigre"></div>
          <div class="col-6 col-sm-4 col-md-3 col-lg-2 mb-3"><img class="img-fluid rounded" src="images/t11.jpg" alt="Tigre"></div>
          <div class="col-6 col-sm-4 col-md-3 col-lg-2 mb-3"><img class="img-fluid rounded" src="images/t12.jpg" alt="Tigre"></div>
        </div>
        <div class="row">
          <div class="col-md-4">
            <p><strong>Sous-espèces des tigres :</strong></p>
            <ul>
              <li>Tigre de Sibérie</li>
              <li>Tigre de Chine méridionale</li>
              <li>Tigre de Bali</li>
              <li>Tigre de d'Indochine</li>
              <li>Tigre de Malaisie</li>
              <li>Tigre de Java</li>
              <li>Tigre de Sumatra</li>
              <li>Tigre du Bengale</li>
              <li>Tigre de la Caspienne</li>
            </ul>
          </div>
          <div class="col-md-8">
            <img class="img-fluid rounded" src="images/photo-tigre.jpg" alt="Tigre">
          </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. Pour tout renseignements veuillez me contacter à l'adresse ci-dessous.
        </p>
      </section>
      <section class="row justify-content-center">
        <div class="col-md-8">
          <p class="lead font-weight-bold">Si vous voulez me laisser un message</p>
          <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

Qu’y a-t-il de nouveau ?

D’abord un formulaire de recherche dans la partie supérieure à droite :

Remarquez l’icône du bouton et le groupement avec le contrôle.

Les vignettes des images ont désormais leurs coins arrondis :

Le tableau est passé avec un fond noir pour changer un peu :


Le formulaire de contact a été relooké :

Les boutons « radio » bénéficient du nouvel aspect, sont passés en ligne, et le bouton s’est enrichi d’une icône.

Les boutons

De jolis boutons

Pour créer un bouton avec Bootstrap il suffit d’ajouter la classe btn et une classe pour la couleur comme btn-primary à une balise <button> , <a> ou <input> :

<button type="button" class="btn btn-primary">Bouton de base</button>
<a class="btn btn-primary" href="#" role="button">Bouton avec lien</a>
<input class="btn btn-primary" type="button" value="Bouton avec input">

Le rendu est normalement le même (ça dépend du navigateur utilisé), tout dépend du contexte d’utilisation.

Les différents types de boutons

Il existe 9 possibilités avec les classes btn-* :

<button type="button" class="btn btn-primary">Bouton standard</button>
<button type="button" class="btn btn-secondary">Bouton léger</button>
<button type="button" class="btn btn-success">Réussite</button>
<button type="button" class="btn btn-info">Information</button>
<button type="button" class="btn btn-warning">Avertissement</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-dark">Sombre</button>
<button type="button" class="btn btn-light">Clair</button>
<button type="button" class="btn btn-link">Lien</button>

Les boutons sans fond

Il est aussi possible de ne pas avoir le fond coloré avec les classes btn-*-outline :

<button type="button" class="btn btn-outline-primary">Bouton standard</button>
<button type="button" class="btn btn-outline-secondary">Bouton léger</button>
<button type="button" class="btn btn-outline-success">Réussite</button>
<button type="button" class="btn btn-outline-info">Information</button>
<button type="button" class="btn btn-outline-warning">Avertissement</button>
<button type="button" class="btn btn-outline-danger">Danger</button>
<button type="button" class="btn btn-outline-dark">Sombre</button>
<button type="button" class="btn btn-outline-light">Clair</button>

Le light est si clair qu’on ne le voit pas sur un fond blanc.

Dimension des boutons

On peut aussi ajuster la dimension du bouton avec les classes btn-lg et btn-sm :

<button type="button" class="btn btn-primary btn-lg">Bouton gros</button>
<button type="button" class="btn btn-primary">Bouton standard</button>
<button type="button" class="btn btn-primary btn-sm">Bouton petit</button>

Boutons « block »

La classe btn-block règle la dimension du bouton sur la dimension de son contenant :

<div class="row">
  <div class="col-sm-3">
    <button type="button" class="btn btn-primary btn-block">Bouton "block"</button>
  </div>
  <div class="col-sm-6">
    <button type="button" class="btn btn-success btn-block">Bouton "block"</button>
  </div>
  <div class="col-sm-3">
    <button type="button" class="btn btn-danger btn-block">Bouton "block"</button>
  </div>
</div>

Grouper des boutons

Il est possible de grouper des boutons horizontalement avec la classe btn-group. Ce groupement peut s’effectuer aussi verticalement avec la classe btn-group-vertical :

<div class="row">
  <div class="col-lg-2">
    <div class="btn-group">
        <a class="btn btn-danger" href="#">1</a>
        <a class="btn btn-success" href="#">2</a>
        <a class="btn btn-warning" href="#">3</a>
    </div>
  </div>
  <div class="col-lg-1">
    <div class="btn-group-vertical">
        <a class="btn btn-danger" href="#">4</a>
        <a class="btn btn-success" href="#">5</a>
        <a class="btn btn-warning" href="#">6</a>
    </div>
  </div>
</div>

Il est possible de créer des organisations plus complexes avec la classe btn-toolbar :

<div class="btn-toolbar">
  <div class="btn-group mr-2">
      <a class="btn btn-danger" href="#">1</a>
      <a class="btn btn-success" href="#">2</a>
      <a class="btn btn-warning" href="#">3</a>
  </div>
  <div class="btn-group">
      <a class="btn btn-danger" href="#">4</a>
      <a class="btn btn-success" href="#">5</a>
      <a class="btn btn-warning" href="#">6</a>
  </div>

On peut dimensionner un groupement avec les classes btn-group-lg et btn-group-sm :

<div class="row">
  <div class="col-lg-1">
    <div class="btn-group-vertical btn-group-lg">
        <a class="btn btn-danger" href="#">4</a>
        <a class="btn btn-success" href="#">5</a>
        <a class="btn btn-warning" href="#">6</a>
    </div>
  </div>
  <div class="col-lg-1">
    <div class="btn-group-vertical">
        <a class="btn btn-danger" href="#">4</a>
        <a class="btn btn-success" href="#">5</a>
        <a class="btn btn-warning" href="#">6</a>
    </div>
  </div>
  <div class="col-lg-1">
    <div class="btn-group-vertical btn-group-sm">
        <a class="btn btn-danger" href="#">4</a>
        <a class="btn btn-success" href="#">5</a>
        <a class="btn btn-warning" href="#">6</a>
    </div>
  </div>
</div>

Des icônes

Jusqu’à la version 3 de Bootstrap on disposait de base des icônes de glyphicons. Avec la version 4 ces dernières ont disparu. Il faut dire que la tendance était plutôt d’utiliser celles de Font Awesome. Bien que désormais aucune librairie d’icônes ne soit prévue par défaut je vais montrer comment en utiliser parce que c’est quelque chose de très utile et fréquent. Je vais choisir celles de Font Awesome qui sont esthétiques, riches et gratuites.

Dans la documentation de Bootstrap les librairies préférées sont Iconic, Octicons et Entypo. Il est aussi listé un certain nombre d’autres librairies mais pas Font Awesome. Les exemples qui suivent sont évidemment adaptables à toutes ces librairies.

La librairie Font Awesome

Le site Font Awesome propose une collection de 675 icônes dans sa version 4 toutes prêtes pour Bootstrap.

Il existe une version 5 avec de nouvelles possibilités et 929 icônes gratuites mais mais je n’y retrouve pas les icônes que j’utilise le plus. Le principe d’intégration est pratiquement le même.

Évidemment, comme elles ne sont pas intégrées de base il faut déclarer le fichier CSS pour pouvoir les utiliser. Le site propose plusieurs possibilités pour le faire, la plus simple étant d’utiliser un CDN :

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

Une fois le fichier CSS déclaré, vous pouvez utiliser les icônes. L’icône doit être intégrée avec une balise en ligne, par exemple <i>, que tous les exemples du site utilisent, mais d’un point de vue sémantique la balise <span> est plus adaptée. Le site propose une galerie d’exemples. On peut insérer une icône directement dans un texte :

Il faut déverrouiller <span class="fa fa-unlock"></i> pour sortir <i class="fa fa-arrow-right"></span>

On peut aussi dimensionner les icônes selon le contexte :

<p><span class="fa fa-print fa-lg"></span> Taille normale</p>
<p><span class="fa fa-print fa-2x"></span> Taille double</p>
<p><span class="fa fa-print fa-3x"></span> Taille triple</p>
<p><span class="fa fa-print fa-4x"></span> Taille quadruple</p>
<p><span class="fa fa-print fa-5x"></span> Taille quintuple</p>

On peut aussi très facilement créer une liste dont les éléments sont bien identifiés avec une icône :

<ul class="fa-ul">
  <li><span class="fa-li fa fa-check-square"></span>Vérifier</li>
  <li><span class="fa-li fa fa-paperclip"></span>Conserver</li>
  <li><span class="fa-li fa fa-eraser"></span>Effacer</li>
  <li><span class="fa-li fa fa-print"></span>Imprimer</li>
</ul>

Il existe bien d’autres possibilités comme la rotation des icônes, leur animation, leur empilement, que je vous laisse découvrir en consultant la page des exemples du site.

Des icônes pour les boutons

Il est facile d’ajouter une icône à un bouton. C’est ce que j’ai prévu pour le bouton de soumission de la page d’exemple :

<button type="submit" class="btn btn-info"><span class="fa fa-search"></span> Chercher</button>

On peut ainsi créer d’élégantes barres de boutons :

<div class="row" >
  <div class="col-md-4">
    <div class="btn-group">
        <a class="btn btn-danger" href="#"><span class="fa fa-fast-backward"></span></a>
        <a class="btn btn-info" href="#"><span class="fa fa-backward"></span></a>
        <a class="btn btn-warning" href="#"><span class="fa fa-play"></span></a>
        <a class="btn btn-info" href="#"><span class="fa fa-forward"></span></a>
        <a class="btn btn-danger" href="#"><span class="fa fa-fast-forward"></span></a>
    </div>
  </div>
  <div class="col-md-1">
    <div class="btn-group-vertical">
        <a class="btn btn-danger" href="#"><span class="fa fa-pencil"></span></a>
        <a class="btn btn-info" href="#"><span class="fa fa-search"></span></a>
        <a class="btn btn-warning" href="#"><span class="fa fa-print"></span></a>
        <a class="btn btn-success" href="#"><span class="fa fa-image"></span></a>
    </div>
  </div>
</div>

Et si on veut une icône colorée ?

Il suffit d’utiliser du style :

<button class="btn btn-primary" type="submit"><span class="fa fa-send" style="color:#4f4;"></span> Envoyer</button>

On peut mettre ces icônes ailleurs que sur des boutons… Partout où on peut écrire en fait !

Rien n’empêche évidemment de sauter des lignes. On peut ainsi créer des boutons en séparant bien l’icône du texte :

<button class="btn btn-primary btn-lg"><span class="fa fa-user"></span><br>Utilisateurs</button>
<button class="btn btn-dark btn-lg"><span class="fa fa-comment"></span><br>Commentaires</button>
<button class="btn btn-success btn-lg"><span class="fa fa-calendar"></span><br>Evénements</button>
<button class="btn btn-danger btn-lg"><span class="fa fa-shopping-cart"></span><br>Boutique</button>
<button class="btn btn-info btn-lg"><span class="fa fa-bullhorn"></span><br>Messages</button>

Et pour faire des boutons ronds ?

Il est facile, en ajoutant un peu de style, de créer des boutons ronds qui conviendront à merveille aux icônes. Voici un exemple de style ajouté (style issu du site Bootsnipp avec une adaptation des unités) :

.btn-circle {
  width: 1.875rem;
  height: 1.875rem;
  text-align: center;
  padding: 0.375rem 0;
  font-size: 0.75rem;
  line-height: 1.428571429;
  border-radius: 0.938rem;
}
.btn-circle.btn-lg {
  width: 3.125rem;
  height: 3.125rem;
  padding: 0.625rem 1rem;
  font-size: 1.125rem;
  line-height: 1.33;
  border-radius: 1.563rem;
}

En voici un exemple :

<button class="btn btn-primary btn-circle btn-lg"><span class="fa fa-user"></span></button>
<button class="btn btn-dark btn-circle btn-lg"><span class="fa fa-comment"></span></button>
<button class="btn btn-success btn-circle btn-lg"><span class="fa fa-calendar"></span></button>
<button class="btn btn-danger btn-circle btn-lg"><span class="fa fa-shopping-cart"></button>
<button class="btn btn-info btn-circle btn-lg"><span class="fa fa-bullhorn"></span></button>

Les images et les figures

Les images

Il existe la classe img-fluid pour rendre les images adaptées à leur contenant avec ces règles :

.img-fluid {
  max-width: 100%;
  height: auto;
}

C’est ce que j’ai utilisé pour les images de la page d’exemple :

<div class="col-6 col-sm-4 col-md-3 col-lg-2 mb-3"><img class="img-fluid rounded" src="images/t1.jpg" alt="Tigre"></div>

D’autre part Bootstrap donne la possibilité de modifier l’apparence des bordures, ce qui peut être appliqué aux images. Il y a pour cela 7 classes utilisables :

  • rounded
  • rounded-top
  • rounded-right
  • rounded-bottom
  • rounded-left
  • rounded-circle
  • rounded-0

Les nom sont explicites !

D’autre part spécifiquement pour les images existe la classe img-thumbnail qui ajoute une bordure arrondie de 1px.

Voici un exemple illustratif de 3 de ces effets :

<div class="col-md-4"> 
  <img src="images/t1.jpg" class="rounded">
</div>
<div class="col-md-4"> 
  <img src="images/t2.jpg" class="rounded-circle">
</div>
<div class="col-md-4"> 
  <img src="images/t3.jpg" class="img-thumbnail">
</div>

Pour les images de la page d’exemple j’ai utilisé la classe rounded avec cet effet :

Les figures

Pour associer un titre à une image (ou autre) la balise figure bénéficie de quelques classes. Voici un exemple :

<figure class="figure">
  <img src="images/t1.jpg" class="rounded">
  <figcaption class="figure-caption">Un joli tigre</figcaption>
</figure>
<figure class="figure">
  <img src="images/t1.jpg" class="rounded">
  <figcaption class="figure-caption text-center">Un joli tigre</figcaption>
</figure>
<figure class="figure">
  <img src="images/t1.jpg" class="rounded">
  <figcaption class="figure-caption text-right">Un joli tigre</figcaption>
</figure>

On utilise globalement la balise <figure> avec la classe figure. Et pour le titre la balise <figcaption> et la classe figure-caption.

Le titre peut être positionné en utilisant les classes que nous avons déjà vues pour le texte.

En résumé

  • Bootstrap permet de créer des boutons colorés, seuls ou groupés, de diverses couleurs et dimensions.
  • Bootstrap ne comprend pas de collection d’icônes mais on peut utiliser par exemple celles de Font Awesome et les intégrer comme des caractères.
  • Bootstrap prévoie la mise en forme des bordures utilisables sur les images avec des coins arrondis, rondes, ou avec un effet de diapositive.
  • Des classes associées à la balise figure‌ permettent d’ajouter un titre à une image.

Laisser un commentaire