Bootstrap 3 tutorial pdf

Problème à signaler:

Télécharger



★★★★★★★★★★3.5 étoiles sur 5 basé sur 1 votes.
Votez ce document:

Bootstrap 4 : boutons, icônes et images

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, initialscale=1, shrink-to-fit=no">     <link href="" rel="stylesheet">

           <link   rel="stylesheet" href=""> </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="formcontrol" 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 dnone 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="" alt="Tigre"></div> <div class="col-6 col-sm-4 col-md-3 col-lg-2 mb-3"><img class="img-fluid rounded" src="" alt="Tigre"></div>           <div class="col-6 col-sm-4 col-md-3 col-lg-2 mb-3"><img class="img-fluid rounded" src="" alt="Tigre"></div>           <div class="col-6 col-sm-4 col-md-3 col-lg-2 mb-3"><img class="img-fluid rounded" src="" alt="Tigre"></div> <div class="col-6 col-sm-4 col-md-3 col-lg-2 mb-3"><img class="img-fluid rounded" src="" alt="Tigre"></div>           <div class="col-6 col-sm-4 col-md-3 col-lg-2 mb-3"><img class="img-fluid rounded" src="" alt="Tigre"></div> <div class="col-6 col-sm-4 col-md-3 col-lg-2 mb-3"><img class="img-fluid rounded" src="" alt="Tigre"></div>           <div class="col-6 col-sm-4 col-md-3 col-lg-2 mb-3"><img class="img-fluid rounded" src="" alt="Tigre"></div>           <div class="col-6 col-sm-4 col-md-3 col-lg-2 mb-3"><img class="img-fluid rounded" src="" alt="Tigre"></div>           <div class="col-6 col-sm-4 col-md-3 col-lg-2 mb-3"><img class="img-fluid rounded" src="" alt="Tigre"></div>           <div class="col-6 col-sm-4 col-md-3 col-lg-2 mb-3"><img class="img-fluid rounded" src="" alt="Tigre"></div>           <div class="col-6 col-sm-4 col-md-3 col-lg-2 mb-3"><img class="img-fluid rounded" src="" 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="" alt="Tigre">           </div>

        </div>

      </section>

      <section class="row">

        <div class="col">

          <h2 class="display-4 text-center text-danger pmd-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 customcontrol-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 customcontrol-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 customcontrol-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 customcontrol-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

success">Réussite</button>

 btn-outline-

<button       type="button" class="btn

info">Information</button>

 btn-outline-

<button       type="button" class="btn

warning">Avertissement</button>

 btn-outline-

<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 btnlg 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>

 

G rouper 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 . Avec la version 4 ces dernières ont disparu. Il faut dire que la tendance était plutôt d’utiliser celles de Font . 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, et . 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="">

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 fasearch"></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 fafast-backward"></span></a>

        <a class="btn btn-info" href="#"><span class="fa fabackward"></span></a>

        <a class="btn btn-warning" href="#"><span class="fa faplay"></span></a>

        <a class="btn btn-info" href="#"><span class="fa faforward"></span></a>

        <a class="btn btn-danger" href="#"><span class="fa fafast-forward"></span></a>     </div>

  </div>

  <div class="col-md-1">

    <div class="btn-group-vertical">

        <a class="btn btn-danger" href="#"><span class="fa fapencil"></span></a>

        <a class="btn btn-info" href="#"><span class="fa fasearch"></span></a>

        <a class="btn btn-warning" href="#"><span class="fa faprint"></span></a>

        <a class="btn btn-success" href="#"><span class="fa faimage"></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 fasend" 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 fauser"></span><br>Utilisateurs</button>

<button class="btn btn-dark btn-lg"><span class="fa facomment"></span><br>Commentaires</button>

<button class="btn btn-success btn-lg"><span class="fa facalendar"></span><br>Evénements</button>

<button class="btn btn-danger btn-lg"><span class="fa fa-shoppingcart"></span><br>Boutique</button>

<button class="btn btn-info btn-lg"><span class="fa fabullhorn"></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; }

-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 facomment"></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 fabullhorn"></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="" 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 imgthumbnail qui ajoute une bordure arrondie de 1px. Voici un exemple illustratif de 3 de ces effets :

<div class="col-md-4">

  <img src="" class="rounded">

</div>

<div class="col-md-4">

  <img src="" class="rounded-circle">

</div>

<div class="col-md-4">

  <img src="" class="img-thumbnail">

</div>

 

Po

ur 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="" class="rounded">

  <figcaption class="figure-caption">Un joli tigre</figcaption>

</figure>

<figure class="figure">

  <img src="" class="rounded">

<figcaption class="figure-caption text-center">Un joli tigre</figcaption>

</figure>

<figure class="figure">

  <img src="" 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 figurecaption.

 

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.

 

Bootstrap 4 : les formulaires 2/2

On a vu dans le précédent chapitre comment construire un formulaire. Nous allons voir à présent un aspect un peu plus dynamique parce qu’un formulaire est par définition censé être soumis et il peut y avoir des problèmes de validation.

La validation du navigateur

La validation côté client doit être considérée comme cosmétique parce qu’elle ne présente aucune sécurité. Mais elle permet

d’éviter des va et vient avec le serveur en créant un premier filtre de saisie.

Validation par défaut

Depuis HTML5 les navigateurs offrent certaines capacités de validation des entrées de formulaire côté client :

avec l’attribut required pour rendre une saisie obligatoire, en utilisant une expression régulière avec l’attribut pattern,  en imposant une plage de saisie avec les attributs min, max, maxlength

 en imposant un type d’entrée avec l’attribut type

Les possibilités sont vastes et intéressantes surtout que tout est automatique ! Voyons un exemple :

<form>

  <div class="form-group">

    <label for="nom">Nom</label>

    <input type="text" class="form-control" id="nom" placeholder="Nom" required>

  </div>

  <div class="form-group">

    <label for="prenom">Prénom</label>

    <input type="text" class="form-control" id="prenom" placeholder="Prénom" required>

  </div>

  <div class="form-group">

    <label for="prenom">Age</label>

    <input type="number" class="form-control" id="age" value="20" min="20" max="80" required> </div>

  <button class="btn" type="submit">Envoyer</button>

</form>

