Mis à jour le mercredi 12 juillet 2017
  • 10 heures
  • Moyenne

Ce cours est visible gratuitement en ligne.

Vous pouvez obtenir un certificat de réussite à l'issue de ce cours.

Vous pouvez être accompagné et mentoré par un professeur particulier par visioconférence sur ce cours.

J'ai tout compris !

Eléments de base

Connectez-vous ou inscrivez-vous gratuitement pour bénéficier de toutes les fonctionnalités de ce cours !

Une page web contient du texte et des images, mais aussi un certain nombre d'éléments très fréquents : listes, tableaux, formulaires, icônes, boutons. Créer une harmonie dans la présentation de tous ces éléments n'est pas une tâche aisée.

Nous allons voir comment Bootstrap permet de créer un rendu visuel cohérent pour que tous ces éléments cohabitent de façon esthétique.

Listes, descriptions et tableaux

Voici le deuxième jet de la page web de test :

<!DOCTYPE HTML>
<html>

  <head>
    <meta charset="utf-8">
    <link href="assets/css/bootstrap.css" rel="stylesheet">
    <style type="text/css">
      [class*="col"] { margin-bottom: 20px; }
      img { width: 100%; }
    </style>
  </head>

  <body>
    <div class="container">
      <header class="page-header">
        <h1>Mon amour pour les tigres</h1>
      </header>
      <section class="row">
        <div class="col-lg-12">
          <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><br>
            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. 
          </p>
          <p>Voici ce qu'en dit le wikipedia :</p>
            <blockquote>
              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.<br>
              <small class="pull-right">Wikipedia</small><br>
            </blockquote>
        </div>
      </section>
      <section class="row">
        <div class="col-xs-4 col-sm-3 col-md-2"><img src="images/t1.jpg" alt="Tigre"></div>
        <div class="col-xs-4 col-sm-3 col-md-2"><img src="images/t2.jpg" alt="Tigre"></div>
        <div class="col-xs-4 col-sm-3 col-md-2"><img src="images/t3.jpg" alt="Tigre"></div>
        <div class="col-xs-4 col-sm-3 col-md-2"><img src="images/t4.jpg" alt="Tigre"></div>
        <div class="col-xs-4 col-sm-3 col-md-2"><img src="images/t5.jpg" alt="Tigre"></div>
        <div class="col-xs-4 col-sm-3 col-md-2"><img src="images/t6.jpg" alt="Tigre"></div>
        <div class="col-xs-4 col-sm-3 col-md-2"><img src="images/t7.jpg" alt="Tigre"></div>
        <div class="col-xs-4 col-sm-3 col-md-2"><img src="images/t8.jpg" alt="Tigre"></div>
        <div class="col-xs-4 col-sm-3 col-md-2"><img src="images/t9.jpg" alt="Tigre"></div>
        <div class="col-xs-4 col-sm-3 col-md-2"><img src="images/t10.jpg" alt="Tigre"></div>
        <div class="col-xs-4 col-sm-3 col-md-2"><img src="images/t11.jpg" alt="Tigre"></div>
        <div class="col-xs-4 col-sm-3 col-md-2"><img src="images/t12.jpg" alt="Tigre"></div>
      </section>
      <div class="row">
        <section class="col-sm-4">
          <h5>Voici les sous-espèces des tigres :</h5>
          <br>
          <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>
        </section>
        <section class="col-sm-8">
          <img src="images/photo-tigre.jpg" alt="Tigre">
        </section>
      </div>
      <div class="row">
        <section class="col-sm-8 table-responsive">
          <table class="table table-bordered table-striped table-condensed">
            <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>
        </section>
        <section class="col-sm-4">
          <address>
          <p>Vous pouvez me contacter à cette adresse :</p>
          <strong>Tigrou Alfred</strong><br>
            Allée des fauves<br>
            28645 Félins-sur-Loire<br>
          </address>
        </section>
      </div>
    </div>
  </body>
</html>

Ce qui donne la figure suivante.

La page d'exemple
La page d'exemple

Tester

La présentation s'est enrichie d'une rangée et de nouveaux éléments. Voici à la figure suivante une visualisation du découpage.

La page d'exemple décryptée
La page d'exemple décryptée

Les listes

Style de base

Bootstrap propose une mise en forme élégante des listes. J'en ai prévu une sur la page :

<h5>Voici les sous-espèces des tigres :</h5>
<br>
<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>

Ce qui donne le résultat visible à la figure suivante.

Une liste
Une liste
Sans style

Il existe la classelist-unstyled, à appliquer à la balise<ul>, ce qui donne donc<ul class="list-unstyled">, qui supprime les puces. Voici le résultat sur la liste de la page :

Une liste sans style
Une liste sans style
En ligne

Il peut arriver de vouloir une liste… en ligne. Bon je n'appelle plus ça une liste mais pourquoi pas ? On peut imaginer une utilisation pour un menu. Il suffit d'utiliser la classelist-inline, donc<ul class="list-inline">. Voilà ce que ça donne sur la page :

Une liste en ligne
Une liste en ligne

Descriptions

Classique

Les descriptions sont aussi bien traitées par Bootstrap. Voici un exemple :

<dl>
  <dt>Tigre</dt>
  <dd>Animal d'Asie, grand et puissant, au pelage jaune rayé de noir, de la famille des félins</dd>
  <dt>Panthère</dt>
  <dd>Félidé d'Afrique et d'Asie au pelage jaune tâcheté de noir</dd>
  <dt>Guépard</dt>
  <dd>Félin carnassier rapide d'Asie et d'Afrique au pelage tâcheté de noir</dd>
  <dt>Chat</dt>
  <dd>Petit félin, au pelage soyeux, en général domestique</dd>
</dl>

Et l'effet visuel à la figure suivante.

Une description verticale
Une description verticale
Horizontal

