Cours complet Bootstrap 4

Premiers pas

Maurice Chavellli

Pour utiliser efficacement Bootstrap, vous devez déjà être convaincu de son utilité, vous devez aussi savoir l'installer. Ce chapitre est destiné à vous faire découvrir en quoi Bootstrap peut vous aider et un peu son historique. Nous aborderons également les MediaMedia Queries que Bootstrap utilise pour que les pages s'adaptent automatiquement au support utilisé pour les visualiser et les rendre ainsi « responsives »

Commentez

- Titre : Cours complet Bootstrap 4

- Auteur : Maurice Chavellli

- Parution : 26 juillet 2019

- Licence : Copyright ® 2019 Maurice Chavelli. Aucune reproduction, même partielle, ne peut être faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc. sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts.

Sommaire

- I. Présentation

- I-A. Une bibliothèque

- I-A-1. Les intérêts d'utiliser une bibliothèque

- I-A-2. Les inconvénients d'utiliser une bibliothèque

- I-B. Découverte de Bootstrap

- I-B-1. Historique de Bootstrap

- I-B-2. Contenu de la bibliothèque

- I-B-3. Évolution de Bootstrap

- I-C. Les Media Queries

- I-C-1. Syntaxe des Media Queries

- I-D. En résumé

- II. Installation

- II-A. Les fichiers de Bootstrap

- II-B. Intégration

- II-B-1. Fichiers locaux

- II-B-2. Les CDN

- II-C. Une trame pour démarrer

- II-C-1. La prestation minimale

- II-C-2. Un exemple

- II-D. Flexbox

- II-E. En résumé

- III. Présentation de la grille

- III-A. Le principe d'une grille

- III-A-1. Terminologie

- III-B. La grille de Bootstrap

- III-B-1. Organisation de la grille

- III-B-2. Un petit exemple ?

- III-C. Le conteneur

- III-D. Un exemple

- III-E. En résumé

- IV. La grille en action

- IV-A. On se lance

- IV-A-1. Une rangée

- IV-A-2. Plusieurs rangées

- IV-A-3. Largeur variable

- IV-B. Éléments égaux sur plusieurs rangées

- IV-C. Saut de colonnes

- IV-D. Imbrication d'éléments

- IV-E. Ordre des colonnes

- IV-F. Un petit TP pour s'entraîner

- IV-G. En résumé

- V. Mise en page

- V-A. Mise en page simple

- V-B. Mise en page plus chargée

- V-C. Plusieurs asides

- V-D. Combinaison de classes col-*

- V-E. En résumé

- VI. Alignement et visibilité

- VI-A. Aligner verticalement

- VI-A-1. Aligner globalement

- VI-A-2. Aligner individuellement

- VI-B. Aligner horizontalement

- VI-C. Les classes pour masquer ou afficher

- VI-D. Mise en page avec visibilité

- VI-E. Un dernier exemple pour résumer

- VI-F. En résumé

- VII. Normalize et reboot

- VII-A. Les reset css

- VII-B. Normalize.css

- VII-C. Reboot

- VII-D. En résumé

I - Présentation

I-A - Une bibliothèque

Il existe des bibliothèques côté serveur (désignés backend en anglais), et d'autres côté client (désignés frontend en anglais). Bootstrap fait partie de cette deuxième catégorie. Les bibliothèques CSS sont spécialisées, comme leur nom l'indique, dans les CSS ! C'est-à-dire qu'ils nous aident à mettre en forme les pages web : organisation, aspect, animation… Elles sont à la mode et il en existe un certain nombre, en voici quelques-uns :

- Knacss

- Blueprint

- Unsemantic

- YUI

- 52Framework

- Pure

- Materializecss

- Semantic-ui

- Getuikit

- etc.

Bootstrap est une bibliothèque CSS, mais pas seulement, puisqu'il embarque également des composants HTML et JavaScript. Il comporte un système de grille simple et efficace pour mettre en ordre l'aspect visuel d'une page web. Il apporte du style pour les boutons, les formulaires, la navigation…

Il permet ainsi de concevoir un site web rapidement et avec peu de lignes de code ajoutées.

La bibliothèque la plus proche de Bootstrap est sans doute Foundation qui est présenté comme « The most advanced responsive front-end framework in the world ». Cette absence de modestie est-elle de mise ? Je pense que c'est surtout une affaire de goût et de préférence personnelle. En tout cas en termes de popularité c'est Bootstrap qui l'emporte haut la main.

I-A-1 - Les intérêts d'utiliser une bibliothèque

- Les navigateurs sont pleins de fantaisies et ont des comportements très différents malgré leur lente convergence vers les standards. Les bibliothèques sont cross-browser, c'est-à-dire que la présentation est similaire, quel que soit le navigateur utilisé et d'une parfaite compatibilité.

- Les bibliothèques CSS font gagner du temps de développement parce qu'ils nous proposent les fondations de la présentation.

- Les bibliothèques CSS normalisent la présentation en proposant un ensemble homogène de styles.

- Les bibliothèques CSS proposent en général une grille pour faciliter le positionnement des éléments.

- Les bibliothèques CSS offrent souvent des éléments complémentaires : boutons esthétiques, barres de navigation, etc.

- La grande diffusion de nouveaux moyens de visualisation du web (smartphones, tablettes…) impose de s'adapter aux tailles d'écran très variées, les bibliothèques CSS prennent généralement en compte cette contrainte.

I-A-2 - Les inconvénients d'utiliser une bibliothèque

Pour utiliser efficacement une bibliothèque, il faut bien la connaître, ce qui implique un temps d'apprentissage.
La normalisation de la présentation peut devenir lassante en lissant les effets visuels.
Par rapport aux deux inconvénients énoncés, Bootstrap est d'une prise en main rapide même pour un débutant et est totalement configurable parce qu'il est construit avec Sass.

I-B - Découverte de Bootstrap

I-B-1 - Historique de Bootstrap

Vous connaissez forcément Twitter, un des principaux réseaux sociaux qui inondent la planète de liens virtuels entre les humains devenus des noyaux cybernétiques. Le projet Bootstrap a été créé au départ par Mark Otto et Jacob Thornton pour répondre à des besoins internes de développement de cette entreprise au niveau de l'uniformisation de l'aspect des pages web. Il s'agissait juste de stylisation CSS, mais la bibliothèque s'est ensuite enrichie de composants JavaScript.

Il a ensuite été publié en 2011 en devenant rapidement populaire parce qu'il est venu se positionner dans un espace vacant du développement. Son système de grille de 12 colonnes est devenu une référence. D'autre part sa mise en œuvre est aisée comme nous allons bientôt le voir.

Il a été mis à disposition du public sous licence MIT. La bibliothèque en est actuellement à la version 4.

I-B-2 - Contenu de la bibliothèque

Bootstrap propose :

- une mise en page basée sur une grille de 12 colonnes fondée sur flexbox ;

- l'utilisation de Normalize auquel est ajoutée l'extension Reboot dans la version 4 ;

- du code fondé sur HTML5 et CSS3 ;

- une bibliothèque totalement open source sous licence MIT ;

- du code qui tient compte du format d'affichage des principaux outils de navigation (responsive design) : smartphones, tablettes… ;

- des plugins jQuery de qualité ;

- un résultat cross-browser (la prise en charge de IE8 a été abandonnée avec la version 4), donc une garantie de compatibilité maximale ;

- une bonne documentation ;

- la garantie d'une évolution permanente ;

- une mine de ressources variées sur le web ;

- une architecture basée sur Sass, un outil bien pratique qui étend les possibilités de CSS.

Vous pouvez trouver toutes les informations sur Bootstrap directement sur le site dédié.

C'est quoi Normalize ?

Les navigateurs n'adoptent pas tous les mêmes valeurs par défaut pour les styles des éléments HTML. Cela peut générer quelques surprises au rendu des pages web selon le navigateur utilisé. D'autre part certains navigateurs présentent des défauts de prise en compte de certains éléments.

Normalize est un petit fichier CSS qui établit des règles pour avoir un rendu identique, quel que soit le navigateur utilisé. Au lieu d'agir brutalement comme les reset CSS qui remettent toutes les valeurs à zéro, Normalize agit intelligemment en conservant ce qui est utile et en jouant finement sur les éléments. Vous pouvez trouver le détail des règles appliquées avec leur explication ici.

Nous verrons dans ce cours que Bootstrap étend cette bibliothèque avec Reboot.

I-B-3 - Évolution de Bootstrap

Bootstrap est une bibliothèque très populaire qui évolue rapidement avec l'arrivée fréquente de nouvelles versions. C'est à la fois un avantage (il s'améliore de plus en plus) et un inconvénient (le code qu'on a écrit pour une mise en page devient obsolète pour les nouvelles versions).

Le passage à la version 3 a été une petite révolution avec de très nombreux changements, en particulier une refonte complète de la grille. L'évolution de la bibliothèque s'est faite essentiellement en direction des appareils nomades qui constituent peu à peu le parc le plus important d'appareils pour surfer sur Internet.

