Bootstrap

BOOTSTRAP 4
SOMMAIRE
Sommaire.................................................................................................................................... 1
Bootstrap - 4 ............................................................................................................................... 4
Etape 0 : historique, quid, fondamentaux, installation .......................................................................... 4
Historique ......................................................................................................................................................................4
2 références : officielle et w3schools ............................................................................................................................4
B4 : quid ? (2) .................................................................................................................................................................5
Les fondamentaux de B4 ...............................................................................................................................................6
Les principaux choix de B4 (4) .......................................................................................................................................7
Des outils utiles pour B4 (5)...........................................................................................................................................8
Un éditeur .................................................................................................................................................................8
Browsersync ..............................................................................................................................................................8
Usages pratiques de Visual Studio Code ..................................................................................................................8
Extension Visual Studio Code ...................................................................................................................................8
Installer Bootstrap 4 (6) .................................................................................................................................................9
Principes : version CDN - version compilée – fichiers sources ................................................................................9
Documentation BS ....................................................................................................................................................9
CDN BS ....................................................................................................................................................................10
Téléchargement ......................................................................................................................................................11
Les versions .............................................................................................................................................................11
Bilan ........................................................................................................................................................................11
Organisation du cours..................................................................................................................................................12
Etape 1 : les styles de base ..................................................................................................................13
1-Reboot B4– Normalize.css ........................................................................................................................................13
2-Titres .........................................................................................................................................................................13
3-Taille du texte ...........................................................................................................................................................14
4-Alignement du texte .................................................................................................................................................14
5 - Autres paramétrages du text -> documentation....................................................................................................14
6 - Blockquote ..............................................................................................................................................................15
7 - container et container-fluid ...................................................................................................................................16
Documentation .......................................................................................................................................................16
Principes ..................................................................................................................................................................16
Point d’arrêt et comportement « fluid » à la fin ....................................................................................................16
container-fluid ........................................................................................................................................................16
Les points d’arrêt pré-définis ..................................................................................................................................17
8 - Liste .........................................................................................................................................................................18
9 - Nav ..........................................................................................................................................................................18
10 - Tableau .................................................................................................................................................................19
Documentation .......................................................................................................................................................19
Principes ..................................................................................................................................................................19
Exemple...................................................................................................................................................................20
11 - Les images.............................................................................................................................................................21
Documentation .......................................................................................................................................................21
Principes ..................................................................................................................................................................21
Exemple complet ....................................................................................................................................................22
12 - Les couleurs ..........................................................................................................................................................23
Documentation .......................................................................................................................................................23
Principes ..................................................................................................................................................................23
Application à un <a href > .......................................................................................................................................23
Application à un <table> .........................................................................................................................................23
Bootstrap 4 - 1/52
13 - Les bordures .........................................................................................................................................................24
Documentation .......................................................................................................................................................24
Objectif....................................................................................................................................................................24
Principes ..................................................................................................................................................................24
Arrondis : border-radius CSS ...................................................................................................................................24
14 - Padding et margin : sizing .....................................................................................................................................25
Documentation .......................................................................................................................................................25
Objectif....................................................................................................................................................................25
Principes : p et m ....................................................................................................................................................25
Centrer ....................................................................................................................................................................25
Exemple...................................................................................................................................................................25
Remarque................................................................................................................................................................25
Principes responsive : p et m ..................................................................................................................................25
15 - Float ......................................................................................................................................................................26
16 - Flex ........................................................................................................................................................................27
Etape 2 : la grille de Bootstrap (15-22) .................................................................................................28
Présentation (15) .........................................................................................................................................................28
Généralités ..............................................................................................................................................................28
Principes : 12 blocs de 6 colonnes ..........................................................................................................................28
Tester les codes avec Sublime Text : ......................................................................................................................29
Premier exemple : container – row – col-6 (16) ..........................................................................................................30
Documentation .......................................................................................................................................................30
Principes ..................................................................................................................................................................30
Test :........................................................................................................................................................................30
Saisie automatique avec Sublime Text ...................................................................................................................30
Code ........................................................................................................................................................................31
Décaler des éléments dans la grille (17) : offset-4 ......................................................................................................32
Test :........................................................................................................................................................................32
Version responsive ......................................................................................................................................................33
Résultats attendus ..................................................................................................................................................33
Principes de programmation responsive de la grile ...............................................................................................33
Principes de programmation responsive de la grile ...............................................................................................34
Code ........................................................................................................................................................................34
Imbriquer des grilles les unes dans les autres .............................................................................................................35
Bases .......................................................................................................................................................................35
Test : version md, sans image : ...............................................................................................................................35
Complément ...........................................................................................................................................................36
Test : version md, sans image : ...............................................................................................................................36
Effacer un bloc : display none : d-none (20) ................................................................................................................37
Objectif....................................................................................................................................................................37
Technique : propriété display du CSS .....................................................................................................................37
Exemple 1................................................................................................................................................................38
Exemple 2................................................................................................................................................................39
Width et height : sizing (22).........................................................................................................................................40
Documentation .......................................................................................................................................................40
Objectif....................................................................................................................................................................40
Principes ..................................................................................................................................................................40
Exemple...................................................................................................................................................................40
Etape 3 : Le composant barre de navigation (31-34) .............................................................................41
Exemple 1 : nav, nav-item, nav-link .............................................................................................................................41
Résultats :................................................................................................................................................................41
Code ........................................................................................................................................................................42
Principes : div container et nav...............................................................................................................................42
Principes : ul ............................................................................................................................................................42
Principes : li, a .........................................................................................................................................................42
Exemple 2 : navbar ......................................................................................................................................................43
Documentation .......................................................................................................................................................43
Bootstrap 4 - 2/52
c ...............................................................................................................................................................................43
Code ........................................................................................................................................................................44
Principes : bootsratp, c’est verbeux ! .....................................................................................................................44
Exemple 3 : navbar avec logo ......................................................................................................................................45
Documentation .......................................................................................................................................................45
Résultats :................................................................................................................................................................45
Code ........................................................................................................................................................................46
Exemple 4 : navbar-toggler pour un bouton de regroupement de menu ..................................................................48
Documentation .......................................................................................................................................................48
Résultats :................................................................................................................................................................48
code.........................................................................................................................................................................49
Exemple 5 : navbar-default avec l’extension b5 de VS-Code ......................................................................................51
Installation ..............................................................................................................................................................51
Principes : ................................................................................................................................................................51
Etape 4 : template avec l’extension b5 de VS-Code ..............................................................................52
Installation ...................................................................................................................................................................52
Principes :.....................................................................................................................................................................52
Edition : mars 2022
Bootstrap 4 - 3/52
BOOTSTRAP - 4
https://getbootstrap.com/docs/4.6/getting-started/introduction/
https://www.w3schools.com/bootstrap4/default.asp
Etape 0 : historique, quid, fondamentaux, installation
Historique
• Août 2011 : Bootstrap 1.0, publié par Twitter. Premier nom: twitter blue print.
• Janvier 2012 : Bootstrap 2.0 : intègre le responsive.
• Août 2013 : Bootstrap 3 : refonte complète.
• Août 2015 : Bootstrap 4, version alpha.
• Janvier 2018 : Bootsrapt 4.1.3 : refonte complète. Version finale de B4. Plus facile à utiliser que
les versions précédentes. Tout ce qui date d’avant est obsolète ! B4 utile les FlexBox.
• Dernière version : 4.6 (janvier 2020)
• Version avancée : 5.0.1 (mai 2021)
2 références : officielle et w3schools

