Vous êtes sur la page 1sur 43

BOOTSTRAP 4

SOMMAIRE

Sommaire.................................................................................................................................... 1
Bootstrap - 4 ............................................................................................................................... 4
Etape 0 ................................................................................................................................................ 4
Historique (3) .................................................................................................................................................................4
Références .....................................................................................................................................................................4
B4 : quid ? (2) .................................................................................................................................................................5
Les fondamentaux de B4 (1) ..........................................................................................................................................6
Les principaux choix de B4 (4) .......................................................................................................................................7
Des outils utiles pour B4 (5)...........................................................................................................................................8
Un éditeur .................................................................................................................................................................8
Emmet .......................................................................................................................................................................8
Browsersync ..............................................................................................................................................................8
Usages pratiques de SublimeText.............................................................................................................................8
Usages pratiques d’Emmet .......................................................................................................................................8
Installer Bootstrap 4 (6) .................................................................................................................................................9
Principes ....................................................................................................................................................................9
Documentation BS ....................................................................................................................................................9
CDN BS ......................................................................................................................................................................9
Téléchargement ......................................................................................................................................................10
Les versions .............................................................................................................................................................10
Bilan ........................................................................................................................................................................10
Organisation du cours (7) ............................................................................................................................................11
Etape 1 : les styles de base (8-14) ........................................................................................................12
Reboot B4– Normalize.css (8)......................................................................................................................................12
Titres (9) .......................................................................................................................................................................12
Taille du texte ..............................................................................................................................................................13
Alignement du texte (10) .............................................................................................................................................13
Documentation concernant le paramétrage du text ..................................................................................................13
Blockquote (11)............................................................................................................................................................14
container et container-fluid.........................................................................................................................................15
Documentation .......................................................................................................................................................15
Principes ..................................................................................................................................................................15
Point d’arrêt et comportement « fluid » à la fin ....................................................................................................15
container-fluid ........................................................................................................................................................15
Les points d’arrêt pré-définis ..................................................................................................................................16
Liste ..............................................................................................................................................................................17
Tableau (12) .................................................................................................................................................................18
Documentation .......................................................................................................................................................18
Principes ..................................................................................................................................................................18
Exemple...................................................................................................................................................................19
Les images (13) ............................................................................................................................................................20
Documentation .......................................................................................................................................................20
Principes ..................................................................................................................................................................20
Exemple complet ....................................................................................................................................................21
Les couleurs (14) ..........................................................................................................................................................22
Documentation .......................................................................................................................................................22
Principes ..................................................................................................................................................................22
Application à un <a href > .......................................................................................................................................22
Application à un <table> .........................................................................................................................................22

Bootstrap 4 - 1/43
Les bordures (24) .........................................................................................................................................................23
Documentation .......................................................................................................................................................23
Objectif....................................................................................................................................................................23
Principes ..................................................................................................................................................................23
Principes ..................................................................................................................................................................23
Arrondis : border-radius CSS ...................................................................................................................................23
Padding et margin : sizing (23) ....................................................................................................................................24
Documentation .......................................................................................................................................................24
Objectif....................................................................................................................................................................24
Principes ..................................................................................................................................................................24
Centrer ....................................................................................................................................................................24
Exemple...................................................................................................................................................................24
Remarque................................................................................................................................................................24
Etape 2 : la grille de Bootsrap (15-22)...................................................................................................25
Présentation (15) .........................................................................................................................................................25
Généralités ..............................................................................................................................................................25
Principes : 12 blocs de 6 colonnes ..........................................................................................................................25
Tester les codes avec Sublime Text : ......................................................................................................................26
Premier exemple : container – row – col-6 (16) ..........................................................................................................27
Documentation .......................................................................................................................................................27
Principes ..................................................................................................................................................................27
Test :........................................................................................................................................................................27
Saisie automatique avec Sublime Text ...................................................................................................................27
Code ........................................................................................................................................................................28
Décaler des éléments dans la grille (17) : offset-4 ......................................................................................................29
Test :........................................................................................................................................................................29
Version responsive ......................................................................................................................................................30
Résultats attendus ..................................................................................................................................................30
Principes de programmation responsive de la grile ...............................................................................................30
Principes de programmation responsive de la grile ...............................................................................................31
Code ........................................................................................................................................................................31
Imbriquer des grilles les unes dans les autres .............................................................................................................32
Bases .......................................................................................................................................................................32
Test : version md, sans image : ...............................................................................................................................32
Complément ...........................................................................................................................................................33
Test : version md, sans image : ...............................................................................................................................33
Effacer un bloc : display none : d-none (20) ................................................................................................................34
Objectif....................................................................................................................................................................34
Technique : propriété display du CSS .....................................................................................................................34
Exemple 1................................................................................................................................................................35
Exemple 2................................................................................................................................................................36
Width et height : sizing (22).........................................................................................................................................37
Documentation .......................................................................................................................................................37
Objectif....................................................................................................................................................................37
Principes ..................................................................................................................................................................37
Exemple...................................................................................................................................................................37
Etape 3 : Autres mises en page : float et flex (25-30)............................................................................38
Présenation de Float (21) ............................................................................................................................................38
Présentation de Flex (15) .............................................................................................................................................38
Etape 4 : Le composant barre de navigation (31-34) .............................................................................39
Exemple 1 : nav, nav-item, nav-link .............................................................................................................................39
Principes : nav, nav-item, nav-link et flexbox .........................................................................................................39
Code ........................................................................................................................................................................39
Exemple 2 : navbar ......................................................................................................................................................40
Documentation .......................................................................................................................................................40
Principes : navbar....................................................................................................................................................40
Code ........................................................................................................................................................................40