Pour obtenir une présentation horizontale, il suffit d'utiliser la classedl-horizontal, ce qui donne<dl class="dl-horizontal">. Voici à la figure suivante l'effet sur la même liste.

Une description horizontale
Une description horizontale

Les tableaux

Plusieurs mises en forme sont prévues pour les tableaux, j'en ai retenu une pour le tableau de la page :

<table class="table table-bordered table-striped table-condensed">
   <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>

Ce qui nous donne le résultat visible à la figure suivante.

Un tableau stylisé

On va analyser les classes utilisées…

Classe « table »

C'est la classe de base pour les tableaux, elle fixe quelques styles et crée des lignes de séparation horizontales :

<table class="table">

Ce qui donne la figure suivante.

Effet de la classe table
Classe « table-bordered »

C'est la classe pour avoir des bordures :

<table class="table table-bordered">

Ce qui donne la figure suivante.

Effet de la classe table-bordered
Classe « table-striped »

Cette classe ajoute un fond avec un gris très léger pour les lignes impaires (1, 3, …) :

<table class="table table-bordered table-striped">
Effet de la classe table-striped
Effet de la classe table-striped
Classe « table-condensed »

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

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

Ce qui donne la figure suivante.

Effet de la classe table-condensed

Vous avez remarqué qu'on peut cumuler l'application des classes sans problème, comme je l'ai fait dans cette démonstration progressive.

Tableau adaptable avec la classe « table-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 de la figure suivante.

Effet sans la classe table-responsive
Effet sans la classe table-responsive

En englobant le tableau avec la classetable-responsive, on fait apparaître une barre de défilement lorsque la largeur de l'affichage passe au-dessous de 768px (voir figure suivante).

<section class="col-sm-8 table-responsive">
  <table class="table table-bordered table-striped table-condensed">
Barre de défilement avec la classe table-responsive
Barre de défilement avec la classe table-responsive
Un peu de couleur dans les tableaux

Vous avez la possibilité de colorer le fond des lignes des tableaux avec les classesinfo, success, danger, warning etactive. Voici le tableau de notre exemple, mais avec un peu de couleur :

<table class="table table-bordered table-striped table-condensed">
  <caption>
  <h4>Les menaces pour les tigres</h4>
  </caption>
  <thead>
    <tr>
      <th>Lieu</th>
      <th>Menace</th>
    </tr>
  </thead>
    <tbody>
      <tr class="success">
        <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 class="danger">
        <td>Île de Sumatra</td>
        <td>Production d’huile de palme et de pâtes à papiers</td>
      </tr>
      <tr class="warning">
        <td>Indonésie et Malaisie</td>
        <td>Pâte à papier, l’huile de palme et le caoutchouc</td>
      </tr>
      <tr class="active">
        <td>États-Unis</td>
        <td>Les tigres captifs représentent un danger pour les tigres sauvages</td>
      </tr>
      <tr class="success">
        <td>Europe</td>
        <td>Gros appétit pour l’huile de palme</td>
      </tr>
      <tr class="danger">
        <td>Népal</td>
        <td>Commerce illégal de produits dérivés de tigres</td>
      </tr>
    </tbody>
</table>

Ce qui donne la figure suivante.

De la couleur dans les tableaux
De la couleur dans les tableaux

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.

Formulaires

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>
  <legend>Légende</legend>
    Text : <input type="text">
    Textarea : <textarea id="textarea"></textarea>
    Select :
      <select>
        <option>Option 1</option>
        <option>Option 2</option>
        <option>Option 3</option>
      </select>
    <button>Envoyer</button>
</form>

Nous aurons alors un rendu similaire à celui de la figure suivante.

Un formulaire sans style

Par défaut les contrôles s'alignent horizontalement. J'aimerais que les contrôles occupent toute la largeur disponible. Il faut utiliser la classeform-control pour obtenir cet effet (voir figure suivante).

<form class="col-lg-6">
  <legend>Légende</legend>
    Text : <input type="text" class="form-control">
    Textarea : <textarea id="textarea" class="form-control"></textarea>
    Select :
      <select class="form-control">
        <option>Option 1</option>
        <option>Option 2</option>
        <option>Option 3</option>
      </select>
    <button>Envoyer</button>
</form>
Effet de la classe form-control

On se rend compte que cette classe ne se contente pas d'élargir les contrôles, elle procède aussi à une mise en forme esthétique. Arrangeons encore ce formulaire en utilisant des balises<label> et écartons un peu le bouton :‌

<form class="col-lg-6">
  <legend>Légende</legend>
    <label for="text">Text : </label>
    <input id="text" type="text" class="form-control">
    <label for="textarea">Textarea : </label>
    <textarea id="textarea" type="textarea" class="form-control"></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>
    <br>
    <button>Envoyer</button>
</form>

Le résultat se trouve à la figure suivante.

Ajout de balises <label>

On a gagné en esthétique. On peut encore améliorer l'espacement en utilisant la classeform-group:

<form class="col-lg-6">
  <legend>Légende</legend>
    <div class="form-group">
      <label for="texte">Text : </label>
      <input id="text" type="text" class="form-control">
    </div>
    <div class="form-group">
      <label for="textarea">Textarea : </label>
      <textarea id="textarea" type="textarea" class="form-control"></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>

On obtient alors le résultat visible à la figure suivante.

Effet de la classe form-group

Le formulaire est bien aéré et j'ai pu enlever la balise<br> qui me servait à espacer le bouton.

La page d'exemple

Voici la troisième version de notre page consacrée aux tigres :