• https://getbootstrap.com/docs/4.6/getting-started/introduction/
• https://www.w3schools.com/bootstrap4/default.asp
Bootstrap 4 - 4/52
B4 : quid ? (2)
• B4 est un framework front-end : HTML, CSS, JavaScript créé par les développeurs de Twitter
• Bootstrap est un ensemble d’outils dans un cadre de travail avec des choix déjà faits = un
framework.
 Par exemple, B4 utilise les Flexbox (avant c’était les float) => IE8 et IE9 ne sont pas
compatibles.
 B4 est basé sur HTML 5 et CSS3. B4 embarque des plugins JQuery de qualité.
• Bootsrat est utilisé pour créer le design des sites et des applications qui utilisent les technologies
du web : B4, c’est un framework « front-end », pour la partie visible du site, pour la User
Interface : UI (le back-end, c’est la partie serveur que les utilisateurs ne voient pas).
• Bootsrap propose une collection de classes CSS permettant de définir l’apparence de divers
éléments d’interface, comme des boutons, des barres de navigation, des formulaires, etc.
 Le cœur de B4 est constitué de plusieurs centaines de classes CSS qui vont nous
permettre de définir l’apparence de bon nombre d’éléments : boutons, tableaux, titres,
formulaires, etc.
 Mais B4 propose aussi des composants : barre de navigation, fil d’ariane, pagination,
etc.
 Il y a une esthétique, une griffe B4. On peut la personnaliser mais il reste un « style ».
• Bootsrap propose une sélection de widget JavaScript permettant de définir le comportement de
divers éléments d’interface, comme des menus escamotables, un carrousel d’images, des listes
déroulantes, etc.
• Bootstrap consiste à mettre le CSS directement dans la page HTML !
Bootstrap 4 - 5/52
Les fondamentaux de B4
• Prérecquis : HTML et CSS
• Contenu de B4
• Les styles (les classes de bases)
• La grille fluide
• Les composants
• Les principaux composants :
• Barre de navigation
• Fil d’ariane
• Cartes
• Boutons
• Formulaires
• Widget interactifs
• Etc.
Bootstrap 4 - 6/52
Les principaux choix de B4 (4)
• < !DOCTYPE html> en ligne 1 forcément ! C’est le DOCTYPE du HTML 5. B4 ne gère pas le
HTML < 5
• B4 est « Mobile first » : l’affichage est d’abord défini pour les écrans les plus petits, puis les plus
grands, avec les medias queries CSS. On met forcément : <meta name="viewport"
content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
• B4 change la valeur par défaut du box-sizing :
 Le box-sizing spécifie à quoi le width ou height font référence.
 La valeur par défaut du box-sizing, c’est content-box. Donc, width et height correspondent
au content-box (au contenu textuel de l’élément) et du coup, padding et bordure viennent
en plus de la largeur d’un élément.
 B4 dit que le box-sizing c’est le border- box. Donc width et height incluent padding et
bordure.
 Il ne reste que le margin en plus.
• B4 utilise le margin-bottom et pas le margin-top pour éviter les marges qui se superposent :
 En CSS, les marges basses et hautes ne s’ajoutent pas mais se superposent. Avec B4, on
évite d’utiliser les marges hautes (margin-top) pour éviter les superpositions et on utilise
prioritairement margin-bottom.
• B4 calcule les tailles en REM : Root EM. C’est une unité de mesure relative. 1 REM c’est la
taille de base définie par l’utilisateur du navigateur (par défaut 16 pixels). Le REM, c’est une
bonne pratique qui permet à chaque utilisateur de paramétrer sa valeur de REM sur son
navigateur pour avoir une bonne taille affichée.
• Il y a d’autres choix de B4. Les 5 précédents sont les principaux. On verra les autres au fur et à
mesure.
Bootstrap 4 - 7/52
Des outils utiles pour B4 (5)
Un éditeur
• VS Code, SublimeText, Brackets, Atom, ou tout ce qu’on veut.
Browsersync
• Browsersync est un serveur web pour avoir un petit serveur de test et de développement.
• L’avantage, c’est qu’il recharge les pages automatiquement quand on sauvegarde une
modification.
• Browersync fonctionne avec node.js.
 https://browsersync.io/
Usages pratiques de Visual Studio Code

• Fichier / enregistreemnt automatique
• Alt Maj F : mise en forme
• Alt Maj A : mise en commentaires
• Cmd Maj K : supprime la ligne courante
• selection alt fleche haut : tout monte (Ctrl maj sub text)
• ! + tab
• balise + tab
• balise#id + tab
• balise.class + tab
• balise.class1.class2 + tab
• lorem100 + tab
• p+tab lorem+tab
Extension Visual Studio Code