Bootstrap 4 - 2/43
Exemple 3 : navbar avec logo ......................................................................................................................................41
Documentation .......................................................................................................................................................41
Principes : navbar-brand, navbar-text, ml-auto .....................................................................................................41
Code ........................................................................................................................................................................41
Exemple 4 : navbar-toggler pour un bouton de regroupement de menu ..................................................................43
Documentation .......................................................................................................................................................43
Principes : navbar-brand, navbar-text, ml-auto .....................................................................................................43
Code ........................................................................................................................................................................43

Edition : mars 2022

Bootstrap 4 - 3/43
BOOTSTRAP - 4

https://getbootstrap.com/docs/4.6/getting-started/introduction/
https://www.w3schools.com/bootstrap4/default.asp

Etape 0

Historique (3)
• 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)

Références
• https://getbootstrap.com/docs/4.6/getting-started/introduction/
• https://www.w3schools.com/bootstrap4/default.asp

Bootstrap 4 - 4/43
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 (framework) : c’est un cadre de travail avec des choix déjà
faits. 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/43
Les fondamentaux de B4 (1)
• 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/43
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 corresondent
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/43
Des outils utiles pour B4 (5)

Un éditeur
• Brackets, SublimeText, Atom, VS Code ou tout ce qu’on veut.

Emmet
• Emmet est un outil pour écrire du code rapidement. https://emmet.io/
• Lien pour le téléchargement
 https://emmet.io/download/
• Emmet pour VS Code :
 https://www.alphorm.com/tutoriel/formation-en-ligne-visual-studio-code-et-emmet-coder-
plus-vite
• Emmet pour Sublime Text :
 https://www.oboqo.com/blog/sublime-text-emmet-astuces-et-raccourcis-pour-developper-
sans-soucis/

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 SublimeText


• balise.class + tab :
• balise.class1.class2 + tab
• lorem +tab
• p+tab lorem+tab

Usages pratiques d’Emmet


• article*3+tab

Bootstrap 4 - 8/43
Installer Bootstrap 4 (6)

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

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 script 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.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"
crossorigin="anonymous"></script>

<script
src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.j
s" integrity="sha384-
fQybjgWLrvvRgtW6bFlB7jaZrFsaBXjsOMm/tB9LTS58ONXgqbR9W8oWht/amnpF"
crossorigin="anonymous"></script>

Bootstrap 4 - 9/43
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 - 10/43
Organisation du cours (7)
• Etape 1 : les class (styles) de base.
• Etape 2 : la grille bootstrap.
• Etape 3 : float et flex.
• Etape 4-1 : le composant « barre de navigation ».

 Il faut tester les exemples pour apprendre.

Bootstrap 4 - 11/43
Etape 1 : les styles de base (8-14)
• 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.

Reboot B4– Normalize.css (8)


• 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 ».

Titres (9)
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 - 12/43
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.

Alignement du texte (10)


class="lead text-right"

• right, left, center, justifiy (left par défaut)


• A noter les 2 classes en même temps : lead et text-right
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.

Documentation concernant le paramétrage du text


• 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 - 13/43
Blockquote (11)
• 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 - 14/43
container et container-fluid

Documentation
• https://getbootstrap.com/docs/5.0/layout/containers/

Principes
• Dans bootstrap, on va souvent placer nos éléments dans une 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 - 15/43
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 - 16/43
Liste
https://getbootstrap.com/docs/5.0/content/typography/#lists
• Pour supprimer tout style (marge de gauche et puces) :
<ul class="unstyled">

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