Dans ce formulaire on a 3 champs de saisie. les deux premiers sont de type texte et le troisième de type numérique avec une plage de valeurs. D’autre part les 3 sont à saisie obligatoire avec l’attribut required.

Sur Firefox le formulaire se présente ainsi :

 

On voit que le troisième champ s’est adapté avec des petits boutons pour faire défiler les valeurs.

Si on ne renseigne pas un champ le navigateur nous en informe à la soumission :

 

De même si le type de donnée n’est pas correct :

 

Ou si on sort de la plage de valeurs :

 

On ne peut pas changer l’apparence de ces messages, juste le texte, mais pour cela il faut un peu de Javascript. Comme ce n’est pas le sujet de ce cours je ne développe pas cet aspect.

Validation personnalisée

Si la validation par défaut ne vous convient pas vous pouvez facilement la personnaliser. Pour cela il faut désactiver la validation automatique du navigateur en ajoutant l’attribut novalidate dans la balise form :

<form novalidate>

Maintenant on peut soumettre le formulaire avec toutes les erreurs qu’on veut, le navigateur ne se plaint plus !

Il faut utiliser du Javascript pour effectuer un traitement grâce à l’API de contrainte de validation (HTML5 constraint validation API). Cette API est un ensemble de propriétés et de méthodes pour chaque élément d’un formulaire. La principale méthode est checkValidity qui nous permet de savoir si l’entrée est valide.

On trouve dans la documentation de Bootstrap un script de base. On va donc adapter notre formulaire en conséquence pour créer une validation personnalisée :

<div class="container">

  <br>

  <form id="form" novalidate>

    <div class="form-group">

      <label for="nom">Nom</label>

      <input type="text" class="form-control" id="nom" placeholder="Nom" required>       <div class="invalid-feedback">

        Veuillez entrer un nom

      </div>

    </div>

    <div class="form-group">

      <label for="prenom">Prénom</label>

      <input type="text" class="form-control" id="prenom" placeholder="Prénom" required>       <div class="invalid-feedback">

        Veuillez entrer un prénom

      </div>

    </div>

    <div class="form-group">

      <label for="prenom">Age</label>

      <input type="number" class="form-control" id="age" value="20" min="20" max="80" required>

      <div class="invalid-feedback">

        Veuillez entrer un nombre compris entre 20 et 80

      </div>

    </div>

    <button class="btn" type="submit">Envoyer</button>

  </form>

</div>

<script>

(function() {

  "use strict" window.addEventListener("load", function() {     var form = document.getElementById("form") form.addEventListener("submit", function(event) {       if (form.checkValidity() == false) {         event.preventDefault() event.stopPropagation()       } ("was-validated")     }, false)

  }, false)

}())

</script>

On peut se demander pourquoi l’exemple n’utilise pas jQuery qui est de toute façon pratiquement toujours mis en œuvre quand on met en place Bootstrap. Voici ce que ça donne avec jQuery :

$(function () {

  $('form').submit(function(event) {     if (this.checkValidity() == false) {       event.preventDefault() event.stopPropagation()     }

$(this).addClass("was-validated")

  })

})

On voit qu’on intercepte la soumission et qu’on vérifie la validité du formulaire avec la méthode checkValidity. D’autre part on ajoute la classe was-validated pour activer les textes des erreurs équipés de la classe invalid-feedback. Maintenant on voit apparaître nos messages personnalisés :

 

Comment sont différenciés les entrées valides et invalides ?

Le navigateur nous le dit en ajoutant la pseudo classe :valid ou :invalid à chaque champ. Les règles de style de Bootstrap font le reste !

Validation côté serveur

Une validation sécurisée s’effectue toujours côté serveur. Dans ce cas on va renvoyer tout le code du formulaire en cas d’erreur de saisie. Il suffit d’ajouter les classes :

is-valid pour les champs valides is-invalid pour les champs non valides

Et évidemment de prévoir le texte du message que pour les champs non valides. On pourrait ainsi recevoir ce code suite à une soumission :

<form id="form" novalidate>

  <div class="form-group">

    <label for="nom">Nom</label>

    <input type="text" class="form-control is-valid" id="nom" placeholder="Nom" value="Dupont" required>   </div>

  <div class="form-group">

    <label for="prenom">Prénom</label>

    <input type="text" class="form-control is-invalid" id="prenom" placeholder="Prénom" required>     <div class="invalid-feedback">

      Veuillez entrer un prénom

    </div>

  </div>

  <div class="form-group">

    <label for="prenom">Age</label>

    <input type="number" class="form-control is-valid" id="age" value="20" min="20" max="80" required>   </div>

  <button class="btn" type="submit">Envoyer</button>

</form> Avec cet aspect :

 

Conclusion

On peut effectuer la validation d’un formulaire côté client en choisissant :

 la validation par défaut du navigateur

 une validation personnalisée

On peut aussi effectuer la validation côté serveur et renvoyer tout le code du formulaire avec le renseignement des erreurs.

 

Bootstrap 4 : les formulaires 1/2

Les formulaires sont très souvent utilisés sur les pages web, voyons dans ce chapitre ce que Bootstrap nous propose comme mise en forme.

La page d’exemple

J’ai ajouté un formulaire de contact dans la partie inférieure de la page d’exemple :

<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="form-check">

        <label class="form-check-label">

          <input class="form-check-input" type="radio" name="origine" value="ami" checked>

          Par un ami

        </label>

      </div>

      <div class="form-check">

        <label class="form-check-label">

          <input class="form-check-input" type="radio" name="origine" value="web">

          Sur le web

        </label>

      </div>

      <div class="form-check">

        <label class="form-check-label">

          <input class="form-check-input" type="radio" name="origine" value="hasard">

          Par hasard

        </label>

      </div>

      <div class="form-check">

        <label class="form-check-label">

          <input class="form-check-input" type="radio" name="origine" value="autre">           Autre

        </label>

      </div>

      <div 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>       </div>

      <button class="btn" type="submit">Envoyer</button>

    </form>

    <br>

  </div>

</section>

Avec la grille, pour les tablettes et écrans plus grands, on a un formulaire centré :

 

Sur smartphone le formulaire occupe toute la largeur disponible.

Tester en ligne