La version 4 apporte son lot d'innovations ainsi que de nouveaux composants tout en perdant certains autres. Les principales évolutions concernent :

- le changement complet de la barre de navigation ;

- l'utilisation de Flexbox avec une grille totalement remaniée (mais du coup abandon de la prise en charge de IE9) ;

- l'utilisation de Sass à la place de Less ;

- une réécriture presque complète du code CSS ;

- un passage à ES6 pour l'écriture des plugins JavaScript ;

- l'ajout du composant Card ;

- l'abandon des icônes de Glyphicon…

La principale source d'information pour connaître les changements des nouvelles versions est le blog officiel. Il est aussi intéressant de s'informer en amont sur la page GitHub du projet pour connaître les demandes des utilisateurs (Pull Requests) et les problèmes rencontrés (Issues).

I-C - Les Media Queries

Les Media Queries sont destinées à simplifier la création de pages web pour les rendre consultables sur des supports variés (tablettes, smartphones…).

Cette section n'est qu'une introduction rapide à ce domaine qui mériterait un cours à lui tout seul. Elle est destinée à ceux qui découvrent ce sujet, les autres peuvent passer directement au chapitre suivant.

Avec les Media Queries on peut cibler :

- la résolution ;

- le type de médias ;

- la taille de la fenêtre (width et hight) ;

- la taille de l'écran (device-width et device-height) ;

- le nombre de couleurs ;

- le ratio de la fenêtre (par exemple le 16/9) ;

- etc.

Les plus courageux peuvent consulter directement les spécifications du W3C.

La liste est longue, malheureusement peu de navigateurs actuels sont capables de digérer tout ça. On se limite en général à la taille de l'affichage, l'orientation et parfois le ratio.

Je ne comprends pas la différence entre taille de l'écran et taille de la fenêtre !

Ah ! Bonne réflexion. Cette distinction n'a aucun sens pour les écrans d'ordinateur, mais trouve tout son intérêt pour les smartphones. La taille de l'écran est la surface physique réelle alors que la taille de la fenêtre est celle dont le smartphone « pense » disposer. Par exemple pour un iPhone 4 la surface réelle est de 640×960 px et la surface de la fenêtre est de 320×480 px. Autrement dit un iPhone est pessimiste sur ses possibilités d'affichage !

Mais ce n'est pas le seul souci ! Le navigateur embarqué sur un smartphone a lui aussi une certaine idée de la surface d'affichage dont il dispose (le viewport). Par exemple, pour continuer avec l'exemple de l'iPhone 4, qui utilise Safari, ce dernier pense disposer d'une largeur de 980 px ! Sur ces appareils il est aussi possible d'utiliser le zoom et notre mise en page risque de s'en ressentir.

On peut se demander comment s'en sortir dans tout ce bazar… Heureusement on dispose de la balise META viewport  pour fixer certaines valeurs, voici ce qui est préconisé dans le template de Bootstrap :

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

- On ouvre la fenêtre à la largeur de l'écran : width=device-width ;

- On règle le zoom : initial-scale=1 ;

- On ajoute shrink-to-fit=no spécifiquement pour Safari.

Vous pouvez aussi fixer d'autres valeurs. Par exemple, empêcher l'utilisateur de zoomer.

Les principaux navigateurs permettent de tester le rendu sur mobile. Par exemple avec Firefox il faut utiliser la commande « Vue adaptative » dans le menu « Développement web ».

I-C-1 - Syntaxe des Media Queries

Une Media Query est une expression dont la valeur est soit vraie, soit fausse. Voici un exemple dans du code CSS :

@media (max-width: 576px) { … }

@media est une règle apparue avec le CSS2. Elle permet à la base de cibler un média : écran, imprimante, projecteur… Cette règle est reprise et étendue avec le CSS3.

L'expression située entre parenthèses est évaluée, et si elle est « vraie », les règles situées dans le bloc sont prises en compte.

Ici l'expression est max-width: 576px, elle se comprend facilement. Elle est « vraie » si le support de visualisation de la page a une largeur d'affichage inférieure ou égale à 576px.

Oui, mais on n'a pas spécifié de média là !

Oui parce qu'on veut prendre en compte tous les médias existants ! Voici une syntaxe équivalente :

@media all and (max-width: 576px) { … }

On en profite pour voir qu'on peut combiner des éléments avec des opérateurs logiques.

Voici une autre expression avec le même opérateur logique :

@media (min-width: 576px) and (max-width: 768px) { … }

Ici, on veut prendre en compte les règles du bloc si l'affichage se situe entre 576px et 768px.

Si on veut appliquer des règles lorsque l'orientation est « portrait », voici la syntaxe à utiliser :

@media (orientation: portrait) { … }

Comme vous pouvez le voir, la syntaxe est simple, ce qui l'est moins ce sont les règles à définir.

Mais quand vous utilisez Bootstrap, vous n'avez pas à vous soucier de tout ça…

Si vous explorez le code de Bootstrap, vous trouverez beaucoup d'utilisation des Media Queries, par exemple ici, où est définie une règle de dimension pour la classe container lorsque l'affichage est d'au moins 576px :

1. @media (min-width: 576px) {

2. .container {

3. width: 540px;

4. }

5. }

Nous verrons plus loin dans ce cours que Bootstrap définit cinq types de médias selon la dimension de l'affichage.

Voici la syntaxe utilisée :

1. // Très petits supports

2. // Pas de média puisque c'est le support par défaut

3. // Petits supports (smartphones, 576px et au-delà)

4. @media (min-width: 576px) { ... }

5. // Supports moyens (tablettes, 768px et au-delà)

6. @media (min-width: 768px) { ... }

7. // Grands supports (écrans, 992px et au-delà)

8. @media (min-width: 992px) { ... }

9. // Très grands supports (grands écrans, 1200px et au-delà)

10. @media (min-width: 1200px) { ... }

I-D - En résumé

- Bootstrap est une bibliothèque CSS qui comporte en plus des plu‌gins jQuery pour composer des pages web.

- Bootstrap est une bibliothèque relativement récente qui a connu un développement et une popularité très rapides.

- Bootstrap intègre des Media Queries pour adapter les pages web à tous les supports de visualisation.

II - Installation

II-A - Les fichiers de Bootstrap

Pour récupérer les fichiers de Bootstrap c'est simple : cliquez sur le bouton de téléchargement (download) sur le site de labibliothèque. Vous arrivez sur la page des téléchargements avec à disposition deux boutons :

- « Download » : permet de récupérer juste les fichiers nécessaires au fonctionnement de Bootstrap ;

- « Download source » : permet de récupérer en plus tous les fichiers source et la documentation.

Vous pouvez aussi aller consulter directement le code source sur github.

Quand vous téléchargez la bibliothèque avec le bouton « Download source », vous obtenez un fichier zippé contenant un dossier qui contient lui-même un certain nombre de fichiers et de dossiers, comme le montre la figure suivante.

Les fichiers utiles pour simplement utiliser Bootstrap se situent dans le dossier dist (« distribution »), ce sont les seuls fichiers que vous obtenez si vous utilisez le bouton « Download ».

Il existe bien d'autres façons d'installer Bootstrap : npm, RubyGems, Composer, Nuget… selon les outils que vous utilisez pour développer. Consultez la documentation‌ pour les précisions concernant ces outils.

Voyons un peu les fichiers les plus importants :

- bootstrap.css comporte les classes de base de Bootstrap ;

- bootstrap.js contient le code JavaScript des composants de Bootstrap ;

- bootstrap.bundle.js contient le code JavaScript des composants de Bootstrap comme bootstrap.js, mais en plus la bibliothèque popper.js ;

Les fichiers « min » (bootstrap.min.css, bootstrap.bundle.min.js et bootstrap.min.js) contiennent le même code que leurs équivalents (bootstrap.css, bootstrap.bundle.js et bootstrap.js), mais ont été épurés des commentaires et compressés pour les alléger et accélérer ainsi leur chargement.

Je parlerai des fichiers grid et reboot dans des prochains chapitres.

Le dossier js/dist dans les sources contient les composants JavaScript dans des fichiers séparés. Ils peuvent être pratiques si vous utilisez peu de composants en évitant ainsi de tout charger avec la bibliothèque globale.

Les fichiers « map » (bootstrap.css.map, bootstrap.min.css.map…) permettent de retrouver l'emplacement original d'une ligne de code à partir du code minifié. Cette fonctionnalité est utilisable avec les dernières versions de Chrome et Firefox. Ces fichiers ne sont pas indispensables au fonctionnement de Bootstrap.

D'accord, mais que mettre sur un site pour que Bootstrap fonctionne ?

Il faut distinguer deux situations.

- Pendant la phase de développement, il est intéressant de pouvoir naviguer dans le code de Bootstrap, il faut donc mettre les fichiers non compressés.

- Lorsque votre site est en ligne, vous n'avez plus à vous inquiéter du code et seule compte la vitesse de chargement, il faut donc cette fois utiliser les versions compressées (min).

La figure suivante montre les fichiers utiles pendant la phase de développement (les fichiers bootstrap.js ou bootstrap.bundle.js et jquery.js ne sont à prévoir que si vous utilisez des plugins jQuery).

