8/10/2019 Prenez en Main Bootstrap
1/317
8/10/2019 Prenez en Main Bootstrap
2/317
8/10/2019 Prenez en Main Bootstrap
3/317
8/10/2019 Prenez en Main Bootstrap
4/317
Sauf mention contraire, le contenu de cet ouvrage est publi sous la licence :Creative Commons BY-NC-SA 2.0
La copie de cet ouvrage est autorise sous rserve du respect des conditions de la licenceTexte complet de la licence disponible sur : http : //creativecommons.org/licenses/by-nc-sa/2.0/fr/
Mentions lgalesConception couverture et illustrations chapitres : amalgam impression
OpenClassrooms 2014 - ISBN : 979-10-90085-62-6
8/10/2019 Prenez en Main Bootstrap
5/317
8/10/2019 Prenez en Main Bootstrap
6/317
Avant-propos
Quand on cre des sites web, on passe beaucoup de temps composer des pages
isoles ou des templates. Combiner le HTML et le CSS nest pas toujours des plusfaciles. Dautre part, la multiplication des supports de visualisation (allant despetits crans de smartphones des crans gants) complique le problme. On finit parse crer peu peu une librairie personnelle qui volue au gr des progrs technologiques.Cest ce qui sest pass chez Twitter, o chaque dveloppeur avait cr sa librairie et oil devenait vraiment difficile de maintenir une cohrence et surtout de faire voluer lesapplications. Cest alors que Mark Otto et Jaconb Thornton se sont attels la tche decrer une librairie commune. Le succs fut rapide, tant au sein de cette entreprise qulextrieur, o elle a rpondu une attente vidente. Le fait dadopter cette librairiema fait gagner un temps considrable, dcouvrir des aspects qui mavaient chapps,
et en comprendre dautres qui demeuraient un peu abscons jusque l. Les critiquesconcernant lhomognisation visuelle des sites utilisant cette librairie ne rsistent pas la pratique, parce quil est facile dorganiser son propre visuel une fois quon matriseun peu ses arcanes, ce qui est lun des propos de cet ouvrage dinitiation.
Bootstrap
Vous crez des pages web et vous passez beaucoup (trop) de temps avec le CSS ?Alors Bootstrap est fait pour vous et ce cours va vous guider dans la dcouverte de
cette puissante bote outils. Bootstrap est un framework qui peut rendre votre vieplus facile pour crer larchitecture dune page web. Mais Bootstrap va bien plus loinquoffrir du code CSS dj bien organis et structur. Il offre aussi des plugins jQueryde qualit pour enrichir vos pages.
Quallez-vous apprendre en lisant ce livre ?
Ce livre est destin vous guider dans lapprentissage de Bootstrap en abordant lesnotions de faon progressive et abondamment illustre dexemples pratiques. Je laiconu comme le guide que jaurais aim possder quand jai dcouvert cette librairie. Aufil de son criture, jai rencontr des notions qui mavaient chappes ou sur lesquellesjtais pass trop rapidement. la fin de cette lecture, et si vous tudiez les exemples
i
8/10/2019 Prenez en Main Bootstrap
7/317
CHAPITRE 0. AVANT-PROPOS
proposs, vous serez capables dutiliser efficacement cette librairie et de ladapter vosbesoins particuliers. Voici les chapitres du cours et une prsentation succincte de cequils proposent.
1. Mise en route : pour utiliser efficacement Bootstrap, vous devez dj treconvaincu de son utilit et vous devez aussi savoir linstaller. Ce chapitre estdestin vous faire dcouvrir en quoi Bootstrap peut vous aider, et commentvous devez le mettre en uvre pour lutiliser efficacement. Nous aborderons ga-lement les Medias Queries que Bootstrap utilise pour que nos pages sadaptentautomatiquement au support utilis pour les visualiser.
2. Une grille ? Lorganisation spatiale des pages web est lune des premires pr-occupations lorsque lon cre un site web. Est-ce quon prvoit une bannire ?
Faut-il un espace pour un menu gauche ou en haut ? Y aura-t-il des blocs surun des cts pour recevoir certaines fonctionnalits comme la connexion ou desinformations ? Faut-il prvoir un bas de page ? Bootstrap ne rpond videmmentpas ces questions, mais en revanche il peut grandement vous faciliter la tche,avec son systme de grille, pour obtenir le rsultat que vous souhaitez. Je vouspropose une petite visite guide. . .
3. Un peu de pratique : Nous avons vu en dtail les possibilits de la grille deBootstrap. Nous avons vu galement comment faire des mises en pages adaptes diffrents types de supports. Il est temps maintenant de mettre en application
toutes ces connaissances avec des applications pratiques.
4. lments de base :Une page web contient du texte et des images mais aussi uncertain nombre dlments trs frquents, comme des listes, des tableaux, des for-mulaires, des icnes, des boutons... Crer une harmonie dans la prsentation destous ces lments nest pas une tche aise. Nous allons voir comment Bootstrappermet de crer un rendu visuel cohrent pour que tous ces lments cohabitentde faon esthtique.
5. Les composants intgrs :Bootstrap propose des composants bien pratiques
mettre en uvre : barre de navigation, effets typographiques, panneaux, thumb-nails. . . et tout a, sans crire une seule ligne de code Javascript. Nous verronsaussi alertes et barres de progression qui demandent un peu de Javascript pourtre mises en uvre. . .
6. Les plugins jQuery : jQuery est un framework Javascript devenu incontour-nable au fil des annes. Les crateurs de Bootstrap lont choisi pour offrir desplugins esthtiques et faciles mettre en uvre, dans la plupart des cas sansmme mettre les doigts dans du code ! Toutefois, si vous voulez obtenir le meilleurde ces plugins, il vous faudra un peu manipuler jQuery.
7. Configurer Bootstrap : Utiliser directement ce que nous offre Bootstrap cestbien, mais le modifier pour le rendre exactement adapt nos besoins cest encoremieux. Alors, si vous voulez bidouiller Bootstrap, ce chapitre est fait pour vous !
ii
8/10/2019 Prenez en Main Bootstrap
8/317
COMMENT LIRE CE LIVRE ?
Comment lire ce livre ?
Suivez lordre des chapitres
Lisez ce livre comme on lit un roman : il a t conu comme tel. Contrairement beaucoup de livres techniques o il est courant de lire en diagonale et de sauter certainschapitres, ici il est trs fortement recommand de suivre lordre du cours, moins quevous ne soyez dj un peu expriments (et trs sr de vous).
Pratiquez en mme temps
Pratiquez rgulirement. Nattendez pas davoir fini la lecture de ce livre pour faire
vos propres essais; nhsitez pas modifier les codes donns en exemples, afin debien cerner le comportement de chaque instruction. Plus vous vous exercerez, et pluslapprentissage sera rapide et efficace.
Remerciements
Rdiger un livre est toujours une aventure la fois personnelle et partage. Je suisdj lauteur de 3 ouvrages dans des domaines trs loigns de linformatique, mais quimont donn loccasion de dcouvrir le monde de ldition. Je dois dire que le dialogue
avec lquipe dOpenClassrooms, simple et rafrachissant, change de celui que jai puexprimenter par ailleurs. Jai aussi envie de remercier les lecteurs de mon cours sur lesite qui mont beaucoup encourag. Je me suis ainsi rendu compte de son utilit.
iii
8/10/2019 Prenez en Main Bootstrap
9/317
CHAPITRE 0. AVANT-PROPOS
iv
8/10/2019 Prenez en Main Bootstrap
10/317
Table des matires
Avant-propos i
Bootstrap . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . i
Quallez-vous apprendre en lisant ce livre ? . . . . . . . . . . . . . . . . . . . . i
Comment lire ce livre ? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . iii
Suivez lordre des chapitres . . . . . . . . . . . . . . . . . . . . . . . . . iii
Pratiquez en mme temps . . . . . . . . . . . . . . . . . . . . . . . . . . iiiRemerciements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . iii
I Premiers pas 1
1 Mise en route 3
Un framework ? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4
Les intrts . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4Les inconvnients . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5
Dcouverte de Bootstrap . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5
Origine de Bootstrap . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5
Contenu du kit . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5
volution de Bootstrap . . . . . . . . . . . . . . . . . . . . . . . . . . . 6
Installation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7
Installation de Bootstrap . . . . . . . . . . . . . . . . . . . . . . . . . . 7Les CDN . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10
Une trame pour dmarrer . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11
v
8/10/2019 Prenez en Main Bootstrap
11/317
TABLE DES MATIRES
Le template de base . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11
Un template de dmarrage . . . . . . . . . . . . . . . . . . . . . . . . . . 12
Les Media Queries . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15
2 Une grille ? 19
Prsentation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20
Le principe dune grille . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20
Terminologie . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20
La grille de Bootstrap . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21
Organisation de la grille . . . . . . . . . . . . . . . . . . . . . . . . . . . 21
La grille en pratique . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27Le conteneur . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27
Une seule range . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28
Plusieurs ranges . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28
Sauter des colonnes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29
Imbrication dlments . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31
Ordre des colonnes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32
Un petit TP . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33
Mise en page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34
Premier cas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34
Second cas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35
Troisime cas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 37
Quatrime cas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 40
3 Un peu de pratique 45
Combiner les formats et exemple de page . . . . . . . . . . . . . . . . . . . . 46Combinaison de classes col-* . . . . . . . . . . . . . . . . . . . . . . 46
Page dexemple . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 49
Cas pratiques et classes responsive . . . . . . . . . . . . . . . . . . . . . . 56
Exercice 1 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 56
Exercice 2 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 64
II Mise en forme des lments 71
4 Elments de base 73
vi
8/10/2019 Prenez en Main Bootstrap
12/317
TABLE DES MATIRES
Listes, descriptions et tableaux . . . . . . . . . . . . . . . . . . . . . . . . . . 74
Les listes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 77
Descriptions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 80
Les tableaux . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 81
Formulaires . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 86
Formulaire de base . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 86
La page dexemple . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 89
Formulaire horizontal . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 97
Formulaire en ligne . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 99
Les classes input-group, input-group-addon et input-group-btn luvre 100
Dimension des contrles . . . . . . . . . . . . . . . . . . . . . . . . . . . 102
Stylisation selon ltat . . . . . . . . . . . . . . . . . . . . . . . . . . . . 103
Un gnrateur de formulaire . . . . . . . . . . . . . . . . . . . . . . . . . 106
Boutons, icnes et images . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 108
La page dexemple . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 108
Des jolis boutons . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 113
De jolies icnes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 120
Mise en forme des images . . . . . . . . . . . . . . . . . . . . . . . . . . 124
5 Les composants intgrs 127
La navigation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 128
La page dexemple . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 128
Une barre de navigation . . . . . . . . . . . . . . . . . . . . . . . . . . . 128
La pagination . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 135
Aide la navigation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 140Effets typographiques et thumbnails . . . . . . . . . . . . . . . . . . . . . . . 140
La page dexemple . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 140
Jumbotron . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 142
Des libells colors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 143
Des badges . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 144
Thumbnails . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 146
Listes groupes, panneaux et mdias . . . . . . . . . . . . . . . . . . . . . . . 150La page dexemple . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 150
Les listes groupes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 150
vii
8/10/2019 Prenez en Main Bootstrap
13/317
TABLE DES MATIRES
Les panneaux . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 157
Les mdias . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 161
Alertes et barres de progression . . . . . . . . . . . . . . . . . . . . . . . . . . 164
Alertes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 164
Barres de progression . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 167
III Mise en forme avance 173
6 Les plugins jQuery 175
Gnralits . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 176
La librairie jQuery . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 176
Les librairies Javascript de Bootstrap . . . . . . . . . . . . . . . . . . . . 178
La page dexemple . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 181
Menu droulant . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 190
Menu droulant dans la barre de navigation . . . . . . . . . . . . . . . . 190
Menu droulant dans un bouton . . . . . . . . . . . . . . . . . . . . . . 191
Activation par Javascript . . . . . . . . . . . . . . . . . . . . . . . . . . 198
Fentre modale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 199
Un premier exemple simple . . . . . . . . . . . . . . . . . . . . . . . . . 199
Un pied de page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 201
Une transition . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 201
Garder le fond de lcran . . . . . . . . . . . . . . . . . . . . . . . . . . . 202
Injecter une page HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . 202
Largeur de la fentre modale . . . . . . . . . . . . . . . . . . . . . . . . 206
La page dexemple et laccessibilit . . . . . . . . . . . . . . . . . . . . . 207Activation avec Javascript . . . . . . . . . . . . . . . . . . . . . . . . . . 208
Onglets . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 210
Un premier exemple simple . . . . . . . . . . . . . . . . . . . . . . . . . 210
Un autre aspect . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 211
Transition progressive . . . . . . . . . . . . . . . . . . . . . . . . . . . . 211
Empilage . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 211
Justification . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 212Dsactiver un lien . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 212
Un menu droulant dans un onglet . . . . . . . . . . . . . . . . . . . . . 213
viii
8/10/2019 Prenez en Main Bootstrap
14/317
TABLE DES MATIRES
Onglets latraux . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 214
La page dexemple . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 215
Utilisation de Javascript . . . . . . . . . . . . . . . . . . . . . . . . . . . 217
Boutons . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 218
Bouton bascule . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 218
Boutons effet checkbox . . . . . . . . . . . . . . . . . . . . . . . . . . 219
Boutons effet radio . . . . . . . . . . . . . . . . . . . . . . . . . . . . 219
Boutons pour attente de processus . . . . . . . . . . . . . . . . . . . . . 220
La page dexemple . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 221
Carrousel . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 222
La page dexemple . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 222
Un premier exemple simple . . . . . . . . . . . . . . . . . . . . . . . . . 222
Des titres pour les images . . . . . . . . . . . . . . . . . . . . . . . . . . 224
Un indicateur de limage affiche . . . . . . . . . . . . . . . . . . . . . . 225
Des boutons de dfilement . . . . . . . . . . . . . . . . . . . . . . . . . . 226
Amliorer la prsentation . . . . . . . . . . . . . . . . . . . . . . . . . . 226
Les options du carrousel . . . . . . . . . . . . . . . . . . . . . . . . . . . 227
Les vnements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 230Info-bulles et Popover . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 233
La page dexemple . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 233
Info-bulle . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 233
Popover . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 236
Effet accordon . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 238
Un exemple simple . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 238
Des bordures pour bien dlimiter les lments . . . . . . . . . . . . . . . 240Afficher une seule zone . . . . . . . . . . . . . . . . . . . . . . . . . . . . 241
De jolies en-ttes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 242
Effet accordon sur une liste groupe . . . . . . . . . . . . . . . . . . . . 243
Commande en Javascript . . . . . . . . . . . . . . . . . . . . . . . . . . 245
Utilisation des vnements . . . . . . . . . . . . . . . . . . . . . . . . . . 246
Une barre de navigation rtractable . . . . . . . . . . . . . . . . . . . . 249
Le Scrollspy . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 250Mise en page avec le Scrollspy . . . . . . . . . . . . . . . . . . . . . . . . 250
Un mouvement fluide . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 256
ix
8/10/2019 Prenez en Main Bootstrap
15/317
TABLE DES MATIRES
Activation par Javascript . . . . . . . . . . . . . . . . . . . . . . . . . . 256
7 Configurer Bootstrap 259
Configuration simplifie . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 260Une page dexemple . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 260
Configurer en ligne sur le site de Bootstrap . . . . . . . . . . . . . . . . 265
LESS, un langage de style dynamique . . . . . . . . . . . . . . . . . . . . . . 268
Les sources des fichiers LESS de Bootstrap . . . . . . . . . . . . . . . . 268
Des variables . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 268
Inclusion de fichier . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 270
Les mixins . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 270Slecteurs embots . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 271
Oprations . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 272
Fonctions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 273
Un exemple synthtique . . . . . . . . . . . . . . . . . . . . . . . . . . . 273
Utilisation de LESS dans Bootstrap . . . . . . . . . . . . . . . . . . . . . . . 277
Un programme pour LESS . . . . . . . . . . . . . . . . . . . . . . . . . . 277
Exemple simple de configuration . . . . . . . . . . . . . . . . . . . . . . 277
Rflexions sur la configuration de Bootstrap avec LESS . . . . . . . . . 279
Les mixins . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 281
Utilisation dynamique de LESS . . . . . . . . . . . . . . . . . . . . . . . 286
Un thme pour Bootstrap . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 287
Le thme optionnel . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 287
Dautres thmes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 288
Composer son thme . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 290
x
8/10/2019 Prenez en Main Bootstrap
16/317
Premire partie
Premiers pas
1
8/10/2019 Prenez en Main Bootstrap
17/317
8/10/2019 Prenez en Main Bootstrap
18/317
Chapitre1
Mise en route
Difficult :
Pour utiliser efficacement Bootstrap, vous devez dj tre convaincu de son utilit, vous
devez aussi savoir linstaller. Ce chapitre est destin vous faire dcouvrir en quoi Bootstrap
peut vous aider et comment vous devez le mettre en uvre pour lutiliser efficacement.
Nous aborderons galement les Medias Queries que Bootstrap utilise pour que nos pages
sadaptent automatiquement au support que nous utilisons pour les visualiser.
3
8/10/2019 Prenez en Main Bootstrap
19/317
CHAPITRE 1. MISE EN ROUTE
Un framework ?
Avant toute chose, il faut dfinir ce quest un framework. Il sagit dun ensemble de
composants structurs qui sert crer les fondations et organiser le code informatiquepour faciliter le travail des programmeurs, que ce soit en terme de productivit ou desimplification de la maintenance. Il en existe beaucoup pour les applications web quiciblent de nombreux langages : Java, Python, Ruby, PHP. . .
Il existe des frameworks ct serveur (dsigns backend en anglais), et dautres ctclient (dsigns frontenden anglais). Bootstrap fait partie de cette deuxime catgo-rie. Les frameworks CSS sont spcialiss, comme leur nom lindique, dans les CSS!Cest--dire quils nous aident mettre en forme les pages web : organisation, aspect,animation. . . Ils sont devenus la mode et il en existe un certain nombre :
http://elasticss.com/ http://knacss.com/ http://blueprintcss.org/ http://960.gs/ http://yuilibrary.com/ http://52framework.com/ http://inuitcss.com/ http://elements.projectdesigns.org/ http://bluetrip.org/ http://ez-css.org/
etc.Bootstrap est un framework CSS, mais pas seulement, puisquil embarque galementdes composants HTML et JavaScript. Il comporte un systme de grille simple et effi-cace pour mettre en ordre laspect visuel dune page web. Il apporte du style pour lesboutons, les formulaires, la navigation. . . Il permet ainsi de concevoir un site web rapi-dement et avec peu de lignes de code ajoutes. Le framework le plus proche de Boots-trap est sans doute http://foundation.zurb.com/ qui est prsent comme Themost advanced responsive front-end framework in the world. Cette absence de mo-destie est-elle de mise ? Je pense que cest surtout une affaire de got et de prfrencepersonnelle.
Les intrts
Les navigateurs sont pleins de fantaisies et ont des comportements trs diffrentsmalgr leur lente convergence vers les standards. Les frameworks sont cross-browser,cest dire que la prsentation est similaire quel que soit le navigateur utilis etdune parfaite compatibilit ;
Les frameworks CSS font gagner du temps de dveloppement parce quils nous pro-posent les fondations de la prsentation ;
Les frameworks CSS normalisent la prsentation en proposant un ensemble homognede styles ;
Les frameworks CSS proposent en gnral une grille pour faciliter le positionnement
4
8/10/2019 Prenez en Main Bootstrap
20/317
DCOUVERTE DE BOOTSTRAP
des lments ; Les frameworks CSS offrent souvent des lments complmentaires : boutons esth-
tiques, barres de navigation, etc. ;
La grande diffusion de nouveaux moyens de visualisation du web (smartphones, ta-blettes. . .) impose dsormais la prise en compte de tailles dcran trs varies ; lesframeworks CSS prennent gnralement en compte cette contrainte.
Les inconvnients
Pour utiliser efficacement un framework il faut bien le connatre, ce qui implique untemps dapprentissage ;
La normalisation de la prsentation peut devenir lassante en lissant les effets visuels.
Par rapport aux deux inconvnients noncs, Bootstrap est dune prise en main rapide
mme pour un dbutant et est totalement configurable parce quil est construit avecLESS http://lesscss.org/(que nous verrons un peu plus loin dans le cours).
Dcouverte de Bootstrap
Origine de Bootstrap
Vous connaissez forcment Twitter, un des principaux rseaux sociaux qui inondent la
plante de liens virtuels entre les humains devenus des noyaux cyberntiques. Le projetBootstrap a t cr au dpart par Mark Otto et Jacob Thornton pour rpondre desbesoins internes de dveloppement de cette entreprise au niveau de luniformisation delaspect des pages web. Il sagissait juste de stylisation CSS, mais le framework sestensuite enrichi de composants Javascript.
Il a ensuite t publi en 2011 en devenant rapidement populaire parce quil est venuse positionner dans un espace vacant du dveloppement. Son systme de grille de 12colonnes est devenu une rfrence. Dautre part sa mise en uvre est aise et se limite rfrencer quelques librairies, comme nous allons bientt le voir.
Il a t mis disposition du public sous licence Apache. Le framework en est ac-tuellement la version 3. Celle-ci a pris un virage particulier en intgrant laspect responsive par dfaut, alors quauparavant cette fonctionnalit faisait lobjet dunfichier spar. Cette version est mme dclare comme mobile-first . Avec lutilisa-tion croissante dappareils mobiles, le framework sest adapt pour offrir une solutioncense couvrir tous les besoins.
Contenu du kit
Bootstrap propose :
Une mise en page base sur une grille de 12 colonnes bien pratique. Bien sr, si vousavez besoin de plus de 12 colonnes, ou de moins, il est toujours possible de modifierla configuration ;
5
8/10/2019 Prenez en Main Bootstrap
21/317
CHAPITRE 1. MISE EN ROUTE
Lutilisation de Normalize.css - http://necolas.github.com/normalize.css/ ; Du code fond sur HTML5 et CSS3; Une bibliothque totalement open source sous Licence Apache ;
Du code qui tient compte du format daffichage des principaux outils de navigation(responsive design) : smartphones, tablettes...; Des plugins jQuery de qualit ; Un rsultatcross-browser(la prise en charge de IE7 a t abandonne avec la version
3), donc une garantie de compatibilit maximale ; Une bonne documentation ; La garantie dune volution permanente ; Une mine de ressources varies sur le web ; Une architecture base sur LESS -http://lesscss.org/, un outil bien pratique qui
tend les possibilits de CSS.
Vous pouvez trouver toutes les informations sur Bootstrap directement sur le site ddi- http://getbootstrap.com/.
Cest quoi un normalize.css ?
Les navigateurs nadoptent pas tous les mmes valeurs par dfaut pour les styles deslments HTML. Cela peut gnrer quelques surprises au rendu des pages web selonle navigateur utilis. Dautre part certains navigateurs prsentent des dfauts de priseen compte de certains lments. Normalize est un petit fichier CSS qui tablit desrgles pour avoir un rendu identique quel que soit le navigateur utilis. Au lieu dagirbrutalement comme les reset CSS qui remettent toutes les valeurs zro, normalizeagit intelligemment en conservant ce qui est utile et en jouant finement sur les lments.Vous pouvez trouver le dtail des rgles appliques avec leur explication ici - http://nicolasgallagher.com/about-normalize-css/.
volution de Bootstrap
Bootstrap est un framework trs populaire qui volue trs rapidement avec larrivefrquente de nouvelles versions. Cest la fois un avantage (il samliore de plus enplus) et un inconvnient (le code quon a crit pour une mise en page nest rapidementplus valable pour les nouvelles versions). Le passage la version 3 a t une petitervolution avec de trs nombreux changements, en particulier une refonte complte dela grille. Un site crit avec la version 2 doit tre totalement rcrit pour cette nouvelleversion, mais ce nest videmment pas une obligation. Lvolution du framework sestfaite essentiellement en direction des appareils nomades qui constituent peu peu leparc le plus important dappareils pour surfer sur Internet.
La principale source dinformation pour connatre les changements des nouvelles ver-sions est le blog officiel - http://blog.getbootstrap.com/. Il est aussi intressantde sinformer en amont sur la page GitHub du projet - https://www.github.com/twbs/bootstrappour connatre les demandes des utilisateurs (Pull Requests) et les
6
8/10/2019 Prenez en Main Bootstrap
22/317
INSTALLATION
problmes rencontrs (Issues).
Ce cours a t labor partir de la version 3.1 et tous les renseignements et exemplesdonns ont t tests sur cette version.
Installation
Installation de Bootstrap
Linstallation de Bootstrap est simple : cliquez sur le bouton de tlchargement sur lesite du framework - http://getbootstrap.com/getting-started/#download. Vousavez disposition trois boutons :
Download Bootstrap : permet de rcuprer juste les fichiers ncessaires au fonc-tionnement de Bootstrap,
Download source : permet de rcuprer en plus tous les fichiers source, Download Sass : cest un portage de Bootstrap en Sass pour les utilisateurs de
projets qui utilisent Sass (Rails, Compass. . .).
Vous pouvez aussi aller consulter directement le code source sur GitHub - https://www.github.com/twbs/bootstrap, ou mme linstaller avec Bower -http://bower.io/si vous naimez pas la simplicit !
Quand vous tlchargez la librairie avec le bouton Download source , vous obtenez un
fichier zipp contenant un rpertoire bootstrap-3.1.0, qui contient lui-mme un certainnombre de fichiers et de dossiers, comme le montre la figure 1.1.
Figure1.1 Image utilisateur
Les fichiers utiles pour simplement utiliser Bootstrap se situent dans le dossier dist( distribution ), ce sont les seuls fichiers que vous obtenez si vous utilisez le bouton Download Bootstrap (voir figure 1.2).
Voyons un peu ces fichiers :
bootstrap.csscomporte les classes de base de Bootstrap ; bootstrap.min.css comporte les mmes classes de base que bootstrap.css mais
est compil ; bootstrap-theme.csscontient des rgles de styles particulires pour crer un thme
spcifique pour Bootstrap ; bootstrap-theme.min.cssest identique bootstrap-theme.cssmais est compil ;
7
8/10/2019 Prenez en Main Bootstrap
23/317
CHAPITRE 1. MISE EN ROUTE
Figure1.2 Le dossier distcontient les fichiers utiles lutilisation de Bootstrap
glyphicons-halflings-regular.svgcomporte la collection dicnes au format svg ; glyphicons-halflings-regular.ttfcomporte la collection dicnes au format ttf ; glyphicons-halflings-regular.woff comporte la collection dicnes au format
woff; glyphicons-halflings-regular.eotcomporte la collection dicnes au format eot ; bootstrap.jscontient le code JavaScript des composants de Bootstrap ; bootstrap.min.jscontient le mme code JavaScript mais est compil ;
Les fichiersmin(bootstrap.min.css,bootstrap.min.jsetbootstrap-theme.min.css)contiennent le mme code que leurs quivalents (bootstrap.css, bootstrap.js etbootstrap-theme.css) mais ont t purs des commentaires et compils pour lesallger et acclrer ainsi leur chargement.
Daccord, mais que mettre sur un site pour que Bootstrap fonctionne ?
Il faut distinguer les deux situations :
1. Pendant la phase de dveloppement, il est intressant de pouvoir naviguer dansle code de Bootstrap, il faut donc mettre les fichiers non compresss.
2. Lorsque votre site est en ligne, vous navez plus vous inquiter du code etseule compte la vitesse de chargement, il faut donc cette fois utiliser les versionscompresses (min).
La figure 1.3 montre les fichiers utiles pendant la phase de dveloppement (les fichiersbootstrap.jset jquery.jsne sont prvoir que si vous utilisez des plugins jQueryet le dossier fontsuniquement si vous utilisez les icnes).
La figure 1.4 montre les fichiers utiles lorsque le site est en ligne (les fichiersbootstrap.min.jsetjquery.jsne sont prvoir que si vous utilisez des plugins jQuery et le dossier fontsuniquement si vous utilisez les icnes).
8
8/10/2019 Prenez en Main Bootstrap
24/317
INSTALLATION
Figure1.3 Les fichiers utiles durant le dveloppement
Figure1.4 Les fichiers utiles en production
Dans tous les exemples de ce cours, je pars du principe quun rpertoire bootstrapat cr la racine du site avec les trois rpertoires css, fonts et js comportant lesfichiers cits prcdemment.
Pour que Bootstrap fonctionne il faut le dclarer dans les pages HTML, qui doiventdailleurs tre imprativement au format HTML 5, il faut donc prvoir le bon DOC-TYPE :
1 2 ...
Il faut ensuite dclarer au minimum le fichierbootstrap.min.css(oubootstrap.css)dans len-tte de la page web :
1 < head >2 ...3 < l in k h re f =" b o o t s t r a p / c s s / b o o t s t r a p . m i n . c s s " rel = "stylesheet
" >4
partir de l toutes les classes sont accessibles. . . videmment vous devez adapter le
lien selon la localisation de vos fichiers.Si vous utilisez des composants JavaScript, vous devez galement rfrencer la librairiede Bootstrap ainsi que jQuery (la librairie jQuery ne fait pas partie des fichiers tlchar-
9
8/10/2019 Prenez en Main Bootstrap
25/317
CHAPITRE 1. MISE EN ROUTE
gs avec Bootstrap et doit tre rcupr indpendamment surhttp://jquery.com/) :
1 < s c ri p t s rc = " b o o t s t r a p / j s / j q u e r y . j s ">2 < s c ri p t s rc = " b o o t s t r a p / j s / b o o t s t r a p . m i n . j s ">
Et le fichier de thme ?
Ce fichier est un exemple damlioration de lesthtique de Bootstrap, il nest pas utilepour son fonctionnement. Si vous observez lapparence des composants de Bootstrap,vous allez constater quil sont plats , sans aucun relief. Dans la version 2, ce ntaitpas le cas. Pour des raisons de performances, il a t dcid doffrir cette amlioration
visuelle dans un fichier spar. Si vous avez la curiosit de regarder ce fichier, vousverrez quil contient des dfinitions de dgrads et dombrages. Vous trouvez le rsultatde lapplication de ce thme sur cette page dexemple - http://getbootstrap.com/examples/theme/. Nous reparlerons de ce fichier dans le chapitre de la configurationde Bootstrap.
Les CDN
CDN est lacronyme de Content delivery network; cest un rseau de serveurs quimet disposition des librairies. Il devient ainsi inutile de prvoir ces librairies sur sonpropre serveur, il suffit de pointer vers eux. Il y a des avantages utiliser un CDN :
Libration de ressources et de la bande passante sur son propre serveur ; Paralllisation des tlchargements (un CDN est sur plusieurs serveurs) ; Acclration du chargement; Diminution de la latence ; Actualisation automatique des librairies ; Amlioration du rfrencement. . .
Y-a-t-il des inconvnients ?
Daprs certains, lutilisation dun CDN, qui impose une requte DNS supplmentaire,ne serait judicieuse que si lon a beaucoup de librairies charger. Dautre part si vousmodifiez le fichier CSS de Bootstrap pour ladapter vos besoin, vous ne pourrezplus bnficier des avantages dun CDN. Mais si vous voulez profiter de cette possi-bilit pour Bootstrap, utilisez bootstrapcdn - http://bootstrapcdn.com/. Vous pou-vez videmment utiliser un CDN galement pour jQuery, par exemple chez Google -
https://www.developers.google.com/speed/libraries/.videmment si vous utilisez des CDN, linstallation en est dautant simplifie. Vousnavez qu adapter les appels des librairies :
10
8/10/2019 Prenez en Main Bootstrap
26/317
UNE TRAME POUR DMARRER
1 < l in k h re f= " / / n e t d n a . b o o t s t r a p c d n . c o m / b o o t s t r a p / 3 . 1 . 0 / c s s /b o o t s t r a p . m i n . c s s " rel =" s t y l e s h e e t " >
2 ...3 < s c ri p t s rc = " / / a j a x . g o o g l e a p i s . c o m / a j a x / l i b s / j q u e r y / 1 . 1 0 . 2 /
j q u e r y . m i n . j s ">4 < s c ri p t s rc = " / / n e t d n a . b o o t s t r a p c d n . c o m / b o o t s t r a p / 3 . 1 . 0 / j s /
b o o t s t r a p . m i n . j s ">
Une trame pour dmarrer
Le template de base
Vous trouvez aussi sur le site de Bootstrap un template de base -http://getbootstrap.com/getting-started/#templateet des exemples comportant lessentiel des lmentspour vous aider initier un projet. Pour le moment vous nallez pas encore comprendrelutilit de tous ces lments, mais vous y reviendrez par la suite lorsque vous aurezfait le tour de ce cours.
Dans le template de base, vous trouvez en premier cette ligne :
1
Cette ligne concerne uniquement les mobiles. On demande que laffichage occupe toutlespace disponible avec une taille de 1, autrement dit sans zoom. Vous pouvez allerencore plus loin en interdisant le zoom ou en le limitant certaines valeurs.
On trouve ensuite la dclaration du fichier CSS dans sa version minifie :
1 < l in k h re f= " c s s / b o o t s t r a p . m i n . c s s " rel =" s t y l e s h e e t " >
En fin de page (pour ne pas ralentir le chargement) se trouvent les appels JavaScript(utiles si vous utilisez des plugins jQuery, comme nous allons le voir dans ce cours) :
1 < s c ri p t s rc = " h t t p s : / / c o d e . j q u e r y . c o m / j q u e r y . j s "> 2 < s c ri p t s rc = " j s / b o o t s t r a p . m i n . j s ">
Avec un test conditionnel, on trouve aussi des rfrences :
1
2
8/10/2019 Prenez en Main Bootstrap
27/317
CHAPITRE 1. MISE EN ROUTE
Le but de ces appels est de permettre aux navigateurs ne prenant pas en charge HTML5et les Media Queries CSS3 de le faire ; ils visent essentiellement IE8. Pour obtenir plusde renseignements sur respond.js vous pouvez aller sur la page GitHub - https:
//www.github.com/scottjehl/Respond. Mfiez-vous en particulier si vous utilisez unCDN pour charger vos styles CSS, parce querespond.jsutilise AJAX et vous pouvezbuter sur le problme daccs plusieurs domaines.
Le but du fichier html5shiv est de crer les lments (avec createElement) de typebloc du HTML 5 (header, section, aside. . .) qui sont ignors par IE8.
En rsum, on obtient ce code (en simplifiant les rfrences et en supposant que tousles fichiers sont situs dans un dossier bootstrapet des sous-dossiers fonctionnels) :
1 2 < html >
3 < head >4 < title > B o o t s t ra p T e m p l at e < / title >5 6 < l in k h re f= " b o o t s t r a p / c s s / b o o t s t r a p . m i n . c s s " rel = "
stylesheet" >7
e l e m en t s a n d media q u er i es - ->8
8/10/2019 Prenez en Main Bootstrap
28/317
UNE TRAME POUR DMARRER
5 6 7 8 9 < l in k r el =" s h o rt c ut i co n " href = " . . / . . / d o c s - a s s e t s / i c o /
favicon.png" >10
11 < title > S t ar t er T e mp l at e f or B o ot s tr a p < / title >12
13 14 < l in k h re f= " . . / . . / d i s t / c s s / b o o t s t r a p . c s s " rel =" s t y l e s h e e t ">15
16 17 < l in k h re f= "starter -template .css" rel = " s t y l e s h e e t ">18
19
20 21 < s c ri p t s rc = " . . / . . / a s s e t s / j s / h t m l 5 s h i v . j s "> 22 < s c ri p t s rc = " . . / . . / a s s e t s / j s / r e s p o n d . m i n . j s "> 23 < ! [ e n d i f ] -- >24 25
26 < body >
2728 < d iv c l as s = " n a v b a r n a v b ar - i n v e r s e n a v b ar - f i xe d - t o p " role= "
navigation" >29 < d iv c l as s = " c o n t a i n e r ">30 < d iv c la s s=" n a v b a r - h e a d e r ">31 < b u t to n t y pe = " b u t t o n " class = " n a v b a r - t o g g l e " data -
toggle= " c o l l a p s e " data - t a r g e t =" . n a v b a r - c o l l a p s e ">32 < s p an c l as s =" i c o n - b a r " > 33 < s p an c l as s =" i c o n - b a r " > 34 < s p an c l as s =" i c o n - b a r " > 35
36 Project name 37 38 < d iv c la s s=" c o l l a p s e n a v b ar - c o l l a p s e " >39 40 < l i c l as s = " a c t i v e " > Home 41 < li > About 42 < li > Contact 43 44 45 46 47
48 < d iv c l as s = " c o n t a i n e r " >49
13
8/10/2019 Prenez en Main Bootstrap
29/317
CHAPITRE 1. MISE EN ROUTE
50 < d iv c l as s = "starter -template " >51 < h1 > B o o t s tr a p s t a r te r t e m p la t e 52
U se t hi s d oc um en t a s a w ay t o q u ic k ly
s t ar t a ny n ew p r oj e ct .
All yo u ge t is t hi s text
and a m o s tl y b a r e b on e s HTML document. 53 54
55 56
57 59
f a st e r - ->60 < s c ri p t s rc = " h t t p s : / / c o d e . j q u e r y . c o m / j q u e r y - 1 . 1 0 . 2 . m i n . j s ">
61 < s c ri p t s rc = " . . / . . / d i s t / j s / b o o t s t r a p . m i n . j s "> 62 63
On retrouve ce quon a vu prcdemment avec la ligne pour les mobiles et lap-pel au fichier CSS de Bootstrap. On trouve la rfrence dun autre fichier CSS :starter-template.css. Voyons ce que contient ce fichier :
1 b od y {2 padding -top: 50px;3
}4 .starter -template {5 p a dd i ng : 4 0p x 1 5p x ;6 t ex t - a l i gn : c e n te r ;7 }
Nous verrons, lorsque nous parlerons du composant Barre de navigation de Boots-trap, quil faut parfois rserver un espace en haut de la page (avecpadding-top: 50px)pour viter que le texte du dbut ne se retrouve sous la barre. On trouve aussi ici laclasse starter-templatequi se contente de fixer un espace interne et un alignementcentr du texte. Cette classe ne sert que pour le texte de prsentation du template peut
tre videmment supprime ou modifie selon votre convenance.
On trouve aussi dans la page une trame de la barre de navigation (je vous expliquetout a en dtail dans ce cours) :
1 < d iv c l as s = " n a v b a r n a v b ar - i n v e r s e n a v b ar - f i xe d - t o p " role= "navigation" >
2 < d iv c la s s= " c o n t a i n e r ">3 < d iv c l as s = " n a v b a r - h e a d e r ">4 < b u t to n t y pe =" b u t t o n " class =" n a v b a r - t o g g l e " data - t o g g l e ="
collapse" data - t a r g e t =" . n a v b a r - c o l l a p s e ">
5 < s pa n c l as s = " s r - o n l y " > T o g g le n a v i g at i o n < / span >6 < s pa n c l as s = " i c o n - b a r " > 7 < s pa n c l as s = " i c o n - b a r " > 8 < s pa n c l as s = " i c o n - b a r " >
14
8/10/2019 Prenez en Main Bootstrap
30/317
LES MEDIA QUERIES
9 10 P r o j e ct n a me < / a >11 12 < d iv c l as s = " c o l l a p s e n a v b ar - c o l l a p s e " >13 < u l c l as s = " n av n av ba r - n a v " >14 < l i c la s s= " a c t i v e " > H o m e < /a >15 < li > A b o u t < /a > 16 < li > C o n t a c t < /a >17 18 19 20
Le contenu de la page est ensuite insr dans une DIV comportant la classe container:
1 < d iv c l as s = " c o n t a i n e r ">2 < d iv c la s s= "starter -template " >3 < h1 > B o o ts t ra p s t ar t er t e mp l at e < / h1 >4
Us e t hi s d oc um en t a s a w ay t o q ui ck ly s ta rt
a ny n ew p r oj e ct . < br > All you get is this text and amostly barebones HTML document .
5 6
Nous verrons galement lintrt de cette classe et son utilisation. Considrez les exemplesde templates fournis sur le site de Bootstrap la fois comme des guides de dmarrageet des aides la comprhension du framework. vitez de les prendre tels quels sans encomprendre tous les lments. lissue de ce cours vous aurez tout en main pour lefaire...
Les Media Queries
Les Media Queries sont destines simplifier la cration de pages web pour les rendreconsultables sur des supports varis (tablettes, smartphones. . .). Cette section nest
quune introduction rapide ce domaine qui mriterait un cours lui tout seul.Avec les Media Queries on peut cibler :
La rsolution; Le type de media; La taille de la fentre (width et hight) ; La taille de lcran (device-width et device-height) ; Le nombre de couleurs ; Le ratio de la fentre (par exemple le 16/9); etc.
Les plus courageux peuvent consulter directement les spcifications du W3C
- http://w3.org/TR/css3-mediaqueries/.
15
8/10/2019 Prenez en Main Bootstrap
31/317
CHAPITRE 1. MISE EN ROUTE
La liste est longue, malheureusement peu de navigateurs actuels sont capables de di-grer tout a. On se limite en gnral la taille de laffichage, lorientation et parfoisle ratio.
Je ne comprends pas la diffrence entre taille de lcran et taille de la fentre !
Ah ! Bonne rflexion. Cette distinction na aucun sens pour les crans dordinateursmais trouve tout son intrt pour les smartphones. La taille de lcran est la surfacephysique relle alors que la taille de la fentre est celle dont le smartphone pense disposer. Ne me demandez pas pourquoi ce nest pas la mme valeur, je nen sais rien.Par exemple pour un iPhone 4 la surface relle est de 640x960 px et la surface de la
fentre est de 320x480 px. Autrement dit un iPhone est pessimiste sur ses possibilitsdaffichage !
Mais ce nest pas le seul souci ! Le navigateur embarqu sur un smartphone a lui aussiune certaine ide de la surface daffichage dont il dispose (le viewport). Par exemple,pour continuer avec lexemple de liPhone 4, qui utilise Safari, ce dernier pense disposerdune largeur de 980 px ! Sur ces appareils il est aussi possible dutiliser le zoom etnotre mise en page risque de sen ressentir. On peut se demander comment sen sortirdans tout ce bazar. . . Heureusement on dispose de la balise META viewportpour fixercertaines valeurs, voici ce qui est prconis dans le template de Bootstrap :
1
On ouvre la fentre la largeur de lcran : width=device-width On rgle le zoom : initial-scale=1.0
Vous pouvez aussi fixer dautres valeurs. Par exemple, empcher lutilisateur de zoomer.Il existe un site -http://emulateurmobile.com/- intressant pour tester le rendu surmobile.
Syntaxe des Media Queries
Une media query est une expression dont la valeur est soit vraie, soit fausse. Voici unexemple dans du code CSS :
1 @ m ed i a ( m ax - w id t h : 7 6 7 p x ) {2 ...3 }
@mediaest une rgle apparue avec le CSS2. Elle permet la base de cibler un media :cran, imprimante, projecteur. . . Cette rgle est reprise et tendue avec le CSS3. Lex-pression situe entre parenthses est value, et si elle est vraie , les rgles situes
dans le bloc sont prises en compte.Ici lexpression est(max-width: 767px), elle se comprend facilement. Elle est vraie si le support de visualisation de la page a une largeur daffichage infrieure ou gale
16
8/10/2019 Prenez en Main Bootstrap
32/317
LES MEDIA QUERIES
767px.
Oui, mais on na pas spcifi de mdia l !
Oui parce quon veut prendre en compte tous les mdias existants ! Voici une syntaxequivalente :
1 @ me di a a ll a nd ( max - w i dt h : 7 67 px ) { . .. }
On en profite pour voir quon peut combiner des lments avec des oprateurs logiques.
Voici une autre expression avec le mme oprateur logique :
1 @ me di a ( min - w i dt h : 7 68 px ) a nd ( max - w i dt h : 9 79 px ) { . .. }
Ici, on veut prendre en compte les rgles du bloc si laffichage se situe entre 768px et979px.
Si on veut appliquer des rgles lorsque lorientation est portrait , voici la syntaxe utiliser :
1 @ me di a ( o r ie n ta ti on : p or tr ai t ) { . .. }
Comme vous pouvez le voir, la syntaxe est simple, ce qui lest moins ce sont les rgles dfinir. Mais quand vous utilisez Bootstrap, vous navez pas vous soucier de tout
a. . . Si vous explorez le code de Bootstrap, vous trouverez beaucoup dutilisation desMedia Queries, comme par exemple ici, o est dfinie une rgle de dimension maximalepour la classe containerlorsque laffichage est dau moins 992 pixels :
1 @ m ed i a ( m in - w id t h : 9 9 2 p x ) {2 . c o n ta i ne r {3 m ax - w i dt h : 9 7 0p x ;4 }5 ...6 }
Nous verrons plus loin dans ce cours que Bootstrap dfinit quatre types de medias selonla dimension de laffichage. Voici la syntaxe utilise :
1 /* E xt ra s ma ll d ev ic es ( p ho ne s , u p t o 4 80 px ) * /2 /* N o m ed ia q ue ry s in ce t hi s i s t h e d ef au lt i n B oo ts tr ap * /3
4 / * S m al l d e vi c es ( t a bl et s , 7 68 p x a nd u p ) * /5 @ m ed i a ( m in - w id t h : @ sc re en - t a b le t ) { . .. }6
7 / * M e di u m d e vi c es ( t a bl et s , 9 92 p x a nd u p ) * /8 @ m ed i a ( m in - w id t h : @ sc re en - d e s kt o p ) { . .. }
910 / * L a rg e d e vi c es ( l a rg e d es kt op s , 1 2 00 p x a nd u p ) * /11 @ m ed i a ( m in - w id t h : @ sc re en - l ar ge - d e s kt o p ) { . .. }
17
8/10/2019 Prenez en Main Bootstrap
33/317
CHAPITRE 1. MISE EN ROUTE
En rsum
Bootstrap est un framework CSS qui comporte en plus des plugins jQuery pourcomposer des pages web.
Bootstrap est un framework rcent qui a connu un dveloppement et une popularittrs rapide.
Bootstrap sinstalle facilement en rfrenant quelques fichiers sur son serveur oumme en passant directement par des CDN.
Bootstrap propose des templates de dmarrage pour viter de partir avec une pageblanche.
Bootstrap intgre des medias queries pour adapter les pages web tous les supportsde visualisation.
18
8/10/2019 Prenez en Main Bootstrap
34/317
Chapitre2
Une grille ?
Difficult :
Lorganisation spatiale des pages web est lune des premires proccupations lorsque lon
cre un site web. Prvoit-on une bannire ? Faut-il un espace pour un menu gauche ou en
haut ? Y aura-t-il des blocs sur un des cts pour recevoir certaines fonctionnalits comme
la connexion ou des infos ? Faut-il prvoir un bas de page ?
Bootstrap ne rpond videmment pas ces questions, mais il peut grandement vous faciliter
la tche, avec son systme de grille, pour obtenir le rsultat que vous souhaitez.
Petite visite guide. . .
19
8/10/2019 Prenez en Main Bootstrap
35/317
CHAPITRE 2. UNE GRILLE ?
Prsentation
Le principe dune grille
Une grille est tout simplement un dcoupage en cellules de mmes dimensions (voirfigure 2.1).
Figure2.1 Une grille
On peut alors dcider dorganiser du contenu en utilisant pour chaque lment une ouplusieurs cellules, comme la figure 2.2.
Figure2.2 On peut placer des lments sur la grille
La grille de Bootstrap comporte 12 colonnes comme dans lillustration prcdente. Vouscommencez sans doute comprendre lutilit de cette organisation.
Terminologie
Une grille est dcoupe en ranges (appeles row, parce que tout est en anglais) etcolonnes (col), comme la figure 2.3.
Figure2.3 Une grille est compose de ranges et de colonnes
20
8/10/2019 Prenez en Main Bootstrap
36/317
PRSENTATION
La grille de Bootstrap
La grille de Bootstrap nest pas aussi idale que celle prsente prcdemment. Le
dcoupage en colonnes est tout simplement une division en pourcentage de la largeurde la fentre de visualisation et correspond donc ce quon vient de voir. En revanche,il nen est pas vraiment de mme pour les ranges. Ces dernires ont la hauteur de leurcontenu (voir figure 2.4).
Figure2.4 Les ranges ont la hauteur de leur contenu
Moralit, une range prend la hauteur du plus gros lment quelle contient. Puisquela largeur des colonnes est contrainte, le flux des donnes scoule verticalement, ce quiest un comportement HTML classique. Il faudra en tenir compte lors de la mise enpage.
Organisation de la grille
Bootstrap est essentiellement un fichier CSS. Il comporte de nombreuses classes quelon peut utiliser directement dans les balises HTML.
La premire classe connatre est row, qui reprsente une range. Il faut ensuite dfinirle nombre de colonnes pour chaque lment en sachant quil y en a au maximum 12.Pour dfinir le nombre de colonnes utilises pour chaque lment, on dispose de quatrebatteries de 12 classes :
col-xs-1ou col-sm-1ou col-md-1ou col-lg-1 col-xs-2ou col-sm-2ou col-md-2ou col-lg-2 ...
col-xs-12ou col-sm-12ou col-md-12ou col-lg-12
Pourquoi 4 sortes de classes pour les colonnes ?
Je vous ai dj dit que Bootstrap est responsive , ce qui veut dire quil sadapte la taille de lcran. Il permet une visualisation aussi bien sur un cran gant quesur un smartphone. Mais que se passe-t-il pour les lments dune page web lorsquela fentre diminue ou slargit ? On peut envisager deux hypothses : les lments seredimensionnent en restant positionns, ou alors ils sempilent quand la fentre devientplus troite et se positionnent cte cte quand elle slargit. Voici aux figures suivanteslexemple de la page daccueil du site OpenClassrooms - http://fr.openclassrooms.
21
8/10/2019 Prenez en Main Bootstrap
37/317
CHAPITRE 2. UNE GRILLE ?
com/ qui illustre ce phnomne avec trois situations (cran large, figure 2.5, cranmoyen, figure 2.6, et petit cran, 2.7) :
Figure2.5 Aspect sur grand cran
Plutt que de ratatiner les lments au risque de les rendre illisibles, le choix a tfait de les empiler petit petit quand la fentre devient plus troite. Une autre optionpourrait consister supprimer des lments pas vraiment utiles, mais nous reviendronsplus tard sur ce point. Pour le moment on va juste se demander comment on peutchoisir entre les deux options prsentes la figure 2.8.
Cest ici quinterviennent les 4 sortes de classes vues prcdemment pour les colonnes.Bootstrap considre 4 sortes de mdias : les petits, genre smartphones (moins de 768pixels), les moyens, genre tablettes (moins de 992 pixels), les crans moyens (moins de1200 pixels) et enfin les gros crans (plus de 1200 pixels). Vous trouverez la figure
suivante un tableau pour illustrer les diffrences de raction selon la catgorie.Le nom des classes est intuitif : xspour x-small, sm pour small, mdpour mediumet lgpour large.
22
8/10/2019 Prenez en Main Bootstrap
38/317
PRSENTATION
Figure2.6 Aspect sur cran moyen
Petit cran(smart-phone)
cranrduit(tablette)
cranmoyen(desktop)
Grandcran(desktop)
Comportement Redimension Redimension Redimension Empilagepuis redi-mensionne-ment
Classe col-xs-* col-sm-* col-md-* col-lg-*
Valeur de rf-rence
< 768 px > 768 px > 992 px > 1200 px
23
8/10/2019 Prenez en Main Bootstrap
39/317
CHAPITRE 2. UNE GRILLE ?
Figure2.7 Aspect sur petit cran
Figure2.8 Empilement ou rduction ?
24
8/10/2019 Prenez en Main Bootstrap
40/317
PRSENTATION
Un petit exemple ?
Pour avoir un lment de 4 colonnes de large accoupl avec un lment de 8 colonnesde large sur un smartphone, on a :
1 < d iv c l as s = " r o w " >2 < d iv c la s s= " c o l - x s - 4 "> L a rg e ur 4 < /div >3 < d iv c la s s= " c o l - x s - 8 "> L a rg e ur 8 < /div >4
La figure 2.9 illustre ce code avec leffet quand on passe sur un cran plus grand.
Figure2.9 Un lment de 4 colonnes ct dun lment de 8 colonnes
Voici la version tablette :
1 < d iv c l as s = " r o w " >
2 < d iv c la s s= " c o l - s m - 4 "> L a rg e ur 4 < /div >3 < d iv c la s s= " c o l - s m - 8 "> L a rg e ur 8 < /div >4
La figure 2.10 illustre ce code avec leffet quand on passe sur un cran plus petit ouplus grand.
Figure2.10 Laffichage change en fonction de la taille de lcran
Vous remarquez que lors de lempilage, les colonnes prennent toute la place
disponible.
25
8/10/2019 Prenez en Main Bootstrap
41/317
CHAPITRE 2. UNE GRILLE ?
Et enfin, voici la version grand cran :
1 < d iv c l as s = " r o w " >2 < d iv c la s s= " c o l - l g - 4 "> L a rg e ur 4 < / div >
3 < d iv c la s s= " c o l - l g - 8 "> L a rg e ur 8 < / div >4
La figure 2.11 illustre ce code avec leffet quand on passe sur un cran de plus en pluspetit.
Figure2.11 La version grand cran
La largeur des lments de la grille est calcule en pourcentage selon la fentre devisualisation. Rien ninterdit videmment de mlanger des classes des 3 catgories pourcrer des effets particuliers avec certains lments qui doivent sempiler et dautre pas. . .
Aprs cette petite mise en jambe pour vous prsenter la notion de grille dans Boots-trap, on va passer en revue les possibilits dans le dtail. Mais pour visualiser tous lesexemples qui vont suivre, je vous propose dajouter un peu de style, histoire dafficherles lments de faon explicite. Pour viter de polluer le code HTML on va mettre cestyle spcifique au cours dans un fichier CSS particulier :
1 b od y {
2 padding -top: 10px;3 }4 [ c l a s s * = " c o l - "] , f oo te r {5 background -color: lightgreen;6 b o rd e r : 2 px so li d b l ac k ;7 b o rd e r - r a d iu s : 6 p x ;8 l in e - h e i gh t : 4 0 px ;9 t ex t - a l i gn : c e n te r ;
10 }
Le seul but de ces rgles de style est de faire apparatre nettement les lments lcran.Une petite marge interne en haut pour le corps, pour viter que tout soit coll en hautde lcran. Des bordures (avec des coins arrondis pour lesthtique) et un fond colorpour distinguer les lments. Une hauteur fixe 40 pixels, parce qutant donn que
26
8/10/2019 Prenez en Main Bootstrap
42/317
LA GRILLE EN PRATIQUE
la hauteur des ranges dpend du contenu, on aurait un rendu htroclite. La figure2.12 prsente laspect obtenu.
Figure2.12 Le rsultat final
La grille en pratique
Le conteneur
La grille de Bootstrap doit tre place dans un conteneur. Bootstrap propose les classescontainer et container-fluid. Leur utilisation tait auparavant optionnelle. Il estdsormais clairement indiqu dans la documentation quil faut la mettre en uvresystmatiquement si on veut obtenir des alignements et des espacements corrects. Laclasse containercontient et centre la grille sur une largeur fixe, qui sadapte en fonc-tion de la largeur de lcran. La classe container-fluidpermet la grille doccupertoute la largeur. Dans les exemples de ce chapitre, je vais utiliser systmatiquementcontainerpour avoir une visualisation plus facile des lments. Ce conteneur a unelargeur maximale selon le mdia concern, comme indiqu au tableau suivant.
Petit cran(smart-phone)
Ecranrduit(tablette)
Ecranmoyen(desktop)
Grandcran(desktop)
Conteneurmaximum
Auto 750 px 970 px 1170 px
Valeur derfrence
< 768 px >= 768 px >= 992 px >= 1200 px
Le centrage du conteneur est fait de faon classique avec de petites marges internes de
15 pixels et les marges droite et gauche automatiques :
1 . c o n ta i ne r {2 padding -right: 15px;3 padding -left: 15px;4 m a rg i n - r i g ht : a u to ;5 m a rg i n - l e ft : a u to ;6 }
Ce sont les mmes rgles pour la classe container-fluid. Ce qui est ajout pour laclasse containerest la limite de largeur spcifie par mdia :
1 @ m ed i a ( m in - w id t h : 7 6 8 p x ) {2 . c o n ta i ne r {3 m ax - w i dt h : 7 5 0p x ;
27
8/10/2019 Prenez en Main Bootstrap
43/317
CHAPITRE 2. UNE GRILLE ?
4 }5 ...6 @ m ed i a ( m in - w id t h : 9 9 2 p x ) {7 . c o n ta i ne r {8 m ax - w id t h : 9 7 0p x ;9 }
10 ...11 @ m ed i a ( m in - w id t h : 1 2 00 p x ) {12 . c o n ta i ne r {13 m ax - w id t h : 1 1 70 p x ;14 }15 ...
Une seule range
Dans ce premier exemple, on va dclarer une seule range avec deux lments quioccupent tout lespace :
1 2 < html >3 < head >4 < l in k h re f= " a s s e t s / c s s / b o o t s t r a p . c s s " rel = " s t y l e s h e e t ">5 < l in k h re f= " a s s e t s / c s s / t u t o . c s s " rel = " s t y l e s h e e t ">6 7 < body >8 < d iv c l as s = " c o n t a i n e r " >9 < d iv c l as s = " r o w " >
10 < d iv c la s s=" c o l - l g - 4 " > 4 c o lo n ne s < / div >11 < d iv c la s s=" c o l - l g - 8 " > 8 c o lo n ne s < / div >12 13 14 15
Ce qui nous donne la figure 2.13.
Figure2.13 Une seule range avec deux lments qui occupent tout lespace
Mise en page rapide et simple non ?
Plusieurs rangesPour obtenir plusieurs ranges, il suffit dutiliser plusieurs fois la classe row. Un petitexemple avec 3 ranges pour voir leffet :
28
8/10/2019 Prenez en Main Bootstrap
44/317
LA GRILLE EN PRATIQUE
1 2 < html >3 < head >4 < l in k h re f= " a s s e t s / c s s / b o o t s t r a p . c s s " rel = " s t y l e s h e e t ">5 < l in k h re f= " a s s e t s / c s s / t u t o . c s s " rel = " s t y l e s h e e t ">6 7 < body >8 < d iv c l as s = " c o n t a i n e r " >9 < d iv c l as s = " r o w " >
10 < d iv c la s s=" c o l - l g - 1 " > 1 c ol < / div >11 < d iv c la s s=" c o l - l g - 2 " > 2 c o lo n ne s < / div >12 < d iv c la s s=" c o l - l g - 3 " > 3 c o lo n ne s < / div >13 < d iv c la s s=" c o l - l g - 6 " > 6 c o lo n ne s < / div >14 15 < d iv c l as s = " r o w " >16 < d iv c la s s=" c o l - l g - 1 2 " > 12 c o lo n ne s < / div >17 18 < d iv c l as s = " r o w " >19 < d iv c la s s=" c o l - l g - 4 " > 4 c o lo n ne s < / div >20 < d iv c la s s=" c o l - l g - 8 " > 8 c o lo n ne s < / div >21 22 23 24
Ce qui nous donne la figure 2.14.
Figure2.14 Trois ranges
Sauter des colonnes
Bootstrap permet aussi de sauter des colonnes. Il y a quelques classes doffset pour a :
col-*-offset-1 col-*-offset-2. . . col-*-offset-11
Ces classes se contentent dajouter une marge gauche. Par exemple :
1 . c ol - l g - o f fs et - 6 {2
m a rg i n - l e ft : 5 0 % ;3 }
Dans ce cas, 6 colonnes reprsentent la moiti de la fentre donc 50%. Voici un exemple :
29
8/10/2019 Prenez en Main Bootstrap
45/317
CHAPITRE 2. UNE GRILLE ?
1 2 < html >3 < head >4 < l in k h re f= " a s s e t s / c s s / b o o t s t r a p . c s s " rel = " s t y l e s h e e t ">5 < l in k h re f= " a s s e t s / c s s / t u t o . c s s " rel = " s t y l e s h e e t ">6 7 < body >8 < d iv c l as s = " c o n t a i n e r " >9 < d iv c l as s = " r o w " >
10 < d iv c la s s=" c o l - l g - 3 " > 3 c o lo n ne s < / div >11 < d iv c la s s=" c o l - l g - 6 " > 6 c o lo n ne s < / div >12 < d iv c la s s=" c o l - l g - 3 " > 3 c o lo n ne s < / div >13 14 < d iv c l as s = " r o w " >15 < d iv c la s s=" c o l - l g - 3 " > 3 c o lo n ne s < / div >16 < d iv c la s s=" c ol - l g - o f fs e t - 6 c ol - l g - 3 " > 3 c o lo n ne s < / div >17 18 19 20
Voici le rsultat la figure 2.15.
Figure2.15 On a saut des colonnes
On a saut 6 colonnes grce la classe col-lg-offset-6. On peut videmment mul-tiplier les sauts :
1 < d iv c l as s = " c o n t a i n e r ">2 < d iv c la s s= " r o w " >
3 < d iv c l as s = " c ol - l g - 2 c o l - l g - o f f s et - 1 " > 2 c o lo n ne s < / div >4 < d iv c l as s = " c ol - l g - 4 c o l - l g - o f f s et - 2 " > 4 c o lo n ne s < / div >5 < d iv c l as s = " c ol - l g - 2 c o l - l g - o f f s et - 1 " > 2 c o lo n ne s < / div >6 7
Voici le rsultat la figure 2.16.
Figure2.16 On a saut des colonnes plusieurs fois
30
8/10/2019 Prenez en Main Bootstrap
46/317
LA GRILLE EN PRATIQUE
Imbrication dlments
On doit souvent imbriquer des lments dans une page web, est-ce possible avec Boots-trap ? Autrement dit inclure un row dans un col. Eh bien, on va tester a tout desuite :
1 2 < html >3 < head >4 < l in k h re f= " a s s e t s / c s s / b o o t s t r a p . c s s " rel = " s t y l e s h e e t ">5 < l in k h re f= " a s s e t s / c s s / t u t o . c s s " rel = " s t y l e s h e e t ">6 7 < body >8 < d iv c l as s = " c o n t a i n e r " >9 < d iv c l as s = " r o w " >
10 < d iv c la s s=" c o l - l g - 8 " > 8 c o lo n ne s11 < d iv c l as s = " r o w " >12 < d iv c la s s= " c o l - l g - 3 "> 3 c o lo n ne s < / div >13 < d iv c la s s= " c o l - l g - 6 "> 6 c o lo n ne s < / div >14 < d iv c la s s= " c o l - l g - 3 "> 3 c o lo n ne s < / div >15 16 17 18 19 20
Voici le rsultat la figure 2.17.
Figure2.17 On a imbriqu des ranges
On dirait bien que a fonctionne !
Les imbrications peuvent senchaner pour rpondre des besoins complexes :
1 < d iv c l as s = " c o n t a i n e r ">2 < d iv c la s s= " r o w " >3 < d iv c l as s = " c o l - m d - 1 2 " > P r em i er n i ve a u a ve c 1 2 c o lo n ne s4 < d iv c l as s = " r o w " >5 < d iv c l as s = " c o l - m d - 8 "> S e co n d n i ve a u a ve c 8 c o lo n ne s6 < d iv c l as s = " r o w " >7 < d iv c la s s=" c o l - m d - 4 " > T r oi s i me n i ve a u a ve c 4 c o lo n ne s 8 < d iv c la s s=" c ol - m d - 6 c o l - m d - o f f se t - 2 " > T r o i si m e n i v ea u
a ve c 6 c o lo n ne s9 < d iv c la s s=" r o w " >
31
8/10/2019 Prenez en Main Bootstrap
47/317
CHAPITRE 2. UNE GRILLE ?
10 < d iv c l as s = " c ol - m d - 3 c o l - m d - o f f s et - 1 " > Q u a t r i m en i ve a u a ve c 3 c o lo n ne s < / div >
11 < d iv c l as s = " c ol - m d - 5 c o l - m d - o f f s et - 1 " > Q u a t r i m en i ve a u a ve c 5 c o lo n ne s < / div >
12 13 14 15 16 < d iv c l as s = " c o l - m d - 4 "> S e co n d n i ve a u a ve c 4 c o lo n ne s < / div >17 18 19
Voici le rsultat la figure 2.18.
Figure2.18 Une imbrication complexe avec des sauts de colonnes
Ordre des colonnes
Trs logiquement, les colonnes saffichent dans lordre du flux. Il peut arriver quonveuille bouleverser cet ordre. Regardez cet exemple :
1 2 < html >3 < head >4 < l in k h re f= " a s s e t s / c s s / b o o t s t r a p . c s s " rel = " s t y l e s h e e t ">5 < l in k h re f= " a s s e t s / c s s / t u t o . c s s " rel = " s t y l e s h e e t ">6 7 < body >8 < d iv c l as s = " c o n t a i n e r " >9 < d iv c l as s = " r o w " >
10 < d iv c la s s=" c o l - l g - 1 2 " > 1 2 c o l o nn e s11 < d iv c l as s = " r o w " >12 < d iv c la s s= " c ol - l g - 2 c o l - l g - p u sh - 8 " > C o lo n ne 1 < / div >13 < d iv c la s s= " c ol - l g - 2 c o l - l g - p u sh - 3 " > C o lo n ne 2 < / div >14 < d iv c la s s= " c ol - l g - 2 c o l - l g - p u ll - 2 " > C o lo n ne 3 < / div >15
16 17 18 19
32
8/10/2019 Prenez en Main Bootstrap
48/317
LA GRILLE EN PRATIQUE
20
Et voici le rsultat la figure 2.19.
Figure2.19 On peut choisir lordre des colonnes
La classe col-lg-push-* permet de dcaler une colonne vers la droite et la classecol-lg-pull-*fait linverse.
Un petit TP
Pour vous entraner, je vous propose dobtenir le rsultat visible la figure 2.20.
Figure2.20 Essayez dobtenir ce rsultat
Donc deux zones spares avec un offset de 2 colonnes dans la partie gauche.
Voici la solution :
1 2 < html >3 < head >4 < l in k h re f= " a s s e t s / c s s / b o o t s t r a p . c s s " rel = " s t y l e s h e e t ">5 < l in k h re f= " a s s e t s / c s s / t u t o . c s s " rel = " s t y l e s h e e t ">6 7 < body >8 < d iv c l as s = " c o n t a i n e r " >9 < d iv c l as s = " r o w " >
10 < d iv c la s s=" c o l - l g - 6 " > 6 c o lo n ne s11 < d iv c l as s = " r o w " >12 < d iv c la s s= " c o l - l g - 4 "> 4 c o lo n ne s < / div >13 < d iv c la s s= " c ol - l g - o f fs e t - 4 c ol - l g - 4 " > 4 c o lo n ne s < /
div >14 15 16 < d iv c la s s=" c o l - l g - 6 " > 6 c o lo n ne s
17 < d iv c l as s = " r o w " >18 < d iv c la s s= " c o l - l g - 4 "> 4 c o lo n ne s < / div >19 < d iv c la s s= " c o l - l g - 8 "> 8 c o lo n ne s < / div >20
33
8/10/2019 Prenez en Main Bootstrap
49/317
CHAPITRE 2. UNE GRILLE ?
21 22 23 24 25
Mise en page
Lintrt principal dune grille est de raliser une mise en page. Nous allons voir quelquesexemples pour structurer correctement une page.
Premier casCommenons par quelque chose de simple avec une en-tte, un menu gauche, unesection droite et un pied de page :
1 2 < html >3 < head >4 < l in k h re f= " a s s e t s / c s s / b o o t s t r a p . c s s " rel = " s t y l e s h e e t ">5 < l in k h re f= " a s s e t s / c s s / t u t o . c s s " rel = " s t y l e s h e e t ">6
7 < body >8 < d iv c l as s = " c o n t a i n e r " >9
10 < d iv c la s s=" c o l - l g - 1 2 " >11 Entete12 13 < / h e a d e r >14 < d iv c l as s = " r o w " >15 16 Menu17 < / n a v >
18 19 Section20 < / s e c t i o n >21 22 23 P ie d d e p ag e24 < / f o o t e r >25 26 27
Le rsultat se trouve la figure 2.21.Jai utilis les classes pour grand cran avec les classe col-lg-*, ce qui fait qu larduction, je me retrouve avec un empilage ds que je passe en dessous de 1200 pixels
34
8/10/2019 Prenez en Main Bootstrap
50/317
MISE EN PAGE
Figure2.21 Une mise en page simple
(voir figure 2.22).
Figure2.22 Empilage la rduction de laffichage
Si je veux que ma mise en forme reste stable aussi pour les crans moyens, commentfaire ? Il me suffit dutiliser les classescol-md-* la place de col-lg-*, ce qui a poureffet de dplacer la limite 992 pixels (testez! http://bootstrap.twit.free.fr/tutov3/grid07a.html). De la mme faon, lutilisation des classes col-sm-*dplacela limite 768 pixels (testez! http://bootstrap.twit.free.fr/tutov3/grid07b.html) . . .
Jai le mme rsultat sans utiliser la classe col-lg-12, est-elle vraiment utile ?
On obtient effectivement la mme mise en page, mais les classes col-*ont un padding
droite et gauche de 15 pixels, et si on nutilise pas la classe col-lg-12, on va avoir uneincohrence au niveau de laffichage du contenu.
Second cas
Considrons maintenant un cas un peu plus riche :
1 2 < html >3 < head >
4 < l in k h re f= " a s s e t s / c s s / b o o t s t r a p . c s s " rel = " s t y l e s h e e t ">5 < l in k h re f= " a s s e t s / c s s / t u t o . c s s " rel = " s t y l e s h e e t ">6 7 < body >
35
8/10/2019 Prenez en Main Bootstrap
51/317
8/10/2019 Prenez en Main Bootstrap
52/317
MISE EN PAGE
Figure2.24 Rsultat sur une tablette
Et comme on na rien prvu de spcial pour les smartphones, tout sempile (voir figure
2.25).
Figure2.25 Rsultat sur un smartphone
Troisime cas
Enrichissons encore la mise en page :
1 2 < html >3 < head >4 < l in k h re f= " a s s e t s / c s s / b o o t s t r a p . c s s " rel = " s t y l e s h e e t ">5 < l in k h re f= " a s s e t s / c s s / t u t o . c s s " rel = " s t y l e s h e e t ">6 < s t y le t y pe = " t e x t / c s s " >7 /* S ty le p ou r l'exemple*/8 a r ti c le . c ol - s m - 10 , n av . c ol - s m - 2 {9 l in e - h e i gh t : 1 0 0 px ;
10 }
11 12 13 < body >14 < d iv c l as s = " c o n t a i n e r " >
37
8/10/2019 Prenez en Main Bootstrap
53/317
CHAPITRE 2. UNE GRILLE ?
15 16 < d iv c la s s=" c o l - l g - 1 2 " >17 Entete18 19 < / h e a d e r >20 < d iv c l as s = " r o w " >21 22 Menu23 < / n a v >24 25 Section26 < d iv c l as s = " r o w " >27 28 Article29 < / a r t i c l e >30 < d iv c la s s= " c o l - s m - 2 ">31 < d iv c l as s = " r o w " >32 < a s i d e >33 A si de 134 < / a s i d e >35 < a s i d e >36 A si de 237 < / a s i d e >38 39
40 41 < / s e c t i o n >42 43 44 < d iv c la s s=" c o l - l g - 1 2 " >45 P ie d d e p ag e46 47 < / f o o t e r >48 49 50
Le rsultat se trouve la figure 2.26.
Maintenant nous avons 2 asides ct de larticle. Pour y arriver, il faut 2 niveauxdimbrication. On a aussi un empilage complet la rduction, comme le montre lafigure 2.27.
Pourquoi len-tte et le pied de page ont maintenant la classe col-lg-12,
alors que dans lexemple prcdent on avait col-sm-12 ?
Comme la largeur est de 12 colonnes, tout ce qui nous intresse est le centrage, que ces2 classes possdent en commun, sans influence du mdia utilis. On peut donc utiliserindiffremment ces 2 classes dans notre cas.
38
8/10/2019 Prenez en Main Bootstrap
54/317
MISE EN PAGE
Figure2.26 Une mise en page plus complexe
Figure2.27 Rsultat la rduction
39
8/10/2019 Prenez en Main Bootstrap
55/317
CHAPITRE 2. UNE GRILLE ?
Quatrime cas
Terminons avec un cas plus fourni :
1 2 < html >3 < head >4 < l in k h re f= " a s s e t s / c s s / b o o t s t r a p . c s s " rel = " s t y l e s h e e t ">5 < l in k h re f= " a s s e t s / c s s / t u t o . c s s " rel = " s t y l e s h e e t ">6 < s t y le t y pe = " t e x t / c s s " >7 /* S ty le p ou r l'exemple*/8 f o ot e r {9 b o rd e r : 0 ;
10 }11 a r ti c le . c ol - s m - 6 , n av . c ol - s m - 2 {
12 l in e - h e i gh t : 6 0 px ;13 }14 15 16 < body >17 < d iv c l as s = " c o n t a i n e r " >18 19 < d iv c la s s=" c o l - l g - 1 2 " >20 Entete21 22 < / h e a d e r >23 < d iv c l as s = " r o w " >24 25 Menu26 < / n a v >27 28 Section29 < d iv c l as s = " r o w " >30 < d iv c la s s= " c o l - s m - 1 0 ">31 < d iv c l as s = " r o w " >32 33 Article34 < / a r t i c l e >35 36 Article37 < / a r t i c l e >38 39 Article40 < / a r t i c l e >41 42 Article43 < / a r t i c l e >
44 45 Article46 < / a r t i c l e >47
40
8/10/2019 Prenez en Main Bootstrap
56/317
MISE EN PAGE
48 Article49 < / a r t i c l e >50 51 52 < d iv c la s s= " c o l - s m - 2 ">53 < d iv c l as s = " r o w " >54 < a s i d e >55 A si de 156 < / a s i d e >57 < a s i d e >58 A si de 259 < / a s i d e >60 61 62 63 < / s e c t i o n >64 65 Section66 < d iv c l as s = " r o w " >67 68 Article69 < / a r t i c l e >70 71 Article72 < / a r t i c l e >
73 74 Article75 < / a r t i c l e >76 77 Article78 < / a r t i c l e >79 80 Article81 < / a r t i c l e >82 83 Article
84 < / a r t i c l e >85 86 < / s e c t i o n >87 88 89 < d iv c la s s=" c o l - l g - 1 2 " >90 P ie d d e p ag e91 92 < / f o o t e r >93 94 95
Le rsultat se trouve la figure 2.28.
41
8/10/2019 Prenez en Main Bootstrap
57/317
8/10/2019 Prenez en Main Bootstrap
58/317
8/10/2019 Prenez en Main Bootstrap
59/317
CHAPITRE 2. UNE GRILLE ?
44
8/10/2019 Prenez en Main Bootstrap
60/317
Chapitre3
Un peu de pratique
Difficult :
Nous avons vu en dtail les possibilits de la grille de Bootstrap. Nous avons vu gale-
ment comment faire des mises en pages adaptes diffrents types de supports. Il est
temps maintenant de mettre en application toutes ces connaissances avec des applications
pratiques.
45
8/10/2019 Prenez en Main Bootstrap
61/317
CHAPITRE 3. UN PEU DE PRATIQUE
Combiner les formats et exemple de page
Nous allons maintenant utiliser ce que nous avons vu dans les chapitres prcdents
pour construire une page pratique.
Combinaison de classes col-*
Nous avons vu des mises en page utilisant slectivement les classes pour les colonnesprvues pour les diffrents formats de supports. Nous allons prsent envisager leurcombinaison pour grer certains cas. Dans la page raliser, je veux avoir des petitesphotos cte cte. Supposons que je parte de cette structure pour cette partie de lapage :
1 2 < html >3
4 < head >5 6 < l in k h re f= " a s s e t s / c s s / b o o t s t r a p . c s s " rel = " s t y l e s h e e t ">7 < s t y le t y pe = " t e x t / c s s " >8 [ c l a s s * = " c o l "] { m ar gi n - b o tt om : 2 0p x ; }9 i mg { w id th : 10 0 %; }
10 b od y { m ar gi n - t op : 1 0p x ; }11 12 13
14 < body >15
16 < d iv c l as s = " c o n t a i n e r " >17 18 < d iv c la s s=" c o l - l g - 2 " > < i mg s rc = " i m a g e s / t 1 . j p g " alt = "
Tigre" > 19 < d iv c la s s=" c o l - l g - 2 " > < i mg s rc = " i m a g e s / t 2 . j p g " alt = "
Tigre" > 20 < d iv c la s s=" c o l - l g - 2 " > < i mg s rc = " i m a g e s / t 3 . j p g " alt = "
Tigre" > 21 < d iv c la s s=" c o l - l g - 2 " > < i mg s rc = " i m a g e s / t 4 . j p g " alt = "
Tigre" > 22 < d iv c la s s=" c o l - l g - 2 " > < i mg s rc = " i m a g e s / t 5 . j p g " alt = "
Tigre" > 23 < d iv c la s s=" c o l - l g - 2 " > < i mg s rc = " i m a g e s / t 6 . j p g " alt = "
Tigre" > 24 < d iv c la s s=" c o l - l g - 2 " > < i mg s rc = " i m a g e s / t 7 . j p g " alt = "
Tigre" >
25 < d iv c la s s=" c o l - l g - 2 " > < i mg s rc = " i m a g e s / t 8 . j p g " alt = "Tigre" > 26 < d iv c la s s=" c o l - l g - 2 " > < i mg s rc = " i m a g e s / t 9 . j p g " alt = "
Tigre" >
46
8/10/2019 Prenez en Main Bootstrap
62/317
COMBINER LES FORMATS ET EXEMPLE DE PAGE
27 < d iv c la s s=" c o l - l g - 2 " > < i mg s rc =" i m a g e s / t 1 0 . j p g " alt ="Tigre" >
28 < d iv c la s s=" c o l - l g - 2 " > < i mg s rc =" i m a g e s / t 1 1 . j p g " alt ="Tigre" >
29 < d iv c la s s=" c o l - l g - 2 " > < i mg s rc =" i m a g e s / t 1 2 . j p g " alt ="Tigre" >
30 < / s e c t i o n >31 32
33 34
Le rendu sur grand cran est parfait avec 6 photos sur la largeur (voir figure 3.1).
Figure3.1 Affichage sur grand cran
Mais a se gte quand je rtrcis la fentre, puisque je sais quen dessous de 1200
pixels les lments sempilent. Du coup je me retrouve avec une image sur la largeur,et comme je les ai prvues en basse rsolution, elle pixellise, comme la figure 3.2.
Lidal serait davoir :
Sur moyen et grand cran : 6 images sur la largeur Sur tablette : 4 images sur la largeur Sur smartphone : 3 images sur la largeur
Comment raliser cela ? Tout simplement en combinant les classes col-*:
1 < d iv c l as s = " c o n t a i n e r ">2 3 < d iv c l as s = " c ol - x s - 4 c ol - s m - 3 c ol - m d - 2 " > < i mg s rc = " i m a g e s / t 1
. j p g " alt = " T i g r e " > 4 < d iv c l as s = " c ol - x s - 4 c ol - s m - 3 c ol - m d - 2 " > < i mg s rc = " i m a g e s / t 2
. j p g " alt = " T i g r e " > 5 < d iv c l as s = " c ol - x s - 4 c ol - s m - 3 c ol - m d - 2 " > < i mg s rc = " i m a g e s / t 3
. j p g " alt = " T i g r e " > 6 < d iv c l as s = " c ol - x s - 4 c ol - s m - 3 c ol - m d - 2 " > < i mg s rc = " i m a g e s / t 4
. j p g " alt = " T i g r e " > 7 < d iv c l as s = " c ol - x s - 4 c ol - s m - 3 c ol - m d - 2 " > < i mg s rc = " i m a g e s / t 5
. j p g " alt = " T i g r e " >
8 < d iv c l as s = " c ol - x s - 4 c ol - s m - 3 c ol - m d - 2 " > < i mg s rc = " i m a g e s / t 6. j p g " alt = " T i g r e " > 9 < d iv c l as s = " c ol - x s - 4 c ol - s m - 3 c ol - m d - 2 " > < i mg s rc = " i m a g e s / t 7
. j p g " alt = " T i g r e " >
47
8/10/2019 Prenez en Main Bootstrap
63/317
CHAPITRE 3. UN PEU DE PRATIQUE
Figure3.2 Affichage au-dessous de 1200 pixels
48