Formulaire de base

Si on n’utilise aucune classe particulière dans une balise <form>, on obtient une disposition en ligne. Prenons l’exemple d’un formulaire simple :

<form>

  Text : <input type="text">

  Textarea : <textarea>Un peu de texte ici</textarea>   Select :

  <select>

    <option>Option 1</option>

    <option>Option 2</option>

    <option>Option 3</option>

  </select>

<button>Envoyer</button>

</form>

Nous aurons alors ce rendu :

 

P ar défaut les contrôles s’alignent horizontalement. J’aimerais que les contrôles occupent toute la largeur disponible et soient plus jolis. Il faut utiliser la classe form-control pour obtenir cet effet :

<form>

  <label for="texte">Text : </label>

  <input id="text" type="text" class="form-control">

  <label for="textarea">Textarea : </label>

  <textarea id="textarea" class="form-control">Un peu de texte ici</textarea>   <label for="select">Select : </label>

  <select id="select" class="form-control">

    <option>Option 1</option>

    <option>Option 2</option>

    <option>Option 3</option>

  </select>

<button>Envoyer</button>

</form>

 

C’est déjà bien mieux ! Arrangeons encore ce formulaire en utilisant des balises <label> et la classe form-group :?

<form>

  <div class="form-group">

    <label for="texte">Text : </label>

    <input id="texte" type="text" class="form-control">

  </div>

  <div class="form-group">

    <label for="textarea">Textarea : </label>

    <textarea id="textarea" class="form-control">Un peu de texte ici</textarea>   </div>

  <div class="form-group">

    <label for="select">Select : </label>

    <select id="select" class="form-control">

      <option>Option 1</option>

      <option>Option 2</option>

      <option>Option 3</option>

    </select>

  </div>

<button>Envoyer</button>

</form>

 

Le formulaire est maintenant bien aéré avec ajout de marges et présente l’aspect standard d’un formulaire avec Bootstrap.

Nouvel aspect des listes de choix

La version 4 de Bootstrap nous propose un autre aspect pour les listes de choix avec la classe custom-select :

<label for="select">Select : </label>

<select id="select" class="custom-select">

  <option>Option 1</option>

  <option>Option 2</option>

  <option>Option 3</option>

</select>

 

Boutons « radio » et cases à cocher

Aspect standard

Bootstrap propose pour les boutons « radio » et les cases à cocher des classes spécifiques :

form-check form-check-label form-check-input

Je les ai utilisées dans le formulaire de la page :

<div class="form-check">

  <label class="form-check-label">

    <input class="form-check-input" type="radio" name="origine" value="ami" checked>     Par un ami

  </label>

</div>

<div class="form-check">

  <label class="form-check-label">

    <input class="form-check-input" type="radio" name="origine" value="web">     Sur le web

  </label>

</div>

<div class="form-check">

  <label class="form-check-label">

    <input class="form-check-input" type="radio" name="origine" value="hasard">     Par hasard

  </label>

</div>

<div class="form-check">

  <label class="form-check-label">

    <input class="form-check-input" type="radio" name="origine" value="autre">     Autre

  </label>

</div> Avec un rendu plutôt esthétique :

 

Prévoyez toujours une balise label pour obtenir un affichage correct à moins que vous ne désiriez appliquer un style personnalisé.

On utilise la même syntaxe pour les cases à cocher (il suffit en fait de changer le type) :

<div class="form-check">

  <label class="form-check-label">

    <input class="form-check-input" type="checkbox" name="origine" value="ami" checked>     Par un ami

  </label>

</div>

<div class="form-check">

  <label class="form-check-label">

    <input class="form-check-input" type="checkbox" name="origine" value="web">     Sur le web

  </label>

</div>

<div class="form-check">

  <label class="form-check-label">

    <input class="form-check-input" type="checkbox" name="origine" value="hasard">     Par hasard

  </label>

</div>

<div class="form-check">

  <label class="form-check-label">

    <input class="form-check-input" type="checkbox" name="origine" value="autre">     Autre

  </label>

</div> Avec le même type de rendu :

 

Par défaut les contrôles s’empilent. Si on les veut en

ligne il faut utiliser la classe form-check-inline : <div class="form-check form-check-inline">

 

Pour avoir un bouton

« radio » ou une case à cocher désactivé(e) il faut associer la classe disabled à la classe form-check.

Nouvel aspect

La version 4 de Bootstrap nous offre un aspect  encore plus spécifique avec de nouvelles classes. Regardez cet exemple :

<label class="custom-control custom-radio">

  <input class="custom-control-input" type="radio" name="origine" value="ami" checked>   <span class="custom-control-indicator"></span>

  <span class="custom-control-description">Par un ami</span>

</label>

 

Vous préférez ce nouveau look ? On peut avoir le même

avec les cases à cocher :

<label class="custom-control custom-checkbox">

  <input class="custom-control-input" type="checkbox" name="origine" value="ami" checked>

  <span class="custom-control-indicator"></span>

  <span class="custom-control-description">Par un ami</span>

</label>

 

Pour désactiver avec ce nouvel aspect il faut ajouter l’attribut disabled dans la balise input.

Utilisation de la grille et formulaire en ligne

Utilisation de la grille

Pour organiser visuellement un formulaire on peut évidemment utiliser la grille :

<form class="col-md-6">

  <div class="form-group row">

    <label for="text" class="col-md-3 col-form-label">Text

:</label>

    <div class="col-md-9">

      <input type="text" class="form-control" id="text">

    </div>

  </div>

  <div class="form-group row">

    <label for="textarea" class="col-md-3 col-form-label">Textarea

:</label>

    <div class="col-md-9">

      <input type="textarea" class="form-control" id="textarea">

    </div>

  </div>

  <div class="form-group row">

    <label for="select" class="col-md-3 form-control-label">Select :</label>

    <div class="col-md-9">

      <select id="select" class="form-control" >

        <option>Option 1</option>

        <option>Option 3</option>

        <option>Option 3</option>

      </select>

    </div>

  </div>

  <div class="form-group row">

    <div class="col">

      <button type="submit" class="btn">Envoyer</button>

    </div>

  </div>

</form>

 

Les étiquettes disposent

de 3 colonnes et les champs de saisie de 9 colonnes. Voici une visualisation du découpage :

