Prenez en Main Bootstrap

8/10/2019 Prenez en Main Bootstrap

1/317


2/317


3/317


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


5/317


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


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


9/317

CHAPITRE 0. AVANT-PROPOS

iv


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


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


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


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 autre aspect . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 211

Transition progressive . . . . . . . . . . . . . . . . . . . . . . . . . . . . 211

Empilage . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 211

Justification . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 212Dsactiver un lien . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 212

Un menu droulant dans un onglet . . . . . . . . . . . . . . . . . . . . . 213

viii


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


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


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


16/317

Premire partie

Premiers pas

1


17/317


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


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


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


21/317


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


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


23/317


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


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


25/317


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


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


27/317


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


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


29/317


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


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


31/317


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


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


33/317


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


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


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


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


37/317


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


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


39/317


Figure2.7 Aspect sur petit cran

Figure2.8 Empilement ou rduction ?

24


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


41/317


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


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


43/317


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


44/317



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


45/317



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


Figure2.16 On a saut des colonnes plusieurs fois

30


46/317


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 :


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


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


47/317


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


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 :


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


48/317


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 :


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


49/317


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


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


51/317


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


53/317


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


54/317

MISE EN PAGE

Figure2.26 Une mise en page plus complexe

Figure2.27 Rsultat la rduction

39


55/317


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


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


57/317


58/317


59/317


44


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


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" >

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


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" >



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 " >

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


63/317

CHAPITRE 3. UN PEU DE PRATIQUE

Figure3.2 Affichage au-dessous de 1200 pixels

48

Documents

Prenez en Main Bootstrap