• B4 - Font awesome4, etc : plus de 2 millions d’installation.
• On peut regarder la doc : les entrées se font par « b4 »
• F
• b4 + tab -> structure de la page avec B4 !
Bootstrap 4 - 8/52
Installer Bootstrap 4 (6)
Principes : version CDN - version compilée – fichiers sources

• B4 a été écrit en SASS puis compilé en CSS.
• On peut choisir :
 soit la version CDN,
 soit la version compilée CSS et JS,
 soit les fichiers sources SASS.
• Les fichiers sources permettent de paramétrer B4 comme on veut.
• La version compilée permet d’utiliser son bootsrap sur son serveur.
• La version CDN permet d’accéder aux versions compilées sur un serveur distant. On peut utiliser
les liens du site ou passer par UNPKG.
• Pour le CDN, on a les balises link et script à copier-coller dans le HTML.
 https://getbootstrap.com/
Documentation BS
• On peut choisir sa version.
• La documentation est très bien faite : à utiliser sans modération ! N’oubliez pas d’utiliser le
traducteur de Chrome si vous bloquez avec l’anglais.
 https://getbootstrap.com/docs/4.6/getting-started/introduction/
Bootstrap 4 - 9/52
CDN BS
• CDN : content distribution network
 https://www.bootstrapcdn.com/
• On trouve un exemple ici :
 https://getbootstrap.com/docs/4.6/getting-started/introduction/
• Bilan :
 Il faut linker un bootstrap.min.css dans le head
 Il faut ajouter deux scriptx src, pour jquery.slim.min.js et pour bootstrap.bundle.min.js à la
fin du body.


<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css"
integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N"
crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct"
Parfois, il y a popper en plus
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-

9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
Bootstrap 4 - 10/52
Téléchargement
• A partir de https://getbootstrap.com/ on choisit « download »
Les versions
• Pour Bootstrap, il y a du CSS et du JavaScript.
• Il y a 3 versions possibles du CSS : la version de base, complète, la version -grid qui ne contient
que la grile et les flexbox, la version -reboot qui ne contient que le reboot (on verra plus tard ce
que c’est).
• On voit ça dans l’onglet « content » : https://getbootstrap.com/docs/4.6/getting-started/contents/
• Il y a aussi la version de développement et la version « minifiée », de production.
• On va travailler par défaut avec la version complète minifiée.
• Il y a 2 versions possibles du JS : la version de base et la version bundle. La version bundle

intègre la bibliothèque popper.
• Il y a aussi la version de développement et la version « minifiée », de production.
• On va travailler par défaut avec la version complète (bundle) minifiée.
• A noter que B4 a besoin de JQuery : jquery.com.

• Il y a 2 versions : une slim et pas slim. B4 utilise la version slim (qui n’utilise pas AJAX).
Bilan
➢ Avec les versions compilées chargées dans les dossiers css et js :

<!DOCTYPE html>
<html>
<head>
...
<link
<link rel="stylesheet"> href="css/bootstrap.min.css">
</head>
<body>
...
<script src="js/jquery-3.3.1.slim.min.js"> </script>
<script src="js/bootstrap.bundle.min.js.js"> </script>
</body>
</html>
Bootstrap 4 - 11/52
Organisation du cours
• Etape 1 : les class (styles) de base.
• Etape 2 : la grille bootstrap.
• Etape 3 : le composant « barre de navigation ».
• Etape 4 : template.
 Il faut tester les exemples pour apprendre.
Bootstrap 4 - 12/52
Etape 1 : les styles de base
• Le cœur de B4 est constitué de plusieurs centaines de classes CSS qui vont nous permettre de
définir l’apparence de bon nombre d’éléments : boutons, tableaux, titres, formulaires, etc.
• On va voir les plus utilisées dans un premier temps.
1-Reboot B4– Normalize.css

• Les navigateurs appliquent une « user agent stylesheet » au HTML par défaut (titre 1 en gras et
gros, etc.)
 Il y a de légères différences entre les navigateurs.
• Le fichier Normalize.css : https://necolas.github.io/normalize.css/
 sert à lisser la user agent stylesheet propre à chaque navigateur pour que ce soit la
même chose quel que soit le navigateur.
• Le reboot de Bootstrap fait un nomalize.css + quelques éléments de style par défaut de B4.
 Quand on charge bootstrap, sans avoir mis aucune « class », ça « reboot ».
2-Titres
Pour donner l’apparence d’un titre :
class="h1"
• h1 à h6
• On doit normalement suivre la hiérarchie des titres (un h2 est après un h1). Avec les class de titre
B4, on peut suivre cette hiérarchie et donner l’apparence qu’on veut :
 On peut donner l’apparence d’un niveau 3 à un niveau 1 :
<h1 class "h3">
Bootstrap 4 - 13/52
3-Taille du texte
https://getbootstrap.com/docs/4.0/content/typography/#display-headings
class="display-1”
• 1 à 4 : ça augment la taille du texte (1 : beaucoup, 2, 3, 4 : moins)

class="lead”
• Pour augmenter un peu la taille du texte.
4-Alignement du texte
class="lead text-right"
• right (évitez start), left (évitez end) par défaut, center, justifiy.
• A noter les 2 classes en même temps : lead et text-right
class="text-justify text-md-left"
• Par défaut, sur smartphone, justifié, sinon en médium, à gauche.
class="lead text-nowrap"
• Le paragraphe ne passe plus à la ligne et génère une barre de défilement horizontal.

• C’est intéressant avec la balise <code> du HTML pour montrer du code.
5 - Autres paramétrages du text -> documentation

• https://getbootstrap.com/docs/5.0/utilities/text/
 On y accède par : Bootstrap / Doc / Utilities / Text
• Les class qu’on trouve sont :
 text-lowercase, text-uppercase, text-capitalize
 fw-bold, fst-italic, etc : pour un paragraphe entier (en version 5 et pas 4.6…). Pour