Form ulaire en ligne

Il arrive qu’on ait besoin d’avoir un formulaire disposé sur une ligne, par exemple dans une barre de navigation.  On dispose pour cela de la la classe form-inline :

<form class="form-inline">

  <label for="text">Texte</label>

  <input type="text" class="form-control" id="text" placeholder="un texte ici">

  <div class="form-check">

    <label class="form-check-label">

      <input class="form-check-input" type="checkbox"> Se rappeler de moi      </label>

  </div>

  <button type="submit" class="btn">Envoyer</button>

</form>

On a bien tout sur

une ligne mais ça manque de marges. On dispose des utilitaires d’espacement qu’on a vus avec la grille. Par exemple :

<form class="form-inline">

  <label for="text" class="mr-2">Texte</label>

  <input type="text" class="form-control mr-2" id="text"

placeholder="un texte ici">

  <div class="form-check">

    <label class="form-check-label">

      <input class="form-check-input" type="checkbox"> Se rappeler de moi

    </label>

  </div>

  <button type="submit" class="btn ml-2">Envoyer</button>

</form>

 

Si vous réduisez

la largeur de l’affichage au-dessous de 576 pixels alors les contrôles vont s’empiler :

 

Ce comportement est judicieux parce qu’il n’y aurait plus vraiment la place d’afficher un formulaire en ligne.

Les étiquettes prennent de la place dans un formulaire en ligne.

Ne serait-il pas mieux de ne pas en mettre ?

C’est effectivement une bonne idée mais il ne faut pas oublier l’accessibilité des formulaires. Il existe des lecteurs d’écran qui nécessitent la présence d’étiquettes, alors comment faire ? Bootstrap nous propose la classe sr-only pour résoudre ce problème facilement :

<label for="text" class="sr-only">Texte</label> L’étiquette ne sera active que pour les lecteurs d’écran.

Les groupes de contrôles

Avec Bootstrap on peut facilement ajouter à un contrôle de formulaire du texte, un ou plusieurs boutons… Voyons cela.

Accoler une information à un contrôle

Les classes input-group, input-group-prepend et input-group-append servent à accoler une information à un contrôle de formulaire :

<form class="form-inline">

  <div class="input-group">

    <div class="input-group-prepend">

      <span class="input-group-text">€</span>

    </div>

    <input type="text" class="form-control" value="100">

  </div>

  <div class="input-group">

    <input type="text" class="form-control text-right"

value="100,50">

    <div class="input-group-append">

      <span class="input-group-text">€</span>

    </div>

  </div>

</form>

 

Il est possible

d’ajuster la dimension globale du groupement avec les classes input-group-* :

<form class="form-inline">

  <div class="input-group input-group-lg">

    <div class="input-group-prepend">

      <span class="input-group-text">€</span>

    </div>

    <input type="text" class="form-control" value="100">

  </div>

  <div class="input-group input-group-sm">

    <input type="text" class="form-control text-right"

value="100,50">

    <div class="input-group-append">

      <span class="input-group-text">€</span>

    </div>

  </div>

</form>

 

On peut aussi les

utiliser conjointement pour accoler devant et derrière :

<form class="form-inline">

  <div class="input-group">

    <div class="input-group-prepend">

      <span class="input-group-text">€</span>

    </div>

    <input type="text" class="form-control text-right"

value="100">

    <div class="input-group-append">

      <span class="input-group-text">.00</span>

    </div>

  </div>

</form>

Accoler un contrôle à un contrôle

Le seul cas intéressant de l’accolement de deux contrôles est celui de l’utilisation d’un bouton « radio » ou d’une case à cocher :

<form>

  <div class="form-group">

    <div class="input-group">

      <div class="input-group-prepend">

        <div class="input-group-text">

          <input type="checkbox">

        </div>

      </div>

      <input type="text" class="form-control">

    </div>

  </div>

  <div class="form-group">

    <div class="input-group">

      <div class="input-group-prepend">

        <div class="input-group-text">

        <input type="radio">

        </div>

      </div>

      <input type="text" class="form-control">

    </div>

  </div>

</form>

 

On peut de la même manière accoler un bouton.

Effets particuliers

Dans ce sous-chapitre nous allons voir un certain nombre d’effets qui peuvent être utiles. Voici un code récapitulatif :

<form>

  <div class="form-group row">

    <label class="col-md-4 col-form-label text-right">Contrôle statique :</label> <div class="col-md-8">

      <p class="form-control-static">Ce contrôle est statique</p>

    </div>

  </div>

  <div class="form-group row">

    <label class="col-md-4 col-form-label text-right" for="inactif">Contrôle désactivé :</label>

    <div class="col-md-8">

      <input type="text" id="inactif" class="form-control" placeholder="Ce contrôle n'est pas actif" disabled>

    </div>

  </div>

  <div class="form-group row">

    <label class="col-md-4 col-form-label text-right" for="inactif">Contrôle en lecture seule :</label>

    <div class="col-md-8">

      <input type="text" id="inactif" class="form-control" placeholder="Ce contrôle est en lecture seule" readonly>

    </div>

  </div>

  <div class="form-group row">

    <label class="col-md-4 col-form-label form-control-lg textright" for="inactif">Contrôle géant :</label>     <div class="col-md-8">

      <input type="text" id="inactif" class="form-control formcontrol-lg" placeholder="Ce contrôle est géant"> </div>

  </div>

  <div class="form-group row">

    <label class="col-md-4 col-form-label form-control-sm textright" for="inactif">Contrôle petit :</label>     <div class="col-md-8">

      <input type="text" id="inactif" class="form-control formcontrol-sm" placeholder="Ce contrôle est petit"> </div>

  </div>

  <div class="form-group row">

    <label class="col-md-4 col-form-label form-control-sm textright" for="inactif">Contrôle normal :</label>     <div class="col-md-8">

      <input type="text" id="inactif" class="form-control" placeholder="Ce contrôle est normal">

      <small class="form-text text-muted">Un petit texte explicatif pour le contrôle</small>

    </div>

  </div>

</form> Avec ce rendu :

 

de saisie) se crée avec la classe ?form-control-static. Un contrôle est désactivé avec l’attribut disabled.

