Le document présente une initiation au framework Bootstrap, ses objectifs opérationnels et son installation pour la création de mises en page web réactives. Il décrit également des éléments clés tels que les grilles, les barres de navigation, les formulaires, les images et les pages d'atterrissage, tout en fournissant des exemples de syntaxe pour chaque composant. Bootstrap, développé par d'anciens employés de Twitter, est devenu l'un des frameworks les plus populaires pour le développement de sites web.

1. Initiation à Bootstrap
Mai 2018Abdoulaye Dieng
ESMT / LIPMEN 3 M@RDI (Marketing Digital)

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

3. Objectifs opérationnels
• Positionner du contenu avec le système de grille
• Créer des barres de navigation
• Créer un fil d’Ariane
• Mettre en forme des listes
• Mettre en forme des tableaux
• Créer des formulaires
• Créer des boutons
• Mettre en forme des images
• Créer une page d’atterrissage

4. Sommaire
1) Grille
2) Barres de navigation
3) Fil d’Ariane
4) Listes
5) Tableaux
6) Formulaires
7) Boutons
8) Images
9) Page d’atterrissage

5. Présentation de Bootstrap
• Pb : comment standardiser la boîte à outils
de mise en forme des pages Web ?
• Framework HTML, CSS et JavaScript
contenant de nombreux composants prêts à
l’emploi : menus, boutons, tableaux, images,
formulaires, icônes, etc.
• Bootstrap est dévelopé 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 permet le
responsive design

6. Installation de Bootstrap
• En local
1) Téléchargez la dernière version stable actuelle (11/05/18)
https://github.com/twbs/bootstrap/releases/download/v4.
1.0/bootstrap-4.1.0-dist.zip
2) Désarchivez dans votre répertoire racine
3) Fichiers de base à lier avec les pages HTML
• css/bootstrap.min.css
• js/ bootstrap.min.js (dépend de jQuery)
• En ligne
CDN (Content Network Delivery)
https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstr
ap.min.css
https://code.jquery.com/jquery-3.3.1.slim.min.js
https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstra
p.min.js

7. 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
1 2 3 4 5 6 7 8 9 10 11 12
Largeur totale
1/2 1/2
2/3 1/3

8. Grille
devices
Très petit écran
(Smartphone)
Petit écran
(Tablette)
Écran moyen
(Ordinateur)
Écran large
(Ordinateur)
Valeur de
référence
< 768 px >= 768 px >= 992 px >= 1200 px
Prefixe de
classe
.col-xs- .col-sm- .col-md- .col-lg-
Conteneur
maximum
Automatique 750 px 970 px 1170 px

9. 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>)
• Seules les colonnes (<div> munie de la classe col-device-n avec
device = xs, sm, md ou lg et n = nombre de colonnes) doivent
être des enfants d’une ligne
• Tout contenu doit être inclus dans une colonne
• Une ligne contenant des colonnes peut être incluse dans une autre
colonne
• Décaler (.col-device-offset-n) un contenu de n colonnes vers la
droite

10. Grille
exemple

11. Grille
TP
• Ajoutez la classe well de Bootstrap à toute ligne
• Créez une classe box-col (fond blanc et bordure noire) à
ajouter à toute colonne

12. Barres de navigation
par défaut
• Syntaxe
 les classes navbar et navbar-default dans une <nav>
 Inclure, entre les balises de nav, une <ul> avec la classe nav
accompagnée de la classe navbar-nav
 li pour les items de navigation dont l’actif est repéré par la
classe active
• Exemple

13. Barres de navigation
à fond noir
• Syntaxe
Dans la <nav>, remplacez la classe navbar-default par la
classe navbar-inverse
• Exemple

14. Barres de navigation
fixées
• Syntaxe
Dans la <nav>, ajoutez la classe navbar-fixed-top ou la
classe navbar-fixed-bottom

15. Fil d’Ariane
• Fil d’Ariane : aide à la navigation permettant à l’internaute de se
localiser dans le site
• Syntaxe
 Classe breadcrumb dans <ul>
 Classe active pour définir l'élément actif de la liste
 Inclure une ancre dans chaque élément non-actif de la liste
• Exemple

16. Listes
sans style
• Syntaxe
classe .list-unstyled dans <ul> ou <ol>
• Exemple (à faire)

17. Listes
en ligne
• Syntaxe
classe .list-inline dans <ul> ou <ol>
• Exemple

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

19. Tableaux
à rayures
• Classe table-striped dans <table>
• Exemple

20. Tableaux
bordures
• Classe table-bordered dans <table>
• Exemple (à faire)

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

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

23. Formulaires
en ligne
• Classe form-inline dans <form>
• Exemple

24. Formulaires
horizontales
• Classe form-horizontal dans form
• Classe control-label dans label
• Utiliser les classes de grille pour aligner les labels et les
champs dans une disposition horizontale
• Exemple (à faire)

25. Boutons
types
• À la balise <button>, ajouter la classe btn accompagnée de
l’une des classes btn-default, btn-primary, btn-success,
btn-info, btn-warning, btn-danger ou btn-link
• Exemples

26. Boutons
dimensions
• Aux classes de base précédentes (exple : btn btn-default),
ajoutez l’une des classes btn-lg, btn-sm ou btn-xs
• La classe btn-block permet au bouton de s’étendre sur
toute la largeur de son conteneur
• Exemples

27. Images
bordures
• Ajouter à img l’une des classes img-rounded, img-circle ou
img-thumbnail
• Exemples

28. Images
responsive - centrage
• Classe img-responsive à img pour que l’image
s’adapte à son conteneur
• Classe center-block à img pour centrer l’image dans
son conteneur

29. Page d’atterrissage
présentation
• Page d’atterrissage (landing page) : page Web visant à accomplir
un objectif de conversion
• Qlq objectifs de conversion : vendre un produit ou un service,
inscrire à un newsletter, faire remplir un formulaire, abonner à un
blog, …
• Principaux contenus
 Contenus pertinents p/r à la page référente ou de provenance
 Titre qui incite l’internaute à poursuivre
 Bénéfices que retirera l’internaute
 Image illustrative du produit ou du service
 Bouton d’appel à l’action bien visible

30. Page d’atterrissage
à réaliser
Avec Bootstrap, créez une page d’atterrissage inspirée d’une
autre, trouvée sur le Web