Ce document présente une initiation au framework CSS Bootstrap, abordant des objectifs tels que le positionnement de contenu, la création de barres de navigation et la mise en forme de tableaux et formulaires. Des instructions méthodologiques et techniques sont fournies pour travailler efficacement avec Bootstrap, ainsi que des exemples illustrant ses fonctionnalités. Il souligne l'importance du responsive design et la structure de la grille, et propose des liens vers la documentation officielle de Bootstrap.

1. Initiation à Bootstrap
Sept. 2021
1
Abdoulaye Dieng

2. Objectif général
Prendre en main le framework CSS le plus utilisé
2

3. Objectifs opérationnels
• Positionner du contenu avec le système de grille
• Créer des barres de navigation
• Mettre en forme des tableaux
• Créer des formulaires
• Créer des boutons
• Mettre en forme des images
3

4. Méthodologie du cours
• Alternance théorie et pratique
• Nombreux exemples de code permettant d’illustrer le
fonctionnement et les effets de chaque fonctionnalité de
manière pratique.
• Éviter de copier-coller les codes : « coder s’apprend en codant »
• Modifier ensuite les codes pour s’en approprier
4

5. Sommaire
1) Grille
2) Barres de navigation
3) Tables
4) Formulaires
5) Boutons
6) Images
5

6. Présentation de Bootstrap
• Pb : comment mettre en forme efficacement
(rapidité, facilité, portabilité, responsive, …)
le contenu Web ?
• Sol : Framework HTML, CSS et JavaScript
contenant de nombreux composants prêts à
l’emploi : menus, boutons, tableaux, images,
formulaires, icônes, etc.
• Bootstrap est développé par des ex-employés
de Twitter : Mark Otto et Jacob Thornton
• Bootstrap est publié en 2011 sur Github et en
devient le projet open source le plus
populaire en 2012
• Bootstrap est « mobile first » et intègre le
responsive design 6

7. Environnement de travail
étapes
1) Créez un dossier de travail nommé par exemple
exemples-bootstrap
2) Téléchargez bootstrap-4.x.x-dist.zip
3) Désarchivez bootstrap-4.x.x-dist.zip
4) Copiez les répertoires css, js et font dans le dossier de travail
5) Téléchargez et ajoutez jquery-x.x.x.min.js au sous-dossier js du
dossier de travail
6) Créez, dans le dossier de travail, le fichier index.html avec le
contenu présenté à la diapo suivante
7

8. Environnement de travail
template de base
8

9. Grille
présentation
• Grille = découpage en lignes et en colonnes de la page
• Objectif : créer une mise en page en attribuant une ou
+sieurs colonne(s) aux contenus
• Nombre maximal de colonnes dans une ligne = 12
• Au delà de 12, les colonnes d’une ligne s’empilent grâce au
responsive
9
1 2 3 4 5 6 7 8 9 10 11 12
Largeur totale
1/2 1/2
2/3 1/3

10. Grille
devices
Extra small
(phone
portrait)
Small
(phone
paysage)
Medium
(Tablette)
Large
(Ordi)
Extra large
(large
Ordi)
Valeur de
référence
< 576 px >= 576 px >= 768 px >= 992 px >= 1200 px
lettres de
classe
xs sm md lg xl
10