quelques mots, on préfèrera les balises <strong>, <em> et <mark>
Bootstrap 4 - 14/52
6 - Blockquote
• https://getbootstrap.com/docs/5.0/content/typography/#blockquotes
 En HTML, <blockquote> permet de mettre des citations dans les documents. On y trouve
aussi un <footer> pour l’auteur, et un <cite> pour la source, par exemple.
• Par défaut, B4 n’en fait rien et même le décalage de gauche à disparu.
• Mais on peut ajouter 2 classes :
class="blockquote"
et
class="blockquote-footer"
Bootstrap 4 - 15/52
7 - container et container-fluid
Documentation
• https://getbootstrap.com/docs/5.0/layout/containers/
• https://www.w3schools.com/bootstrap4/bootstrap_containers.asp
Principes
• Dans bootstrap, on va souvent placer nos éléments dans un bloc (une div générique ou une div
sémantique) qui aura une class container ou container-fluid.
 Les container nous faciliteront le comportement responsive.
• Le simple container à une largeur qui reste fixe et évolue par à-coup.
 Il contient des marges à gauche et à droite.
• Le container-fluid a une largeur qui évolue à chaque modification de la taille de la fenêtre, en
continu, de façon fluide.
 Il ne contient pas de marge à gauche et à droite.
Point d’arrêt et comportement « fluid » à la fin

• Un container est responsive par défaut : l’affichage s’adapte à la taille.
• Le principe en diminution, c’est que la largeur du container est fixe : ce sont les marges qui
diminuent, jusqu’à une limite où la largeur change (diminue) et les marges sont augmentées d’un
coup et on recommence.
• Pour le dernier niveau, il n’y a plus de marges et c’est la largeur du container qui change. Ce
fonctionnement terminal est dit « fluide »
container-fluid
• On peut paramétrer le container pour qu’il soit tout le temps fluide : il n’a pas de marge et la
largeur des blocs varie avec la taille de la fenêtre.
 <main class="container-fluid">
Bootstrap 4 - 16/52
Les points d’arrêt pré-définis
https://getbootstrap.com/docs/5.0/layout/breakpoints/
• B4 définit les points d’arrêts en pixel pour les changements de comportement.
• Noter que par défaut, le comportement est x-small (ou xs) : c’est mobile first
Bootstrap 4 - 17/52
8 - Liste
https://getbootstrap.com/docs/5.0/content/typography/#lists
https://www.w3schools.com/bootstrap4/bootstrap_list_groups.asp
• Menu basique :
<ul class="list-group">
<li class="list-group-item">
• Menu basique avec hover :

<ul class="list-group">
<li class="list-group-item list-group-item-action">
• Pour mettre les éléments de liste côte-à-côte, 2 class :

<ul class="d-flex">
li idem :
<li class="list-group-item list-group-item-action">
• Pour gérer les marges entre les lis :

En plus :
<li class="mx-3">
Soit :
<li class="mx-3 list-group-item list-group-item-action">
9 - Nav
• On peut mettre :
<nav class="container">
• Ou mettre un nav juste autour de l’ul

• Les usages sont variables : le mieux est d’utiliser les balises sémantiques.
Bootstrap 4 - 18/52
10 - Tableau
Documentation
https://getbootstrap.com/docs/5.0/content/tables/
https://www.w3schools.com/bootstrap5/bootstrap_tables.php
Principes
• Bordures et grisé une ligne sur 2 :
<table class="table table-striped">
• hover :
 <table class="table table-hover">
• Des bordures partout :
 <table class="table table-bordered">
• Compacte un peu les padding du texte. sm pour small :
 <table class="table table-sm"> table-md par défaut
• Le reboot fait quelques mises à jour de style :
 La balise <caption>, légende, apparaît après le tableau
• Version sombre pour tout le tableau :
 <table class="table table-dark">
• Version grise pour le head :
 <thead class="thead-light">
• Version sombre que pour les thead :
 <table class="thead thead-dark">
 Variante : thead-light (table-light n’existe pas) : c’est gris.
Bootstrap 4 - 19/52
Exemple
<div class="container mt-3">
<h2>Tableau classique</h2>
<table class="table table-bordered table-striped table-hover
table-sm">
<tr>
<th>Firstname</th> <th>Lastname</th> <th>Email</th>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>john@example.com</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary@example.com</td>
</tr>
</table>
</div>
Bootstrap 4 - 20/52
11 - Les images
Documentation
https://getbootstrap.com/docs/5.0/content/images/#responsive-images
https://www.w3schools.com/bootstrap5/bootstrap_images.php
Principes
• Images responsives :
img class="img-fluid"
 L’image aura la taille de son conteneur. Sa taille s’adapte automatiquement si on change la
taille de la fenêtre : les images sont désormais « responsive ». Si l’image est plus petite :
elle reste plus petite. Si l’image est trop grande, elle s’adapte.
• Présentation améliorée :
<img ... class="img-fluid img-thumbnail">
 Crée une petite bordure autour de l’image.
<img ... class="img-fluid rounded">
 Arrondit les angles de l’image. Ca marche pour tous les éléments (pas que pour les
images).
• Traitement de la légende avec <figure> et <figcaption>
<figure class="figure">
<img src="img/iceberg.png" alt="iceberg" class="figure-img
img-fluid rounded img-thumbnail"/>
<figcaption class="figure-caption text-right">Naissance d’un
iceberg</figcaption>
</figure>
 La balise figure ajoute une marge en bas : class figure et figure-img
 La balise figcaption permet d’ajouter une légende : class figure-caption.
Bootstrap 4 - 21/52
Exemple complet
<p class="mx-3 my-3">
<img class="img-fluid rounded img-thumbnail"
src="./img/test.png" alt="test"></a>
</p>
<p class="mx-4">mon image</p>
<figure class="figure mx-3 my-3">