Un contrôle est en lecture seule avec l’attribut readonly.

Un contrôle est dimensionné avec une classe form-control-*. Pour ajouter un texte d’aide la classe text-muted est parfaite associée à la classe form-text.

En résumé

 Bootstrap propose de nombreuses classes pour réaliser des formulaires esthétiques.

 La version 4 introduit de nouveaux aspects pour les boutons radio, les cases à cocher et les listes de choix.

 On peut réaliser des formulaires classiques ou en ligne, d’autre part on peut les organiser avec la grille.

 De nombreuses classes utilitaires permettent de peaufiner les formulaires : dimension des contrôles, contrôle statique, inactif, en lecture seule…

 On peut grouper un contrôle avec du texte, un bouton radio, une case à cocher ou un bouton.

 

Bootstrap 4 : les tableaux

Dans ce chapitre nous allons voir comment Bootstrap traite les tableaux.

La page d’exemple

Dans la page d’exemple vue au chapitre précédent on va remplacer la liste de définition par un tableau :

<table class="table table-bordered table-striped 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> Avec cet aspect sur grand écran :

 

Tester en ligne

Remarquez que par défaut Bootstrap place le titre en bas à gauche. Cet emplacement peut paraître étrange. Si on regarde les règles on trouve :

caption {   padding-top: 0.75rem;   padding-bottom: 0.75rem;   color: #868e96;   text-align: left;   caption-side: bottom; }

Pour avoir un titre en haut et centré il suffit de surcharger les deux dernières règles.

Le tableau s’adapte automatiquement à la réduction, par exemple sur smartphone :

Les classes de base

La classe table

Bootstrap ne formate pas par défaut la balise <table> pour ne pas entrer en conflit avec les nombreux composants qui utilisent des tableaux (par exemple les calendriers). Donc pour avoir du style il faut impérativement utiliser la classe table. Voyons ce que ça donne avec notre tableau :

<table class="table"> On se retrouve avec cet aspect :

 

La mise en forme est légère et élégante avec des lignes séparatrices horizontales

La classe table-striped

Cette classe ajoute un fond avec un gris très léger pour les lignes impaires (1, 3, …) pour tout ce qui se situe dans le <tbody> :

<table class="table table-striped">

 

La classe table-sm

Cette classe permet de condenser le tableau pour qu’il occupe moins de place verticalement :

<table class="table table-striped table-sm">

La classe table-bordered

C’est la classe pour avoir des bordures :

<table class="table table-striped table-sm table-bordered">

 

Il arrive de vouloir mettre en évidence une ligne d’un tableau au survol de la souris. Dans ce cas il faut utiliser la classe tablehover :

<table class="table table-sm table-hover">

E

ffet d’inversion et couleurs

Un tableau sur fond noir

Pour obtenir plus de contraste on peut assombrir le fond du tableau avec la classe table-dark :

<table class="table table-sm table-dark">

F

ond noir pour les titres

Si vous désirez uniquement les titres sur fond noir il faut

 

F

ond gris pour les titres

Si vous désirez uniquement les titres sur fond gris il faut utiliser la classe thead-light : <thead class="thead-light">

 

Un peu de couleurs

Vous avez la possibilité de colorer le fond des lignes des tableaux avec ces classes :

table-primary : couleur primaire table-secondary : couleur secondaire table-light : fond clair table-dark : fond sombre table-info : fond cyan table-success : fond vert table-danger : fond rouge table-warning : fond orange table-active : fond gris

Voici le tableau de notre exemple, mais avec un peu de couleur :

<table class="table table-sm">

  <caption>

    <h4>Les menaces pour les tigres</h4>

  </caption>

  <thead class="table-info">

    <tr>

      <th class="table-danger">Lieu</th>

      <th>Menace</th>

    </tr>

  </thead>

  <tbody>

    <tr>

      <td class="table-warning">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 class="table-active">

      <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 class="table-success">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>

 

J’ai fait un peu n’importe quoi pour montrer qu’on peut indifféremment styliser une ligne ou une cellule.

Mais évidemment, cette possibilité de colorisation prend tout son sens dans une gestion dynamique de données, pour faire apparaître par exemple des enregistrements possédant certaines caractéristiques.

Tableau « responsive »

Que se passe-t-il pour un tableau quand on réduit la largeur de l’affichage ? Les colonnes du tableau se réduisent en conséquence jusqu’à rendre l’apparence ni très esthétique, ni très lisible s’il y a de nombreuses colonnes. Considérez le tableau suivant :

<table class="table">

  <thead>

    <tr>

      <th>Titre de colonne</th>

      <th>Titre de colonne</th>

      <th>Titre de colonne</th>

      <th>Titre de colonne</th>

      <th>Titre de colonne</th>

    </tr>

  </thead>

  <tbody>

    <tr>

      <td>Contenu de la cellule</td>

      <td>Contenu de la cellule</td>

      <td>Contenu de la cellule</td>

      <td>Contenu de la cellule</td>

      <td>Contenu de la cellule</td>

    </tr>

    <tr>

      <td>Contenu de la cellule</td>

      <td>Contenu de la cellule</td>

      <td>Contenu de la cellule</td>

      <td>Contenu de la cellule</td>

      <td>Contenu de la cellule</td>

    </tr>

    <tr>

      <td>Contenu de la cellule</td>

      <td>Contenu de la cellule</td>

      <td>Contenu de la cellule</td>

      <td>Contenu de la cellule</td>

      <td>Contenu de la cellule</td>

    </tr>

  </tbody>

</table> Sur grand écran pas de souci :

 

Ma is quand on réduit la place manque vite jusqu’à carrément tronquer le tableau :

 

En englobant le tableau avec

la classe ?table-responsive, on fait apparaître une barre de défilement :

<div class="table table-responsive">   

</div>

En résumé

 Bootstrap met élégamment en forme les tableaux.

Il existe de nombreuses classes pour styliser un tableau : bordure, diminution de la hauteur, effet de survol…

 On peut fixer la teinte du fond du tableau ou juste les titres.

 Un tableau peut être rendu « responsive » pour faire apparaître une barre de défilement sur petit support.  On peut utiliser des couleurs de fond pour mettre en valeur lignes ou cellules.

 

Bootstrap 4 : le texte

Dans ce chapitre nous allons voir comment Bootstrap met en forme les éléments de base des pages : titres, texte, abréviations, citations, listes… Nous verrons aussi les utilitaires qui permettent de centrer, montrer ou cacher, créer des remplissages et des marges … En gros la base de ce qui constitue les pages.

Une page d’exemple

Comme rien ne vaut les exemples voici une page qui regroupe les principaux éléments que nous allons voir au cours de ce chapitre avec une utilisation concrète de la grille :

<!DOCTYPE HTML>

<html lang="fr">

  <head>

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initialscale=1, shrink-to-fit=no">     <link href="" rel="stylesheet">

  </head>

  <body>

    <div class="container">

      <header class="row">

        <div class="col">

          <h1 class="text-center text-uppercase m-4">Mon amour pour les tigres<small class="text-muted"> et tous les félins</small></h1>

          <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 dnone 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" src="" alt="Tigre"></div>

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

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

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

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

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

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

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

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

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

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

          <div class="col-6 col-sm-4 col-md-3 col-lg-2 mb-3"><img class="img-fluid" src="" 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" src="" alt="Tigre">           </div>

        </div>

      </section>

      <section class="row">

        <div class="col">

          <h2 class="display-4 text-center text-danger pmd-3">Menaces pour les tigres</h2>

          <dl class="row">

            <dt class="col-md-3">Grand Mekong</dt>

            <dd class="col-md-9">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</dd> <dt class="col-md-3">Île de Sumatra</dt>

            <dd class="col-md-9">Production d’huile de palme et de pâtes à papiers</dd>

            <dt class="col-md-3 text-truncate">Indonésie et Malaisie</dt>

            <dd class="col-md-9">Pâte à papier, l’huile de palme et le caoutchouc</dd>

            <dt class="col-md-3">États-Unis</dt>

            <dd class="col-md-9">Les tigres captifs représentent un danger pour les tigres sauvages</dd>             <dt class="col-md-3">Europe</dt>

            <dd class="col-md-9">Gros appétit pour l’huile de palme</dd>             <dt class="col-md-3">Népal</dt>

            <dd class="col-md-9">Commerce illégal de produits dérivés de tigres</dd>           </dl>

        </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>

      <hr>

      <footer class="row justify-content-center">

        <address>

          <strong>Tigrou Michel</strong><br>

          Avenue des poils<br>

          25600 Le Félin

        </address>

      </footer>

    </div>

  </body>

</html>

Affichage sur très grand écran

Partie supérieure :

 

Par tie inférieure :

A

ffichage sur tablette

Sur tablette la principale adaptation a lieu au niveau des photos :

 

Affichage sur smartphone en mode paysage et portrait

Pour ne pas alourdir ce chapitre je vous invite à voir l’aspect pour smartphones directement en ligne.

Tester en ligne

Les titres

Titres classiques

Bootstrap met en forme les titres pour les balises de <h1>à<h6> :

 

On a un titre <h1> dans la page d’exemple :

 

O n remarque du texte délavé dans la fin du titre. C’est la classe text-muted qui a ici été utilisée :

<h1 class="text-center text-uppercase m-4">Mon amour pour les tigres<small class="text-muted"> et tous les félins</small></h1>

Cette classe fait partie des classes utilitaires de Bootstrap. Il y a d’autres classes utilitaires dans ce code mais j’en parlerai plus loin dans un sous-chapitre dédié.

Vous pouvez obtenir le même effet visuel avec les nouvelles classes h1 à h6 .

Quel est l’intérêt de ces classes puisqu’on a déjà les balises ?

Les balises <h1> à <h6> sont de type block. Imaginez que vous vouliez cet aspect pour un élément en ligne. Vous pouvez alors utiliser ces classes :

<p>Ceci : <span class="h1">ressemble à un titre</span> mais n'en est pas un.</p>

Classe « display »

Une nouvelle classe fait aussi son apparition dans cette version pour créer des titres qui se démarquent du reste de la page :

<h1 class="display-4">Classe display-4</h1>

<h1 class="display-3">Classe display-3</h1>

<h1 class="display-2">Classe display-2</h1>

<h1 class="display-1">Classe display-1</h1>

 

C’est

ce qui est utilisé pour ce titre de la page d’exemple :

 

Avec ce code :

<h2 class="display-4 text-center text-danger p-md-3">Menaces pour les tigres</h2>

Je parlerai plus loin des autres classes utilisées. Notez que l’effet visuel serait le même quelle que soit la balise de titre utilisée. Ici j’ai utilisé<h2>pour la sémantique de la page.

Classe lead

Une autre façon de mettre du texte en valeur sans que ce soit un titre est d’utiliser la classe lead. Cette classe est utilisée dans cette partie de la page d’exemple :

<p class="lead text-right"> N'hésitez pas à soutenir la cause des tigres !

</p>

 

Cette classe utilise ces

règles :

.lead {   font-size: 1.25rem;   font-weight: 300; }

Citations et abréviations

Les citations

La page d’exemple utilise deux fois la balise <blockquote> pour des citations. Il y en a une en bas de la page avec ce code :

<blockquote class="col blockquote"> Il est vital

  <footer class="blockquote-footer">Texte recueilli dans

<cite>Planète tigre</cite></footer>

</blockquote> Avec ce rendu :

 

Il y a un footer pour insérer la référence de la citation, la mise en forme de cette référence fonctionne grâce à la présence de la classe blockquote-footer. La seconde citation est en haut de la page :

<blockquote class="blockquote text-right">   Le Tigre

  <footer class="blockquote-footer">Texte recueilli dans

<cite>Wikipedia</cite></footer>

</blockquote> Avec ce rendu :

 

On remarque deux choses :

 la justification se fait sur la droite parce que j’ai utilisé la classe utilitaire de texte text-right, sinon elle serait à gauche comme dans le cas vu ci-dessus,  il y a un footer pour insérer la référence de la citation comme on l’a déjà vu ci-dessus pour les mêmes raisons.

Les abréviations

Il y a deux abréviations dans la page :

<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> Voici le rendu pour la première :

 

La seconde utilise la classe initialism

pour avoir une police légèrement plus petite :

 

Vous ne voyez pas la différence ?

J’avoue que moi non plus, la proportion retenue est 90%.

Listes classiques et listes de définitions

Les listes classiques

Il y a une liste non ordonnée dans la page d’exemple :

<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> Avec ce rendu :

 

Si vous ne voulez pas voir apparaître les

puces utilisez la classe list-unstyled :

<ul class="list-unstyled"> Vous obtenez alors cet affichage :

 

Une autre possibilité consiste à avoir la

liste en ligne avec les classes list-inline et list-inline-item. Ce n’est alors plus vraiment une liste et les cas d’utilisation ne me semblent pas très clairs.

<ul class="list-inline">

    <li class="list-inline-item">Tigre de Sibérie</li>    

</ul>

Évidemment dans la page d’exemple ce n’est pas très heureux comme résultat :

Les  listes de définitions

On a une liste de définition sur la page d’exemple :

<div class="col">

  <h2 class="display-4 text-center text-danger p-md-3">Menaces pour les tigres</h2> <dl class="row">

    <dt class="col-md-3">Grand Mekong</dt>

    <dd class="col-md-9">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</dd>    

    <dt class="col-md-3">Népal</dt>

    <dd class="col-md-9">Commerce illégal de produits dérivés de tigres</dd>   </dl>

</div>

La mise en page est assurée par la grille et voici le rendu sur grand écran :

 

Re marquez cette ligne de code :

<dt class="col-md-3 text-truncate">Indonésie et Malaisie</dt>

On utilise la classe text-truncate pour dire de raccourcir le texte s’il ne rentre pas complètement dans l’espace, ce qui est le cas sur tablette :

 

Si on n’utilise

pas cette classe c’est un peu le désordre dans la liste :

 

Étant

donné que j’ai utilisé des classes col-md-* sur les smartphones tout s’empile :

 

Classes utilitaires

Bootstrap est muni de nombreuses classes utilitaires bien pratiques, que vous utiliserez fréquemment, et que nous allons voir à présent.

Positionnement horizontal du texte

On a souvent besoin de placer du texte à droite, au centre, ou même parfois de le forcer à gauche. On veut aussi pouvoir le justifier. Voici les classes disponibles :

<p class="text-left">Texte aligné à gauche</p>

<p class="text-center">Texte centré</p>

<p class="text-right">Texte aligné à droite</p>

<p class="text-justify">Texte justifié</p>

<p class="text-nowrap">Texte qui ne passe pas à la ligne même s'il n'a plus de place</p> Voici le rendu :

 

On utilise le centrage dans la

page d’exemple, par exemple pour ce titre :

<h2 class="display-3 text-center bg-info py-4 mb-3 d-none d-mdblock">Quelques photos de tigres</h2> On utilise la justification dans un paragraphe en bas de la page :

<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>

Les 3 premières classes existent en version « responsive » : text-

sm-left, text-sm-center, text-sm-right

Invisibilité

Pour rendre un élément invisible on peut utiliser les classes dont j’ai déjà parlé dans la première partie de ce cours. Dans la page d’exemple on cache le titre « Quelques photos de tigres » sur les tablettes et smartphones :

<h2 class="display-3 text-center bg-info py-4 mb-3 d-none d-mdblock">Quelques photos de tigres</h2>

Transformations du texte

On joue avec la casse

Regardez cette ligne de code de la page d’exemple :

<h1 class="text-center text-uppercase m-4">Mon amour pour les tigres<small class="text-muted"> et tous les félins</small></h1> La classe text-uppercase met tous les caractères en majuscules :

 

Il existe ces deux autres classes :

text-lowercase pour tout mettre en minuscules, text-capitalize pour mettre uniquement le premier caractère en majuscule.

On joue avec les couleurs

Regardez ce code dans la page d’exemple :

<h2 class="display-4 text-center text-danger p-md-3">Menaces pour les tigres</h2> La classe text-danger met en rouge le texte du titre :

 

Il y a ainsi 7 classes pour colorer le texte :

<div class="container bg-dark">

  <p class="text-muted">Texte délavé</p>

  <p class="text-primary">Texte primaire</p>

  <p class="text-secondary">Texte secondaire</p>

  <p class="text-success">Texte vert</p>

  <p class="text-info">Texte cyan</p>

  <p class="text-warning">Texte orange</p>

  <p class="text-danger">Texte rouge</p>

  <p class="text-white">Texte blanc</p>

  <p class="text-dark bg-white">Texte noir</p>

</div>

 

Le texte délavé a été utilisé pour une partie du titre de la page d’exemple.

On peut aussi colorer le fond plutôt que le texte, c’est ce qui a été fait pour ce titre sur la page d’exemple :

<h2 class="display-3 text-center bg-info py-4 mb-3 d-none d-mdblock">Quelques photos de tigres</h2>

 

Vo ici toutes les possibilités :

<p class="bg-primary text-white">Fond bleu</p>

<p class="bg-success text-white">Fond vert</p>

<p class="bg-info text-white">Fond cyan</p>

<p class="bg-warning text-white">Fond orange</p>

<p class="bg-danger text-white">Fond rouge</p>

<p class="bg-dark text-white">Fond noir</p>

<p class="bg-light">Fond délavé</p>

<p class="bg-white">Fond blanc</p>

Marges et remplissage

Une nouveauté intéressante de la version 4 réside dans la création de classes pour les marges et le remplissage (padding). Regardez par exemple cette partie du code de la page d’exemple :

<h2 class="display-4 text-center text-danger p-md-3">Menaces pour les tigres</h2> Vous y trouvez la classe p-md-3 qui peut se lire ainsi :

p : padding md : medium 3 : valeur 3 (ça va de 0 à 5)

Autrement dit un remplissage de valeur moyenne. En voici une illustration :

 

Dans ce cas on obtiendrait le même résultat avec une marge, donc la classe m-md-3. Vous avez compris le principe. Plutôt que de vous donner la liste complète des classes, que vous pouvez trouver sur le site, je préfère vous expliquer la logique des appellations.

La classe est composée de trois éléments, dont le troisième est optionnel, séparés par des traits d’union:

{propriété}{côtés optionnels}-{support optionnel}-{dimension}

1)   La propriété définit le type :