11. Grille
quelques règles
• Toute ligne (classe row dans une <div>) doit être incluse dans un
conteneur (classe .container ou .container-fluid dans une <div>)
• Une ligne permet de créer une rangée de colonnes (<div> avec la
classe col-device-n
 device = sm, md, lg ou xl ; par défaut = xs
 n = nombre de colonnes ; par défaut = nbr de col disponibles.
• Une classe .col-device affecte l’écran correspondant mais aussi
tout autre écran plus grand dont la classe est absente
• Seules les colonnes doivent être des fils d’une ligne
• Une ligne contenant des colonnes peut être incluse dans une autre
colonne
• Décaler (.offset-device-n) un contenu de n colonnes vers la droite
• .col-{breakpoint}-auto affecte les colonnes en fonction du contenu
11

12. Grille
exemple-grille.html
12

13. Barres de navigation
minimale
• Syntaxe
 Classe navbar dans une <nav>
 Classe navbar-light ou navbar-dark : couleur de texte
foncée ou claire de la barre
 .navbar-expand{-xl|-lg|-md|-sm} : afficher le menu
horizontalement en fonction de l’écran
 .navbar-nav dans une <ul>, enfant de nav
 .nav-item dans chaque li dont l’actif est repéré par la
classe active
 Une ancre avec .nav-link dans chaque élément de liste
• Exemple
13

14. Barres de navigation
placement et contenus
• Placement : .fixed-{top|bottom} dans nav
• Nom de marque : .navbar-brand
• Texte : .navbar-text
• Formulaire de recherche : .form-online dans form
14

15. Barres de navigation
exemple-barre-navigation.html
15

16. Tableaux
lignes de séparation horizontales
• Classe table dans <table>
• Exemple
16

17. Tableaux
couleurs
• .table à table
• Inverser les couleurs (avant et arrière plan) par défaut :
.table-dark à table
• Couleur de fond de l’entête :
.thead-light (gris-clair) ou .thead-dark (noir) à thead
• Tableau zébré : .table-striped à table
• Exemple
17

18. Tableaux
exemple-couleurs-tableau.html
18

19. Tableaux
bordures
• .table à table
• Ajouter des bordures aux cellules et autour du tableau :
.table-bordered à table
• Supprimer les bordures des cellules et du tableau :
.table-borderless à table
• Exemples
19

20. Tableaux
adaptables
• Ajouter une barre de défilement horizontale interne aux
tableaux dont les lignes seraient plus grandes que leur
conteneur
• .table-responsive au conteneur (une div par exemple) du
table
20

21. Formulaires
contrôles occupent toute la largeur disponible
• Classe form-control dans text, textarea ou select
• Exemple (à faire)
21

22. Formulaires
espacement des contrôles
• Classe form-group dans une <div> contenant un contrôle
et son label
• Exemple (à faire)
22

23. Formulaires
horizontales
• .form-group et .row à une div contenant un contrôle et son label
• .col-device-n à label
• .col-form-label à label : centrer verticalement le label et son
contrôle
• .col-device-n à une div contenant le contrôle
• Exemple (à faire)
23

24. Formulaires
exemple-horizontal-form.html
24

25. Formulaires
radio & checkbox
• .form-check à une div contenant un input et son label
• .form-check-input à input
• .form-check-label à label
• Exemple (à faire)
25

26. Formulaires
exemple-radio-checkbox.html
26

27. Boutons
types
• À la balise <button>, ajoutez la classe btn accompagnée de
l’une des classes btn-primary, btn-secondary, btn-success,
btn-danger, btn-warning, btn-info, btn-light, btn-dark
ou btn-link
• Exemples
27

28. Boutons
bordures
• À la balise <button>, ajoutez la classe btn accompagnée de
l’une des classes btn-outline-primary, btn-outline-secondary,
btn-outline-success, btn-outline-danger, btn-outline-
warning, btn-outline-info, btn-outline-light ou btn-outline-
dark
• Exemples
28

29. Boutons
dimensions et affichage
• Aux classes de base précédentes, ajoutez l’une des classes
btn-lg (large), btn-sm (petit) ou btn-block (type bloc)
• Exemples (à faire)
29

30. Images
bordures
• Ajouter à img l’une des classes rounded, rounded-circle ou
img-thumbnail
• Exemples (à faire)
30

31. Images
responsive - alignement
• .img-fluid à img pour que l’image s’adapte à son conteneur
• Centrer une image avec les options
• .text-center à un conteneur de l’image
• .d-block (pour « display : block ») et .mx-auto (marges
latérales à auto) à l’mage dont la largeur doit être fixée
• faire flotter une image à gauche ou à droite avec .float-
left ou .float-right.
31

32. Documentation
• https://getbootstrap.com/docs/4.5/layout/grid/
• https://getbootstrap.com/docs/4.5/components/navbar/
• https://getbootstrap.com/docs/4.5/content/tables/
• https://getbootstrap.com/docs/4.5/components/forms/
• https://getbootstrap.com/docs/4.5/components/buttons/
• https://getbootstrap.com/docs/4.5/content/images/
32