<img src="img/iceberg.png" alt="iceberg" class="figure-img
img-fluid rounded img-thumbnail"/>
<figcaption class="figure-caption text-right">Naissance d’un
iceberg</figcaption>
</figure>
Bootstrap 4 - 22/52
12 - Les couleurs
Documentation
https://getbootstrap.com/docs/5.0/utilities/colors/
https://www.w3schools.com/bootstrap5/bootstrap_colors.php
Principes
• Il y a 6 couleurs de base : primary, secondary, success, danger, warning et info
 Les couleurs peuvent s’appliquer au texte : text-primary
 Les couleurs peuvent s’appliquer au background : bg-primary
• Pour le texte, on a aussi : text-light, text-dark, text-muted, text-white
• En BS-5, on peut faire : text-bg-primary
Application à un <a href >

• Un <a href> est relooké par Reboot : on a une couleur primary par défaut du lien et le souligné est
supprimé. Le lien est souligné quand on passe dessus.
• On peut y ajouter un text-warning, par exemple.
Application à un <table>
<tr class="text-success table-success">
 Le table- c’est comme un bg- mais la couleur est plus pale => du coup c’est lisible.
Bootstrap 4 - 23/52
13 - Les bordures
Documentation
• https://getbootstrap.com/docs/5.0/utilities/borders/
• https://www.w3schools.com/bootstrap5/bootstrap_utilities.php
Objectif
• On veut utiliser les propriétés width, heigt, max-width et max-height
Principes
• L’usage le plus basique est : border
 <article class="border">
• On peut ajouter la largeur : border border-1 (de 1 à 5)
• On ne peut préciser : border-top, border-bottom, border-start, border-end.
• On peut ajouter la couleur : border border-primary (pour toutes les couleurs).
Arrondis : border-radius CSS

• rounded, rounded-0, rounded-1, rounded-2, rounded-3
• rounded-circle, rounded-pill (cercle, ovale)
Bootstrap 4 - 24/52
14 - Padding et margin : sizing
Documentation
• https://getbootstrap.com/docs/4.1/utilities/spacing/
Objectif
• On veut utiliser la propriétés padding et margin : p et m dans bootstrap
Principes : p et m
• p|m{sides}-{size} : p ou m {des sides} – {une size}
• Les sides peuvent être : t(op), b(ottom), l(eft), r(ight), x(horizontal), y(vertical), rien(tout)
• La size peut être : 0, 1(.25), 2(.5), 3(1 ou rien = taille des caractères), 4(1.5), 5(3), auto
Centrer
• mx-auto
Exemple
• mb-3 : ajoute un marge de niveau 3 (sur 5 max) en dessous
• mx-auto : centre le texte (ça marche plus ou moins).
• mb-3 p-3 : un padding en plus tout autour
Remarque
• Parfois ça fonctionne bizarrement !
Principes responsive : p et m
• p|m{sides}-{size} for xs : p ou m {des sides} – {une size} for
• p|m{sides}-{breakpoint}-{size} for sm, md, lg, and xl
• mb-3 mb-md-5 : ajoute un marge de 1 ligne en dessous pour tous les écran et une plus grosse
marge à partir des écrans médium.
Bootstrap 4 - 25/52
15 - Float
• Rien de particulier sur le float bootstrap
<div class="clearfix">
<p>
<img class="float-right" src="img/iceberg.png" width="200px" alt="iceberg">
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Fugiat, quam!
</p>
<p>suite du lorem</p>
</div>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ducimus, vel?</
• Documentations :
 https://www.w3schools.com/bootstrap4/bootstrap_utilities.asp
 https://getbootstrap.com/docs/4.1/utilities/float/
Bootstrap 4 - 26/52
16 - Flex
• Regardez les exemples sur w3schools :
 https://www.w3schools.com/bootstrap4/bootstrap_flex.asp
• Doc officielle : https://getbootstrap.com/docs/5.0/utilities/flex/
Bootstrap 4 - 27/52
Etape 2 : la grille de Bootstrap (15-22)
Présentation (15)
https://getbootstrap.com/docs/5.0/layout/grid/
Généralités
• La grille B4 est un concept fondamental de B4.
• La grille est le cœur de la mise en page de B4: elle permet de décider de la position et de la taille
des différents éléments.
• La grille B4 est responsive.
• La grille B4 et puissante et flexible : elle s’appuie sur les Flexbox HTML5
• La grille B4 est relativement simple à utiliser.
• La grille B4 perd de son utilité avec l’arrivée du Grid Layout de HTML-5 et du Flex
HTML-5
Principes : 12 blocs de 6 colonnes

• La grille est une division en 12 colonnes de largeur de la page.
• Les colonnes sont séparées par une « gouttière » (gutter) » taille fixe : 15px à doite et à gauche,
donc 30 px entre 2 colonnes.
• La largeur des colonnes est variable et donnée en %age.
 De là, on accroche les éléments aux colonnes de la grille.
• C’est comme si on avait un tableau à 12 colonnes ! Ce qui est plutôt… primitif comme système
de mise en page.
• Si on veut deux blocs l’un à côté de l’autre de même taille : on a 2 blocs de 6 colonnes.
• 12 c’est pratique : ce n’est pas trop grand et on peut diviser en 2, 3, 4, 6.
Bootstrap 4 - 28/52
Tester les codes avec Sublime Text :
• Pour tester, on crée un fichier test.html avec Sublime Text
• On crée la structure automatiquement : html + tabulation
• On ajoute le link du CDN dans le <head> et les scripts dans le <body>
• Ensuite on peut copier les exemples dans le <body>
• On complète les lorem automatiquement : lorem + tabulation
 Link et script :
<link rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css"
integrity="sha384-
zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn"
crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"
integrity="sha384-
DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.j
s" integrity="sha384-
fQybjgWLrvvRgtW6bFlB7jaZrFsaBXjsOMm/tB9LTS58ONXgqbR9W8oWht/amnpF"
Bootstrap 4 - 29/52
Premier exemple : container – row – col-6 (16)
Documentation
• https://getbootstrap.com/docs/5.0/layout/grid/
Principes
• On va créer 2 blocs de texte à mettre l’un à côté de l’autre : B4 propose de créer 2 div : c’est son
côté « so HTML 4 » ! On peut aussi travailler avec des balises de structuration du HTML 5.
• On va structurer ça avec un main à classe container, une section à classe row, deux articles à
classe col-6
Test :
Saisie automatique avec Sublime Text