<ul class="list-inline">
et
<li class="list-inline-item">

• Ou alors, uniquement :
<ul class="d-flex">

• Pour gérer les marges entre les lis :


<li class="mx-3">

• En final, on préfèrera le composant « nav » : avec nav dans ul, nav-item dans li et nav-link dans a.

Bootstrap 4 - 17/43
Tableau (12)

Documentation
https://getbootstrap.com/docs/5.0/content/tables/
https://www.w3schools.com/bootstrap5/bootstrap_tables.php

Principes
• Le reboot fait quelques mises à jour de style.
 La balise <caption>, légende, apparaît après le tableau.
• Le tableau a des bordures et des paddings :
 <table class="table">
• Version sombre pour tout le tableau :
 <table class="table table-dark">
• Version grise pour le head :
 <thead class="thead-light">
• Grisé une ligne sur 2 :
 <table class="table table-stripded">
• Version sombre que pour les thead :
 <table class="thead thead-dark">
 Variante : thead-light (table-light n’existe pas) : c’est gris.
• Met des bordures partout :
 <table class="table table-bordered">
• « Highlighte » les lignes quand on passe la souris dessus :
 <table class="table table-hover">
• Tout d’un coup :
 <table class="table table-stripded table-bordered table-hover">
• Compacte un peu les padding du texte. sm pour small :
 <table class="table table-sm">

Bootstrap 4 - 18/43
Exemple
<div class="container mt-3">
<h2>Basic Table</h2>
<p>The .table class adds basic styling (light padding and
horizontal dividers) to a table:</p>
<table class="table">
<thead>
<tr>
<th>Firstname</th> <th>Lastname</th> <th>Email</th>
</tr>
</thead>
<tbody>
<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>
</tbody>
</table>
</div>

Bootstrap 4 - 19/43
Les images (13)

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 - 20/43
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 - 21/43
Les couleurs (14)

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

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 - 22/43
Les bordures (24)

Documentation
• https://getbootstrap.com/docs/5.0/utilities/borders/
• https://www.w3schools.com/bootstrap5/bootstrap_utilities.php

Objectif
• On veut utiliser la propriétés width, heigt, max-width et max-height

Principes
• p|m{sides}-{size} for xs
• p|m{sides}-{breakpoint}-{size} for sm, md, lg, and xl
• Les side peuvent être : t(op), b(ottom), l(eft), r(ight), x(horizontal), y(vertical), rien(tout)
• Les sizes peuvent être : 0, 1(.25), 2(.5), 3(1 ou rien = taille des caractères), 4(1.5), 5(3), auto

Principes
• L’usage le plus basique est : « border » :
 <article class="border">
• On ne peut préciser : boder-top, border-bottom, border-start, border-end.
• On peut ajouter la couleur : border border-primary (pour toutes les couleurs).
• On peut ajouter la largeur (border-width du CSS) : border border-1 (de 1 à 5)

Arrondis : border-radius CSS


• rounded, rounded-0, rounded-1, rounded-2, rounded-3
• rounded-circle, rounded-pill (cercle, ovale)

Bootstrap 4 - 23/43
Padding et margin : sizing (23)

Documentation
• https://getbootstrap.com/docs/4.1/utilities/spacing/

Objectif
• On veut utiliser la propriétés padding et margin

Principes
• p|m{sides}-{size} for xs
• p|m{sides}-{breakpoint}-{size} for sm, md, lg, and xl
• Les side peuvent être : t(op), b(ottom), l(eft), r(ight), x(horizontal), y(vertical), rien(tout)
• Les sizes peuvent ê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 1 ligne (1 hauteur de caractère) en dessous
• mx-auto : centre le texte
• mb-3 p-3 : un padding en plus tout autour
• 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.

Remarque
• Parfois ça fonctionne bizarrement !