La figure suivante montre les fichiers utiles lorsque le site est en ligne (les fichiers bootstrap.min.js ou bootstrap.bundle.min.js et jquery.js ne sont à prévoir que si vous utilisez des plugins jQuery).

Dans les exemples de ce cours, je pars du principe que les répertoires css et js comportent les fichiers cités précédemment.

On verra lorsque nous aborderons l'aspect JavaScript qu'il est nécessaire d'ajouter la bibliothèque popper.js ou d'utiliser la version bundle qui contient déjà cette bibliothèque.

II-B - Intégration

II-B-1 - Fichiers locaux

Pour que Bootstrap fonctionne, il faut que les pages HTML soient au format HTML 5, il faut donc prévoir le bon DOCTYPE :

1. <!DOCTYPE html>

2. <html lang="fr">

3. ...

4. </html>

Il faut ensuite déclarer au minimum le fichier bootstrap.min.css (ou bootstrap.css) dans l' entête de la page web :

1. <head>

2. …

3. <link href="/css/bootstrap.min.css" rel="stylesheet">

4. </head>

À partir de là, toutes les classes sont accessibles… Évidemment vous devez adapter le lien selon la localisation de vos fichiers.

Si vous utilisez des composants JavaScript, vous devez également référencer la bibliothèque de Bootstrap ainsi que jQuery (la bibliothèque jQuery ne fait pas partie des fichiers téléchargés avec Bootstrap et doit être récupérée indépendamment sur http://jquery.com/). Il faut également prévoir d'ajouter la bibliothèque popper qui est nécessaire pour certains plugins :

<script src="/js/jquery.min.js"></script>
<script src="/js/popper.min.js"></script>
<script src="/js/bootstrap.min.js"></script>

Mais on peut aussi utiliser la version bundle qui inclut popper.js :

<script src="/js/jquery.min.js"></script>
<script src="/js/bootstrap.bundle.min.js"></script>

II-B-2 - Les CDN

CDN est l'acronyme de « Content delivery network » ; c'est un réseau de serveurs qui met à disposition des bibliothèques. Il devient ainsi inutile de les prévoir sur son propre serveur, il suffit de « pointer » vers eux. Il y a des avantages à utiliser un CDN :

- libération de ressources et de la bande passante sur son propre serveur ;

- parallélisation des téléchargements (un CDN est sur plusieurs serveurs) ;

- accélération du chargement ;

- diminution de la latence ;

- actualisation automatique des bibliothèques ;

- amélioration du référencement…

Y a-t-il des inconvénients ?

D'après certains, l'utilisation d'un CDN, qui impose une requête DNS supplémentaire, ne serait judicieuse que si l'on a beaucoup de bibliothèques à charger. D'autre part si vous modifiez le fichier CSS de Bootstrap pour l'adapter à vos besoins, ce qui est très souvent le cas, vous ne pourrez plus bénéficier des avantages d'un CDN. Mais si vous voulez profiter de cette possibilité pour Bootstrap, utilisez de préférence bootstrapcdn. Vous pouvez évidemment utiliser un CDN également pour jQuery.

Si vous utilisez des CDN, l'installation en est d'autant simplifiée. Vous n'avez qu'à adapter les appels des bibliothèques :

1. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

2. …

3. <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>

4. <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>

5. <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

Bootstrap ne nécessite que la version « slim » de jQuery, mais fonctionne parfaitement avec la version complète.

II-C - Une trame pour démarrer

II-C-1 - La prestation minimale

Vous trouvez sur le site de Bootstrap ce template de base :

1. <!doctype html>

2. <html lang="fr">

3. <head>

4. <!-- Required meta tags -->

5. <meta charset="utf-8">

6. <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

7. <!-- Bootstrap CSS -->

8. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

9. <title>Hello, world!</title>

10. </head>

11. <body>

12. <h1>Hello, world!</h1>

13. <!-- Optional JavaScript -->

14. <!-- jQuery first, then Popper.js, then Bootstrap JS -->

15. <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>

16. <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>

17. <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

18. </body>

19. </html>

Je me suis contenté de définir la langue française par rapport à l'original.

Pourquoi y a-t-il un attribut d'intégrité pour le chargement des fichiers par les CDN ?

Les CDN sont pratiques, mais il faut être sûr de charger effectivement ce que l'on a demandé. Si un pirate modifie les fichiers du serveur, on pourrait avoir des surprises. Le contrôle d'intégrité permet d'être sûr d'obtenir le bon fichier.

Dans le template on trouve cette ligne :

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

Elle concerne uniquement les mobiles. On demande que l'affichage occupe tout l'espace disponible avec une taille de 1, autrement dit sans zoom. Vous pouvez aller encore plus loin en interdisant le zoom ou en le limitant à certaines valeurs.

On trouve ensuite les déclarations que nous avons déjà vues. Notez qu'il est fait appel à des CDN.

II-C-2 - Un exemple

Vous pouvez trouver sur le site de nombreux templates d'exemple. Les éléments nécessaires à la compréhension de ces exemples seront exposés tout au long de ce cours. Voyons toutefois le premier, nommé Starter Template, qui est le plus classique :

1. <!doctype html>

2. <html lang="en">

3. <head>

4. <meta charset="utf-8">

5. <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

6. <meta name="description" content="">

7. <meta name="author" content="">

8. <link rel="icon" href="../../../../favicon.ico">

10. <title>Starter Template for Bootstrap</title>

12. <!-- Bootstrap core CSS -->

13. <link href="../../../../dist/css/bootstrap.min.css" rel="stylesheet">

15. <!-- Custom styles for this template -->

16. <link href="starter-template.css" rel="stylesheet">

17. </head>

19. <body>

21. <nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">

22. <a class="navbar-brand" href="#">Navbar</a>

23. <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">

24. <span class="navbar-toggler-icon"></span>

25. </button>

27. <div class="collapse navbar-collapse" id="navbarsExampleDefault">

28. <ul class="navbar-nav mr-auto">

29. <li class="nav-item active">

30. <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>

31. </li>

32. <li class="nav-item">

33. <a class="nav-link" href="#">Link</a>

34. </li>

35. <li class="nav-item">

36. <a class="nav-link disabled" href="#">Disabled</a>

37. </li>

38. <li class="nav-item dropdown">

39. <a class="nav-link dropdown-toggle" href="http://example.com" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>

40. <div class="dropdown-menu" aria-labelledby="dropdown01">

41. <a class="dropdown-item" href="#">Action</a>

42. <a class="dropdown-item" href="#">Another action</a>

43. <a class="dropdown-item" href="#">Something else here</a>

44. </div>

45. </li>

46. </ul>

47. <form class="form-inline my-2 my-lg-0">

48. <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">

49. <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>

50. </form>

51. </div>

52. </nav>

53. <main role="main" class="container">

54. <div class="starter-template">

55. <h1>Bootstrap starter template</h1>

56. <p class="lead">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p>

57. </div>

58. </main><!-- /.container -->

59. <!-- Bootstrap core JavaScript

60. ================================================== -->

61. <!-- Placed at the end of the document so the pages load faster -->

62. <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>

63. <script>window.jQuery || document.write('<script src="../../../../assets/js/vendor/jquery-slim.min.js"><\/script>')</script>

64. <script src="../../../../assets/js/vendor/popper.min.js"></script>

65. <script src="../../../../dist/js/bootstrap.min.js"></script>

66. </body>

67. </html>

Avec cet aspect :

On retrouve ce qu'on a vu précédemment et l'appel au fichier CSS de Bootstrap. On trouve la référence d'un autre fichier CSS : starter-template.css. Voyons ce que contient ce fichier :

1. body {

2. padding-top: 5rem;

3. }

4. .starter-template {

5. padding: 3rem 1.5rem;

6. text-align: center;

7. }

Nous verrons, lorsque nous parlerons du composant « Barre de navigation » de Bootstrap, qu'il faut parfois réserver un espace en haut de la page (avec padding-top: 5rem) pour éviter que le texte du début ne se retrouve sous la barre. On trouve aussi ici la classe starter-template qui se contente de fixer un espace interne et un alignement centré du texte. Cette classe ne sert que pour le texte de présentation du template et peut être supprimée ou modifiée selon votre convenance.

On trouve aussi dans la page une barre de navigation (je vous explique tout ça en détail dans ce cours) :

1. <nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">

2. <a class="navbar-brand" href="#">Navbar</a>

3. <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">

4. <span class="navbar-toggler-icon"></span>

5. </button>

6. <div class="collapse navbar-collapse" id="navbarsExampleDefault">

7. <ul class="navbar-nav mr-auto">

8. <li class="nav-item active">

9. <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>

10. </li>

11. <li class="nav-item">

12. <a class="nav-link" href="#">Link</a>

13. </li>

14. <li class="nav-item">

15. <a class="nav-link disabled" href="#">Disabled</a>

16. </li>

17. <li class="nav-item dropdown">

18. <a class="nav-link dropdown-toggle" href="http://example.com" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>

19. <div class="dropdown-menu" aria-labelledby="dropdown01">

20. <a class="dropdown-item" href="#">Action</a>

21. <a class="dropdown-item" href="#">Another action</a>

22. <a class="dropdown-item" href="#">Something else here</a>

23. </div>

24. </li>

25. </ul>

26. <form class="form-inline my-2 my-lg-0">

27. <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">

28. <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>

29. </form>

30. </div>

31. </nav>

Le contenu de la page est ensuite inséré dans une balise <main> comportant la classe container :

1. <main role="main" class="container">

2. <div class="starter-template">

3. <h1>Bootstrap starter template</h1>

4. <p class="lead">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p>

5. </div>

6. </main><!-- /.container -->

Nous verrons également l'intérêt de cette classe et son utilisation. Considérez les exemples de templates fournis sur le site de Bootstrap à la fois comme des guides de démarrage et des aides à la compréhension du framework. Évitez de les prendre tels quels sans en comprendre tous les éléments. À l'issue de ce cours, vous aurez tout en main pour le faire…

II-D - Flexbox

Les flexbox sont devenus de plus en plus populaires depuis quelques années et leur utilisation grandit de plus en plus. Mais de quoi s'agit-il ? Avec le CSS on a un modèle de boîtes (de type block ou inline) qui permet la mise en page. Vous avez sans doute l'habitude du positionnement flottant qui permet de jouer avec la position des blocs. Avec les flexbox les boîtes deviennent flexibles. On a un conteneur et des éléments, et le conteneur a la capacité de modifier les dimensions, positions et l'ordre des éléments pour qu'ils s'adaptent aux contraintes d'affichage. En fait exactement ce qui manque cruellement avec le modèle de boîtes classique, on peut même dire rigide par rapport à ce modèle flexible.

Dans sa version 3 Bootstrap n'utilisait pas flexbox, mais cela change avec la version 4 parce que désormais il n'utilise que ça ! J'ai rédigé un article de présentation ici.

Mais je précise que Bootstrap est équipé de nombreuses classes qui facilitent l'utilisation de flexbox et je vais les citer dans ce chapitre au fur et à mesure de la présentation des superbes possibilités qui nous sont offertes.

Faut-il vraiment connaître flexbox pour utiliser Bootstrap 4 ?

Ce n'est pas indispensable pour une utilisation de base, mais ça le devient très vite dès qu'on veut utiliser plus efficacement la bibliothèque.

II-E - En résumé

- Bootstrap s'installe facilement en référençant quelques fichiers sur son serveur ou même en passant directement par des CDN.

- Bootstrap propose des versions « minifiées » de ses bibliothèques pour en accélérer le chargement.

- Bootstrap propose un template de démarrage et des exemples pour éviter de partir avec une page blanche.

- Bootstrap utilise intensivement Flexbox.

III - Présentation de la grille

L'organisation spatiale des pages web est l'une des premières préoccupations lorsque l'on crée un site web. Prévoit-on une bannière ? Faut-il un espace pour un menu à gauche ou en haut ? Y aura-t-il des blocs sur un des côtés pour recevoir certaines fonctionnalités comme la connexion ou des infos ? Faut-il prévoir un bas de page ?

Bootstrap ne répond évidemment pas à ces questions, mais il peut grandement vous faciliter la tâche, avec son système de grille, pour obtenir le résultat que vous souhaitez.

Petite visite guidée…

III-A - Le principe d'une grille

Une grille est tout simplement un découpage en cellules :

On peut alors décider d'organiser du contenu en utilisant pour chaque élément une ou plusieurs cellules :

La grille de Bootstrap comporte douze colonnes comme dans l'illustration précédente. Vous commencez sans doute à comprendre l'utilité de cette organisation…

III-A-1 - Terminologie

Une grille est découpée en rangées (appelées row, parce que tout est en anglais) et colonnes (col).

III-B - La grille de Bootstrap

La grille de Bootstrap n'est pas aussi idéale que celle présentée précédemment.

Le découpage en colonnes est tout simplement une division en pourcentage de la largeur de la fenêtre de visualisation et correspond donc à ce qu'on vient de voir. En revanche, il n'en est pas vraiment de même pour les rangées. Ces dernières ont la hauteur de leur contenu (voir figure suivante).

Moralité : une rangée prend la hauteur du plus gros élément qu'elle contient.

Puisque la largeur des colonnes est contrainte, le flux des données s'écoule verticalement, ce qui est un comportement HTML classique. Il faudra en tenir compte lors de la mise en page.

III-B-1 - Organisation de la grille

Bootstrap est essentiellement un fichier CSS. Il comporte de nombreuses classes que l'on peut utiliser directement dans les balises HTML. La version 4 a adopté définitivement Flexbox, que je vous ai présenté au précédent chapitre, parce que ce nouveau système est maintenant reconnu par tous les navigateurs. Avec Bootstrap vous n'avez pas réellement besoin d'approfondir le sujet parce que le système de grille masque en grande partie le système utilisé.

La première classe à connaître est row, qui représente une rangée.

Cette classe établit des marges négatives à droite et à gauche pour équilibrer les marges de séparation des colonnes qui ont la même valeur,  mais évidemment en positif :

1. .row {

2. ...

3. margin-right: -15px;

4. margin-left: -15px;

5. }

Il faut ensuite définir le nombre de colonnes pour chaque élément en sachant qu'il y en a au maximum douze. Pour définir le nombre de colonnes utilisées pour chaque élément, on dispose de cinq batteries de douze classes :

- une colonne : col-1 ou col-sm-1 ou col-md-1 ou col-lg-1 ou col-xl-1 ;

- deux colonnes : col-2 ou col-sm-2 ou col-md-2 ou col-lg-2 ou col-xl-2 ;

- …

- douze colonnes : col-12 ou col-sm-12 ou col-md-12 ou col-lg-12 ou col-xl-12.

Pour disposer d'une marge entre les colonnes, ces classes prévoient un padding de 15px.

Pourquoi cinq sortes de classes pour les colonnes ?

Je vous ai déjà dit que Bootstrap est « responsive », ce qui veut dire qu'il s'adapte à la taille de l'écran. Il permet une visualisation aussi bien sur un écran géant que sur un smartphone.

Est-ce qu'il est possible de supprimer toutes ces marges ?

Oui. Il suffit d'utiliser la classe no-gutters avec la classe row. Ce qui a pour effet de supprimer toutes les marges à la fois ainsi que les lignes et les colonnes.

Mais que se passe-t-il pour les éléments d'une page web lorsque la fenêtre diminue ou s'élargit ?

On peut envisager deux hypothèses : les éléments se redimensionnent en restant positionnés, ou alors ils s'empilent quand la fenêtre devient plus étroite et se positionnent côte à côte quand elle s'élargit. Voici à la figure suivante l'exemple d'une partie de la page d'accueil du site colly.com qui illustre ce phénomène avec trois situations (grand écran, écran moyen et petit écran) :

Plutôt que de réduire les éléments au risque de les rendre illisibles, le choix a été fait de les empiler petit à petit quand la fenêtre devient plus étroite.

Une autre option pourrait consister à supprimer des éléments pas vraiment utiles, mais nous reviendrons plus tard sur ce point.

Pour le moment on va juste se demander comment on peut choisir entre les deux options présentées à la figure suivante.

C'est ici qu'interviennent les cinq sortes de classes vues précédemment pour les colonnes. Bootstrap considère cinq sortes de médias :

- les très petits genre smartphones en mode portrait (moins de 576px) ;

- les petits genre smartphones en mode paysage (plus de 576px, mais moins de 768px) ;

- les moyens genre tablettes (plus de 768px, mais moins de 992px) ;

- les grands (plus de 992px, mais moins de 1200px) ;

- les très grands (plus de 1200px).

Vous trouverez à la figure suivante le tableau de la documentation officielle pour illustrer les différences de réaction selon la catégorie et les classes associées.

Le nom des classes est intuitif :

- rien pour les très petits écrans (valeur de référence) ;

- sm pour small ;

- md pour medium ;

- lg pour large ;

- xl pour x-large.

III-B-2 - Un petit exemple ?

Pour avoir un élément de quatre colonnes de large accouplé avec un élément de huit colonnes de large sur un smartphone en mode portrait (et donc aussi tous les formats au-dessus) on a :

1. <div class="row">

2. <div class="col-4">Largeur 4</div>

3. <div class="col-8">Largeur 8</div>

4. </div>

La figure suivante illustre ce code avec l'effet quand on passe sur un écran plus grand.

Voici la version « tablette » :

1. <div class="row">

2. <div class="col-md-4">Largeur 4</div>

3. <div class="col-md-8">Largeur 8</div>

4. </div>

La figure suivante illustre ce code avec l'effet quand on passe sur un écran plus petit ou plus grand.

Vous remarquez que lors de l'empilage, les colonnes prennent toute la place disponible.

Et enfin, voici la version très grand écran :

1. <div class="row">

2. <div class="col-lg-4">Largeur 4</div>

3. <div class="col-lg-8">Largeur 8</div>

4. </div>

La largeur des éléments de la grille est calculée en pourcentage selon la fenêtre de visualisation. Rien n'interdit évidemment de mélanger des classes des catégories pour créer des effets particuliers avec certains éléments qui doivent s'empiler et d'autres pas (c'est même la stratégie utilisée pour la mise en page « responsive » comme nous allons bientôt le voir)…