Dans le body : main.container+tab
Dans le main : section.row+tab
Dans la section : article.border.col+tab. Ensuite on ajoute -6
border derrière le col
Dans l’article : p+tab lorem+tab
Copier coller de l’article pour en avoir un deuxième.
Bootstrap 4 - 30/52
Code
<main class="container">
<section class="row">
<article class="col-6 border bg-success">
<p>Lorem ... </p>
</article>
<article class="col-6 border bg-warning">
<p>Lorem ... </p>
</article>
</section>
</main>
 container : crée un comportement responsive et un cadre avec des marges gauche et droite.
 row : va permettre de mettre les articles en colonnes : le row définit 12 colonnes dans la
section.
 col-6 : définit la taille des articles.
• Le « row », c’est ce qui définit la grille.
• On a mis col-6, col-6 pour s’étaler sur les 12 colonnes. On pourrait avoir col-4, col-8 ou col-4,
col-4 : dans ce cas il reste de la place à droite.
• On peut aussi avoir col-6, col-10 : dans ce cas, le deuxième article démarre en dessous du premier
et s’étale sur 10 colonnes.
• Pour mettre 3 éléments côte-à-côte, on mettra par exemple 3 fois col-4.
Bootstrap 4 - 31/52
Décaler des éléments dans la grille (17) : offset-4
• On part d’une page à 3 blocs. On va décaler les blocs :
 class offset-4
<article class="col-6 border bg-primary">
<p>Lorem ... </p>
</article>
<article class="col-6 offset-4 border bg-sucess">
<p>Lorem ... </p>
</article>
<article class="col-6 offset-4 border bg-warning">
<p>Lorem ...</p>
</article>
</section>
</main>
Test :
Bootstrap 4 - 32/52
Version responsive
Résultats attendus
➢ x-small :
➢ sm :
➢ md :
➢ lg :
Principes de programmation responsive de la grile

• B4 est mobile first : on doit donc d’abord penser sa page pour un mobile, puis la faire varier si on
augmente la taille.
• Dans notre exemple, on considère que sur un mobile, les articles prennent toute la largeur : ils
sont donc col-12
• Ensuite on précise le point d’arrêt : par exemple : col-sm-6 : ça veut dire qu’à partir du point
d’arrêt small, je veux 6 colonnes.
• On peut mettre des offset (décalages) : offset-lg-3.
Bootstrap 4 - 33/52
Principes de programmation responsive de la grile
• B4 est mobile first : on doit donc d’abord penser sa page pour un mobile, puis la faire varier si on
augmente la taille.
• Dans notre exemple, on considère que sur un mobile, les articles prennent toute la largeur : ils
sont donc col-12
• Ensuite on précise le point d’arrêt : par exemple : col-sm-6 : ça veut dire qu’à partir du point
d’arrêt small, je veux 6 colonnes.
• On peut mettre des offset (décalages) : offset-lg-3.
Code
<article class="col-12 col-sm-6 col-md-4 col-lg-3 bg-primary">
<p>Lorem ipsum dolor ... </p>
</article>
<article class="col-12 col-sm-6 col-md-4 col-lg-3 offset-lg-3
bg-success">
</article>
<article class="col-12 col-sm-6 col-md-4 col-lg-3 offset-lg-3
bg-warning">
</article>
</section>
</main>
Bootstrap 4 - 34/52
Imbriquer des grilles les unes dans les autres
Bases
• Il suffit dans un bloc d’un premier niveau de grille, de définir une nouvelle grille avec un « div
class=row » ou équivalent.
• Cette nouvelle div sera une nouvelle grille de 12 colonnes. Dans cette nouvelle grille, on pourra
mettre les éléments qu’on veut en définissant leur taille et leur position.
<main class="container-fluid">
<div class="row">
<section class="col-12 col-md-9 bg-primary">
<div class="col-12 col-md-4 bg-sucess">
<img src="img/iceberg.png" alt="iceberg"
class="img-fluid img-thumbnail">
</div>
<article class="col-12 col-md-8 bg-warning">
<h1 class="h3">Lorem ipsum dolor</h1>
</article>
</section> 
</section>
<aside class="col-12 col-md-3 bg-info">
</aside>
</div> 
</main>
 Un bon usage consiste à utiliser les div ou les sections pour les row et sinon à utiliser les
balises de structuration de HTML 5.
Test : version md, sans image :
Bootstrap 4 - 35/52
Complément
• On peut mettre plusieurs sections class row avec l’image et l’article : chaque section correspond à
un article. Et on a un code responsive.
<div class="row border">
<section class="col-12 col-md-9 border bg-danger">
<div class="col-12 col-md-5 border bg-secondary">
</div>
<article class="col-12 col-md-6 border bg-primary">
<h1 class="h3">Lorem ipsum dolor 1 </h1>
</article>
<div class="col-12 col-md-5 border bg-warning">
</div>
<article class="col-12 col-md-7 border bg-success">
<h1 class="h3">Lorem ipsum dolor 2 </h1>
</article>
</section>
<aside class="col-12 col-md-3 border bg-info">
<p>Lorem ipsum dolor 3 ... </p>
</aside>
</div> 
</main>
Test : version md, sans image :
Bootstrap 4 - 36/52
Effacer un bloc : display none : d-none (20)
Objectif
• On veut effacer certaines parties du code en fonction de la taille de l’écran.
• Par exemple, supprimer un article sur un smartphone, ou supprimer des images.
Technique : propriété display du CSS

• On utilise la propriété display du CSS.
• Bootstrap permet de la manipuler avec des class :
https://getbootstrap.com/docs/4.0/utilities/display/
• Le principe de la classe à fournir est donné dans la documentation:
 .d-{value} for xs // d-none ou d-block.
 d-none efface tout. d-block affiche tout.
 .d-{breakpoint}-{value} pour sm, md, lg, and xl comme breakpoint
 d-md-none : efface à partir de md
 d-md-block : affiche à partir de md