m : marge p : remplissage (padding)

2)   Les côtés définissent la position :

t : haut (top) r : droite (right) b : bas (bottom) l : gauche (left) x : gauche et droite y : haut et bas

3)   Le dernier élément définit la valeur :

0 : aucune valeur

6 : valeur maximale Par exemple on a ce code dans la page d’exemple :

<h2 class="display-3 text-center bg-info py-4 mb-3 d-none d-mdblock">Quelques photos de tigres</h2>

La classe mb-3 crée des marges en haut et en bas de valeur moyenne pour tous les supports :

 

Ces classes permettent d’éviter de créer des règles spécifiques pour peaufiner les mises en page.

En résumé

 Bootstrap met en forme automatiquement les balises du contenu des pages.

 Bootstrap ajoute des classes pour modifier l’aspect du texte et du fond.

 Bootstrap est muni de nombreuses classes utilitaires pour positionner texte et éléments et créer des remplissages et marges.

 

Boostrap 4 : normalize et reboot

Bootstrap utilise pour rendre l’affichage homogène pour tous les navigateurs. La version 3 se limitait à ces règles. La version 4 va plus loin en ajoutant un certain nombre d’autres règles sous le terme Reboot. Petite visite guidée dans ce chapitre qui est juste là pour information parce que vous pouvez très bien utiliser Bootstrap sans connaître tout ça mais ça peut devenir intéressant quand on veut modifier Bootstrap.