III-C - Le conteneur

Une grille doit toujours se placer dans un conteneur.

Bootstrap propose deux types de conteneurs selon l'effet désiré :

- un conteneur de largeur fixe (qui s'adapte évidemment selon la largeur de l'écran utilisé) :

La classe à utiliser est container :

<div class="container">
<!-- le contenu ici -->
</div>

- un conteneur à largeur « fluide » qui occupe toujours toute la largeur disponible :

La classe à utiliser est container-fluid :

<div class="container-fluid">
<!-- Le contenu ici -->
</div>

Le centrage du conteneur est fait de façon classique avec de petites marges internes de 15px et les marges droite et gauche automatiques :

1. .container {

2. width: 100%;

3. padding-right: 15px;

4. padding-left: 15px;

5. margin-right: auto;

6. margin-left: auto;

7. }

Ces règles sont communes aux deux types de conteneurs. La différence consiste à ajouter des règles pour le conteneur fixe pour tenir compte du média de visualisation utilisé :

1. // Smartphones en mode paysage

2. @media (min-width: 576px) {

3. .container {

4. max-width: 540px;

5. }

6. }

7. // Tablettes

8. @media (min-width: 768px) {

9. .container {

10. max-width: 720px;

11. }

12. }

13. // Grand écran

14. @media (min-width: 992px) {

15. .container {

16. max-width: 960px;

17. }

18. }