• Bootstrap est « mobile first » : le display s’applique d’abord pour un smartphone (breakpoint xs
par défaut) et ensuite pour les autres niveaux.
• Ainsi, pour effacer au niveau smartphone on écrit : d-none d-sm-block.
 d-none efface tout.
 d-sm-block affiche à partir de sm.
Bootstrap 4 - 37/52
Exemple 1
• On avait un code avec 3 articles affichés avec des offsets (18).
• On veut ne pas afficher le dernier article en format smartphone (xs) :
 On ajoute un bg-success pour bien voir le bloc
 On ajoute d-none pour l’effacer
 On ajoute d-sm-block pour qu’il se voit à partir du format sm.
<article class="col-12 col-sm-6 col-md-4 col-lg-3 bg-
primary">
</article>
<article class=". col-sm-6 col-md-4 offset-lg-3 col-lg-3
bg-secondary">
</article>
<article class=" col-sm-6 col-md-4 offset-lg-3 col-lg-3
bg-success d-none d-md-block">
</article>
</section>
</main>
Si on ne précise pas le col, ça prend 12 par défaut.
➢ Test xs :
➢ Test sm :
➢ Test md :
➢ Test lg :
Bootstrap 4 - 38/52
Exemple 2
• Dans un exempl précédent, on avait un code de blog avec des images.
• On veut ne plus afficher les images aux format xs et sm et qu’elles ne s’affichent qu’à partir du
format md.
 On ajoute d-none pour l’effacer dans la div de l’image
 On ajoute d-md-block pour que l’image se voit à partir du format md.
• Dans le code du blog avec les images, on ajoute d-none d-md-block à toutes les div contenant
l’image :
• On avait :
<div class="col-12 col-md-5 border bg-warning">
</div>
• On ajoute d-none et d-md-block :

<div class="col-12 col-md-5 border bg-warning" d-none d-
md-block">
</div>
➢ Test xs et sm :
Bootstrap 4 - 39/52
Width et height : sizing (22)
Documentation
• https://getbootstrap.com/docs/4.1/utilities/sizing/
Objectif
• On veut utiliser la propriétés width, heigt, max-width et max-height
Principes
• On ne peut utiliser que 5 tailles : 25%, 50%, 75%, 100% et automatique
• .h-{value} avec value : 25, 50, 75, 100, auto
• .w-{value}
Exemple
• Pour w :
<div class="container bg-success">
<div class="w-25 bg-warning"> Lorem ipsum dolor sit. </div>
<div class="w-auto bg-warning"> Lorem ipsum dolor sit. </div>
</div>
• Pour h :
• Il faut préciser la taille du bloc parent pour que le h-{value} ait un effet.
• On met un d-flex dans le parent pour passer tous les enfants à l’horizontal.
<div class="container bg-primary d-flex" style="height:100px">
<div class="h-25 bg-info"> Lorem ipsum dolor sit. </div>
<div class="h-auto bg-info"> Lorem ipsum dolor sit. </div>
</div>
Bootstrap 4 - 40/52
Etape 3 : Le composant barre de navigation (31-34)
https://getbootstrap.com/docs/5.0/components/navbar/
Exemple 1 : nav, nav-item, nav-link
Résultats :
Bootstrap 4 - 41/52
Code
<body class="m-3 p-3 border border-1 border-primary">
<div class="container-fluid">
<nav class="m-3 border border-1 border-secondary bg-danger">
<ul class="nav justify-content-center nav-tabs flex-column flex-md-row ">
<li class="nav-item"><a class="nav-link" href="http://bliaudet.free.fr">Page 1 </a></li>
<li class="nav-item"><a class="nav-link" href="http://bliaudet.free.fr">Page 2</a></li>
<li class="nav-item"><a class="disabled nav-link" href="http://bliaudet.free.fr">Page 5</a></li>
</ul>
</nav>
</div>
<main class="border border-1">
<p class="p-1">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Cupiditate facere ab aliquam assumenda fuga
temporibus
obcaecati quidem. Maxime, quas error!
</p>
</main>
</body>
Principes : div container et nav

• nav : supprimer le point, met un display flex en ligne = flex-row par défaut
Principes : ul
• nav : supprimer le point, met un display flex en ligne = flex-row par défaut
• justify-content-center : pour centrer
• nav-tabs : pour faire apparaitre une case
• flex-column flex-md-row : le plus petit d’abord : en colonne, puis à partir du md : en ligne
Principes : li, a
• nav-item et nav-li pour gérer des margins et des paddings propres
• disabled : le lien du a n’est pas actif
• active : le a active apparaît avec un design à part.
Bootstrap 4 - 42/52
Exemple 2 : navbar
Documentation
https://www.w3schools.com/bootstrap4/bootstrap_navbar.asp
Bootstrap 4 - 43/52
Code
<nav class="navbar navbar-light bg-info navbar-expand-md">
<ul class="navbar-nav">
<li class="mx-2 nav-item"><a class="nav-link" href="http://bliaudet.free.fr">Page 1</a></li>
<li class="mx-2 nav-item"><a class="nav-link active" href="http://bliaudet.free.fr">Page 4</a></li>
<li class="mx-2 nav-item"><a class="nav-link disabled" href="http://bliaudet.free.fr">Page 5</a></li>
</ul>
</nav>
</div>
temporibus
</p>
</main>
</body>
Principes : bootsratp, c’est verbeux !

• navbar dans un nav, navbar-nav dans ul, nav-item dans li et nav-link dans a
 C’est vertical par défaut
• Responsive: :
 navbar-expand-md : passe à l’horizontal à partir de md
 par défaut, c’est vertical
• Stylé :
 navbar-dark ou light dans le nav,
 bg-dark ou bg-info dans le nav
 active ou disabled dans a
Bootstrap 4 - 44/52
Exemple 3 : navbar avec logo
Documentation
Résultats :
Bootstrap 4 - 45/52
Code
<a href="http://bliaudet.free.fr" class="py-2">
<img src="img/iceberg.png" width="100px" alt="iceberg"></a>
<span class="pl-2">Site du velage des icebergs</span>
<ul class="navbar-nav ml-auto">
<li class="mx-2 nav-item"><a class="nav-link active" href="http://bliaudet.free.fr">Page 4</a></li>
<li class="mx-2 nav-item"><a class="nav-link disabled">Page 5</a></li>
</ul>
</nav>
</div>
temporibus
</p>
</main>
</body>