Bootstrap 4 - 24/43
Etape 2 : la grille de Bootsrap (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.

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 - 25/43
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"
crossorigin="anonymous"></script>

<script
src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.j
s" integrity="sha384-
fQybjgWLrvvRgtW6bFlB7jaZrFsaBXjsOMm/tB9LTS58ONXgqbR9W8oWht/amnpF"
crossorigin="anonymous"></script>

Bootstrap 4 - 26/43
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 - 27/43
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 - 28/43
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
<main class="container">
<section class="row">
<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 - 29/43
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 - 30/43
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
<main class="container">
<section class="row">
<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">
<p>Lorem ipsum dolor ... </p>
</article>
<article class="col-12 col-sm-6 col-md-4 col-lg-3 offset-lg-3
bg-warning">
<p>Lorem ipsum dolor ... </p>
</article>
</section>
</main>

Bootstrap 4 - 31/43
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">
<section class="row">
<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>
<p>Lorem ipsum dolor ... </p>
</article>
</section> <!-- End section row niveau 2 -->
</section>
<aside class="col-12 col-md-3 bg-info">
<p>Lorem ipsum dolor ... </p>
</aside>
</div> <!-- End div row niveau 1 -->
</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 - 32/43
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.
<main class="container-fluid">
<div class="row border">
<section class="col-12 col-md-9 border bg-danger">

<section class="row">
<div class="col-12 col-md-5 border bg-secondary">
<img src="img/iceberg.png" alt="iceberg"
class="img-fluid img-thumbnail">
</div>
<article class="col-12 col-md-6 border bg-primary">
<h1 class="h3">Lorem ipsum dolor 1 </h1>
<p>Lorem ipsum dolor ... </p>
</article>
</section> <!-- End section row niveau 2 -->

<section class="row">
<div class="col-12 col-md-5 border bg-warning">
<img src="img/iceberg.png" alt="iceberg"
class="img-fluid img-thumbnail">
</div>
<article class="col-12 col-md-7 border bg-success">
<h1 class="h3">Lorem ipsum dolor 2 </h1>
<p>Lorem ipsum dolor ... </p>
</article>
</section> <!-- End section row niveau 2 -->

</section>
<aside class="col-12 col-md-3 border bg-info">
<p>Lorem ipsum dolor 3 ... </p>
</aside>
</div> <!-- End div row niveau 1 -->
</main>

Test : version md, sans image :

Bootstrap 4 - 33/43
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 - 34/43
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.
<main class="container-fluid">
<section class="row">
<article class="col-12 col-sm-6 col-md-4 col-lg-3 bg-
primary">
<p>Lorem ipsum dolor 1 ... </p>
</article>
<article class=". col-sm-6 col-md-4 offset-lg-3 col-lg-3
bg-secondary">
<p>Lorem ipsum dolor 2 ... </p>
</article>
<article class=" col-sm-6 col-md-4 offset-lg-3 col-lg-3
bg-success d-none d-md-block">
<p>Lorem ipsum dolor 3 ... </p>
</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 - 35/43
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">
<img src="img/iceberg.png" alt="iceberg"
class="img-fluid img-thumbnail">
</div>

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


<div class="col-12 col-md-5 border bg-warning" d-none d-
md-block">
<img src="img/iceberg.png" alt="iceberg"
class="img-fluid img-thumbnail">
</div>

➢ Test xs et sm :

Bootstrap 4 - 36/43
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-50 bg-warning"> Lorem ipsum dolor sit. </div>
<div class="w-75 bg-warning"> Lorem ipsum dolor sit. </div>
<div class="w-100 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-50 bg-info"> Lorem ipsum dolor sit. </div>
<div class="h-75 bg-info"> Lorem ipsum dolor sit. </div>
<div class="h-100 bg-info"> Lorem ipsum dolor sit. </div>
<div class="h-auto bg-info"> Lorem ipsum dolor sit. </div>
</div>

Bootstrap 4 - 37/43
Etape 3 : Autres mises en page : float et flex (25-30)

Présenation de Float (21)


• https://getbootstrap.com/docs/4.1/utilities/float/
 A noter que float ne marche pas très bien en BS-5 (mars 2022).

Présentation de Flex (15)


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

Bootstrap 4 - 38/43
Etape 4 : Le composant barre de navigation (31-34)

https://getbootstrap.com/docs/5.0/components/navbar/

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

Principes : nav, nav-item, nav-link et flexbox


• nav dans ul, nav-item dans li et nav-link dans a
• On retrouve les propriétés des flexbox :
 justify-content-center, ou start, ou end : pour centrer, caler à gauche ou à droite
 nav-justified ou nav-fill : pour étaler sur toute la largeur (avec justified, ça à la même
largeur)
 flex-column : on revient en colonnes
 flex-md-row : à partir du medium, je passe en ligne
• Stylé : activeou disabled dans a

Code
<div class="container-fluid">
<nav class="">
<ul class="nav nav-tabs justifiy-content-center flex-column
flex-md-row">
<li class="nav-item"><a class="active 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="nav-link"
href="http://bliaudet.free.fr">Page 3</a></li>
<li class="nav-item"><a class="nav-link"
href="http://bliaudet.free.fr">Page 4</a></li>
<li class="nav-item"><a class="disabled nav-link"
href="http://bliaudet.free.fr">Page 5</a></li>
</ul>
</nav>
</div>

Bootstrap 4 - 39/43
Exemple 2 : navbar

Documentation
https://getbootstrap.com/docs/4.0/components/navbar/
https://www.w3schools.com/bootstrap4/bootstrap_navbar.asp

Principes : navbar
• 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
 Il faut ajouter mx-2 aux li
• Stylé : navbar-dark dans le nav, bg-dark dans le nav, active ou disabled dans a
 On peut aussi mettre navbar-light bg-info
 On peut aussi mettre le bg- dans l’ul

Code
<nav class="navbar navbar-light bg-info">
<ul class="navbar-nav navbar-expand-md">
<li class="mx-2 nav-item"><a class="nav-link active"
href="http://bliaudet.free.fr">Page 1</a></li>
<li class="mx-2 nav-item"><a class="nav-link"
href="http://bliaudet.free.fr">Page 2</a></li>
<li class="mx-2 nav-item"><a class="nav-link"
href="http://bliaudet.free.fr">Page 3</a></li>
<li class="mx-2 nav-item"><a class="nav-link"
href="http://bliaudet.free.fr">Page 4</a></li>
<li class="mx-2 nav-item"><a class="disabled nav-link"
href="http://bliaudet.free.fr">Page 5</a></li>
</ul>
</nav>

Bootstrap 4 - 40/43
Exemple 3 : navbar avec logo

Documentation
https://getbootstrap.com/docs/4.0/components/navbar/
https://www.w3schools.com/bootstrap4/bootstrap_navbar.asp

Principes : navbar-brand, navbar-text, ml-auto


• On ajoute un logo (une image) dans la navbar : un <a> avec une image cliquable. Le <a> aura
une class navbar-brand.
• On ajoute text derrière dans un span avant l’ul. Le span à une class navbar-text.
• On décale le menu à droite : l’ul a une class ml-auto.

• Remarque : c’est bien bien spécifique, mais le résultat est joli.

Code
<nav class="navbar navbar-expand-md navbar-light bg-info">
<a href="http://bliaudet.free.fr" class="navbar-brand">
<img src="img/iceberg.png" width="100px" alt="iceberg"></a>
<span>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 1</a></li>
<li class="mx-2 nav-item"><a class="nav-link"
href="http://bliaudet.free.fr">Page 2</a></li>
<li class="mx-2 nav-item"><a class="nav-link"
href="http://bliaudet.free.fr">Page 3</a></li>
<li class="mx-2 nav-item"><a class="nav-link"
href="http://bliaudet.free.fr">Page 4</a></li>
<li class="mx-2 nav-item"><a class="disabled nav-link"
href="http://bliaudet.free.fr">Page 5</a></li>
</ul>
</nav>



Bootstrap 4 - 41/43
Bootstrap 4 - 42/43
Exemple 4 : navbar-toggler pour un bouton de regroupement de menu

Documentation
https://getbootstrap.com/docs/4.0/components/navbar/
https://www.w3schools.com/bootstrap4/bootstrap_navbar.asp

Principes : navbar-brand, navbar-text, ml-auto


• On ajoute un button avec une class navbar-toggler et un span dedans avec une class navbar-
toggler-icon.
• On met l’icone est son span dans un span
 Désormais, on a le bouton de regroupement.
• On met l’ul dans une div avec une class collapse navbar-collapse
 Désormais, le menu vertical a disparu et le bouton est à droite, mais il est inactif.
• Pour rendre le bouton actif, c’est technique :
 on ajoute data-toggle= « collapse » au button
 on ajoute un id à la div du collapse : id = « div-collapse »
 on ajoute data-target= « #div-collapse » dans le button
 Il faut forcément avoir le chargement des script JavaScript.

Code
<nav class="navbar navbar-expand-md navbar-light bg-info">
<span><a href="http://bliaudet.free.fr" class="navbar-brand">
<img src="img/iceberg.png" width="100px" alt="iceberg"></a>
<span>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">
<ul class="navbar-nav ml-auto">
<li class="mx-2 nav-item"><a class="nav-link active"
href="http://bliaudet.free.fr">Page 1</a></li>
<li class="mx-2 nav-item"><a class="nav-link"
href="http://bliaudet.free.fr">Page 2</a></li>
<li class="mx-2 nav-item"><a class="nav-link"
href="http://bliaudet.free.fr">Page 3</a></li>
<li class="mx-2 nav-item"><a class="nav-link"
href="http://bliaudet.free.fr">Page 4</a></li>
<li class="mx-2 nav-item"><a class="disabled nav-link"
href="http://bliaudet.free.fr">Page 5</a></li>
</ul>
</div>
</nav>

Bootstrap 4 - 43/43

Vous aimerez peut-être aussi