19. // Très grand écran

20. @media (min-width: 1200px) {

21. .container {

22. max-width: 1140px;

23. }

24. }

Remarquez l'ordre des médias, du plus étroit vers le plus large. De cette manière on a une surcharge des règles cohérente.

Est-ce qu'on peut utiliser plusieurs conteneurs sur une même page ?

Pourquoi pas ? Je pense que ça peut être utile sur une page d'accueil longue avec plusieurs sections. Ça peut aussi être judicieux quand on utilise un système de template pour avoir un code modulaire.

III-D - Un exemple

Après cette petite mise en jambe pour vous présenter la notion de grille dans Bootstrap, on va passer en revue les possibilités dans le détail dans les chapitres suivants.

Mais pour visualiser tous les exemples qui vont suivre, je vous propose d'ajouter un peu de style, histoire d'afficher les éléments de façon explicite. Pour éviter de polluer le code HTML on va mettre ce style spécifique dans un fichier CSS particulier (ce fichier sera nommé tuto.css dans le code) :

1. body {

2. padding-top: 10px;

3. }

4. [class*="col"], footer, aside {

5. background-color: lightblue;

6. border: 1px solid blue;

7. border-radius: 4px;

8. line-height: 40px;

9. text-align: center;

10. }

Le seul but de ces règles de style est de faire apparaître nettement les éléments à l'écran.

Une petite marge interne en haut pour le corps, pour éviter que tout soit collé en haut de l'écran. Des bordures (avec des coins arrondis pour l'esthétique) et un fond coloré pour distinguer les éléments. Une hauteur fixée à 40 pixels, parce qu'étant donné que la hauteur des rangées dépend du contenu, on aurait un rendu hétéroclite.

Considérons un petit exemple pour se rendre compte du rendu :

1. <!DOCTYPE html>

2. <html lang="fr">

3. <head>

4. <meta charset="utf-8">

5. <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

6. <link rel="stylesheet" href="css/bootstrap.css">

7. <link rel="stylesheet" href="css/tuto.css">

8. </head>

9. <body>

10. <div class="container">

11. <div class="row">

12. <div class="col-sm-2">

13. 2 colonnes

14. </div>

15. <div class="col-sm-3">

16. 3 colonnes

17. </div>

18. <div class="col-sm-7">

19. 7 colonnes

20. </div>

21. </div>

22. </div>

23. </body>

24. </html>

Voici le résultat :

Il ne nous reste plus qu'à pratiquer ‌cette grille, ce que nous allons effectuer dans les prochains chapitres…

Dans l'exemple j'ai opté pour des classes col-sm, donc on aura l'apparence de l'image ci-dessus lorsque la largeur est supérieure à 575px. Dans le cas contraire, tout s'empile.

III-E - En résumé

- Bootstrap propose une grille pour positionner tous les éléments des pages web. Il utilise Flexbox en interne.

- Bootstrap distingue cinq types de supports de visualisation avec des classes dédiées pour les colonnes.

- Bootstrap propose deux types de conteneurs : un fixe et un fluide.

IV - La grille en action

Dans ce chapitre nous allons voir des exemples de mise en œuvre de la grille de Bootstrap.

IV-A - On se lance

IV-A-1 - Une rangée

Commençons tranquillement en utilisant une seule rangée :

1. <!DOCTYPE html>

2. <html lang="fr">

3. <head>

4. <meta charset="utf-8">

5. <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

6. <link rel="stylesheet" href="css/bootstrap.css">

7. <link rel="stylesheet" href="css/tuto.css">

8. </head>

9. <body>

10. <div class="container">

11. <div class="row">

12. <div class="col">

13. 6 col

14. </div>

15. <div class="col">

16. 6 col

17. </div>

18. </div>

19. </div>

20. </body>

21. </html>

Dans la suite de ce chapitre, je ne répéterai pas le code commun. D'autre part pour la lisibilité des exemples j'adopterai systématiquement un conteneur fixe.

Voici le résultat de ce code :

J'ai prévu deux éléments avec une simple classe col, du coup ils sont de largeurs égales et occupent chacun six colonnes.

De la même manière, on peut utiliser des classes col-sm, col-md…

Si on ne veut pas des largeurs égales on peut spécifier le nombre de colonnes :

1. <div class="row">

2. <div class="col">

3. 2 col

4. </div>

5. <div class="col-8">

6. 8 col

7. </div>

8. <div class="col">

9. 2 col

10. </div>

11. </div>

Voici le résultat de ce code :

L'élément central occupe la largeur imposée (huit colonnes), les deux autres éléments se partagent la place restante (deux colonnes chacun).

La mise en forme des éléments est effectuée par les règles présentes dans le fichier tuto.css que nous avons défini au chapitre précédent.

D'autre part dans ce chapitre je prendrai systématiquement le cas des classes correspondant aux plus petits supports pour éviter les empilements d'éléments. Nous verrons dans le chapitre suivant cet aspect de la grille.

IV-A-2 - Plusieurs rangées

Pour obtenir plusieurs rangées, il suffit d'utiliser plusieurs fois la classe row. Un petit exemple avec trois rangées pour voir l'effet :

1. <div class="row">

2. <div class="col-1">1 col</div>

3. <div class="col-2">2 colonnes</div>

4. <div class="col-3">3 colonnes</div>

5. <div class="col">6 colonnes</div>

6. </div>

7. <div class="row">

8. <div class="col">12 colonnes</div>

9. </div>

10. <div class="row">

11. <div class="col-4">4 colonnes</div>

12. <div class="col">8 colonnes</div>

13. </div>

Ce qui donne ce rendu :

IV-A-3 - Largeur variable

Par défaut les colonnes ont toujours la même largeur, mais le passage à flexbox permet de jouer facilement sur des différences de largeur. Mais pour le coup on peut perdre un peu la notion de colonne. Regardez cet exemple :

1. <div class="row">

2. <div class="col">

3. Répartition du reste

4. </div>

5. <div class="col col-auto">

6. Contenu auto

7. </div>

8. <div class="col">

9. Répartition du reste

10. </div>

11. </div>

Avec ce rendu :

L'utilisation de la classe col-auto fixe les règles de flexbox pour que l'élément s'adapte au contenu (auto) :

1. .col-auto {

2. -webkit-box-flex: 0;

3. -ms-flex: 0 0 auto;

4. flex: 0 0 auto;

5. width: auto;

6. max-width: none;

7. }

Il existe évidemment les classes col-sm-auto, col-md-auto…

Dans cette situation on se rend compte que l'utilisation de Flexbox peut nous éloigner de la notion de colonnes.

IV-B - Éléments égaux sur plusieurs rangées

Puisqu'avec la classe col l'espace se répartit automatiquement comment faire pour avoir des éléments bien alignés sur plusieurs rangées ?

Par exemple avec ce code :

1. <div class="row">

2. <div class="col">

3. Elément 1

4. </div>

5. <div class="col">

6. Elément 2

7. </div>

8. <div class="col">

9. Elément 3

10. </div>

11. <div class="col">

12. Elément 4

13. </div>

14. </div>

J'obtiens logiquement cet aspect :

Si je les veux sur deux rangées, je peux définir un nombre de colonnes parce que si on dépasse les douze colonnes on passe automatiquement sur une nouvelle rangée (wrapping) :

1. <div class="row">

2. <div class="col-6">

3. Elément 1

4. </div>

5. <div class="col-6">

6. Elément 2

7. </div>

8. <div class="col-6">

9. Elément 3

10. </div>