Les reset css

Les problèmes de manque d’homogénéité d’affichage selon les navigateurs sont connus depuis longtemps et ont suscité des réponses de plus en plus élaborées. On pourrait dire dans une métaphore biblique « au commencement étaient les reset css ».

Les navigateurs ont des valeurs par défaut différentes. Par exemple les titres n’ont pas toujours les mêmes marges hautes et basses, la hauteur des lignes est différente… Pour éviter de faire de multiples tests il est apparu nécessaire de corriger ces différences, c’est l’objet des reset css.

Pourquoi les navigateurs ont-ils des valeurs par défaut ?

C’est indispensable pour obtenir des pages lisibles en l’absence de règles css.

Le plus célèbre reset css est certainement celui d’Eric Meyer, le grand gourou des css. Le voici :

/*     v2.0 | 20110126    License: none (public domain)

*/

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {   margin: 0;   padding: 0;   border: 0;   font-size: 100%;

  vertical-align: baseline; }

/* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {   display: block; } body {

  line-height: 1; } ol, ul {

  list-style: none;

}

blockquote, q {   quotes: none; } blockquote:before, blockquote:after, q:before, q:after {   content: '';   content: none; } table {   border-collapse: collapse;   border-spacing: 0; }

On remarque que c’est assez radical avec une mise à 0 des marges, paddings, bordures… Cela implique ensuite de définir des règles pour tous les éléments.

est plus sophistiqué dans son approche, il est issu d’une longue recherche agrémentée de nombreux tests. Il évite de tout mettre à zéro en conservant les valeurs par défaut utiles.

D’autres part il corrige les bugs connus de certains navigateurs.

 Il a une approche modulaire, autrement dit on peut facilement faire ses courses et garder ce qui nous intéresse tout en délaissant les règles qui ne nous sont pas utiles.

Par exemple il y a une section pour les abréviations :

/**  * 1. Remove the bottom border in Chrome 57- and Firefox 39-.  * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.  */