• Même container, nav, ul, li que précédemment, sauf : ml-auto dans l’ul : la marg left auto pousse
le span à gauche.
<nav class="navbar navbar-light bg-info navbar-expand-md ">
<li class="mx-2 nav-item"><a class="nav-link"
<nav class="navbar navbar-light bg-info">
<ul class="navbar-nav navbar-expand-md ml-auto">

Bootstrap 4 - 46/52
Bootstrap 4 - 47/52
Exemple 4 : navbar-toggler pour un bouton de regroupement de menu
Documentation
Résultats :
Bootstrap 4 - 48/52
code
<span class="py-2">
<a href="http://bliaudet.free.fr">
<img src="img/iceberg.png" width="100px" alt="iceberg">
</a>
<span class="pl-2"> Site du velage des icebergs</span>
</span>
<button class="navbar-toggler" data-toggle="collapse" data-target="#div-collapse">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="div-collapse">
href="http://bliaudet.free.fr">Page 1</a></li>
<li class="mx-2 nav-item"><a class="nav-link active"
<li class="mx-2 nav-item"><a class="nav-link disabled"
</ul>
</div>
</nav>
</div>
temporibus obcaecati quidem. Maxime, quas error!
</p>
</main>
</body>
Bootstrap 4 - 49/52
• Même container, nav, ul, li que précédemment.
• Sauf que l’image et le span sont dans un span qui prend le py-2 :
<span class="py-2">>
<a href="http://bliaudet.free.fr">
<img src="img/iceberg.png" width="100px" alt="iceberg">
</a>
<span class="pl-2"> Site du velage des icebergs</span>
</span>
• On ajoute un bouton pour l’icône de menu :

<button class="navbar-toggler" data-toggle="collapse" data-target="#div-collapse">
<span class="navbar-toggler-icon"></span>
</button>
• L’ul passe dans un div avec une classe collapse :

<div class="collapse navbar-collapse" id="div-collapse">
<nav class="navbar navbar-light bg-info navbar-expand-md ">
<nav class="navbar navbar-light bg-info">
<ul class="navbar-nav navbar-expand-md ml-auto">

 A noter le lien entre l’ id = « div-collapse » dans la div et le data-target= « #div-collapse »

dans le button -> il faut du JavaScript pour que ça marche !
Bootstrap 4 - 50/52
Exemple 5 : navbar-default avec l’extension b5 de VS-Code
Installation
On a installé l’extension b5 la plus populaire.
Principes :
D’abord : !b5 + tab (ou. b4 + tab avant… langage peu stable, peu mature).
Puis dans le body :

b5-navbar-default + tab: pour créer un nav (ou b4 : le résultat est très différent : pratique).
On remplace le bg_light par un bg_red
On crée un main avec un h1 au choix. Puis, sous le h1 :

.container.mx-auto + tab
.row.row-cols-3 + tab
b4-card + tab
mettre une photo à vous, un titre et du faux texte
Copier-coller la div 5 fois.
Bootstrap 4 - 51/52
Etape 4 : template avec l’extension b5 de VS-Code
Installation
On a installé l’extension b5 la plus populaire.
Principes :
!template :
On a toute une page !!!
On peut choisir différents types de template.
Bootstrap 4 - 52/52

Bootstrap

Transféré par

Informations du document

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Bootstrap

Transféré par

Droits d'auteur :

Formats disponibles

BOOTSTRAP 4

Edition : mars 2022

Etape 0 : historique, quid, fondamentaux, installation

2 références : officielle et w3schools

Usages pratiques de Visual Studio Code

Extension Visual Studio Code

Principes : version CDN - version compilée – fichiers sources

Parfois, il y a popper en plus

<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-

• Il y a 2 versions possibles du JS : la version de base et la version bundle. La version bundle

• A noter que B4 a besoin de JQuery : jquery.com.

➢ Avec les versions compilées chargées dans les dossiers css et js :

 Il faut tester les exemples pour apprendre.

1-Reboot B4– Normalize.css

• 1 à 4 : ça augment la taille du texte (1 : beaucoup, 2, 3, 4 : moins)

• Pour augmenter un peu la taille du texte.

• Par défaut, sur smartphone, justifié, sinon en médium, à gauche.

• Le paragraphe ne passe plus à la ligne et génère une barre de défilement horizontal.

5 - Autres paramétrages du text -> documentation

Point d’arrêt et comportement « fluid » à la fin

• Menu basique avec hover :

• Pour mettre les éléments de liste côte-à-côte, 2 class :

• Pour gérer les marges entre les lis :

• Ou mettre un nav juste autour de l’ul

<figure class="figure mx-3 my-3">

Application à un <a href >

Arrondis : border-radius CSS

• Doc officielle : https://getbootstrap.com/docs/5.0/utilities/flex/

Principes : 12 blocs de 6 colonnes

Saisie automatique avec Sublime Text

Principes de programmation responsive de la grile

Test : version md, sans image :

Test : version md, sans image :

Technique : propriété display du CSS

Si on ne précise pas le col, ça prend 12 par défaut.

• On ajoute d-none et d-md-block :

Exemple 1 : nav, nav-item, nav-link

Principes : div container et nav

Principes : bootsratp, c’est verbeux !

Principes : bootsratp, c’est verbeux !

<ul class="navbar-nav navbar-expand-md ml-auto">

• On ajoute un bouton pour l’icône de menu :

• L’ul passe dans un div avec une classe collapse :

<ul class="navbar-nav navbar-expand-md ml-auto">

 A noter le lien entre l’ id = « div-collapse » dans la div et le data-target= « #div-collapse »

Puis dans le body :

On crée un main avec un h1 au choix. Puis, sous le h1 :

Copier-coller la div 5 fois.

On peut choisir différents types de template.

Vous aimerez peut-être aussi