11. <div class="col-6">

12. Elément 4

13. </div>

14. </div>

Je peux aussi utiliser deux classes row comme on l'a déjà vu ci-dessus :

1. <div class="row">

2. <div class="col">

3. Elément 1

4. </div>

5. <div class="col">

6. Elément 2

7. </div>

8. </div>

9. <div class="row">

10. <div class="col">

11. Elément 3

12. </div>

13. <div class="col">

14. Elément 4

15. </div>

16. </div>

Mais il existe aussi la classe w-100 pour obtenir le même effet :

1. <div class="row">

2. <div class="col">

3. Elément 1

4. </div>

5. <div class="col">

6. Elément 2

7. </div>

8. <div class="w-100"></div>

9. <div class="col">

10. Elément 3

11. </div>

12. <div class="col">

13. Elément 4

14. </div>

15. </div>

Pourquoi w-100 ?

Tout simplement pour width 100%. Il existe aussi w-25, w-50 et w-75.

IV-C - Saut de colonnes

Bootstrap 3 permettait de sauter des colonnes avec des classes d'offset. Ces classes ont disparu avec la version 4. Désormais on utilise des utilitaires de marges qui apportent moins de souplesse, mais plus de simplicité. Je parlerai plus précisément de ces utilitaires dans la prochaine partie et pour le moment on va se contenter de l'espacement automatique.

La classe est composée de trois éléments séparés par des traits d'union :

{propriété}{côtés}-{support optionnel}-auto

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 (axe x)

- y : haut et bas (axe y)

Par exemple la classeml-auto définit une marge automatique à gauche alors que la classemr-auto fait la même chose pour la droite.

On a aussi évidemment les classes ml-sm-auto, ml-md-auto, ml-lg-auto et ml-xl-auto…

Voici un exemple de saut :

1. <div class="row">

2. <div class="col-3">3 colonnes</div>

3. <div class="col">6 colonnes</div>

4. <div class="col-3">3 colonnes</div>

5. </div>

6. <div class="row">

7. <div class="col-3">3 colonnes</div>

8. <div class="col-3 ml-auto">3 colonnes</div>

9. </div>

Avec ce rendu :

On a ajouté une marge à gauche automatique.

IV-D - Imbrication d'éléments

On doit souvent imbriquer des éléments dans une page web, est-ce possible avec Bootstrap ? Autrement dit, inclure un row dans un col. Eh bien, on va tester ça tout de suite :

1. <div class="row">

2. <div class="col-8">8 colonnes

3. <div class="row">

4. <div class="col-3">3 colonnes</div>

5. <div class="col">6 colonnes</div>

6. <div class="col-3">3 colonnes</div>

7. </div>

8. </div>

9. </div>

Avec ce résultat :

On dirait bien que ça fonctionne !

Les imbrications peuvent s'enchaîner pour répondre à des besoins complexes :

1. <div class="row">

2. <div class="col-12">Premier niveau avec 12 colonnes

3. <div class="row">

4. <div class="col-8">Second niveau avec 8 colonnes

5. <div class="row">

6. <div class="col-4">Troisième niveau avec 4 colonnes</div>

7. <div class="col-6 ml-auto">Troisième niveau avec 6 colonnes

8. <div class="row">

9. <div class="col-3 mx-auto">Quatrième niveau avec 3 colonnes</div>

10. <div class="col-5 mx-auto">Quatrième niveau avec 5 colonnes</div>

11. </div>

12. </div>

13. </div>

14. </div>

15. <div class="col">Second niveau avec 4 colonnes</div>

16. </div>

17. </div>

18. </div>

Avec ce rendu :

IV-E - Ordre des colonnes

Très logiquement, les colonnes s'affichent dans l'ordre du flux. Il peut arriver qu'on veuille bouleverser cet ordre. Regardez cet exemple :

1. <div class="row">

2. <div class="col">12 colonnes

3. <div class="row">

4. <div class="col order-3">Elément 1</div>

5. <div class="col order-2">Elément 2</div>

6. <div class="col order-1">Elément 3</div>

7. </div>

8. </div>

9. </div>

Avec ce rendu :

Les classes order-* permettent de fournir un ordre d'affichage avec une valeur allant de 1 à 12.

Il existe aussi les classes order-sm-*, order-md-*, order-lg-* et order-xl-*.

IV-F - Un petit TP pour s'entraîner

Je vous propose pour clore ce chapitre de vous entraîner avec un petit TP. Le but est d'obtenir ce résultat :

Donc deux zones séparées avec imbrication et un offset dans la partie gauche.

Voici une solution (cherchez un peu avant de regarder) :

1. <div class="row">

2. <div class="col">6 colonnes

3. <div class="row">

4. <div class="col-4">4 colonnes</div>

5. <div class="col-4 ml-auto">4 colonnes</div>

6. </div>

7. </div>

8. <div class="col">6 colonnes

9. <div class="row">

10. <div class="col-4">4 colonnes</div>

11. <div class="col-8">8 colonnes</div>

12. </div>

13. </div>

14. </div>

Vous aviez réussi ? C'est parfait, on va pouvoir continuer. Si vous avez quelques difficultés, je vous conseille de relire ce chapitre.

IV-G - En résumé

- La grille de Bootstrap permet d'empiler des rangées de douze colonnes.

- La grille de Bootstrap autorise le saut de colonnes.

- La grille de Bootstrap permet de rendre la largeur d'un élément automatique.

- La grille de Bootstrap permet de changer l'ordre des colonnes.

- La grille de Bootstrap permet d'imbriquer des rangées.

- La grille de Bootstrap crée automatiquement une nouvelle rangée en cas de débordement.

V - Mise en page

L'intérêt principal d'une grille est de réaliser une mise en page. Maintenant que vous savez comment utiliser la grille de Bootstrap, nous allons voir dans ce chapitre quelques exemples pour structurer correctement une page.

V-A - Mise en page simple

Commençons par quelque chose de simple avec un entête, un menu à gauche, une section à droite et un pied de page :

1. <div class="container">

2. <header class="row">

3. <div class="col">

4. Entete

5. </div>

6. </header>

7. <div class="row">

8. <nav class="col-lg-2">

9. Menu

10. </nav>

11. <section class="col-lg-10">

12. Section

13. </section>

14. </div>

15. <footer class="row">

16. <div class="col">

17. Pied de page

18. </div>

19. </footer>

20. </div>

Le résultat se trouve à la figure suivante.

J'ai utilisé les classes pour grand écran avec les classes col-lg-* pour le menu et la section. On aura évidemment le même rendu sur très grand écran. Par contre à la réduction, on se retrouve avec un empilage dès qu'on passe en dessous de 992px :

Si je veux que ma mise en forme reste stable aussi pour les écrans moyens, comment faire ? Il suffit d'utiliser les classes col-md-* à la place de col-lg-*, ce qui a pour effet de déplacer la limite à 768px. De la même façon, l'utilisation des classes col-sm-* déplace la limite à 576px…

V-B - Mise en page plus chargée

Considérons maintenant un cas un peu plus riche :

1. <div class="container">

2. <header class="row">

3. <div class="col">

4. Entete

5. </div>

6. </header>

7. <div class="row">

8. <nav class="col-md-2">

9. Menu

10. </nav>

11. <section class="col-md-10">

12. Section

13. <div class="row">

14. <article class="col-lg-10">

15. Article

16. </article>

17. <aside class="col-lg-2">

18. Aside

19. </aside>

20. </div>

21. </section>

22. </div>

23. <footer class="row">

24. <div class="col">

25. Pied de page

26. </div>

27. </footer>

28. </div>

Le résultat se trouve à la figure suivante pour un écran grand ou très grand :

On a conservé l'entête et le pied de page, ainsi que le menu, mais on a intégré dans le contenu un article et un aside. L'ensemble est prévu pour fonctionner sur écrans grands et très grands. Pour les tablettes, on se retrouve avec un empilage pour le contenu de la section (utilisation de classes col-md-* pour tout sauf article et aside) :

Et comme on n'a rien prévu de spécial pour les smartphones, tout s'empile :

V-C - Plusieurs asides

Enrichissons encore la mise en page :

1. <div class="container">

2. <header class="row">

3. <div class="col">

4. Entete

5. </div>

6. </header>

7. <div class="row">

8. <nav class="col-md-2">

9. Menu

10. </nav>

11. <section class="col">

12. Section

13. <div class="row">

14. <article class="col-lg-10">

15. Article

16. </article>

17. <div class="col">

18. <div class="row">

19. <aside class="col">

20. Aside 1

21. </aside>

22. <div class="w-100"></div>

23. <aside class="col">

24. Aside 2

25. </aside>

26. </div>

27. </div>

28. </div>

29. </section>

30. </div>

31. <footer class="row">

32. <div class="col">

33. Pied de page

34. </div>

35. </footer>

36. </div>

Le résultat se trouve à la figure suivante pour un écran grand ou très grand :

Maintenant nous avons deux asides à côté de l'article. Pour y arriver, il faut deux niveaux d'imbrication.