abbr[title] {   border-bottom: none; /* 1 */   text-decoration: underline; /* 2 */   text-decoration: underline dotted; /* 2 */

}

Si vous n’utilisez pas d’abréviations dans vos pages vous pouvez facilement exclure ces règles. Également si elles ne correspondent pas à ce que vous désirez obtenir, tant qu’à les surcharger autant les supprimer.

 Il est très bien documenté Par exemple si on consulte cette partie du code :

/**  * Add the correct display in iOS 4-7.

 */

audio:not([controls]) {   display: none;   height: 0; } On comprend immédiatement la justification de ces règles.

Reboot

Le reboot de Bootstrap s’appuie sur en ajoutant ses propres règles. dans la distribution vous trouvez un fichier avec toutes ces règles. Ce fichier ne vous sera pas utile à part pour savoir exactement ce que fait le reboot. Considérez ce code :

<h1>Titre H1</h1>

<h2>Titre H2</h2>

<h3>Titre H3</h3>

<h4>Titre H4</h4>

<h5>Titre H5</h5>

<h6>Titre H6</h6> Le reboot introduit ces règles :

h1, h2, h3, h4, h5, h6 {   margin-top: 0; margin-bottom: 0.5rem;

}

Voici les titres sans ces règles :

 

Et les voici avec ces règles :

 

De la même manière d’autres éléments voient leurs marges diminuées comme les listes et les adresses.

Reboot effectue aussi quelques corrections aux listes, formulaires et tableaux, vous en trouverez le détail dans la documentation.

En gros les marges supérieures sont mises à 0 et les valeurs par défaut sont exprimées en rem. Il serait laborieux et pas vraiment utile de tout détailler puisque ces réglages sont transparents lorsqu’on utilise Bootstrap. Mais ça peut devenir intéressant d’y jeter un coup d’œil lorsqu’on veut modifier Bootstrap, ce que nous verrons dans la dernière partie de ce cours.

C’est quoi les rem ?

Il existe plusieurs façons de préciser des dimensions avec le CSS. La plus connue est le pixel qui est une mesure absolue (bien que dépendante du support) qui devient inadaptée dans une vision « responsive ». Il existe des mesures relatives comme l’em et le pourcentage.

L’em correspond à la dimension de la police de caractères. Quand on utilise cette mesure on s’adapte donc automatiquement à la dimension des caractères. Toutefois il peut y avoir un souci avec des éléments imbriqués parce qu’avec l’em on se base sur le parent. Le rem (root-em) se réfère systématiquement à l’élément racine (body ou html) et là on n’a plus de souci et le comportement est bien plus prévisible.

Pour plus de précisions je vous conseille .

En résumé

 Un reset css met toutes les valeurs par défaut des navigateurs à zéro.

 Normalize css agit plus finement, il est modulaire et bien documenté,

 Rebbot ajoute à normalize css des réglages de base pour simplifier la syntaxe des classes de Bootstrap.


1