<!DOCTYPE HTML>
<html>

  <head>
    <meta charset="utf-8">
    <link href="assets/css/bootstrap.css" rel="stylesheet">
    <style type="text/css">
      body { background-color:#DDD; }
      [class*="col"] { margin-bottom: 20px; }
      img { width: 100%; }
      .well {
        background-color:#CCC;
        padding: 20px;
      }
    </style>
  </head>

  <body>
    <div class="container">
      <header class="page-header">
        <h1>Mon amour pour les tigres</h1>
      </header>
      <section class="row">
        <div class="col-lg-12">
          <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><br>
            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. 
          </p>
          <p>Voici ce qu'en dit le wikipedia :</p>
          <blockquote>
            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.<br>
            <small class="pull-right">Wikipedia</small><br>
          </blockquote>
        </div>
      </section>
      <section class="row">
        <div class="col-xs-4 col-sm-3 col-md-2"><img src="images/t1.jpg" alt="Tigre"></div>
        <div class="col-xs-4 col-sm-3 col-md-2"><img src="images/t2.jpg" alt="Tigre"></div>
        <div class="col-xs-4 col-sm-3 col-md-2"><img src="images/t3.jpg" alt="Tigre"></div>
        <div class="col-xs-4 col-sm-3 col-md-2"><img src="images/t4.jpg" alt="Tigre"></div>
        <div class="col-xs-4 col-sm-3 col-md-2"><img src="images/t5.jpg" alt="Tigre"></div>
        <div class="col-xs-4 col-sm-3 col-md-2"><img src="images/t6.jpg" alt="Tigre"></div>
        <div class="col-xs-4 col-sm-3 col-md-2"><img src="images/t7.jpg" alt="Tigre"></div>
        <div class="col-xs-4 col-sm-3 col-md-2"><img src="images/t8.jpg" alt="Tigre"></div>
        <div class="col-xs-4 col-sm-3 col-md-2"><img src="images/t9.jpg" alt="Tigre"></div>
        <div class="col-xs-4 col-sm-3 col-md-2"><img src="images/t10.jpg" alt="Tigre"></div>
        <div class="col-xs-4 col-sm-3 col-md-2"><img src="images/t11.jpg" alt="Tigre"></div>
        <div class="col-xs-4 col-sm-3 col-md-2"><img src="images/t12.jpg" alt="Tigre"></div>
      </section>
      <div class="row">
        <section class="col-sm-4">
          <h5>Voici les sous-espèces des tigres :</h5>
          <br>
          <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>
        </section>
        <section class="col-sm-8">
          <img src="images/photo-tigre.jpg" alt="Tigre">
        </section>
      </div>
      <div class="row">
        <section class="col-sm-12">
          <table class="table table-bordered table-striped table-condensed">
            <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>
        </section>
      </div>
      <div class="row">
        <section class="col-sm-8">
          <form class="well">
            <legend>Si vous voulez me laisser un message</legend>
            <h4>Comment m'avez-vous trouvé ?</h4>
            <fieldset>
              <div class="radio">
                <label for="ami" class="radio">
                  <input type="radio" name="origine" value="ami" id="ami">
                  Par un ami 
                </label>
              </div>
              <div class="radio">
                <label for="web" class="radio">
                  <input type="radio" name="origine" value="web" id="web">
                  Sur le web 
                </label>
              </div>
              <div class="radio">
                <label for="hasard" class="radio">
                  <input type="radio" name="origine" value="hasard" id="hasard">
                  Par hasard 
                </label>
              </div>
              <div class="radio">
                <label for="autre" class="radio">
                  <input type="radio" name="origine" value="autre" id="autre">
                  Autre... 
                </label>
              </div>
              <label for="textarea">Votre message :</label>
                <textarea id="textarea" class="form-control" rows="4"></textarea>
                <p class="help-block">Vous pouvez agrandir la fenêtre</p>
              <button class="btn btn-primary" type="submit">Envoyer</button>
            </fieldset>
          </form>
        </section>
        <section class="col-sm-4">
          <address>
          <p>Vous pouvez me contacter à cette adresse :</p>
          <strong>Tigrou Alfred</strong><br>
            Allée des fauves<br>
            28645 Félins-sur-Loire<br>
          </address>
        </section>
      </div>
    </div>
  </body>
</html>

Pour cette troisième version, j'ai ajouté un peu de style et un formulaire, ce qui donne les figures suivantes.

La page d'exemple, première partie
La page d'exemple, première partie
La page d'exemple, deuxième partie
La page d'exemple, deuxième partie

Tester

Au niveau du style, juste une petite touche :

body { background-color:#DDD; }
[class*="col"] { margin-bottom: 20px; }
img { width: 100%; }
.well {
  background-color:#CCC;
  padding: 20px;
}

Le fond d'un léger gris met bien en valeur le texte et les photos. Quant au formulaire (concerné par la classewell), c'est l'objet de ce chapitre…

Les classes « radio » et « checkbox »

Bootstrap propose l'utilisation d'une classe particulière pour les cases à cocher (checkbox) et les zones d'option (radio). Nous l'avons utilisée dans le formulaire de la page :

<form class="well">
  <legend>Si vous voulez me laisser un message</legend>
  <h4>Comment m'avez-vous trouvé ?</h4>
  <fieldset>
    <div class="radio">
      <label for="ami" class="radio">
        <input type="radio" name="origine" value="ami" id="ami">
        Par un ami 
      </label>
    </div>
    <div class="radio">
      <label for="web" class="radio">
        <input type="radio" name="origine" value="web" id="web">
        Sur le web 
      </label>
    </div>
    <div class="radio">
      <label for="hasard" class="radio">
        <input type="radio" name="origine" value="hasard" id="hasard">
        Par hasard 
      </label>
    </div>
    <div class="radio">
      <label for="autre" class="radio">
        <input type="radio" name="origine" value="autre" id="autre">
        Autre... 
      </label>
    </div>
    <label for="textarea">Votre message :</label>
      <textarea id="textarea" class="form-control" rows="4"></textarea>
      <p class="help-block">Vous pouvez agrandir la fenêtre</p>
    <button class="btn btn-primary" type="submit">Envoyer</button>
  </fieldset>
</form>
La classe well, un peu de style, un joli bouton et un texte d'aide.

Voilà une classe que j'aime bien, elle provoque une jolie stylisation. J'ai apporté ce petit complément au formulaire de la page :

<form class="well">

On peut ajuster la dimension en ajoutant la classewell-lg pour agrandir ouwell-sm pour réduire. J'ai aussi peaufiné en ajoutant des règles de style à la page :

<style type="text/css">
      body { background-color:#DDD; }
      [class*="col"] { margin-bottom: 20px; }
      img { width: 100%; }
      .well {
        background-color:#CCC;
        padding: 20px;
      }
    </style>

La dernière touche a consisté à améliorer l'aspect du bouton avec 2 classes que nous verrons plus loin dans ce cours :

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

Il ne reste plus qu'à rendre plus discret le texte d'aide situé au-dessous de la zone de texte, ce que nous accomplissons avec la classehelp-block :

<p class="help-block">Vous pouvez agrandir la fenêtre</p>
Effet de la classe help-block
Effet de la classe help-block

Formulaire horizontal

Pour réaliser un formulaire horizontal, nous allons utiliser tout ce que nous venons de voir en exploitant la classeform-horizontal et une grille pour positionner les étiquettes et les contrôles :

<form class="form-horizontal col-lg-6">
  <div class="form-group">
    <legend>Légende</legend>
  </div>
  <div class="row">
    <div class="form-group">
      <label for="text" class="col-lg-2 control-label">Text : </label>
      <div class="col-lg-10">
        <input type="text" class="form-control" id="text">
      </div>
    </div>
  </div>
  <div class="row">
    <div class="form-group">
      <label for="textarea" class="col-lg-2 control-label">Textarea : </label>
      <div class="col-lg-10">
        <input type="textarea" class="form-control" id="textarea">
      </div>
    </div>
  </div>
  <div class="row">
    <div class="form-group">
    <label for="select" class="col-lg-2 control-label">Select: </label>
      <div class="col-lg-10">
        <select id="select" class="form-control" >
          <option>Option 1</option>
          <option>Option 2</option>
          <option>Option 3</option>
        </select>
      </div>
    </div>
  </div>
  <div class="form-group">
    <button class="pull-right btn btn-default">Envoyer</button>
  </div>
</form>

Ce qui nous donne la figure suivante.

Un formulaire horizontal

Les étiquettes disposent de 2 colonnes et les champs de saisie de 10 colonnes. On peut voir l'utilisation de la classepull-right pour envoyer le bouton vers la droite. L'alignement à droite des étiquettes est réalisé par la classecontrol-label. Voici à la figure suivante une visualisation du découpage.

Décryptage du formulaire horizontal

Formulaire en ligne

Il arrive qu'on ait besoin d'avoir un formulaire disposé sur une ligne, par exemple dans une barre de navigation. Faisons un essai avec un formulaire élémentaire :

<form>
  <input type="text">
  <input type="checkbox"> Se rappeler de moi 
  <button>Envoyer</button>
</form>

En l'état, on obtient le résultat visible à la figure suivante.

Un formulaire sans style

Bon ce n'est pas très joli, alors arrangeons ça avec tout ce que nous avons déjà vu et en précisant la classeform-inline:

<form class="form-inline">
  <div class="form-group">
    <label class="sr-only" for="text">Texte</label>
    <input type="text" class="form-control" id="text" placeholder="un texte ici">
  </div>
  <div class="form-group">
  <div class="checkbox">
    <label>
      <input type="checkbox"> Se rappeler de moi...
    </label>
  </div>
  <button type="submit" class="btn btn-default">Envoyer</button>
</form>

On obtient alors la figure suivante.

Un formulaire en ligne stylisé

C'est beaucoup mieux ! Remarquez l'utilisation d'une étiquette invisible pour la zone de texte. Il est conseillé d'avoir toujours une étiquette pour chaque contrôle pour les lecteurs d'écran (accessibilité), la classe sr-only permet de rendre cette étiquette invisible.

Les classes input-group, input-group-addon et input-group-btn à l’œuvre

Accoler une information à un contrôle

Les classesinput-group etinput-group-addon servent à accoler une information à un contrôle de formulaire :

<form class="form-inline">
  <div class="form-group">
    <div class="input-group"> 
      <span class="input-group-addon">€</span>
      <input type="text" class="form-control" value="100">
    </div>
  </div>
  <div class="form-group">
    <div class="input-group">
      <input type="text" class="form-control" style="text-align:right" value="100,50">
      <span class="input-group-addon">€</span> 
    </div>
  </div>
</form>

Ce qui nous donne la figure suivante.

Une information accolée à un contrôle
Une information accolée à un contrôle

On peut aussi les utiliser conjointement pour accoler devant et derrière :

<form class="form-inline">
  <div class="input-group"> 
    <span class="input-group-addon">€</span>
    <input type="text" class="form-control" style="text-align:right" value="100">
    <span class="input-group-addon">.00</span> 
  </div>
</form>

Ce qui nous donne la figure suivante.

Deux informations accolées à un contrôle
Deux informations accolées à un contrôle
Accoler un bouton à un contrôle

On peut aussi accoler un bouton avec la classeinput-group-btn:

<form class="form-inline">
  <div class="input-group col-lg-3"> 
    <input type="text" class="form-control" style="text-align:right" value="10 000">
    <span class="input-group-btn">
      <button class="btn btn-default" type="button">Valider</button>
    </span>
  </div>
</form>

Ce qui nous donne la figure suivante.

Un bouton accolé à un contrôle

Et rien n'empêche d'en ajouter plusieurs, comme pour la figure suivante.

<form class="form-inline">
  <div class="input-group col-lg-4">   
    <input type="text" class="form-control" style="text-align:right" value="10 000">
    <span class="input-group-btn">
      <button class="btn btn-default" type="button">Valider</button>
      <button class="btn btn-default" type="button">Annuler</button>
    </span>
  </div>
</form>
Plusieurs boutons accolés à un contrôle
Accoler une case à cocher ou un bouton radio à un contrôle
<div class="input-group">   
  <div class="form-group">
    <div class="input-group">
      <span class="input-group-addon">
        <input type="checkbox">
      </span>
      <input type="text" class="form-control">
    </div>
  </div>
  <div class="form-group">
    <div class="input-group">
      <span class="input-group-addon">
        <input type="radio">
      </span>
      <input type="text" class="form-control">
    </div>
  </div>
</div>

Ce qui nous donne la figure suivante.

Bouton radio et case à cocher accolés à un contrôle
Bouton radio et case à cocher accolés à un contrôle

Dimension des contrôles

Pour ajuster un formulaire, il est parfois utile de jouer sur la taille des contrôles. Bootstrap propose les classesinput-lg etinput-sm pour le faire dans un sens ou dans l'autre :

<div class="col-lg-3">
  <input type="text" class="form-control input-sm" value="Petit">
  <input type="text" class="form-control" value="Normal">
  <input type="text" class="form-control input-lg" value="Grand">
</div>

Ce qui nous donne la figure suivante.

Contrôles de dimensions différentes
Contrôles de dimensions différentes

Notez qu'on joue ici uniquement sur la hauteur du contrôle, la largeur étant définie par la grille.

Stylisation selon l'état

Bootstrap embarque des classes de stylisation des zones de saisie selon l'état. Voici un exemple :

<form class="col-lg-5">
  <fieldset>
    <legend>Validation, erreur et succès</legend>
    <div class="form-group has-error">
      <label class="control-label" for="idError">Erreur</label>
      <input type="text" class="form-control" id="idError">
      <span class="help-block">Corrigez l'erreur s'il vous plait</span>
    </div>
    <div class="form-group has-warning">
      <label class="control-label" for="idWarning">Avertissement</label>
      <input type="text" class="form-control" id="idWarning">
      <span class="help-block">Il y a un problème dans la saisie</span>
    </div>
    <div class="form-group has-success">
      <label class="control-label" for="idSuccess">Réussite</label>
      <input type="text" class="form-control" id="idSuccess">
      <span class="help-block">Saisie correcte</span>
    </div>
  </fieldset>
</form>

Ce qui nous donne la figure suivante.

Stylisation selon l'état
Stylisation selon l'état

La version 3.1 de Bootstrap a prévu la possibilité d'ajouter une icône pour améliorer l'effet visuel. Nous verrons comment Bootstrap permet d'utiliser des icônes dans le chapitre suivant. Je vous mets juste l'exemple précédent complété sans commenter l'ajout des icônes, vous pourrez y revenir plus tard quand vous aurez avancé dans ce cours :

<form class="col-lg-5">
  <fieldset>
    <legend>Validation, erreur et succès</legend>
    <div class="form-group has-error has-feedback">
      <label class="control-label" for="idError">Erreur</label>
      <input type="text" class="form-control" id="idError">
      <span class="glyphicon glyphicon-remove form-control-feedback"></span>
      <span class="help-block">Corrigez l'erreur s'il vous plait</span>
    </div>
    <div class="form-group has-warning has-feedback">
      <label class="control-label" for="idWarning">Avertissement</label>
      <input type="text" class="form-control" id="idWarning">
      <span class="glyphicon glyphicon-warning-sign form-control-feedback"></span>
      <span class="help-block">Il y a un problème dans la saisie</span>
    </div>
    <div class="form-group has-success has-feedback">
      <label class="control-label" for="idSuccess">Réussite</label>
      <input type="text" class="form-control" id="idSuccess">
      <span class="glyphicon glyphicon-ok form-control-feedback"></span>
      <span class="help-block">Saisie correcte</span>
    </div>
  </fieldset>
</form>

Remarquez l'ajout des classeshas-feedback etform-control-feedback pour que l'icône soit bien intégrée dans le contrôle. Ce qui nous donne la figure suivante.

Stylisation selon l'état avec des icônes
Stylisation selon l'état avec des icônes

Dans ces exemples il y a peu d'actions possibles car, pour le moment, je n'ai pas prévu d'interactivité. Alors un petit exemple : nous voulons faire un formulaire comme celui de la figure suivante.

Formulaire à obtenir
Formulaire à obtenir

Et nous voulons tester la saisie pour vérifier que le texte fait au moins 4 caractères. Si ce n'est pas le cas, on change le style de la zone de texte et on fait apparaître un message d'avertissement, comme à la figure suivante.

Message à afficher
Message à afficher

Tant qu'à faire, on veut aussi que le message d'avertissement disparaisse au bout de 4 secondes et que le tout se fasse avec fluidité. En combinant Bootstrap et jQuery c'est un jeu d'enfant :

<div class="col-lg-4">
  <form class="form-inline well">
    <div class="form-group">
      <label class="sr-only" for="text">Saisie</label>
      <input id="text" type="text" class="form-control" placeholder="Texte ici">
    </div>
    <button type="submit" class="btn btn-primary pull-right">Envoyer</button>
    <div class="alert alert-block alert-danger" style="display:none">
      <h4>Erreur !</h4>
      Vous devez entrer au moins 4 caractères ! 
    </div>
  </form>
</div>
<script src="assets/js/jquery.js"></script> 
<script>
  $(function(){
    $("form").on("submit", function() {
      if($("input").val().length < 4) {
        $("div.form-group").addClass("has-error");
        $("div.alert").show("slow").delay(4000).hide("slow");
        return false;
      }
    });
  });
</script>

Tester

Je ne commente pas le code jQuery ajouté parce que ce n'est pas l'objet de ce cours, mais je conseille vraiment de connaître ce framework Javascript puissant et élégant pour tirer pleinement parti de toutes les possibilités de Bootstrap.

Un générateur de formulaire

Le site bootsnipp propose un générateur de formulaire pour Bootstrap (voir à la figure suivante).

Un générateur de formulaire pour Bootstrap
Un générateur de formulaire pour Bootstrap

On construit le formulaire avec de simples glisser-déposer. On renseigne ensuite les paramètres avec un formulaire qui apparaît en fenêtre modale. À la fin, on n'a plus qu'à copier le code HTML. On ne peut réaliser que des formulaires horizontaux, mais une simple adaptation du code permet de réaliser facilement d'autres sortes de formulaires.

Boutons, icônes et images

La page d'exemple

Voici la nouvelle version de la page d'exemple :

<!DOCTYPE HTML>
<html>

  <head>
    <meta charset="utf-8">
    <link href="assets/css/bootstrap.css" rel="stylesheet">
    <style type="text/css">
      body { background-color:#DDD; }
      [class*="col"] { margin-bottom: 20px; }
      .form-inline { margin-top: 20px}
      img { width: 100%; }
      .well {
        background-color:#CCC;
        padding: 20px;
      }
    </style>
  </head>

  <body>
    <div class="container">
      <header class="row">
        <div class="col-sm-12 col-lg-7">
          <h1>Mon amour pour les tigres</h1>
        </div>
        <div class="col-sm-12 col-lg-5">
          <form class="form-inline pull-right">
            <input type="text" style="width:150px" class="input-sm form-control" placeholder="Recherche">
            <button type="submit" class="btn btn-primary btn-xs"><span class="glyphicon glyphicon-eye-open"></span> Chercher</button>
          </form>
        </div>
      </header>
      <section class="row">
        <div class="col-lg-12">
          <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><br>
            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. 
          </p>
          <p>Voici ce qu'en dit le wikipedia :</p>
          <blockquote>
            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.<br>
            <small class="pull-right">Wikipedia</small><br>
          </blockquote>
        </div>
      </section>
      <section class="row">
        <div class="col-xs-4 col-sm-3 col-md-2"><img src="images/t1.jpg" alt="Tigre" class="img-rounded"></div>
        <div class="col-xs-4 col-sm-3 col-md-2"><img src="images/t2.jpg" alt="Tigre" class="img-rounded"></div>
        <div class="col-xs-4 col-sm-3 col-md-2"><img src="images/t3.jpg" alt="Tigre" class="img-rounded"></div>
        <div class="col-xs-4 col-sm-3 col-md-2"><img src="images/t4.jpg" alt="Tigre" class="img-rounded"></div>
        <div class="col-xs-4 col-sm-3 col-md-2"><img src="images/t5.jpg" alt="Tigre" class="img-rounded"></div>
        <div class="col-xs-4 col-sm-3 col-md-2"><img src="images/t6.jpg" alt="Tigre" class="img-rounded"></div>
        <div class="col-xs-4 col-sm-3 col-md-2"><img src="images/t7.jpg" alt="Tigre" class="img-rounded"></div>
        <div class="col-xs-4 col-sm-3 col-md-2"><img src="images/t8.jpg" alt="Tigre" class="img-rounded"></div>
        <div class="col-xs-4 col-sm-3 col-md-2"><img src="images/t9.jpg" alt="Tigre" class="img-rounded"></div>
        <div class="col-xs-4 col-sm-3 col-md-2"><img src="images/t10.jpg" alt="Tigre" class="img-rounded"></div>
        <div class="col-xs-4 col-sm-3 col-md-2"><img src="images/t11.jpg" alt="Tigre" class="img-rounded"></div>
        <div class="col-xs-4 col-sm-3 col-md-2"><img src="images/t12.jpg" alt="Tigre" class="img-rounded"></div>
      </section>
      <div class="row">
        <section class="col-sm-4">
          <h5>Voici les sous-espèces des tigres :</h5>
          <br>
          <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>
        </section>
        <section class="col-sm-8">
          <img src="images/photo-tigre.jpg" alt="Tigre" class="img-rounded">
        </section>
      </div>
      <div class="row">
        <section class="col-sm-12">
          <table class="table table-bordered table-striped table-condensed">
            <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>
        </section>
      </div>
      <div class="row">
        <section class="col-sm-8">
          <form class="well">
            <legend>Si vous voulez me laisser un message</legend>
            <h4>Comment m'avez-vous trouvé ?</h4>
            <fieldset>
              <div class="radio">
                <label for="ami" class="radio">
                  <input type="radio" name="origine" value="ami" id="ami">
                  Par un ami 
                </label>
              </div>
              <div class="radio">
                <label for="web" class="radio">
                  <input type="radio" name="origine" value="web" id="web">
                  Sur le web 
                </label>
              </div>
              <div class="radio">
                <label for="hasard" class="radio">
                  <input type="radio" name="origine" value="hasard" id="hasard">
                  Par hasard 
                </label>
              </div>
              <div class="radio">
                <label for="autre" class="radio">
                  <input type="radio" name="origine" value="autre" id="autre">
                  Autre... 
                </label>
              </div>
              <label for="textarea">Votre message :</label>
                <textarea id="textarea" class="form-control" rows="4"></textarea>
                <p class="help-block">Vous pouvez agrandir la fenêtre</p>
                <button class="btn btn-primary" type="submit"><span class="glyphicon glyphicon-ok-sign"></span> Envoyer</button>
            </fieldset>
          </form>
        </section>
        <section class="col-sm-4">
          <address>
          <p>Vous pouvez me contacter à cette adresse :</p>
          <strong>Tigrou Alfred</strong><br>
            Allée des fauves<br>
            28645 Félins-sur-Loire<br>
          </address>
        </section>
      </div>
    </div>
  </body>
</html>

Tester

Qu'y a-t-il de nouveau ? Déjà un formulaire de recherche dans la partie supérieure droite, avec une zone de texte et un bouton muni d'une icône (voir figure suivante).

Le formulaire de recherche
Le formulaire de recherche

Remarquez le traitement du responsive pour ce formulaire. Pour un écran large, il est calé en haut à droite avec une classecol-lg-5 et unpull-right. Quand on passe au format moyen, il se retrouve avec la classecol-sm-12 de telle manière qu'il vienne se disposer sous le titre, toujours calé à droite (voir figure suivante).

Effet de la classe pull-right
Effet de la classe pull-right

Les vignettes des images ont désormais leurs coins arrondis, comme le montre la figure suivante.

Des images aux coins arrondis
Des images aux coins arrondis

Le bouton du formulaire de contact a hérité d'une icône (voir figure suivante).

Une icône dans le bouton
Une icône dans le bouton

Nous allons passer en revue ces nouveautés et détailler les possibilités de Bootstrap pour les boutons, les icônes et les images.

Des jolis boutons

Pour créer un bouton avec Bootstrap il suffit d'ajouter les classesbtn etbtn-default à une balise<button>,<a> ou<input>:

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

Ce qui nous donne la figure suivante.

Apparence des boutons
Apparence des boutons

Le rendu est le même, tout dépend du contexte d'utilisation.

Les différents types de boutons

L'aspect par défaut est un gris avec le fond blanc. Il existe d'autres possibilité plus colorées :

<button type="button" class="btn btn-primary">Bouton standard</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-link">Lien</button>

Ce qui nous donne les boutons visibles à la figure suivante.

Des boutons colorés
Des boutons colorés

À utiliser selon les situations et à faire varier selon l'humeur !

Dimension des boutons

On peut aussi ajuster la dimension du bouton :

<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>
<button type="button" class="btn btn-primary btn-xs">Bouton très petit</button>

Ce qui nous donne la figure suivante.

Plusieurs dimensions de boutons
Plusieurs dimensions de boutons
Boutons "block"

La classebtn-block règle la dimension du bouton sur la dimension de son contenant. Voici un exemple :

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

Ce qui nous donne la figure suivante.

Effet de la classe bouton-block
Effet de la classe bouton-block
Grouper des boutons

Il est possible de grouper des boutons horizontalement avec la classebtn-group. Ce groupement peut s'effectuer aussi verticalement avec la classebtn-group-vertical. Voici un exemple avec les deux groupements :

<div class="row">
  <div class="col-lg-2">
    <div class="btn-group">
        <a class="btn btn-danger" href="#">1</a>
        <a class="btn btn-info" 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-info" href="#">5</a>
        <a class="btn btn-warning" href="#">6</a>
    </div>
  </div>
</div>

Ce qui nous donne la figure suivante.

Groupement de boutons
Groupement de boutons

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

<div class="btn-toolbar">
  <div class="btn-group">
      <a class="btn btn-danger" href="#">1</a>
      <a class="btn btn-info" 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-info" href="#">5</a>
      <a class="btn btn-warning" href="#">6</a>
  </div>
</div>

Ce qui nous donne la figure suivante.

Une barre de boutons
Une barre de boutons

On peut dimensionner un groupement :

<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-info" 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-info" 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-info" 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-xs">
        <a class="btn btn-danger" href="#">4</a>
        <a class="btn btn-info" href="#">5</a>
        <a class="btn btn-warning" href="#">6</a>
    </div>
  </div>
</div>

Ce qui nous donne la figure suivante.

Plusieurs dimensions de groupement de boutons
Plusieurs dimensions de groupement de boutons
Boutons justifiés

Si vous voulez que vos boutons se répartissent harmonieusement et uniformément dans un contenant, utilisez la classebtn-group-justified en plus debtn-group:

<div class="col-lg-6">
  <div class="btn-group btn-group-justified">
      <a class="btn btn-danger" href="#">1</a>
      <a class="btn btn-info" href="#">2</a>
      <a class="btn btn-warning" href="#">3</a>
  </div>
</div>

Ce qui nous donne la figure suivante.

Boutons justifiés
Boutons justifiés

Cet exemple utilise des balises<a>. On peut réaliser la même chose avec des balises<button>  à condition d'utiliser la classebtn-group pour chaque bouton :

<div class="col-lg-6">
  <div class="btn-group btn-group-justified">
    <div class="btn-group">
      <button type="button" class="btn btn-danger">1</button>
    </div>
    <div class="btn-group">
      <button type="button" class="btn btn-info">2</button>
    </div>
    <div class="btn-group">
      <button type="button" class="btn btn-warning">3</button>
    </div>
  </div>
</div>
Des générateurs de bouton

Le site bootsnipp propose un générateur de bouton simple à utiliser (voir figure suivante).

Un générateur de bouton
Un générateur de bouton

Vous entrez le texte du bouton, la couleur, la taille, vous choisissez l'icône et son positionnement. Vous visualisez directement le résultat et vous disposez du code HTML correspondant.

Si vous voulez des styles différents pour vos boutons et sortir des couleurs standards que Bootstrap propose, vous pouvez créer vos propres styles. Si vous n'êtes pas très inspiré, il existe un générateur simple et pratique sur le site http://charliepark.org/bootstrap_buttons/ (voir figure suivante).

Un autre générateur de bouton
Un autre générateur de bouton

Il suffit de récupérer le code et de l'insérer dans votre feuille de style. L'intégration dans un bouton (ou autre) est simple :

<button type="button" class="btn btn-custom">Mon beau bouton</button>

Il est ainsi facile et rapide de créer son propre style de bouton (voir figure suivante).

Un bouton généré
Un bouton généré

De jolies icônes

Les icônes de Glyphicons

Bootstrap propose 200 icônes de Glyphicons. L'intégration d'une icône est facile parce qu'il suffit d'utiliser la balise<span>. Pour le formulaire de contact de la page d'exemple, le bouton est amélioré en le complétant par une icône :

<button class="btn btn-primary" type="submit"><span class="glyphicon glyphicon-ok-sign"></span> Envoyer</button>

Ce qui nous donne la figure suivante.

Icône dans un bouton
Icône dans un bouton

La syntaxe est toute simple. On utilise une balise<span> avec deux classes. La principale estglyphicon suivi de la classe qui correspond à l'icône à afficherglyphicon-*. On peut ainsi créer d'élégantes barres de boutons :

<div class="container">
  <div class="row" >
    <div class="col-lg-3">
      <div class="btn-group">
          <a class="btn btn-danger" href="#"><span class="glyphicon glyphicon-fast-backward"></span>&nbsp;</a>
          <a class="btn btn-info" href="#"><span class="glyphicon glyphicon-backward"></span>&nbsp;</a>
          <a class="btn btn-warning" href="#"><span class="glyphicon glyphicon-play"></span>&nbsp;</a>
          <a class="btn btn-info" href="#"><span class="glyphicon glyphicon-forward"></span>&nbsp;</a>
          <a class="btn btn-danger" href="#"><span class="glyphicon glyphicon-fast-forward"></span>&nbsp;</a>
      </div>
    </div>
    <div class="col-lg-1">
      <div class="btn-group-vertical">
          <a class="btn btn-danger" href="#"><span class="glyphicon glyphicon-pencil"></span>&nbsp;</a>
          <a class="btn btn-info" href="#"><span class="glyphicon glyphicon-search"></span>&nbsp;</a>
          <a class="btn btn-warning" href="#"><span class="glyphicon glyphicon-print"></span>&nbsp;</a>
          <a class="btn btn-success" href="#"><span class="glyphicon glyphicon-picture"></span>&nbsp;</a>
      </div>
    </div>
  </div>
</div>

Ce qui nous donne la figure suivante.

Barres de boutons avec des icônes
Barres de boutons avec des icônes

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

Comme il s'agit de polices, il suffit d'utiliser du style :

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

Ce qui nous donne la figure suivante.

Une icône colorée
Une icône colorée

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="glyphicon glyphicon-user"></span><br>Utilisateurs</button>
<button class="btn btn-warning btn-lg"><span class="glyphicon glyphicon-comment"></span><br>Commentaires</button>
<button class="btn btn-success btn-lg"><span class="glyphicon glyphicon-calendar"></span><br>Evénements</button>
<button class="btn btn-danger btn-lg"><span class="glyphicon glyphicon-shopping-cart"></span><br>Boutique</button>
<button class="btn btn-info btn-lg"><span class="glyphicon glyphicon-bullhorn"></span><br>Messages</button>
Séparer l'icône du texte
Séparer l'icône du texte
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é (voir aussi figure suivante) :

.btn-lg {
  width: 50px;
  height: 50px;
  border-radius: 25px;
}

Et le code HTML :

<button class="btn btn-primary btn-lg"><span class="glyphicon glyphicon-user"></span></button>
<button class="btn btn-warning btn-lg"><span class="glyphicon glyphicon-comment"></span></button>
<button class="btn btn-success btn-lg"><span class="glyphicon glyphicon-calendar"></span></button>
<button class="btn btn-danger btn-lg"><span class="glyphicon glyphicon-shopping-cart"></button>
<button class="btn btn-info btn-lg"><span class="glyphicon glyphicon-bullhorn"></span></button>
Des boutons ronds
Des boutons ronds
Les icônes de Font Awesome

Le site Font Awesome propose une collection de 675 icônes toutes prêtes pour Bootstrap. Évidemment elles ne sont pas intégrées de base dans Bootstrap et 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 le CDN :

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

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> serait plus adaptée. Le site propose une galerie d'exemples. On peut insérer une icône directement dans un texte (voir aussi la figure suivante) :

Il faut déverrouiller <i class="fa fa-unlock"></i> pour sortir <i class="fa fa-arrow-right"></i>
Icônes dans un texte
Icônes dans un texte

On peut aussi dimensionner les icônes selon le contexte (voir aussi la figure suivante) :

<p><i class="fa fa-print fa-lg"></i> Taille normale</p>
<p><i class="fa fa-print fa-2x"></i> Taille double</p>
<p><i class="fa fa-print fa-3x"></i> Taille triple</p>
<p><i class="fa fa-print fa-4x"></i> Taille quadruple</p>
<p><i class="fa fa-print fa-5x"></i> Taille quintuple</p>
Réglage de la taille des icônes
Réglage de la taille des icônes

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

<ul class="fa-ul">
  <li><i class="fa-li fa fa-check-square"></i>Vérifier</li>
  <li><i class="fa-li fa fa-paperclip"></i>Conserver</li>
  <li><i class="fa-li fa fa-eraser"></i>Effacer</li>
  <li><i class="fa-li fa fa-print"></i>Imprimer</li>
</ul>
Des puces avec des icônes
Des puces avec des icônes

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.

Mise en forme des images

Bootstrap donne la possibilité de modifier l'apparence des bordures des images. Il y a pour cela 3 classes utilisables :

Classe

Effet

img-rounded

Image à coins arrondis

img-circle

Image circulaire

img-thumbnail

Image avec liseré blanc

Voici un exemple illustratif de ces trois effets :

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

Ce qui nous donne la figure suivante.

Mise en forme des images
Mise en forme des images

Notez que vous pouvez rendre les images adaptatives facilement avec la classeimg-responsive. Cette classe possède 3 règles :

display: block;
max-width: 100%;
height: auto;

Le but est de faire en sorte que l'image occupe toute la place disponible de son contenant.

En résumé

  • Bootstrap permet une mise en forme élégante des listes, descriptions et tableaux.

  • Bootstrap permet de réaliser des formulaires classiques, horizontaux ou en ligne. Il permet aussi d'enrichir les contrôles en jouant sur leur dimension ou leur style.

  • Bootstrap permet de créer des boutons colorés, seuls ou groupés, de diverses dimensions.

  • Bootstrap comprend une collection d'icônes vectorielles faciles à intégrer comme des caractères.

  • Bootstrap prévoie la mise en forme des images avec des coins arrondis ou avec un effet de diapositive.

Exemple de certificat de réussite
Exemple de certificat de réussite