L'ensemble est prévu pour fonctionner sur écrans grands et très grands. Pour les tablettes, on se retrouve avec un empilage pour le contenu de la section (utilisation de classes col-lg-* pour tout ce qui est dans la section):

Et comme on n'a rien prévu de spécial pour les smartphones, tout s'empile :

V-D - Combinaison de classes col-*

Pour le moment nous avons utilisé juste une classe col-* pour chaque élément HTML. Mais il est parfois nécessaire d'en utiliser plusieurs lorsqu'on veut un rendu différent selon le support. Le plus simple est de voir un exemple. Je veux sur une page avoir des petites photos côte à côte. Supposons que je parte de cette structure pour cette partie de la page :

1. <!DOCTYPE HTML>

2. <html>

3. <head>

4. <meta charset="utf-8">

5. <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

6. <link href="css/bootstrap.css" rel="stylesheet">

7. <style type="text/css">

8. [class*="col"] { margin-bottom: 20px; }

9. img { width: 100%; }

10. body { margin-top: 10px; }

11. </style>

12. </head>

13. <body>

14. <div class="container">

15. <section class="row">

16. <div class="col-lg-2"><img src="images/t1.jpg" alt="Tigre"></div>

17. <div class="col-lg-2"><img src="images/t2.jpg" alt="Tigre"></div>

18. <div class="col-lg-2"><img src="images/t3.jpg" alt="Tigre"></div>

19. <div class="col-lg-2"><img src="images/t4.jpg" alt="Tigre"></div>

20. <div class="col-lg-2"><img src="images/t5.jpg" alt="Tigre"></div>

21. <div class="col-lg-2"><img src="images/t6.jpg" alt="Tigre"></div>

22. <div class="col-lg-2"><img src="images/t7.jpg" alt="Tigre"></div>

23. <div class="col-lg-2"><img src="images/t8.jpg" alt="Tigre"></div>

24. <div class="col-lg-2"><img src="images/t9.jpg" alt="Tigre"></div>

25. <div class="col-lg-2"><img src="images/t10.jpg" alt="Tigre"></div>

26. <div class="col-lg-2"><img src="images/t11.jpg" alt="Tigre"></div>

27. <div class="col-lg-2"><img src="images/t12.jpg" alt="Tigre"></div>

28. </section>

29. </div>

30. </body>

31. </html>

Le rendu sur grand et très grand écran est parfait avec six photos sur la largeur :

Mais ça se gâte quand je rétrécis la fenêtre, puisque je sais qu'en dessous de 992px les éléments s'empilent. Du coup je me retrouve avec une image sur la largeur, et comme je les ai prévues en basse résolution, elles pixelisent :

L'idéal serait d'avoir :

- sur moyen et grand écran : six images sur la largeur ;

- sur tablette : quatre images sur la largeur ;

- sur smartphone en mode paysage : trois images sur la largeur ;

- sur smartphone en mode portrait : deux images sur la largeur.

Comment réaliser cela ? Tout simplement en combinant les classes col-* :

1. <div class="container">

2. <section class="row">

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

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

5. <div class="col-6 col-sm-4 col-md-3 col-lg-2"><img src="images/t3.jpg" alt="Tigre"></div>

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

7. <div class="col-6 col-sm-4 col-md-3 col-lg-2"><img src="images/t5.jpg" alt="Tigre"></div>

8. <div class="col-6 col-sm-4 col-md-3 col-lg-2"><img src="images/t6.jpg" alt="Tigre"></div>

9. <div class="col-6 col-sm-4 col-md-3 col-lg-2"><img src="images/t7.jpg" alt="Tigre"></div>

10. <div class="col-6 col-sm-4 col-md-3 col-lg-2"><img src="images/t8.jpg" alt="Tigre"></div>

11. <div class="col-6 col-sm-4 col-md-3 col-lg-2"><img src="images/t9.jpg" alt="Tigre"></div>

12. <div class="col-6 col-sm-4 col-md-3 col-lg-2"><img src="images/t10.jpg" alt="Tigre"></div>

13. <div class="col-6 col-sm-4 col-md-3 col-lg-2"><img src="images/t11.jpg" alt="Tigre"></div>

14. <div class="col-6 col-sm-4 col-md-3 col-lg-2"><img src="images/t12.jpg" alt="Tigre"></div>

15. </section>

16. </div>

Voici le résultat sur tablette (classes col-md-3 actives) :

Voici le résultat sur smartphone en mode paysage (classes col-sm-4 actives) :

Voici enfin le résultat sur smartphone en mode portrait (classes col-6 actives) :

On a donc obtenu facilement une adaptation de la présentation des photos en fonction du support utilisé pour les visualiser.

V-E - En résumé

- Pour adapter l'affichage selon le support utilisé il suffit d'utiliser les bonnes classes ‌col-*.

- Pour obtenir un comportement différent selon les supports on est parfois amené à combiner les classes col-*.

VI - Alignement et visibilité

Dans ce chapitre nous allons voir dans un premier temps comment aligner des éléments avec flexbox. Ensuite nous verrons les classes que Bootstrap nous offre pour masquer ou faire apparaître des éléments selon le support utilisé. Et tant qu'à faire nous allons aussi poursuivre l'apprentissage de l'organisation de l'espace avec la grille.

VI-A - Aligner verticalement

VI-A-1 - Aligner globalement

Un avantage de disposer de flexbox est la grande facilité que l'on obtient pour les alignements. On dispose de trois classes pour aligner verticalement au niveau d'une ligne :

1. <div class="container">

2. <div class="row align-items-start">

3. <div class="col">

4. align-items-start

5. </div>

6. <div class="col">

7. align-items-start

8. </div>

9. </div>

10. <div class="row align-items-center">

11. <div class="col">

12. align-items-center

13. </div>

14. <div class="col">

15. align-items-center

16. </div>

17. </div>

18. <div class="row align-items-end">

19. <div class="col">

20. align-items-end

21. </div>

22. <div class="col">

23. align-items-end

24. </div>

25. </div>

26. </div>

La première n'est pas vraiment utile parce que c'est la valeur par défaut. Par contre les deux autres sont les bienvenues. Sans flexbox il n'est pas si facile d'obtenir le même résultat.

On dispose également de baseline et stretch de flexbox qui sont moins utiles.

On peut adapter cet alignement selon le support avec des classes align-items-sm-*, align-items-md-* … On peut se demander quel en est l'intérêt, mais ça a le mérite d'exister.

VI-A-2 - Aligner individuellement

On peut également traiter chaque élément individuellement :

1. <div class="container">

2. <div class="row">

3. <div class="col align-self-start">

4. align-self-start

5. </div>

6. <div class="col align-self-center">

7. align-self-center

8. </div>

9. <div class="col align-self-end">

10. align-self-end

11. </div>

12. </div>

13. </div>

On peut aussi adapter cet alignement selon le support avec des classes align-self-sm-*, align-self-md-* …

Pour la visualisation de ces deux exemples, j'ai ajouté ces règles :

1. .row {

2. background-color: #b4c8cf;

3. height: 200px;

4. margin-bottom: 10px;

5. }

VI-B - Aligner horizontalement

On peut aussi aligner horizontalement en faisant de la justification et en retrouvant à nouveau les possibilités de flexbox :

1. <div class="container">

2. <div class="row justify-content-start">

3. <div class="col-4">

4. justify-content-start

5. </div>

6. <div class="col-4">

7. justify-content-start

8. </div>

9. </div>

10. <div class="row justify-content-center">

11. <div class="col-4">

12. justify-content-center

13. </div>

14. <div class="col-4">

15. justify-content-center

16. </div>

17. </div>

18. <div class="row justify-content-end">

19. <div class="col-4">

20. justify-content-end

21. </div>

22. <div class="col-4">

23. justify-content-end

24. </div>

25. </div>

26. <div class="row justify-content-around">

27. <div class="col-4">

28. justify-content-around

29. </div>

30. <div class="col-4">

31. justify-content-around

32. </div>

33. </div>

34. <div class="row justify-content-between">

35. <div class="col-4">

36. justify-content-between

37. </div>

38. <div class="col-4">

39. justify-content-between

40. </div>

41. </div>

42. </div>

On peut aussi adapter cet alignement selon le support avec des classes justify-content-sm-*, justify-content-md-* …

VI-C - Les classes pour masquer ou afficher

Dans tous les exemples que nous avons vus jusqu'à présent, on s'est contenté de modifier la disposition des éléments selon le support. Mais il arrive aussi que l'on ait besoin de carrément en masquer certains ou en afficher d'autres selon les cas. Pour réaliser cela Bootstrap nous propose aussi des classes.

Voici les classes d'affichage (display) de Bottstrap :

- d-none

- d-inline

- d-inline-block

- d-block

- d-table

- d-table-cell

- d-table-row

- d-flex

- d-inline-flex

Ces classes se comprennent avec leur appellation, par exemple pour d-block on a cette simple règle :

.d-block {
display: block !important;
}

Nous allons ici nous intéresser à la classe d-none qui utilise cette règle :

.d-none {
display: none !important;
}

Là où ça devient intéressant, c'est que toutes les classes listées ont leurs variantes selon les supports, donc pour d-none par exemple on dispose de :

- d-sm-none

- d-md-none

- d-lg-none

- d-xl-none

Autrement dit on peut régler la visibilité d'un élément selon le support avec ces classes !

Prenons un exemple pour illustrer cela :

1. <div class="container">

2. <header class="row">

3. <div class="col">

4. Entete

5. </div>

6. </header>

7. <div class="row">

8. <section class="col">

9. Section

10. <div class="row">

11. <article class="col-md-10">

12. Article

13. </article>

14. <aside class="col d-none d-md-block">

15. Aside

16. </aside>

17. </div>

18. </section>

19. </div>

20. <footer class="row">

21. <div class="col">

22. Pied de page

23. </div>

24. </footer>

25. </div>

On a une mise en page simple avec cet aspect pour tablettes et grands écrans :

Pour les smartphones on veut que le aside disparaisse. On utilise donc de base la classe d-none pour empêcher l'affichage et la classe d-md-block pour avoir l'affichage à partir des tablettes. On obtient donc cet affichage :

Vous avez, je pense, compris le principe.

VI-D - Mise en page avec visibilité

Nous allons mettre en œuvre ce que nous venons de voir avec un nouvel exemple de mise en page. Le but est d'obtenir cette mise en page pour grands et très grands écrans :

Voici un premier code pour cette mise en page :

1. <div class="container">

3. <header class="row">

4. <div class="col">

5. Entete

6. </div>

7. </header>

9. <div class="row">

11. <div class="col-lg-2">

12. <div class="row">

13. <aside class="col">

14. Aside

15. </aside>

16. <div class="w-100"></div>

17. <aside class="col">

18. Aside

19. </aside>

20. </div>

21. </div>

23. <section class="col">

24. Section

25. </section>

26. <div class="col-lg-2">

27. <div class="row">

28. <aside class="col">

29. Aside

30. </aside>

31. <div class="w-100"></div>

32. <aside class="col">

33. Aside

34. </aside>

35. </div>

36. </div>

37. </div>

38. <footer class="row">

39. <div class="col">

40. Pied de page

41. </div>

42. </footer>

43. </div>

Maintenant la question à se poser est : comment va réagir cette structure quand on va réduire la fenêtre ?

Comme j'ai mis des classes col-lg-*, tout va s'empiler sous 992px :

Si cet effet me convient, c'est parfait. Mais supposons que, sur tablette, je veuille cette structure :

Voilà le code pour l'obtenir :

1. <div class="container">

3. <header class="row">

4. <div class="col">

5. Entete

6. </div>

7. </header>

9. <div class="row">

11. <div class="col-md-2">

12. <div class="row">

13. <aside class="col">

14. Aside

15. </aside>

16. <div class="w-100"></div>

17. <aside class="col">

18. Aside

19. </aside>

20. </div>

21. </div>

23. <section class="col-md-10 col-lg-8">

24. Section

25. </section>

26. <div class="col-lg-2">

27. <div class="row">

28. <aside class="col">

29. Aside

30. </aside>

31. <div class="w-100"></div>

32. <aside class="col">

33. Aside

34. </aside>

35. </div>

36. </div>

37. </div>

38. <footer class="row">

39. <div class="col-lg">

40. Pied de page

41. </div>

42. </footer>

43. </div>

Pour les premiers « aside », j'ai remplacé les classes col-lg-* par des classes col-md-* pour avoir un comportement de base pour tablettes. J'ai ensuite ajouté la classe col-md-10 pour la section.

Poursuivons cet exemple en supprimant les deux derniers « asides » sur les smartphones. Il suffit d'utiliser les classes d-none et d-md-block :

1. <div class="col-lg-2 d-none d-md-block">

2. <div class="row">

3. <aside class="col">

4. Aside

5. </aside>

6. <div class="w-100"></div>

7. <aside class="col">

8. Aside

9. </aside>

10. </div>

11. </div>

VI-E - Un dernier exemple pour résumer

Nous allons considérer un dernier exemple pour résumer ce que nous avons vu. Je veux obtenir le résultat visible à la figure suivante sur les grands et très grands écrans.

Donc un entête qui prend toute la largeur de l'écran, une navigation à gauche, deux sections accolées et un pied de page, le tout pour grand écran. Voici une solution :

1. <header class="container-fluid">

2. <div class="row">

3. <div class="col">

4. Entete

5. </div>

6. </div>

7. </header>

9. <div class="container">

11. <div class="row">

13. <nav class="col-lg-2">

14. Navigation

15. </nav>

16. <section class="col-lg-5">

17. Section

18. </section>

19. <section class="col-lg-5">

20. Section

21. </section>

22. </div>

23. <footer class="row">

24. <div class="col">

25. Pied de page

26. </div>

27. </footer>

28. </div>

Maintenant je me dis que mon application serait bien aussi sur tablette. Si je ne fais rien, j'obtiens ce résultat :

Ça ne me plaît pas trop, j'aimerais que les deux sections restent accolées :

Voici une solution simple (encore flexbox !) :

1. <div class="row">

2. <nav class="col-lg-2">

3. Navigation

4. </nav>

5. <section class="col">

6. Section

7. </section>

8. <section class="col">

9. Section

10. </section>

11. </div>

Après réflexion, je me dis que mon application irait bien aussi sur smartphone en mode paysage, l'empilement des éléments me convient, mais j'aimerais avoir un entête différent. Après une nouvelle réflexion, j'en veux aussi une différente sur smartphone en mode portrait. Avec les classes « responsives » vues précédemment, c'est facile à réaliser :

1. <header class="container-fluid">

2. <div class="row">

3. <div class="col d-none d-lg-block">

4. Entete large

5. </div>

6. <div class="col d-none d-md-block d-lg-none">

7. Entete tablette

8. </div>

9. <div class="col d-none d-sm-block d-md-none">

10. Entete smartphone paysage

11. </div>

12. <div class="col d-sm-none">

13. Entete smartphone portrait

14. </div>

15. </div>

16. </header>

L'entête correct s'affiche pour chaque support.

VI-F - En résumé

- On dispose de classes pour cacher ou afficher des éléments selon le support utilisé.

- Il est possible avec la grille de régler très finement le rendu des pages selon les supports de visualisation.

- On a vu sur des exemples pratiques qu'il est facile de faire des mises en page même complexes sans trop d'effort.

VII - Normalize et reboot

Bootstrap utilise normalize.css 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.

VII-A - 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 :

1. /* http://meyerweb.com/eric/tools/css/reset/

2. v2.0 | 20110126

3. License: none (public domain)

4. */

5. html, body, div, span, applet, object, iframe,

6. h1, h2, h3, h4, h5, h6, p, blockquote, pre,

7. a, abbr, acronym, address, big, cite, code,

8. del, dfn, em, img, ins, kbd, q, s, samp,

9. small, strike, strong, sub, sup, tt, var,

10. b, u, i, center,

11. dl, dt, dd, ol, ul, li,

12. fieldset, form, label, legend,

13. table, caption, tbody, tfoot, thead, tr, th, td,

14. article, aside, canvas, details, embed,

15. figure, figcaption, footer, header, hgroup,

16. menu, nav, output, ruby, section, summary,

17. time, mark, audio, video {

18. margin: 0;

19. padding: 0;

20. border: 0;

21. font-size: 100%;

22. font: inherit;

23. vertical-align: baseline;

24. }

25. /* HTML5 display-role reset for older browsers */

26. article, aside, details, figcaption, figure,

27. footer, header, hgroup, menu, nav, section {

28. display: block;

29. }

30. body {

31. line-height: 1;

32. }

33. ol, ul {

34. list-style: none;

35. }

36. blockquote, q {

37. quotes: none;

38. }

39. blockquote:before, blockquote:after,

40. q:before, q:after {

41. content: '';

42. content: none;

43. }

44. table {

45. border-collapse: collapse;

46. border-spacing: 0;

47. }

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.

VII-B - Normalize.css

Normalize.css 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'autre part il corrige les bogues 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. /**

2. * 1. Remove the bottom border in Chrome 57- and Firefox 39-.

3. * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.

4. */

5. abbr[title] {

6. border-bottom: none; /* 1 */

7. text-decoration: underline; /* 2 */

8. text-decoration: underline dotted; /* 2 */

9. }

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 :

1. /**

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

3. */

4. audio:not([controls]) {

5. display: none;

6. height: 0;

7. }

On comprend immédiatement la justification de ces règles.

VII-C - Reboot

Le reboot de Bootstrap s'appuie sur normalize.css en ajoutant ses propres règles. Dans la distribution vous trouvez un fichier bootstrap-reboot.css 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 :

1. <h1>Titre H1</h1>

2. <h2>Titre H2</h2>

3. <h3>Titre H3</h3>

4. <h4>Titre H4</h4>

5. <h5>Titre H5</h5>

6. <h6>Titre H6</h6>

Le reboot introduit ces règles :

1. h1, h2, h3, h4, h5, h6 {

2. margin-top: 0;

3. margin-bottom: 0.5rem;

4. }

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 cet excellent article.

VII-D - 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.