Vous êtes sur la page 1sur 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 licence
Texte complet de la licence disponible sur : http : //creativecommons.org/licenses/by-nc-sa/2.0/fr/
Mentions lgales
Conception couverture et illustrations chapitres : amalgam impression
OpenClassrooms 2014 - ISBN : 979-10-90085-62-6

Avant-propos
uand 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 plus
faciles. Dautre part, la multiplication des supports de visualisation (allant des
petits crans de smartphones des crans gants) complique le problme. On finit par
se 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 o
il devenait vraiment difficile de maintenir une cohrence et surtout de faire voluer les
applications. Cest alors que Mark Otto et Jaconb Thornton se sont attels la tche de
crer une librairie commune. Le succs fut rapide, tant au sein de cette entreprise qu
lextrieur, o elle a rpondu une attente vidente. Le fait dadopter cette librairie
ma fait gagner un temps considrable, dcouvrir des aspects qui mavaient chapps,
et en comprendre dautres qui demeuraient un peu abscons jusque l. Les critiques
concernant lhomognisation visuelle des sites utilisant cette librairie ne rsistent pas
la pratique, parce quil est facile dorganiser son propre visuel une fois quon matrise
un 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 vie
plus facile pour crer larchitecture dune page web. Mais Bootstrap va bien plus loin
quoffrir du code CSS dj bien organis et structur. Il offre aussi des plugins jQuery
de qualit pour enrichir vos pages.

Quallez-vous apprendre en lisant ce livre ?


Ce livre est destin vous guider dans lapprentissage de Bootstrap en abordant les
notions de faon progressive et abondamment illustre dexemples pratiques. Je lai
conu comme le guide que jaurais aim possder quand jai dcouvert cette librairie. Au
fil de son criture, jai rencontr des notions qui mavaient chappes ou sur lesquelles
jtais pass trop rapidement. la fin de cette lecture, et si vous tudiez les exemples
i

CHAPITRE 0. AVANT-PROPOS
proposs, vous serez capables dutiliser efficacement cette librairie et de ladapter vos
besoins particuliers. Voici les chapitres du cours et une prsentation succincte de ce
quils proposent.
1. Mise en route : pour utiliser efficacement Bootstrap, vous devez dj tre
convaincu de son utilit et 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 utilis pour les visualiser.
2. Une grille ? Lorganisation spatiale des pages web est lune des premires proccupations 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 sur
un des cts pour recevoir certaines fonctionnalits comme la connexion ou des
informations ? Faut-il prvoir un bas de page ? Bootstrap ne rpond videmment
pas 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 vous
propose une petite visite guide. . .
3. Un peu de pratique : Nous avons vu en dtail les possibilits de la grille de
Bootstrap. 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 un
certain nombre dlments trs frquents, comme des listes, des tableaux, des formulaires, des icnes, des boutons... Crer une harmonie dans la prsentation des
tous ces lments nest pas une tche aise. Nous allons voir comment Bootstrap
permet de crer un rendu visuel cohrent pour que tous ces lments cohabitent
de faon esthtique.
5. Les composants intgrs : Bootstrap propose des composants bien pratiques
mettre en uvre : barre de navigation, effets typographiques, panneaux, thumbnails. . . et tout a, sans crire une seule ligne de code Javascript. Nous verrons
aussi alertes et barres de progression qui demandent un peu de Javascript pour
tre mises en uvre. . .
6. Les plugins jQuery : jQuery est un framework Javascript devenu incontournable au fil des annes. Les crateurs de Bootstrap lont choisi pour offrir des
plugins esthtiques et faciles mettre en uvre, dans la plupart des cas sans
mme mettre les doigts dans du code ! Toutefois, si vous voulez obtenir le meilleur
de ces plugins, il vous faudra un peu manipuler jQuery.
7. Configurer Bootstrap : Utiliser directement ce que nous offre Bootstrap cest
bien, mais le modifier pour le rendre exactement adapt nos besoins cest encore
mieux. Alors, si vous voulez bidouiller Bootstrap, ce chapitre est fait pour vous !
ii

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 certains
chapitres, ici il est trs fortement recommand de suivre lordre du cours, moins que
vous 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 de
bien cerner le comportement de chaque instruction. Plus vous vous exercerez, et plus
lapprentissage sera rapide et efficace.

Remerciements
Rdiger un livre est toujours une aventure la fois personnelle et partage. Je suis
dj lauteur de 3 ouvrages dans des domaines trs loigns de linformatique, mais qui
mont 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 pu
exprimenter par ailleurs. Jai aussi envie de remercier les lecteurs de mon cours sur le
site qui mont beaucoup encourag. Je me suis ainsi rendu compte de son utilit.

iii

CHAPITRE 0. AVANT-PROPOS

iv

Table des matires

Avant-propos

Bootstrap . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Quallez-vous apprendre en lisant ce livre ? . . . . . . . . . . . . . . . . . . . .

Comment lire ce livre ? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

iii

Suivez lordre des chapitres . . . . . . . . . . . . . . . . . . . . . . . . .

iii

Pratiquez en mme temps . . . . . . . . . . . . . . . . . . . . . . . . . .

iii

Remerciements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

iii

Premiers pas

1 Mise en route

Un framework ? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Les intrts . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Les inconvnients . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Dcouverte de Bootstrap . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Origine de Bootstrap . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Contenu du kit . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

volution de Bootstrap . . . . . . . . . . . . . . . . . . . . . . . . . . .

Installation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Installation de Bootstrap

. . . . . . . . . . . . . . . . . . . . . . . . . .

Les CDN . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

10

Une trame pour dmarrer . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

11

TABLE DES MATIRES


Le template de base . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

11

Un template de dmarrage . . . . . . . . . . . . . . . . . . . . . . . . . .

12

Les Media Queries . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

15

2 Une grille ?
Prsentation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

20

Le principe dune grille . . . . . . . . . . . . . . . . . . . . . . . . . . . .

20

Terminologie . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

20

La grille de Bootstrap . . . . . . . . . . . . . . . . . . . . . . . . . . . .

21

Organisation de la grille . . . . . . . . . . . . . . . . . . . . . . . . . . .

21

La grille en pratique . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

27

Le 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

II

45

Combiner les formats et exemple de page . . . . . . . . . . . . . . . . . . . .

46

Combinaison de classes col-* . . . . . . . . . . . . . . . . . . . . . .

46

Page dexemple . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

49

Cas pratiques et classes responsive . . . . . . . . . . . . . . . . . . . . . .

56

Exercice 1 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

56

Exercice 2 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

64

Mise en forme des lments

4 Elments de base
vi

19

71
73

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 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 140
Effets typographiques et thumbnails . . . . . . . . . . . . . . . . . . . . . . . 140
La page dexemple . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 140
Jumbotron . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 142
Des libells colors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 143
Des badges . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 144
Thumbnails . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 146
Listes groupes, panneaux et mdias . . . . . . . . . . . . . . . . . . . . . . . 150
La page dexemple . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 150
Les listes groupes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 150
vii

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

6 Les plugins jQuery

173
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 . . . . . . . . . . . . . . . . . . . . . 207
Activation avec Javascript . . . . . . . . . . . . . . . . . . . . . . . . . . 208
Onglets . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 210
Un premier exemple simple . . . . . . . . . . . . . . . . . . . . . . . . . 210
Un autre aspect . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 211
Transition progressive . . . . . . . . . . . . . . . . . . . . . . . . . . . . 211
Empilage . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 211
Justification . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 212
Dsactiver un lien

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 212

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


viii

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 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 230
Info-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 . . . . . . . . . . . . . . . 240
Afficher 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 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 250
Mise en page avec le Scrollspy . . . . . . . . . . . . . . . . . . . . . . . . 250
Un mouvement fluide . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 256
ix

TABLE DES MATIRES


Activation par Javascript . . . . . . . . . . . . . . . . . . . . . . . . . . 256
7 Configurer Bootstrap

259

Configuration simplifie . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 260


Une 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 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 270
Slecteurs 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

Premire partie

Premiers pas

Chapitre

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.

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 informatique
pour faciliter le travail des programmeurs, que ce soit en terme de productivit ou de
simplification de la maintenance. Il en existe beaucoup pour les applications web qui
ciblent de nombreux langages : Java, Python, Ruby, PHP. . .
Il existe des frameworks ct serveur (dsigns backend en anglais), et dautres ct
client (dsigns frontend en anglais). Bootstrap fait partie de cette deuxime catgorie. 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 galement
des composants HTML et JavaScript. Il comporte un systme de grille simple et efficace pour mettre en ordre laspect visuel dune page web. Il apporte du style pour les
boutons, les formulaires, la navigation. . . Il permet ainsi de concevoir un site web rapidement et avec peu de lignes de code ajoutes. Le framework le plus proche de Bootstrap est sans doute http://foundation.zurb.com/ qui est prsent comme The
most advanced responsive front-end framework in the world . Cette absence de modestie est-elle de mise ? Je pense que cest surtout une affaire de got et de prfrence
personnelle.

Les intrts
Les navigateurs sont pleins de fantaisies et ont des comportements trs diffrents
malgr leur lente convergence vers les standards. Les frameworks sont cross-browser,
cest dire que la prsentation est similaire quel que soit le navigateur utilis et
dune parfaite compatibilit ;
Les frameworks CSS font gagner du temps de dveloppement parce quils nous proposent les fondations de la prsentation ;
Les frameworks CSS normalisent la prsentation en proposant un ensemble homogne
de styles ;
Les frameworks CSS proposent en gnral une grille pour faciliter le positionnement
4

DCOUVERTE DE BOOTSTRAP
des lments ;
Les frameworks CSS offrent souvent des lments complmentaires : boutons esthtiques, barres de navigation, etc. ;
La grande diffusion de nouveaux moyens de visualisation du web (smartphones, tablettes. . .) impose dsormais la prise en compte de tailles dcran trs varies ; les
frameworks CSS prennent gnralement en compte cette contrainte.

Les inconvnients
Pour utiliser efficacement un framework il faut bien le connatre, ce qui implique un
temps 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 avec
LESS 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 projet
Bootstrap a t cr au dpart par Mark Otto et Jacob Thornton pour rpondre des
besoins internes de dveloppement de cette entreprise au niveau de luniformisation de
laspect des pages web. Il sagissait juste de stylisation CSS, mais le framework sest
ensuite enrichi de composants Javascript.
Il a ensuite t publi en 2011 en devenant rapidement populaire parce quil est venu
se positionner dans un espace vacant du dveloppement. Son systme de grille de 12
colonnes 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 actuellement la version 3. Celle-ci a pris un virage particulier en intgrant laspect
responsive par dfaut, alors quauparavant cette fonctionnalit faisait lobjet dun
fichier spar. Cette version est mme dclare comme mobile-first . Avec lutilisation croissante dappareils mobiles, le framework sest adapt pour offrir une solution
cense 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 vous
avez besoin de plus de 12 colonnes, ou de moins, il est toujours possible de modifier
la configuration ;
5

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 rsultat cross-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 des
lments HTML. Cela peut gnrer quelques surprises au rendu des pages web selon
le navigateur utilis. Dautre part certains navigateurs prsentent des dfauts de prise
en compte de certains lments. Normalize est un petit fichier CSS qui tablit des
rgles pour avoir un rendu identique quel que soit le navigateur utilis. Au lieu dagir
brutalement comme les reset CSS qui remettent toutes les valeurs zro, normalize
agit 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 larrive
frquente de nouvelles versions. Cest la fois un avantage (il samliore de plus en
plus) et un inconvnient (le code quon a crit pour une mise en page nest rapidement
plus valable pour les nouvelles versions). Le passage la version 3 a t une petite
rvolution avec de trs nombreux changements, en particulier une refonte complte de
la grille. Un site crit avec la version 2 doit tre totalement rcrit pour cette nouvelle
version, mais ce nest videmment pas une obligation. Lvolution du framework sest
faite essentiellement en direction des appareils nomades qui constituent peu peu le
parc le plus important dappareils pour surfer sur Internet.
La principale source dinformation pour connatre les changements des nouvelles versions est le blog officiel - http://blog.getbootstrap.com/. Il est aussi intressant
de sinformer en amont sur la page GitHub du projet - https://www.github.com/
twbs/bootstrap pour connatre les demandes des utilisateurs (Pull Requests) et les
6

INSTALLATION
problmes rencontrs (Issues).
Ce cours a t labor partir de la version 3.1 et tous les renseignements et exemples
donns ont t tests sur cette version.

Installation
Installation de Bootstrap
Linstallation de Bootstrap est simple : cliquez sur le bouton de tlchargement sur le
site du framework - http://getbootstrap.com/getting-started/#download. Vous
avez disposition trois boutons :
Download Bootstrap : permet de rcuprer juste les fichiers ncessaires au fonctionnement 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 certain
nombre de fichiers et de dossiers, comme le montre la figure 1.1.

Figure 1.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.css comporte les classes de base de Bootstrap ;
bootstrap.min.css comporte les mmes classes de base que bootstrap.css mais
est compil ;
bootstrap-theme.css contient des rgles de styles particulires pour crer un thme
spcifique pour Bootstrap ;
bootstrap-theme.min.css est identique bootstrap-theme.css mais est compil ;
7

CHAPITRE 1. MISE EN ROUTE

Figure 1.2 Le dossier dist contient les fichiers utiles lutilisation de Bootstrap
glyphicons-halflings-regular.svg comporte la collection dicnes au format svg ;
glyphicons-halflings-regular.ttf comporte la collection dicnes au format ttf ;
glyphicons-halflings-regular.woff comporte la collection dicnes au format
woff ;
glyphicons-halflings-regular.eot comporte la collection dicnes au format eot ;
bootstrap.js contient le code JavaScript des composants de Bootstrap ;
bootstrap.min.js contient le mme code JavaScript mais est compil ;
Les fichiers min (bootstrap.min.css, bootstrap.min.js et bootstrap-theme.min.css)
contiennent le mme code que leurs quivalents (bootstrap.css, bootstrap.js et
bootstrap-theme.css) mais ont t purs des commentaires et compils pour les
allger 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 dans
le 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 et
seule compte la vitesse de chargement, il faut donc cette fois utiliser les versions
compresses (min).
La figure 1.3 montre les fichiers utiles pendant la phase de dveloppement (les fichiers
bootstrap.js et jquery.js ne sont prvoir que si vous utilisez des plugins jQuery
et le dossier fonts uniquement si vous utilisez les icnes).
La figure 1.4 montre les fichiers utiles lorsque le site est en ligne (les fichiers bootstrap.min.js
et jquery.js ne sont prvoir que si vous utilisez des plugins jQuery et le dossier fonts
uniquement si vous utilisez les icnes).
8

INSTALLATION

Figure 1.3 Les fichiers utiles durant le dveloppement

Figure 1.4 Les fichiers utiles en production


Dans tous les exemples de ce cours, je pars du principe quun rpertoire bootstrap a
t cr la racine du site avec les trois rpertoires css, fonts et js comportant les
fichiers cits prcdemment.
Pour que Bootstrap fonctionne il faut le dclarer dans les pages HTML, qui doivent
dailleurs tre imprativement au format HTML 5, il faut donc prvoir le bon DOCTYPE :
1
2

<! DOCTYPE html >


...

Il faut ensuite dclarer au minimum le fichier bootstrap.min.css (ou bootstrap.css)


dans len-tte de la page web :
1
2
3
4

< head >

...
< link href = " bootstrap / css / bootstrap . min . css " rel = " stylesheet
">
</ head >

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 librairie
de Bootstrap ainsi que jQuery (la librairie jQuery ne fait pas partie des fichiers tlchar9

CHAPITRE 1. MISE EN ROUTE


gs avec Bootstrap et doit tre rcupr indpendamment sur http://jquery.com/) :
1
2

< script src = " bootstrap / js / jquery . js " > </ script >
< script src = " bootstrap / js / bootstrap . min . js " > </ script >

Et le fichier de thme ?

Ce fichier est un exemple damlioration de lesthtique de Bootstrap, il nest pas utile


pour son fonctionnement. Si vous observez lapparence des composants de Bootstrap,
vous allez constater quil sont plats , sans aucun relief. Dans la version 2, ce ntait
pas 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, vous
verrez quil contient des dfinitions de dgrads et dombrages. Vous trouvez le rsultat
de lapplication de ce thme sur cette page dexemple - http://getbootstrap.com/
examples/theme/. Nous reparlerons de ce fichier dans le chapitre de la configuration
de Bootstrap.

Les CDN
CDN est lacronyme de Content delivery network ; cest un rseau de serveurs qui
met disposition des librairies. Il devient ainsi inutile de prvoir ces librairies sur son
propre 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 vous
modifiez le fichier CSS de Bootstrap pour ladapter vos besoin, vous ne pourrez
plus bnficier des avantages dun CDN. Mais si vous voulez profiter de cette possibilit pour Bootstrap, utilisez bootstrapcdn - http://bootstrapcdn.com/. Vous pouvez 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. Vous
navez qu adapter les appels des librairies :
10

UNE TRAME POUR DMARRER


1
2
3
4

< link href = " // netdna . bootstrapcdn . com / bootstrap / 3 . 1 . 0 / css /


bootstrap . min . css " rel = " stylesheet " >
...
< script src = " // ajax . googleapis . com / ajax / libs / jquery / 1 . 10 . 2 /
jquery . min . js " > </ script >
< script src = " // netdna . bootstrapcdn . com / bootstrap / 3 . 1 . 0 / js /
bootstrap . min . js " > </ script >

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/#template et des exemples comportant lessentiel des lments
pour vous aider initier un projet. Pour le moment vous nallez pas encore comprendre
lutilit de tous ces lments, mais vous y reviendrez par la suite lorsque vous aurez
fait le tour de ce cours.
Dans le template de base, vous trouvez en premier cette ligne :
1

< meta name = " viewport " content = " width = device - width , initial scale = 1 . 0 " >

Cette ligne concerne uniquement les mobiles. On demande que laffichage occupe tout
lespace disponible avec une taille de 1, autrement dit sans zoom. Vous pouvez aller
encore 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

< link href = " css / bootstrap . min . css " rel = " stylesheet " >

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
2

< script src = " https :// code . jquery . com / jquery . js " > </ script >
< script src = " js / bootstrap . min . js " > </ script >

Avec un test conditionnel, on trouve aussi des rfrences :


1
2
3
4
5
6

<! -- HTML5 Shim and Respond . js IE8 support of HTML5 elements


and media queries -- >
<! -- WARNING : Respond . js doesn ' t work if you view the page via
file :// -- >
<! --[ if lt IE 9 ] >
< script src = " https :// oss . maxcdn . com / libs / html5shiv / 3 . 7 . 0 /
html5shiv . js " > </ script >
< script src = " https :// oss . maxcdn . com / libs / respond . js / 1 . 3 . 0 /
respond . min . js " > </ script >
< ![ endif ] -- >

11

CHAPITRE 1. MISE EN ROUTE


Le but de ces appels est de permettre aux navigateurs ne prenant pas en charge HTML5
et les Media Queries CSS3 de le faire ; ils visent essentiellement IE8. Pour obtenir plus
de renseignements sur respond.js vous pouvez aller sur la page GitHub - https:
//www.github.com/scottjehl/Respond. Mfiez-vous en particulier si vous utilisez un
CDN pour charger vos styles CSS, parce que respond.js utilise AJAX et vous pouvez
buter sur le problme daccs plusieurs domaines.
Le but du fichier html5shiv est de crer les lments (avec createElement) de type
bloc 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 tous
les fichiers sont situs dans un dossier bootstrap et des sous-dossiers fonctionnels) :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

<! DOCTYPE html >


< html >
< head >
< title > Bootstrap Template </ title >
< meta name = " viewport " content = " width = device - width , initial scale = 1 . 0 " >
< link href = " bootstrap / css / bootstrap . min . css " rel = "
stylesheet " >
<! -- HTML5 Shim and Respond . js IE8 support of HTML5
elements and media queries -- >
<! -- WARNING : Respond . js doesn ' t work if you view the page
via file :// -- >
<! --[ if lt IE 9 ] >
< script src = " https :// oss . maxcdn . com / libs / html5shiv / 3 . 7 . 0 /
html5shiv . js " > </ script >
< script src = " https :// oss . maxcdn . com / libs / respond . js / 1 . 3 . 0
/ respond . min . js " > </ script >
< ![ endif ] -- >
</ head >
< body >
< h1 > Hello , world ! </ h1 >
< script src = " https :// code . jquery . com / jquery . js " > </ script >
< script src = " bootstrap / js / bootstrap . min . js " > </ script >
</ body >
</ html >

Un template de dmarrage
Vous pouvez trouver galement sur le site 18 templates dexemple. Les lments ncessaires la comprhension de ces exemples seront exposs tout au long de ce cours.
Voyons toutefois le premier exemple, qui est le plus simple (http://getbootstrap.
com/examples/starter-template/).
1
2
3
4

12

<! DOCTYPE html >


< html lang = " en " >
< head >
< meta charset = " utf - 8 " >

UNE TRAME POUR DMARRER


5
6
7
8
9

< meta http - equiv = "X - UA - Compatible " content = " IE = edge " >
< meta name = " viewport " content = " width = device - width , initial scale = 1 . 0 " >
< meta name = " description " content = " " >
< meta name = " author " content = " " >
< link rel = " shortcut icon " href = " ../../ docs - assets / ico /
favicon . png " >

10
11

< title > Starter Template for Bootstrap </ title >

12
13
14

<! -- Bootstrap core CSS -- >


< link href = " ../../ dist / css / bootstrap . css " rel = " stylesheet " >

15
16
17

<! -- Custom styles for this template -- >


< link href = " starter - template . css " rel = " stylesheet " >

18
19
20
21
22
23
24

<! -- HTML5 shim and Respond . js IE8 support of HTML5


elements and media queries -- >
<! --[ if lt IE 9 ] >
< script src = " ../../ assets / js / html5shiv . js " > </ script >
< script src = " ../../ assets / js / respond . min . js " > </ script >
< ![ endif ] -- >
</ head >

25
26

< body >

27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46

< div class = " navbar navbar - inverse navbar - fixed - top " role = "
navigation " >
< div class = " container " >
< div class = " navbar - header " >
< button type = " button " class = " navbar - toggle " data toggle = " collapse " data - target = " . navbar - collapse " >
< span class = " icon - bar " > </ span >
< span class = " icon - bar " > </ span >
< span class = " icon - bar " > </ span >
</ button >
<a class = " navbar - brand " href = " # " > Project name </ a >
</ div >
< div class = " collapse navbar - collapse " >
< ul class = " nav navbar - nav " >
< li class = " active " > <a href = " # " > Home </ a > </ li >
< li > <a href = " # about " > About </ a > </ li >
< li > <a href = " # contact " > Contact </ a > </ li >
</ ul >
</ div > <! -- /. nav - collapse -- >
</ div >
</ div >

47
48

< div class = " container " >

49

13

CHAPITRE 1. MISE EN ROUTE


50
51
52

53

< div class = " starter - template " >


< h1 > Bootstrap starter template </ h1 >
<p class = " lead " > Use this document as a way to quickly
start any new project . < br > All you get is this text
and a mostly barebones HTML document . </ p >
</ div >

54
55

</ div > <! -- /. container -- >

56
57
58
59
60
61
62
63

<! -- Bootstrap core JavaScript


= = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = -- >
<! -- Placed at the end of the document so the pages load
faster -- >
< script src = " https :// code . jquery . com / jquery - 1 . 10 . 2 . min . js " >
</ script >
< script src = " ../../ dist / js / bootstrap . min . js " > </ script >
</ body >
</ html >

On retrouve ce quon a vu prcdemment avec la ligne pour les mobiles et lappel au fichier CSS de Bootstrap. On trouve la rfrence dun autre fichier CSS :
starter-template.css. Voyons ce que contient ce fichier :
1
2
3
4
5
6
7

body {
padding - top : 50px ;
}
. starter - template {
padding : 40px 15px ;
text - align : center ;
}

Nous verrons, lorsque nous parlerons du composant Barre de navigation de Bootstrap, quil faut parfois rserver un espace en haut de la page (avec padding-top: 50px)
pour viter que le texte du dbut ne se retrouve sous la barre. On trouve aussi ici la
classe starter-template qui se contente de fixer un espace interne et un alignement
centr 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 explique
tout a en dtail dans ce cours) :
1
2
3
4
5
6
7
8

14

< div class = " navbar navbar - inverse navbar - fixed - top " role = "
navigation " >
< div class = " container " >
< div class = " navbar - header " >
< button type = " button " class = " navbar - toggle " data - toggle = "
collapse " data - target = " . navbar - collapse " >
< span class = " sr - only " > Toggle navigation </ span >
< span class = " icon - bar " > </ span >
< span class = " icon - bar " > </ span >
< span class = " icon - bar " > </ span >

LES MEDIA QUERIES


9
10
11
12
13
14
15
16
17
18
19
20

</ button >


<a class = " navbar - brand " href = " # " > Project name </ a >
</ div >
< div class = " collapse navbar - collapse " >
< ul class = " nav navbar - nav " >
< li class = " active " > <a href = " # " > Home </ a > </ li >
< li > <a href = " # about " > About </ a > </ li >
< li > <a href = " # contact " > Contact </ a > </ li >
</ ul >
</ div > <! -- /. nav - collapse -- >
</ div >
</ div >

Le contenu de la page est ensuite insr dans une DIV comportant la classe container :
1
2
3
4

5
6

< div class = " container " >


< div class = " starter - template " >
< h1 > Bootstrap starter template </ h1 >
<p class = " lead " > Use this document as a way to quickly start
any new project . < br > All you get is this text and a
mostly barebones HTML document . </ p >
</ div >
</ div > <! -- /. container -- >

Nous verrons galement lintrt de cette classe et son utilisation. Considrez les exemples
de templates fournis sur le site de Bootstrap la fois comme des guides de dmarrage
et des aides la comprhension du framework. vitez de les prendre tels quels sans en
comprendre tous les lments. lissue de ce cours vous aurez tout en main pour le
faire. . .

Les Media Queries


Les Media Queries sont destines simplifier la cration de pages web pour les rendre
consultables 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

CHAPITRE 1. MISE EN ROUTE


La liste est longue, malheureusement peu de navigateurs actuels sont capables de digrer tout a. On se limite en gnral la taille de laffichage, lorientation et parfois
le 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 dordinateurs
mais trouve tout son intrt pour les smartphones. La taille de lcran est la surface
physique 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 possibilits
daffichage !
Mais ce nest pas le seul souci ! Le navigateur embarqu sur un smartphone a lui aussi
une 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 disposer
dune largeur de 980 px ! Sur ces appareils il est aussi possible dutiliser le zoom et
notre mise en page risque de sen ressentir. On peut se demander comment sen sortir
dans tout ce bazar. . . Heureusement on dispose de la balise META viewport pour fixer
certaines valeurs, voici ce qui est prconis dans le template de Bootstrap :
1

< meta name = " viewport " content = " width = device - width , initial scale = 1 . 0 " >

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 sur
mobile.
Syntaxe des Media Queries
Une media query est une expression dont la valeur est soit vraie, soit fausse. Voici un
exemple dans du code CSS :
1
2
3

@media ( max - width : 767px ) {


...
}

@media est 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. Lexpression 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

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 syntaxe
quivalente :
1

@media all and ( max - width : 767px ) { ... }

On en profite pour voir quon peut combiner des lments avec des oprateurs logiques.
Voici une autre expression avec le mme oprateur logique :
1

@media ( min - width : 768px ) and ( max - width : 979px ) { ... }

Ici, on veut prendre en compte les rgles du bloc si laffichage se situe entre 768px et
979px.
Si on veut appliquer des rgles lorsque lorientation est portrait , voici la syntaxe
utiliser :
1

@media ( orientation : portrait ) { ... }

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 des
Media Queries, comme par exemple ici, o est dfinie une rgle de dimension maximale
pour la classe container lorsque laffichage est dau moins 992 pixels :
1
2
3
4
5
6

@media ( min - width : 992px ) {


. container {
max - width : 970px ;
}
...
}

Nous verrons plus loin dans ce cours que Bootstrap dfinit quatre types de medias selon
la dimension de laffichage. Voici la syntaxe utilise :
1
2

/* Extra small devices ( phones , up to 480px ) */


/* No media query since this is the default in Bootstrap */

3
4
5

/* Small devices ( tablets , 768px and up ) */


@media ( min - width : @screen - tablet ) { ... }

6
7
8

/* Medium devices ( tablets , 992px and up ) */


@media ( min - width : @screen - desktop ) { ... }

9
10
11

/* Large devices ( large desktops , 1200px and up ) */


@media ( min - width : @screen - large - desktop ) { ... }

17

CHAPITRE 1. MISE EN ROUTE

En rsum
Bootstrap est un framework CSS qui comporte en plus des plugins jQuery pour
composer des pages web.
Bootstrap est un framework rcent qui a connu un dveloppement et une popularit
trs rapide.
Bootstrap sinstalle facilement en rfrenant quelques fichiers sur son serveur ou
mme en passant directement par des CDN.
Bootstrap propose des templates de dmarrage pour viter de partir avec une page
blanche.
Bootstrap intgre des medias queries pour adapter les pages web tous les supports
de visualisation.

18

Chapitre

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

CHAPITRE 2. UNE GRILLE ?

Prsentation
Le principe dune grille
Une grille est tout simplement un dcoupage en cellules de mmes dimensions (voir
figure 2.1).

Figure 2.1 Une grille


On peut alors dcider dorganiser du contenu en utilisant pour chaque lment une ou
plusieurs cellules, comme la figure 2.2.

Figure 2.2 On peut placer des lments sur la grille


La grille de Bootstrap comporte 12 colonnes comme dans lillustration prcdente. Vous
commencez sans doute comprendre lutilit de cette organisation.

Terminologie
Une grille est dcoupe en ranges (appeles row, parce que tout est en anglais) et
colonnes (col ), comme la figure 2.3.

Figure 2.3 Une grille est compose de ranges et de colonnes

20

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 largeur
de 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 leur
contenu (voir figure 2.4).

Figure 2.4 Les ranges ont la hauteur de leur contenu


Moralit, une range prend la hauteur du plus gros lment quelle contient. Puisque
la largeur des colonnes est contrainte, le flux des donnes scoule verticalement, ce qui
est un comportement HTML classique. Il faudra en tenir compte lors de la mise en
page.

Organisation de la grille
Bootstrap est essentiellement un fichier CSS. Il comporte de nombreuses classes que
lon peut utiliser directement dans les balises HTML.
La premire classe connatre est row, qui reprsente une range. Il faut ensuite dfinir
le 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 quatre
batteries de 12 classes :

col-xs-1 ou col-sm-1 ou col-md-1 ou col-lg-1


col-xs-2 ou col-sm-2 ou col-md-2 ou col-lg-2
...
col-xs-12 ou col-sm-12 ou col-md-12 ou 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 que
sur un smartphone. Mais que se passe-t-il pour les lments dune page web lorsque
la fentre diminue ou slargit ? On peut envisager deux hypothses : les lments se
redimensionnent en restant positionns, ou alors ils sempilent quand la fentre devient
plus troite et se positionnent cte cte quand elle slargit. Voici aux figures suivantes
lexemple de la page daccueil du site OpenClassrooms - http://fr.openclassrooms.
21

CHAPITRE 2. UNE GRILLE ?


com/ qui illustre ce phnomne avec trois situations (cran large, figure 2.5, cran
moyen, figure 2.6, et petit cran, 2.7) :

Figure 2.5 Aspect sur grand cran


Plutt que de ratatiner les lments au risque de les rendre illisibles, le choix a t
fait de les empiler petit petit quand la fentre devient plus troite. Une autre option
pourrait consister supprimer des lments pas vraiment utiles, mais nous reviendrons
plus tard sur ce point. Pour le moment on va juste se demander comment on peut
choisir 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 768
pixels), les moyens, genre tablettes (moins de 992 pixels), les crans moyens (moins de
1200 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 : xs pour x-small, sm pour small, md pour medium et lg
pour large.
22

PRSENTATION

Figure 2.6 Aspect sur cran moyen

Comportement

Classe
Valeur de rfrence

Petit cran
(smartphone)
Redimension

cran
rduit
(tablette)
Redimension

cran
moyen
(desktop)
Redimension

col-xs-*
< 768 px

col-sm-*
> 768 px

col-md-*
> 992 px

Grand
cran
(desktop)
Empilage
puis
redimensionnement
col-lg-*
> 1200 px

23

CHAPITRE 2. UNE GRILLE ?

Figure 2.7 Aspect sur petit cran

Figure 2.8 Empilement ou rduction ?

24

PRSENTATION

Un petit exemple ?

Pour avoir un lment de 4 colonnes de large accoupl avec un lment de 8 colonnes


de large sur un smartphone, on a :
1
2
3
4

< div class = " row " >


< div class = " col - xs - 4 " > Largeur 4 </ div >
< div class = " col - xs - 8 " > Largeur 8 </ div >
</ div >

La figure 2.9 illustre ce code avec leffet quand on passe sur un cran plus grand.

Figure 2.9 Un lment de 4 colonnes ct dun lment de 8 colonnes


Voici la version tablette :
1
2
3
4

< div class = " row " >


< div class = " col - sm - 4 " > Largeur 4 </ div >
< div class = " col - sm - 8 " > Largeur 8 </ div >
</ div >

La figure 2.10 illustre ce code avec leffet quand on passe sur un cran plus petit ou
plus grand.

Figure 2.10 Laffichage change en fonction de la taille de lcran


Vous remarquez que lors de lempilage, les colonnes prennent toute la place
disponible.
25

CHAPITRE 2. UNE GRILLE ?


Et enfin, voici la version grand cran :
1
2
3
4

< div class = " row " >


< div class = " col - lg - 4 " > Largeur 4 </ div >
< div class = " col - lg - 8 " > Largeur 8 </ div >
</ div >

La figure 2.11 illustre ce code avec leffet quand on passe sur un cran de plus en plus
petit.

Figure 2.11 La version grand cran


La largeur des lments de la grille est calcule en pourcentage selon la fentre de
visualisation. Rien ninterdit videmment de mlanger des classes des 3 catgories pour
crer 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 Bootstrap, on va passer en revue les possibilits dans le dtail. Mais pour visualiser tous les
exemples qui vont suivre, je vous propose dajouter un peu de style, histoire dafficher
les lments de faon explicite. Pour viter de polluer le code HTML on va mettre ce
style spcifique au cours dans un fichier CSS particulier :
1
2
3
4
5
6
7
8
9
10

body {
padding - top : 10px ;
}
[ class *= " col - " ] , footer {
background - color : lightgreen ;
border : 2px solid black ;
border - radius : 6px ;
line - height : 40px ;
text - align : center ;
}

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 haut
de lcran. Des bordures (avec des coins arrondis pour lesthtique) et un fond color
pour distinguer les lments. Une hauteur fixe 40 pixels, parce qutant donn que
26

LA GRILLE EN PRATIQUE
la hauteur des ranges dpend du contenu, on aurait un rendu htroclite. La figure
2.12 prsente laspect obtenu.

Figure 2.12 Le rsultat final

La grille en pratique
Le conteneur
La grille de Bootstrap doit tre place dans un conteneur. Bootstrap propose les classes
container et container-fluid. Leur utilisation tait auparavant optionnelle. Il est
dsormais clairement indiqu dans la documentation quil faut la mettre en uvre
systmatiquement si on veut obtenir des alignements et des espacements corrects. La
classe container contient et centre la grille sur une largeur fixe, qui sadapte en fonction de la largeur de lcran. La classe container-fluid permet la grille doccuper
toute la largeur. Dans les exemples de ce chapitre, je vais utiliser systmatiquement
container pour avoir une visualisation plus facile des lments. Ce conteneur a une
largeur maximale selon le mdia concern, comme indiqu au tableau suivant.

Conteneur
maximum
Valeur de
rfrence

Petit cran
(smartphone)
Auto

Ecran
rduit
(tablette)
750 px

Ecran
moyen
(desktop)
970 px

Grand
cran
(desktop)
1170 px

< 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
2
3
4
5
6

. container {
padding - right : 15px ;
padding - left : 15px ;
margin - right : auto ;
margin - left : auto ;
}

Ce sont les mmes rgles pour la classe container-fluid. Ce qui est ajout pour la
classe container est la limite de largeur spcifie par mdia :
1
2
3

@media ( min - width : 768px ) {


. container {
max - width : 750px ;

27

CHAPITRE 2. UNE GRILLE ?


4
5
6
7
8
9
10
11
12
13
14
15

}
...
@media ( min - width : 992px ) {
. container {
max - width : 970px ;
}
...
@media ( min - width : 1200px ) {
. container {
max - width : 1170px ;
}
...

Une seule range


Dans ce premier exemple, on va dclarer une seule range avec deux lments qui
occupent tout lespace :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<! DOCTYPE html >


< html >
< head >
< link href = " assets / css / bootstrap . css " rel = " stylesheet " >
< link href = " assets / css / tuto . css " rel = " stylesheet " >
</ head >
< body >
< div class = " container " >
< div class = " row " >
< div class = " col - lg - 4 " >4 colonnes </ div >
< div class = " col - lg - 8 " >8 colonnes </ div >
</ div >
</ div >
</ body >
</ html >

Ce qui nous donne la figure 2.13.

Figure 2.13 Une seule range avec deux lments qui occupent tout lespace
Mise en page rapide et simple non ?

Plusieurs ranges
Pour obtenir plusieurs ranges, il suffit dutiliser plusieurs fois la classe row. Un petit
exemple avec 3 ranges pour voir leffet :
28

LA GRILLE EN PRATIQUE
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

<! DOCTYPE html >


< html >
< head >
< link href = " assets / css / bootstrap . css " rel = " stylesheet " >
< link href = " assets / css / tuto . css " rel = " stylesheet " >
</ head >
< body >
< div class = " container " >
< div class = " row " >
< div class = " col - lg - 1 " >1 col </ div >
< div class = " col - lg - 2 " >2 colonnes </ div >
< div class = " col - lg - 3 " >3 colonnes </ div >
< div class = " col - lg - 6 " >6 colonnes </ div >
</ div >
< div class = " row " >
< div class = " col - lg - 12 " > 12 colonnes </ div >
</ div >
< div class = " row " >
< div class = " col - lg - 4 " >4 colonnes </ div >
< div class = " col - lg - 8 " >8 colonnes </ div >
</ div >
</ div >
</ body >
</ html >

Ce qui nous donne la figure 2.14.

Figure 2.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
2
3

. col - lg - offset - 6 {
margin - left : 50 %;
}

Dans ce cas, 6 colonnes reprsentent la moiti de la fentre donc 50%. Voici un exemple :
29

CHAPITRE 2. UNE GRILLE ?


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

<! DOCTYPE html >


< html >
< head >
< link href = " assets / css / bootstrap . css " rel = " stylesheet " >
< link href = " assets / css / tuto . css " rel = " stylesheet " >
</ head >
< body >
< div class = " container " >
< div class = " row " >
< div class = " col - lg - 3 " >3 colonnes </ div >
< div class = " col - lg - 6 " >6 colonnes </ div >
< div class = " col - lg - 3 " >3 colonnes </ div >
</ div >
< div class = " row " >
< div class = " col - lg - 3 " >3 colonnes </ div >
< div class = " col - lg - offset - 6 col - lg - 3 " >3 colonnes </ div >
</ div >
</ div >
</ body >
</ html >

Voici le rsultat la figure 2.15.

Figure 2.15 On a saut des colonnes


On a saut 6 colonnes grce la classe col-lg-offset-6. On peut videmment multiplier les sauts :
1
2
3
4
5
6
7

< div class = " container " >


< div class = " row " >
< div class = " col - lg - 2 col - lg - offset - 1 " >2 colonnes </ div >
< div class = " col - lg - 4 col - lg - offset - 2 " >4 colonnes </ div >
< div class = " col - lg - 2 col - lg - offset - 1 " >2 colonnes </ div >
</ div >
</ div >

Voici le rsultat la figure 2.16.

Figure 2.16 On a saut des colonnes plusieurs fois

30

LA GRILLE EN PRATIQUE

Imbrication dlments
On doit souvent imbriquer des lments dans une page web, est-ce possible avec Bootstrap ? Autrement dit inclure un row dans un col. Eh bien, on va tester a tout de
suite :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

<! DOCTYPE html >


< html >
< head >
< link href = " assets / css / bootstrap . css " rel = " stylesheet " >
< link href = " assets / css / tuto . css " rel = " stylesheet " >
</ head >
< body >
< div class = " container " >
< div class = " row " >
< div class = " col - lg - 8 " >8 colonnes
< div class = " row " >
< div class = " col - lg - 3 " >3 colonnes </ div >
< div class = " col - lg - 6 " >6 colonnes </ div >
< div class = " col - lg - 3 " >3 colonnes </ div >
</ div >
</ div >
</ div >
</ div >
</ body >
</ html >

Voici le rsultat la figure 2.17.

Figure 2.17 On a imbriqu des ranges


On dirait bien que a fonctionne !
Les imbrications peuvent senchaner pour rpondre des besoins complexes :
1
2
3
4
5
6
7
8
9

< div class = " container " >


< div class = " row " >
< div class = " col - md - 12 " > Premier niveau avec 12 colonnes
< div class = " row " >
< div class = " col - md - 8 " > Second niveau avec 8 colonnes
< div class = " row " >
< div class = " col - md - 4 " > Troisi me niveau avec 4 colonnes <
/ div >
< div class = " col - md - 6 col - md - offset - 2 " > Troisi me niveau
avec 6 colonnes
< div class = " row " >

31

CHAPITRE 2. UNE GRILLE ?


10
11
12
13
14
15
16
17
18
19

< div class = " col - md - 3 col - md - offset - 1 " > Quatri me
niveau avec 3 colonnes </ div >
< div class = " col - md - 5 col - md - offset - 1 " > Quatri me
niveau avec 5 colonnes </ div >
</ div >
</ div >
</ div >
</ div >
< div class = " col - md - 4 " > Second niveau avec 4 colonnes </ div >
</ div >
</ div >
</ div >

Voici le rsultat la figure 2.18.

Figure 2.18 Une imbrication complexe avec des sauts de colonnes

Ordre des colonnes


Trs logiquement, les colonnes saffichent dans lordre du flux. Il peut arriver quon
veuille bouleverser cet ordre. Regardez cet exemple :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

32

<! DOCTYPE html >


< html >
< head >
< link href = " assets / css / bootstrap . css " rel = " stylesheet " >
< link href = " assets / css / tuto . css " rel = " stylesheet " >
</ head >
< body >
< div class = " container " >
< div class = " row " >
< div class = " col - lg - 12 " > 12 colonnes
< div class = " row " >
< div class = " col - lg - 2 col - lg - push - 8 " > Colonne 1 </ div >
< div class = " col - lg - 2 col - lg - push - 3 " > Colonne 2 </ div >
< div class = " col - lg - 2 col - lg - pull - 2 " > Colonne 3 </ div >
</ div >
</ div >
</ div >
</ div >
</ body >

LA GRILLE EN PRATIQUE
20

</ html >

Et voici le rsultat la figure 2.19.

Figure 2.19 On peut choisir lordre des colonnes


La classe col-lg-push-* permet de dcaler une colonne vers la droite et la classe
col-lg-pull-* fait linverse.

Un petit TP
Pour vous entraner, je vous propose dobtenir le rsultat visible la figure 2.20.

Figure 2.20 Essayez dobtenir ce rsultat


Donc deux zones spares avec un offset de 2 colonnes dans la partie gauche.
Voici la solution :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

<! DOCTYPE html >


< html >
< head >
< link href = " assets / css / bootstrap . css " rel = " stylesheet " >
< link href = " assets / css / tuto . css " rel = " stylesheet " >
</ head >
< body >
< div class = " container " >
< div class = " row " >
< div class = " col - lg - 6 " >6 colonnes
< div class = " row " >
< div class = " col - lg - 4 " >4 colonnes </ div >
< div class = " col - lg - offset - 4 col - lg - 4 " >4 colonnes </
div >
</ div >
</ div >
< div class = " col - lg - 6 " >6 colonnes
< div class = " row " >
< div class = " col - lg - 4 " >4 colonnes </ div >
< div class = " col - lg - 8 " >8 colonnes </ div >
</ div >

33

CHAPITRE 2. UNE GRILLE ?


21
22
23
24
25

</ div >


</ div >
</ div >
</ body >
</ html >

Mise en page
Lintrt principal dune grille est de raliser une mise en page. Nous allons voir quelques
exemples pour structurer correctement une page.

Premier cas
Commenons par quelque chose de simple avec une en-tte, un menu gauche, une
section droite et un pied de page :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

<! DOCTYPE html >


< html >
< head >
< link href = " assets / css / bootstrap . css " rel = " stylesheet " >
< link href = " assets / css / tuto . css " rel = " stylesheet " >
</ head >
< body >
< div class = " container " >
< header class = " row " >
< div class = " col - lg - 12 " >
Entete
</ div >
</ header >
< div class = " row " >
< nav class = " col - lg - 2 " >
Menu
</ nav >
< section class = " col - lg - 10 " >
Section
</ section >
</ div >
< footer class = " row " >
Pied de page
</ footer >
</ div >
</ body >
</ html >

Le rsultat se trouve la figure 2.21.


Jai utilis les classes pour grand cran avec les classe col-lg-*, ce qui fait qu la
rduction, je me retrouve avec un empilage ds que je passe en dessous de 1200 pixels
34

MISE EN PAGE

Figure 2.21 Une mise en page simple


(voir figure 2.22).

Figure 2.22 Empilage la rduction de laffichage


Si je veux que ma mise en forme reste stable aussi pour les crans moyens, comment
faire ? Il me suffit dutiliser les classes col-md-* la place de col-lg-*, ce qui a pour
effet de dplacer la limite 992 pixels (testez ! http://bootstrap.twit.free.fr/
tutov3/grid07a.html). De la mme faon, lutilisation des classes col-sm-* dplace
la 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 une
incohrence au niveau de laffichage du contenu.

Second cas
Considrons maintenant un cas un peu plus riche :
1
2
3
4
5
6
7

<! DOCTYPE html >


< html >
< head >
< link href = " assets / css / bootstrap . css " rel = " stylesheet " >
< link href = " assets / css / tuto . css " rel = " stylesheet " >
</ head >
< body >

35

CHAPITRE 2. UNE GRILLE ?


8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

< div class = " container " >


< header class = " row " >
< div class = " col - sm - 12 " >
Entete
</ div >
</ header >
< div class = " row " >
< nav class = " col - sm - 2 " >
Menu
</ nav >
< section class = " col - sm - 10 " >
Section
< div class = " row " >
< article class = " col - md - 10 " >
Article
</ article >
< aside class = " col - md - 2 " >
Aside
</ aside >
</ div >
</ section >
</ div >
< footer class = " row " >
< div class = " col - sm - 12 " >
Pied de page
</ div >
</ footer >
</ div >
</ body >
</ html >

Le rsultat se trouve la figure 2.23.

Figure 2.23 Une mise en page plus riche


On a conserv len-tte et le pied de page, ainsi que le menu, mais on a intgr dans le
contenu un article et un aside. Lensemble est prvu pour fonctionner sur desktop
(grand et petit). Pour les tablettes, on se retrouve avec un empilage pour le contenu de
la section (utilisation de classes col-md-* pour article et aside), comme la figure
2.24.
36

MISE EN PAGE

Figure 2.24 Rsultat sur une tablette


Et comme on na rien prvu de spcial pour les smartphones, tout sempile (voir figure
2.25).

Figure 2.25 Rsultat sur un smartphone

Troisime cas
Enrichissons encore la mise en page :
1
2
3
4
5
6
7
8
9
10
11
12
13
14

<! DOCTYPE html >


< html >
< head >
< link href = " assets / css / bootstrap . css " rel = " stylesheet " >
< link href = " assets / css / tuto . css " rel = " stylesheet " >
< style type = " text / css " >
/* Style pour l ' exemple */
article . col - sm - 10 , nav . col - sm - 2 {
line - height : 100px ;
}
</ style >
</ head >
< body >
< div class = " container " >

37

CHAPITRE 2. UNE GRILLE ?


15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50

< header class = " row " >


< div class = " col - lg - 12 " >
Entete
</ div >
</ header >
< div class = " row " >
< nav class = " col - sm - 2 " >
Menu
</ nav >
< section class = " col - sm - 10 " >
Section
< div class = " row " >
< article class = " col - sm - 10 " >
Article
</ article >
< div class = " col - sm - 2 " >
< div class = " row " >
< aside >
Aside 1
</ aside >
< aside >
Aside 2
</ aside >
</ div >
</ div >
</ div >
</ section >
</ div >
< footer class = " row " >
< div class = " col - lg - 12 " >
Pied de page
</ div >
</ footer >
</ div >
</ body >
</ html >

Le rsultat se trouve la figure 2.26.


Maintenant nous avons 2 asides ct de larticle. Pour y arriver, il faut 2 niveaux
dimbrication. On a aussi un empilage complet la rduction, comme le montre la
figure 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 ces
2 classes possdent en commun, sans influence du mdia utilis. On peut donc utiliser
indiffremment ces 2 classes dans notre cas.
38

MISE EN PAGE

Figure 2.26 Une mise en page plus complexe

Figure 2.27 Rsultat la rduction

39

CHAPITRE 2. UNE GRILLE ?

Quatrime cas
Terminons avec un cas plus fourni :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

40

<! DOCTYPE html >


< html >
< head >
< link href = " assets / css / bootstrap . css " rel = " stylesheet " >
< link href = " assets / css / tuto . css " rel = " stylesheet " >
< style type = " text / css " >
/* Style pour l ' exemple */
footer {
border : 0 ;
}
article . col - sm -6 , nav . col - sm - 2 {
line - height : 60px ;
}
</ style >
</ head >
< body >
< div class = " container " >
< header class = " row " >
< div class = " col - lg - 12 " >
Entete
</ div >
</ header >
< div class = " row " >
< nav class = " col - sm - 2 " >
Menu
</ nav >
< section class = " col - sm - 10 " >
Section
< div class = " row " >
< div class = " col - sm - 10 " >
< div class = " row " >
< article class = " col - sm - 6 " >
Article
</ article >
< article class = " col - sm - 6 " >
Article
</ article >
< article class = " col - sm - 6 " >
Article
</ article >
< article class = " col - sm - 6 " >
Article
</ article >
< article class = " col - sm - 6 " >
Article
</ article >
< article class = " col - sm - 6 " >

MISE EN PAGE
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95

Article
</ article >
</ div >
</ div >
< div class = " col - sm - 2 " >
< div class = " row " >
< aside >
Aside 1
</ aside >
< aside >
Aside 2
</ aside >
</ div >
</ div >
</ div >
</ section >
< section class = " col - sm - offset - 2 col - sm - 10 " >
Section
< div class = " row " >
< article class = " col - sm - 6 " >
Article
</ article >
< article class = " col - sm - 6 " >
Article
</ article >
< article class = " col - sm - 6 " >
Article
</ article >
< article class = " col - sm - 6 " >
Article
</ article >
< article class = " col - sm - 6 " >
Article
</ article >
< article class = " col - sm - 6 " >
Article
</ article >
</ div >
</ section >
</ div >
< footer class = " row " >
< div class = " col - lg - 12 " >
Pied de page
</ div >
</ footer >
</ div >
</ body >
</ html >

Le rsultat se trouve la figure 2.28.


41

CHAPITRE 2. UNE GRILLE ?

Figure 2.28 Une mise en page trs charge

42

MISE EN PAGE
Dans les 2 sections, jai mis 6 articles dune largeur de 6 colonnes qui se positionnent
parfaitement. Il nest pas utile de crer 3 ranges. Dans la deuxime section, je nai pas
mis daside pour montrer un mlange de compositions. Le dcalage de la deuxime
section pour tenir compte de la largeur du menu se fait tout simplement avec une classe
doffset. En ce qui concerne le choix des classes pour les colonnes je me suis arrang
pour que la premire section garde sa structure quand on rtrcit.
Vous avez pu voir avec ces quelques exemples quon peut obtenir facilement une structure de page aussi complexe que lon veut. Le point le plus dlicat demeure le choix
des classes pour les colonnes en fonction du rsultat que lon dsire selon les mdias
utiliss. Dans tous les cas, il faut tester les diffrents formats parce que le rendu ne
donne pas forcment du premier coup ce que lon avait prvu. Si vous ny parvenez pas
avec une seule classe, alors la solution est den combiner plusieurs, cest ce que nous
allons voir bientt. . .

En rsum
Bootstrap propose une grille pour positionner tous les lments des pages web.
La grille est versatile et permet de nombreuses combinaisons comme des inclusions,
des sauts de colonnes.
La grille rend possible galement une adaptation selon les dimensions du support de
visualisation en rorganisant les lments ou en masquant certains.

43

CHAPITRE 2. UNE GRILLE ?

44

Chapitre

Un peu de pratique
Difficult :
Nous avons vu en dtail les possibilits de la grille de Bootstrap. 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.

45

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 colonnes
prvues pour les diffrents formats de supports. Nous allons prsent envisager leur
combinaison pour grer certains cas. Dans la page raliser, je veux avoir des petites
photos cte cte. Supposons que je parte de cette structure pour cette partie de la
page :
1
2

<! DOCTYPE HTML >


< html >

3
4
5
6
7
8
9
10
11
12

< head >


< meta charset = " utf - 8 " >
< link href = " assets / css / bootstrap . css " rel = " stylesheet " >
< style type = " text / css " >
[ class *= " col " ] { margin - bottom : 20px ; }
img { width : 100 %; }
body { margin - top : 10px ; }
</ style >
</ head >

13
14

< body >

15
16
17
18
19
20
21
22
23
24
25
26

46

< div class = " container " >


< section class = " row " >
< div class = " col - lg - 2 " > < img
Tigre " > </ div >
< div class = " col - lg - 2 " > < img
Tigre " > </ div >
< div class = " col - lg - 2 " > < img
Tigre " > </ div >
< div class = " col - lg - 2 " > < img
Tigre " > </ div >
< div class = " col - lg - 2 " > < img
Tigre " > </ div >
< div class = " col - lg - 2 " > < img
Tigre " > </ div >
< div class = " col - lg - 2 " > < img
Tigre " > </ div >
< div class = " col - lg - 2 " > < img
Tigre " > </ div >
< div class = " col - lg - 2 " > < img
Tigre " > </ div >

src = " images / t1 . jpg " alt = "


src = " images / t2 . jpg " alt = "
src = " images / t3 . jpg " alt = "
src = " images / t4 . jpg " alt = "
src = " images / t5 . jpg " alt = "
src = " images / t6 . jpg " alt = "
src = " images / t7 . jpg " alt = "
src = " images / t8 . jpg " alt = "
src = " images / t9 . jpg " alt = "

COMBINER LES FORMATS ET EXEMPLE DE PAGE


27
28
29
30
31

< div class = " col - lg - 2 " > < img src = " images / t10 . jpg " alt = "
Tigre " > </ div >
< div class = " col - lg - 2 " > < img src = " images / t11 . jpg " alt = "
Tigre " > </ div >
< div class = " col - lg - 2 " > < img src = " images / t12 . jpg " alt = "
Tigre " > </ div >
</ section >
</ div >

32
33
34

</ body >


</ html >

Le rendu sur grand cran est parfait avec 6 photos sur la largeur (voir figure 3.1).

Figure 3.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
2
3
4
5
6
7
8
9

< div class = " container " >


< section class = " row " >
< div class = " col - xs - 4 col - sm - 3
. jpg " alt = " Tigre " > </ div >
< div class = " col - xs - 4 col - sm - 3
. jpg " alt = " Tigre " > </ div >
< div class = " col - xs - 4 col - sm - 3
. jpg " alt = " Tigre " > </ div >
< div class = " col - xs - 4 col - sm - 3
. jpg " alt = " Tigre " > </ div >
< div class = " col - xs - 4 col - sm - 3
. jpg " alt = " Tigre " > </ div >
< div class = " col - xs - 4 col - sm - 3
. jpg " alt = " Tigre " > </ div >
< div class = " col - xs - 4 col - sm - 3
. jpg " alt = " Tigre " > </ div >

col - md - 2 " > < img src = " images / t1


col - md - 2 " > < img src = " images / t2
col - md - 2 " > < img src = " images / t3
col - md - 2 " > < img src = " images / t4
col - md - 2 " > < img src = " images / t5
col - md - 2 " > < img src = " images / t6
col - md - 2 " > < img src = " images / t7

47

CHAPITRE 3. UN PEU DE PRATIQUE

Figure 3.2 Affichage au-dessous de 1200 pixels

48

COMBINER LES FORMATS ET EXEMPLE DE PAGE


10
11
12
13
14
15
16

< div class = " col - xs - 4 col - sm - 3 col - md - 2 " > < img
. jpg " alt = " Tigre " > </ div >
< div class = " col - xs - 4 col - sm - 3 col - md - 2 " > < img
. jpg " alt = " Tigre " > </ div >
< div class = " col - xs - 4 col - sm - 3 col - md - 2 " > < img
t10 . jpg " alt = " Tigre " > </ div >
< div class = " col - xs - 4 col - sm - 3 col - md - 2 " > < img
t11 . jpg " alt = " Tigre " > </ div >
< div class = " col - xs - 4 col - sm - 3 col - md - 2 " > < img
t12 . jpg " alt = " Tigre " > </ div >
</ section >
</ div >

src = " images / t8


src = " images / t9
src = " images /
src = " images /
src = " images /

Je vais avoir ainsi :


Sur un cran de plus de 992 pixels de large : classes col-md-2 actives
Sur un cran entre 768 et 992 pixels de large : classes col-sm-3 actives
Sur un cran de moins de 768 pixels de large : classes col-xs-4 actives
Et voici la figure 3.3 le rsultat sur cran moyen (classes col-sm-3 actives).

Figure 3.3 Affichage sur cran moyen


Et la figure 3.4, le rsultat sur petit cran (classes col-xs-4 actives).
Jai donc obtenu facilement une adaptation de la prsentation de mes photos en fonction
du support utilis pour les visualiser.

Page dexemple
Construisons maintenant une page complte qui intgre la partie que nous venons de
traiter :
49

CHAPITRE 3. UN PEU DE PRATIQUE

Figure 3.4 Affichage sur petit cran

1
2

<! DOCTYPE HTML >


< html >

3
4
5
6
7
8
9
10
11

< head >


< meta charset = " utf - 8 " >
< link href = " assets / css / bootstrap . css " rel = " stylesheet " >
< style type = " text / css " >
[ class *= " col " ] { margin - bottom : 20px ; }
img { width : 100 %; }
</ style >
</ head >

12
13
14
15
16
17
18
19
20
21

22

23
24

50

< body >


< div class = " container " >
< header class = " page - header " >
< h1 > Mon amour pour les tigres </ h1 >
</ header >
< section class = " row " >
< div class = " col - lg - 12 " >
<p >
Je suis passionn par les < strong > tigres </ strong >
depuis tr s longtemps . Ce site a t construit
en < em > hommage ces merveilleux f lins ... </ em > <
br >
Je fais partie de la < abbr title = " Soci t des
Amoureux des Tigres " > SAT </ abbr > qui a pour but
de faire conna tre ces splendides animaux .
</ p >
<p > Voici ce qu ' en dit le wikipedia : </ p >

COMBINER LES FORMATS ET EXEMPLE DE PAGE


25
26

27

28

29

30

31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51

< blockquote >


Le Tigre ( Panthera tigris ) est un mammif re
carnivore de la famille des f lid s ( Felidae ) du
genre Panthera .
Ais ment reconnaissable sa fourrure rousse ray e de noir , il
est le plus grand f lin sauvage et l ' un des plus grands
carnivores du monde .
L ' esp ce est divis e en neuf sous - esp ces poss dant des diff
rences mineures en termes de taille ou de comportement .
Superpr dateur ,
il chasse principalement les cerfs et les sangliers , bien qu ' il
puisse s ' attaquer des proies de taille plus importante
comme les buffles .
Jusqu ' au XIXe si cle , le Tigre tait r put mangeur d ' homme . La
structure sociale des tigres en fait un animal solitaire ;
le m le poss de
un territoire qui englobe les domaines de plusieurs femelles et
ne participe pas l ' ducation des petits . < br >
< small class = " pull - right " > Wikipedia </ small > < br >
</ blockquote >
</ div >
</ section >
< section class = " row " >
< div class = " col - xs - 4 col - sm - 3 col - md - 2 " > < img src = "
images / t1 . jpg " alt = " Tigre " > </ div >
< div class = " col - xs - 4 col - sm - 3 col - md - 2 " > < img src = "
images / t2 . jpg " alt = " Tigre " > </ div >
< div class = " col - xs - 4 col - sm - 3 col - md - 2 " > < img src = "
images / t3 . jpg " alt = " Tigre " > </ div >
< div class = " col - xs - 4 col - sm - 3 col - md - 2 " > < img src = "
images / t4 . jpg " alt = " Tigre " > </ div >
< div class = " col - xs - 4 col - sm - 3 col - md - 2 " > < img src = "
images / t5 . jpg " alt = " Tigre " > </ div >
< div class = " col - xs - 4 col - sm - 3 col - md - 2 " > < img src = "
images / t6 . jpg " alt = " Tigre " > </ div >
< div class = " col - xs - 4 col - sm - 3 col - md - 2 " > < img src = "
images / t7 . jpg " alt = " Tigre " > </ div >
< div class = " col - xs - 4 col - sm - 3 col - md - 2 " > < img src = "
images / t8 . jpg " alt = " Tigre " > </ div >
< div class = " col - xs - 4 col - sm - 3 col - md - 2 " > < img src = "
images / t9 . jpg " alt = " Tigre " > </ div >
< div class = " col - xs - 4 col - sm - 3 col - md - 2 " > < img src = "
images / t10 . jpg " alt = " Tigre " > </ div >
< div class = " col - xs - 4 col - sm - 3 col - md - 2 " > < img src = "
images / t11 . jpg " alt = " Tigre " > </ div >
< div class = " col - xs - 4 col - sm - 3 col - md - 2 " > < img src = "
images / t12 . jpg " alt = " Tigre " > </ div >
</ section >
< section class = " row " >
< aside class = " col - sm - 4 " >

51

CHAPITRE 3. UN PEU DE PRATIQUE


52
53
54
55
56
57
58
59
60
61
62
63
64
65

< address >


<p > Vous pouvez me contacter cette adresse : </ p >
< strong > Tigrou Alfred </ strong > < br >
All e des fauves < br >
28645 F lins - sur - Loire < br >
</ address >
</ aside >
< div class = " col - sm - 8 " >
< img src = " images / photo - tigre . jpg " alt = " Tigre " >
</ div >
</ section >
</ div >
</ body >
</ html >

Voici la figure 3.5 le rsultat obtenu.


Une simple composition avec un en-tte et 3 ranges. Len-tte ne comporte que le titre
avec une classe un peu particulire que nous allons voir plus loin. La premire range
comporte un seul lment. La deuxime en revanche en comporte 12 et correspond ce
que nous avons vu prcdemment. Voici la figure 3.6 une visualisation du dcoupage.
La classe page-header
Cette classe fixe quelques valeurs :
1
2
3
4
5

. page - header {
padding - bottom : 9px ;
margin : 40px 0 20px ;
border - bottom : 1px solid # eee ;
}

Une marge haute de 40 pixels et basse de 20 pixels. Une ligne infrieure de 1 pixel
de couleur grise, avec un cart de 9 pixels entre le contenu et cette ligne. Donc une
approche sympathique pour un en-tte de page. Il suffit dy placer un titre comme je
lai fait ici :
1
2
3

< header class = " page - header " >


< h1 > Mon amour pour les tigres </ h1 >
</ header >

Voici le rsultat la figure 3.7.


Quelques mises en valeur
Dans le premier paragraphe, jai utilis quelques mises en valeur :
1

52

<p > Je suis passionn par les < strong > tigres </ strong > depuis tr
s longtemps . Ce site a t construit en < em > hommage ces
merveilleux f lins ... </ em > < br >

COMBINER LES FORMATS ET EXEMPLE DE PAGE

Figure 3.5 La page dexemple

53

CHAPITRE 3. UN PEU DE PRATIQUE

Figure 3.6 La page dexemple dcrypte

Figure 3.7 La classe page-header

54

COMBINER LES FORMATS ET EXEMPLE DE PAGE


2

</ p >

Je fais partie de la < abbr title = " Soci t des Amoureux


des Tigres " > SAT </ abbr > qui a pour but de faire conna
tre ces splendides animaux .

Observez la figure 3.8 la qualit du popup lorsque lon passe le curseur au-dessus de
labrviation SAT.

Figure 3.8 Apparence dune abrviation

Une citation
Le chapitre suivant comporte une citation avec utilisation de la balise blockquote :
1
2
3

< blockquote > Le Tigre ( Panthera tigris ) est un mammif re


carnivore ... < br >
< small class = " pull - right " > Wikipedia </ small > < br >
</ blockquote >

Le rsultat est sobre et lgant (voir figure 3.9).

Figure 3.9 Apparence dune citation


La rfrence infrieure Wikipedia a t renvoye droite avec la classe pull-right
qui se contente de rendre flottant droite :
1
2
3

. pull - right {
float : right ! important ;
}

Une adresse
Dans la partie infrieure gauche figure une adresse. Jai simplement utilis la balise
<address> :
1
2

< address >


<p > Vous pouvez me contacter cette adresse : </ p >

55

CHAPITRE 3. UN PEU DE PRATIQUE


3
4
5
6

<p > < strong > Tigrou Alfred </ strong > < br >
All e des fauves < br >
28645 F lins - sur - Loire < br >
</ address >

Pour un rsultat satisfaisant, visible la figure 3.10.

Figure 3.10 Apparence dune adresse

Juste un peu de style ajout


Pour donner plus dharmonie cette page, jai t oblig dajouter une marge basse de
20px tous les col et jai oblig les images occuper tout lespace disponible :
1
2
3
4
5
6

[ class *= " col " ] {


margin - bottom : 20px ;
}
img {
width : 100 %;
}

Cest le seul lment de style ajout cette page.

Cas pratiques et classes responsive


Maintenant, vous avez tous les lments en main pour construire des pages ! Je vous
propose donc quelques exercices pratiques pour vous entraner.

Exercice 1
Le but est dobtenir une mise en page pour grand cran identique celle de la figure
3.11.
Rflchissez un peu avant de regarder la solution.
1
2
3
4
5
6
7

56

<! DOCTYPE html >


< html >
< head >
< link href = " assets / css / bootstrap . css " rel = " stylesheet " >
< link href = " assets / css / tuto . css " rel = " stylesheet " >
<! -- Un peu de style pour la visualisation -- >
< style type = " text / css " >

CAS PRATIQUES ET CLASSES RESPONSIVE

Figure 3.11 Rsultat obtenir

8
9
10
11
12
13

. col - lg - 8 { line - height : 200px ; }


. col - lg - 12 { line - height : 80px ; }
</ style >
</ head >
< body >
< div class = " container " >

14
15
16
17
18
19

< header class = " row " >


< div class = " col - lg - 12 " >
Entete
</ div >
</ header >

20
21

< div class = " row " >

22
23
24
25
26
27
28
29
30
31
32

< div class = " col - lg - 2 " >


< div class = " row " >
< aside class = " col - lg - 12 " >
Aside
</ aside >
< aside class = " col - lg - 12 " >
Aside
</ aside >
</ div >
</ div >

33
34
35
36

< section class = " col - lg - 8 " >


Section
</ section >

37
38
39
40

< div class = " col - lg - 2 " >


< div class = " row " >
< aside class = " col - lg - 12 " >

57

CHAPITRE 3. UN PEU DE PRATIQUE


41
42
43
44
45
46
47

Aside
</ aside >
< aside class = " col - lg - 12 " >
Aside
</ aside >
</ div >
</ div >

48
49

</ div >

50
51
52
53
54
55

< footer class = " row " >


< div class = " col - lg - 12 " >
Pied de page
</ div >
</ footer >

56
57
58
59

</ div >


</ body >
</ html >

Maintenant la question se poser cest : comment va ragir cette structure quand on


va rduire la fentre ? Comme jai mis des classes col-lg-*, tout va sempiler sous
1200 pixels. Si cet effet me convient, cest parfait. Mais supposons que, sur tablette, je
veuille une structure similaire celle de la figure 3.12.
Comment procder ? Voici une solution :
1
2
3
4
5
6
7
8
9
10
11
12
13

<! DOCTYPE html >


< html >
< head >
< link href = " assets / css / bootstrap . css " rel = " stylesheet " >
< link href = " assets / css / tuto . css " rel = " stylesheet " >
<! -- Un peu de style pour la visualisation -- >
< style type = " text / css " >
. col - md -8 , . col - sm - 10 { line - height : 200px ; }
. col - md - 12 { line - height : 80px ; }
</ style >
</ head >
< body >
< div class = " container " >

14
15
16
17
18
19

< header class = " row " >


< div class = " col - md - 12 " >
Entete
</ div >
</ header >

20
21

< div class = " row " >

22
23
24

58

< div class = " col - sm - 2 " >


< div class = " row " >

CAS PRATIQUES ET CLASSES RESPONSIVE

Figure 3.12 Affichage dsir sur tablette

59

CHAPITRE 3. UN PEU DE PRATIQUE


25
26
27
28
29
30
31
32

< aside class = " col - md - 12 " >


Aside 1
</ aside >
< aside class = " col - md - 12 " >
Aside 2
</ aside >
</ div >
</ div >

33
34
35
36

< section class = " col - sm - 10 col - md - 8 " >


Section
</ section >

37
38

< div class = " clearfix visible - sm " > </ div >

39
40
41
42
43
44
45
46
47
48
49

< div class = " col - md - 2 " >


< div class = " row " >
< aside class = " col - md - 12 " >
Aside 3
</ aside >
< aside class = " col - md - 12 " >
Aside 4
</ aside >
</ div >
</ div >

50
51

</ div >

52
53
54
55
56
57

< footer class = " row " >


< div class = " col - md - 12 " >
Pied de page
</ div >
</ footer >

58
59
60
61

</ div >


</ body >
</ html >

Jai remplac les classes col-lg-* par des classes col-md-* pour avoir un comportement de base pour crans moyens et grands. Jai ensuite introduit des classes col-sm-*
pour avoir le comportement dsir sur tablette. En revanche, la ligne 38 mrite quelques
commentaires particuliers. Pour le mdia tablette, vous avez des lments flottants qui
se succdent avec des comportements qui ne sont pas forcment ceux que lon souhaite.
La figure 3.13 vous montre le rsultat sans cette ligne de code.
Que fait cette classe clearfix ? Regardons le code :
1
2
3

60

. clearfix : after {
clear : both ;
}

CAS PRATIQUES ET CLASSES RESPONSIVE

Figure 3.13 Rsultat sans la classe clearfix


Autrement dit, on rinitialise les lments flottants qui suivent pour les ramener dans
le flux normal, et viter quils viennent recouvrir les lments prcdents. Nous allons
voir maintenant la classe visible-sm. . .
Les classes responsives
Pour poursuivre lexercice prcdent, il faut dabord voquer quelques classes trs utiles
qui vont nous permettre non plus de positionner diffremment les lments, mais carrment de les faire disparatre ou apparatre . Vous trouverez un tableau trs bien fait
dans la documentation - http://getbootstrap.com/css/#responsive-utilities,
visible la figure 3.14.
Nous avons dj utilis une de ces classes. Continuons en utiliser pour poursuivre
notre exercice en supprimant 2 asides pour les smartphones (voir figure 3.15).
Il suffit de changer une ligne, la ligne 40 :
1
2
3
4
5
6
7

<! DOCTYPE html >


< html >
< head >
< link href = " assets / css / bootstrap . css " rel = " stylesheet " >
< link href = " assets / css / tuto . css " rel = " stylesheet " >
<! -- Un peu de style pour la visualisation -- >
< style type = " text / css " >

61

CHAPITRE 3. UN PEU DE PRATIQUE

Figure 3.14 Les classes responsives

Figure 3.15 Affichage dsir sur smartphone

62

CAS PRATIQUES ET CLASSES RESPONSIVE


8
9
10
11
12
13

. col - md -8 , . col - sm - 10 { line - height : 200px ; }


. col - md - 12 { line - height : 80px ; }
</ style >
</ head >
< body >
< div class = " container " >

14
15
16
17
18
19

< header class = " row " >


< div class = " col - md - 12 " >
Entete
</ div >
</ header >

20
21

< div class = " row " >

22
23
24
25
26
27
28
29
30
31
32

< div class = " col - sm - 2 " >


< div class = " row " >
< aside class = " col - md - 12 " >
Aside
</ aside >
< aside class = " col - md - 12 " >
Aside
</ aside >
</ div >
</ div >

33
34
35
36

< section class = " col - sm - 10 col - md - 8 " >


Section
</ section >

37
38

< div class = " clearfix visible - sm " > </ div >

39
40
41
42
43
44
45
46
47
48
49

< div class = " hidden - xs col - md - 2 " >


< div class = " row " >
< aside class = " col - md - 12 " >
Aside
</ aside >
< aside class = " col - md - 12 " >
Aside
</ aside >
</ div >
</ div >

50
51

</ div >

52
53
54
55
56
57

< footer class = " row " >


< div class = " col - md - 12 " >
Pied de page
</ div >
</ footer >

63

CHAPITRE 3. UN PEU DE PRATIQUE


58
59
60
61

</ div >


</ body >
</ html >

Exercice 2
Voyons maintenant un autre cas. Je veux obtenir le rsultat visible la figure 3.16.

Figure 3.16 Rsultat obtenir


Donc une en-tte qui prend toute la largeur de lcran, une navigation gauche, deux
sections accoles et un pied de page, le tout pour grand cran. Voici une solution :
1
2
3
4
5
6
7
8
9
10
11
12
13

<! DOCTYPE html >


< html >
< head >
< link href = " assets / css / bootstrap . css " rel = " stylesheet " >
< link href = " assets / css / tuto . css " rel = " stylesheet " >
<! -- Un peu de style pour la visualisation -- >
< style type = " text / css " >
. col - lg - 2 { line - height : 100px ; }
. col - lg - 5 { line - height : 200px ; }
. col - lg - 12 { line - height : 80px ; }
</ style >
</ head >
< body >

14
15
16
17
18
19

< header >


< div class = " col - lg - 12 " >
Entete
</ div >
</ header >

20
21

< div class = " container " >

22
23

64

< div class = " row " >

CAS PRATIQUES ET CLASSES RESPONSIVE


24
25
26
27

< nav class = " col - lg - 2 " >


Navigation
</ nav >

28
29
30
31
32
33
34

< section class = " col - lg - 5 " >


Section
</ section >
< section class = " col - lg - 5 " >
Section
</ section >

35
36

</ div >

37
38
39
40
41
42

< footer class = " row " >


< div class = " col - lg - 12 " >
Pied de page
</ div >
</ footer >

43
44

</ div >

45
46
47

</ body >


</ html >

Maintenant je me dis que mon application serait bien aussi sur cran moyen. Si je ne
fais rien, jobtiens le rsultat visible la figure 3.17.
a ne me plat pas trop, jaimerais que les 2 sections restent accoles, comme la figure
3.18.
Voici une solution :
1
2
3
4
5
6
7
8
9
10
11
12
13

<! DOCTYPE html >


< html >
< head >
< link href = " assets / css / bootstrap . css " rel = " stylesheet " >
< link href = " assets / css / tuto . css " rel = " stylesheet " >
<! -- Un peu de style pour la visualisation -- >
< style type = " text / css " >
. col - lg - 2 { line - height : 100px ; }
. col - lg - 5 { line - height : 200px ; }
. col - lg - 12 { line - height : 80px ; }
</ style >
</ head >
< body >

14
15
16
17
18
19

< header >


< div class = " col - lg - 12 " >
Entete
</ div >
</ header >

65

CHAPITRE 3. UN PEU DE PRATIQUE

Figure 3.17 Rsultat sur cran moyen

Figure 3.18 Rsultat dsir sur cran moyen

66

CAS PRATIQUES ET CLASSES RESPONSIVE


20
21

< div class = " container " >

22
23

< div class = " row " >

24
25
26
27

< nav class = " col - md - 12 col - lg - 2 " >


Navigation
</ nav >

28
29
30
31
32
33
34

< section class = " col - md - 6 col - lg - 5 " >


Section
</ section >
< section class = " col - md - 6 col - lg - 5 " >
Section
</ section >

35
36

</ div >

37
38
39
40
41
42

< footer class = " row " >


< div class = " col - lg - 12 " >
Pied de page
</ div >
</ footer >

43
44

</ div >

45
46
47

</ body >


</ html >

Aprs rflexion, je me dis que mon application irait bien aussi sur tablette, lempilement des lments me convient, mais jaimerais avoir une en-tte diffrente. Aprs
une nouvelle rflexion, jen veux aussi une diffrente sur smartphone. Avec les classes
responsives vues prcdemment, cest facile raliser :
1
2
3
4
5
6
7
8
9
10
11
12
13

<! DOCTYPE html >


< html >
< head >
< link href = " assets / css / bootstrap . css " rel = " stylesheet " >
< link href = " assets / css / tuto . css " rel = " stylesheet " >
<! -- Un peu de style pour la visualisation -- >
< style type = " text / css " >
. col - lg - 2 { line - height : 100px ; }
. col - lg - 5 { line - height : 200px ; }
. col - lg - 12 { line - height : 80px ; }
</ style >
</ head >
< body >

14
15
16
17

< header >


< div class = " visible - lg col - lg - 12 " >
Entete large

67

CHAPITRE 3. UN PEU DE PRATIQUE


18
19
20
21
22
23
24
25
26
27
28

</ div >


< div class = " visible - md col - sm - 12 " >
Entete moyenne
</ div >
< div class = " visible - sm col - 12 " >
Entete tablette
</ div >
< div class = " visible - xs col - 12 " >
Entete smartphone
</ div >
</ header >

29
30

< div class = " container " >

31
32

< div class = " row " >

33
34
35
36

< nav class = " col - md - 12 col - lg - 2 " >


Navigation
</ nav >

37
38
39
40
41
42
43

< section class = " col - md - 6 col - lg - 5 " >


Section
</ section >
< section class = " col - md - 6 col - lg - 5 " >
Section
</ section >

44
45

</ div >

46
47
48
49
50
51

< footer class = " row " >


< div class = " col - lg - 12 " >
Pied de page
</ div >
</ footer >

52
53

</ div >

54
55
56

</ body >


</ html >

Testez ! http://bootstrap.twit.free.fr/tutov3/grid13c.html

En rsum
Il est possible avec la grille de rgler trs finement le rendu des pages selon les
supports de visualisation.
La plupart des lments typographiques du HTML trouvent automatiquement une
mise en forme esthtique avec Bootstrap.
68

CAS PRATIQUES ET CLASSES RESPONSIVE


On a vu sur des exemples pratiques quil est facile de faire des mises en page mme
complexes sans trop deffort.

69

CHAPITRE 3. UN PEU DE PRATIQUE

70

Deuxime partie

Mise en forme des lments

71

Chapitre

Elments de base
Difficult :
Un page web contient du texte et des images, mais aussi un certain nombre dlments
trs frquents : listes, tableaux, formulaires, icnes, boutons. Crer une harmonie dans la
prsentation des tous ces lments nest pas une tche aise.
Nous allons voir comment Bootstrap permet de crer un rendu visuel cohrent pour que
tous ces lments cohabitent de faon esthtique.

73

CHAPITRE 4. ELMENTS DE BASE

Listes, descriptions et tableaux


Voici le deuxime jet de la page web de test :
1
2

<! DOCTYPE HTML >


< html >

3
4
5
6
7
8
9
10
11

< head >


< meta charset = " utf - 8 " >
< link href = " assets / css / bootstrap . css " rel = " stylesheet " >
< style type = " text / css " >
[ class *= " col " ] { margin - bottom : 20px ; }
img { width : 100 %; }
</ style >
</ head >

12
13
14
15
16
17
18
19
20
21

22

23
24
25
26

27

28

29

30
31

74

< body >


< div class = " container " >
< header class = " page - header " >
< h1 > Mon amour pour les tigres </ h1 >
</ header >
< section class = " row " >
< div class = " col - lg - 12 " >
<p >
Je suis passionn par les < strong > tigres </ strong >
depuis tr s longtemps . Ce site a t construit
en < em > hommage ces merveilleux f lins ... </ em > <
br >
Je fais partie de la < abbr title = " Soci t des
Amoureux des Tigres " > SAT </ abbr > qui a pour but
de faire conna tre ces splendides animaux .
</ p >
<p > Voici ce qu ' en dit le wikipedia : </ p >
< blockquote >
Le Tigre ( Panthera tigris ) est un mammif re
carnivore de la famille des f lid s ( Felidae )
du genre Panthera .
Ais ment reconnaissable sa fourrure rousse ray e de noir , il
est le plus grand f lin sauvage et l ' un des plus grands
carnivores du monde .
L ' esp ce est divis e en neuf sous - esp ces poss dant des diff
rences mineures en termes de taille ou de comportement .
Superpr dateur ,
il chasse principalement les cerfs et les sangliers , bien qu ' il
puisse s ' attaquer des proies de taille plus importante
comme les buffles .
Jusqu ' au XIXe si cle , le Tigre tait r put mangeur d ' homme . La
structure sociale des tigres en fait un animal solitaire ;
le m le poss de un territoire qui englobe les domaines de
plusieurs femelles et ne participe pas l ' ducation des

LISTES, DESCRIPTIONS ET TABLEAUX

32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68

petits . < br >


< small class = " pull - right " > Wikipedia </ small > < br >
</ blockquote >
</ div >
</ section >
< section class = " row " >
< div class = " col - xs - 4 col - sm - 3 col - md - 2 " > < img src = "
images / t1 . jpg " alt = " Tigre " > </ div >
< div class = " col - xs - 4 col - sm - 3 col - md - 2 " > < img src = "
images / t2 . jpg " alt = " Tigre " > </ div >
< div class = " col - xs - 4 col - sm - 3 col - md - 2 " > < img src = "
images / t3 . jpg " alt = " Tigre " > </ div >
< div class = " col - xs - 4 col - sm - 3 col - md - 2 " > < img src = "
images / t4 . jpg " alt = " Tigre " > </ div >
< div class = " col - xs - 4 col - sm - 3 col - md - 2 " > < img src = "
images / t5 . jpg " alt = " Tigre " > </ div >
< div class = " col - xs - 4 col - sm - 3 col - md - 2 " > < img src = "
images / t6 . jpg " alt = " Tigre " > </ div >
< div class = " col - xs - 4 col - sm - 3 col - md - 2 " > < img src = "
images / t7 . jpg " alt = " Tigre " > </ div >
< div class = " col - xs - 4 col - sm - 3 col - md - 2 " > < img src = "
images / t8 . jpg " alt = " Tigre " > </ div >
< div class = " col - xs - 4 col - sm - 3 col - md - 2 " > < img src = "
images / t9 . jpg " alt = " Tigre " > </ div >
< div class = " col - xs - 4 col - sm - 3 col - md - 2 " > < img src = "
images / t10 . jpg " alt = " Tigre " > </ div >
< div class = " col - xs - 4 col - sm - 3 col - md - 2 " > < img src = "
images / t11 . jpg " alt = " Tigre " > </ div >
< div class = " col - xs - 4 col - sm - 3 col - md - 2 " > < img src = "
images / t12 . jpg " alt = " Tigre " > </ div >
</ section >
< div class = " row " >
< section class = " col - sm - 4 " >
< h5 > Voici les sous - esp ces des tigres : </ h5 >
< br >
< ul >
< li > Tigre de Sib rie </ li >
< li > Tigre de Chine m ridionale </ li >
< li > Tigre de Bali </ li >
< li > Tigre de d ' Indochine </ li >
< li > Tigre de Malaisie </ li >
< li > Tigre de Java </ li >
< li > Tigre de Sumatra </ li >
< li > Tigre du Bengale </ li >
< li > Tigre de la Caspienne </ li >
</ ul >
</ section >
< section class = " col - sm - 8 " >
< img src = " images / photo - tigre . jpg " alt = " Tigre " >
</ section >

75

CHAPITRE 4. ELMENTS DE BASE


69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85

86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109

76

</ div >


< div class = " row " >
< section class = " col - sm - 8 table - responsive " >
< table class = " table table - bordered table - striped
table - condensed " >
< caption >
< h4 > Les menaces pour les tigres </ h4 >
</ caption >
< thead >
< tr >
< th > Lieu </ th >
< th > Menace </ th >
</ tr >
</ thead >
< tbody >
< tr >
< td > Grand Mekong </ td >
< td > Demande croissante de certaines parties de
l ' animal pour la m decine chinoise
traditionnelle et fragmentation des habitats
du fait du d veloppement non durable d '
infrastructures </ td >
</ tr >
< tr >
< td > le de Sumatra </ td >
< td > Production d ' huile de palme et de p tes
papiers </ td >
</ tr >
< tr >
< td > Indon sie et Malaisie </ td >
< td >P te papier , l ' huile de palme et le
caoutchouc </ td >
</ tr >
< tr >
< td > tats - Unis </ td >
< td > Les tigres captifs repr sentent un danger
pour les tigres sauvages </ td >
</ tr >
< tr >
< td > Europe </ td >
< td > Gros app tit pour l ' huile de palme </ td >
</ tr >
< tr >
< td >N pal </ td >
< td > Commerce ill gal de produits d riv s de
tigres </ td >
</ tr >
</ tbody >
</ table >
</ section >

LISTES, DESCRIPTIONS ET TABLEAUX


110
111
112
113
114
115
116
117
118
119
120
121

< section class = " col - sm - 4 " >


< address >
<p > Vous pouvez me contacter cette adresse : </ p >
< strong > Tigrou Alfred </ strong > < br >
All e des fauves < br >
28645 F lins - sur - Loire < br >
</ address >
</ section >
</ div >
</ div >
</ body >
</ html >

Ce qui donne la figure 4.1.


Testez ! http://bootstrap.twit.free.fr/tutov3/base01.html
La prsentation sest enrichie dune range et de nouveaux lments. Voici la figure
4.2 une visualisation du dcoupage.

Les listes
Style de base
Bootstrap propose une mise en forme lgante des listes. Jen ai prvu une sur la page :
1
2
3
4
5
6
7
8
9
10
11
12
13

< h5 > Voici les sous - esp ces des tigres : </ h5 >
< br >
< ul >
< li > Tigre de Sib rie </ li >
< li > Tigre de Chine m ridionale </ li >
< li > Tigre de Bali </ li >
< li > Tigre de d ' Indochine </ li >
< li > Tigre de Malaisie </ li >
< li > Tigre de Java </ li >
< li > Tigre de Sumatra </ li >
< li > Tigre du Bengale </ li >
< li > Tigre de la Caspienne </ li >
</ ul >

Ce qui donne le rsultat visible la figure 4.3.

Sans style
Il existe la classe list-unstyled, appliquer la balise <ul>, ce qui donne donc <ul
class="list-unstyled">, qui supprime les puces. Voici la figure 4.4 le rsultat sur
la liste de la page.
77

CHAPITRE 4. ELMENTS DE BASE

Figure 4.1 La page dexemple

78

LISTES, DESCRIPTIONS ET TABLEAUX

Figure 4.2 La page dexemple dcrypte

Figure 4.3 Une liste

Figure 4.4 Une liste sans style

79

CHAPITRE 4. ELMENTS DE BASE


En ligne
Il peut arriver de vouloir une liste. . . en ligne. Bon je nappelle plus a une liste mais
pourquoi pas ? Il suffit dutiliser la classe list-inline, donc <ul class="list-inline">.
Voil la figure 4.5 ce que a donne sur la page.

Figure 4.5 Une liste en ligne

Descriptions
Classique
Les descriptions sont aussi bien traites par Bootstrap. Voici un exemple :
1
2
3
4
5
6
7
8
9
10

< dl >
< dt > Tigre </ dt >
< dd > Animal d ' Asie , grand et puissant , au pelage jaune ray de
noir , de la famille des f lins </ dd >
< dt > Panth re </ dt >
< dd >F lid d ' Afrique et d ' Asie au pelage jaune t chet de
noir </ dd >
< dt > Gu pard </ dt >
< dd >F lin carnassier rapide d ' Asie et d ' Afrique au pelage t
chet de noir </ dd >
< dt > Chat </ dt >
< dd > Petit f lin , au pelage soyeux , en g n ral domestique </ dd >
</ dl >

Et leffet visuel la figure 4.6.

Figure 4.6 Une description verticale


80

LISTES, DESCRIPTIONS ET TABLEAUX


Horizontal
Pour obtenir une prsentation horizontale, il suffit dutiliser la classe dl-horizontal,
ce qui donne <dl class="dl-horizontal">. Voici la figure 4.7 leffet sur la mme
liste.

Figure 4.7 Une description horizontale

Les tableaux
Plusieurs mises en forme sont prvues pour les tableaux, jen ai retenu une pour le
tableau de la page :
1
2
3
4
5
6
7
8
9
10
11
12
13
14

15
16
17
18
19
20
21
22

< table class = " table table - bordered table - striped table condensed " >
< caption >
< h4 > Les menaces pour les tigres </ h4 >
</ caption >
< thead >
< tr >
< th > Lieu </ th >
< th > Menace </ th >
</ tr >
</ thead >
< tbody >
< tr >
< td > Grand Mekong </ td >
< td > Demande croissante de certaines parties de l '
animal pour la m decine chinoise traditionnelle
et fragmentation des habitats du fait du d
veloppement non durable d ' infrastructures </ td >
</ tr >
< tr >
< td > le de Sumatra </ td >
< td > Production d ' huile de palme et de p tes
papiers </ td >
</ tr >
< tr >
< td > Indon sie et Malaisie </ td >
< td >P te papier , l ' huile de palme et le
caoutchouc </ td >

81

CHAPITRE 4. ELMENTS DE BASE


23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

</ tr >
< tr >
< td > tats - Unis </ td >
< td > Les tigres captifs repr sentent un danger pour
les tigres sauvages </ td >
</ tr >
< tr >
< td > Europe </ td >
< td > Gros app tit pour l ' huile de palme </ td >
</ tr >
< tr >
< td >N pal </ td >
< td > Commerce ill gal de produits d riv s de tigres <
/ td >
</ tr >
</ tbody >
</ table >

Ce qui nous donne le rsultat visible la figure 4.8.

Figure 4.8 Un tableau stylis


On va analyser les classes utilises. . .
Classe table
Cest la classe de base pour les tableaux, elle fixe quelques styles et cre des lignes de
sparation horizontales :
1

< table class = " table " >

Ce qui donne la figure 4.9.


Classe table-bordered
Cest la classe pour avoir de jolies bordures avec des coins arrondis :
1

82

< table class = " table table - bordered " >

LISTES, DESCRIPTIONS ET TABLEAUX

Figure 4.9 Effet de la classe table


Ce qui donne la figure 4.10.

Figure 4.10 Effet de la classe table-bordered

Classe table-striped
Cette classe ajoute un fond avec un gris trs lger pour les lignes impaires (1, 3, . . .) :
1

< table class = " table table - bordered table - striped " >

Je ne vous mets pas dillustration parce que franchement, le gris est si lger quon ne
voit rien. Quand je regarde la couleur utilise, je trouve la valeur #F9F9F9, ce qui
est effectivement un gris trs trs lger. . . Vous pouvez remarquer aussi que, lorsquon
passe le curseur au-dessus du tableau, la couleur de fond de la ligne correspondante
change avec la valeur #F5F5F5, ce qui est dj un gris assez lger. Je pense que des
valeurs un peu plus marques auraient t souhaitables. Mais rien nempche de les
changer ! Pour la page dexemple, je suis pass par une autre approche qui apparatra
dans un chapitre ultrieur.
Classe table-condensed
Cette classe permet de condenser le tableau pour quil occupe moins de place verticale :
1

< table class = " table table - bordered table - striped table condensed " >

Ce qui donne la figure 4.11.


Vous avez remarqu quon peut cumuler lapplication des classes sans problme, comme
je lai fait dans cette dmonstration progressive.
83

CHAPITRE 4. ELMENTS DE BASE

Figure 4.11 Effet de la classe table-condensed


Tableau adaptable avec la classe table-responsive
Que se passe-t-il pour un tableau quand on rduit la largeur de laffichage ? Les colonnes
du tableau se rduisent en consquence jusqu rendre lapparence ni trs esthtique,
ni trs lisible de la figure 4.12.

Figure 4.12 Effet sans la classe table-responsive


En englobant le tableau avec la classe table-responsive, on fait apparatre une barre
de dfilement (voir figure 4.13).
1
2

< section class = " col - sm - 8 table - responsive " >


< table class = " table table - bordered table - striped table condensed " >

Un peu de couleur dans les tableaux


Vous avez la possibilit de colorer le fond des lignes des tableaux avec les classes info,
success, danger, warning et active. Voici le tableau de notre exemple, mais avec
un peu de couleur :
1
2
3

84

< table class = " table table - bordered table - striped table condensed " >
< caption >
< h4 > Les menaces pour les tigres </ h4 >

LISTES, DESCRIPTIONS ET TABLEAUX

Figure 4.13 Barre de dfilement avec la classe table-responsive

4
5
6
7
8
9
10
11
12
13
14

15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

</ caption >


< thead >
< tr >
< th > Lieu </ th >
< th > Menace </ th >
</ tr >
</ thead >
< tbody >
< tr class = " success " >
< td > Grand Mekong </ td >
< td > Demande croissante de certaines parties de l ' animal
pour la m decine chinoise traditionnelle et
fragmentation des habitats du fait du d veloppement
non durable d ' infrastructures </ td >
</ tr >
< tr class = " danger " >
< td > le de Sumatra </ td >
< td > Production d ' huile de palme et de p tes papiers </
td >
</ tr >
< tr class = " warning " >
< td > Indon sie et Malaisie </ td >
< td >P te papier , l ' huile de palme et le caoutchouc </
td >
</ tr >
< tr class = " active " >
< td > tats - Unis </ td >
< td > Les tigres captifs repr sentent un danger pour les
tigres sauvages </ td >
</ tr >
< tr class = " success " >
< td > Europe </ td >
< td > Gros app tit pour l ' huile de palme </ td >
</ tr >
< tr class = " danger " >
< td >N pal </ td >

85

CHAPITRE 4. ELMENTS DE BASE


34
35
36
37

< td > Commerce ill gal de produits d riv s de tigres </ td >
</ tr >
</ tbody >
</ table >

Ce qui donne la figure 4.14.

Figure 4.14 De la couleur dans les tableaux


Mais videmment, cette possibilit de colorisation prend tout son sens dans une gestion dynamique de donnes, pour faire apparatre par exemple des enregistrements
possdant certaines caractristiques.

Formulaires
Formulaire de base
Si on nutilise aucune classe particulire dans une balise <form>, on obtient une disposition en ligne. Prenons lexemple dun formulaire simple :
1
2
3
4
5
6
7
8
9
10
11
12

< form >


< legend >L gende </ legend >
Text : < input type = " text " >
Textarea : < textarea id = " textarea " > </ textarea >
Select :
< select >
< option > Option 1 </ option >
< option > Option 2 </ option >
< option > Option 3 </ option >
</ select >
< button > Envoyer </ button >
</ form >

Nous aurons alors un rendu similaire celui de la figure 4.15.


86

FORMULAIRES

Figure 4.15 Un formulaire sans style


Par dfaut les contrles salignent horizontalement. Jaimerais que les contrles occupent toute la largeur disponible. Il faut utiliser la classe form-control pour obtenir
cet effet (voir figure 4.16) :
1
2
3
4
5
6
7
8
9
10
11
12

< form class = " col - lg - 6 " >


< legend >L gende </ legend >
Text : < input type = " text " class = " form - control " >
Textarea : < textarea id = " textarea " class = " form - control " > </
textarea >
Select :
< select class = " form - control " >
< option > Option 1 </ option >
< option > Option 2 </ option >
< option > Option 3 </ option >
</ select >
< button > Envoyer </ button >
</ form >

Figure 4.16 Effet de la classe form-control


On se rend compte que cette classe ne se contente pas dlargir les contrles, elle procde
aussi une mise en forme esthtique. Arrangeons encore ce formulaire en utilisant des
balises <label> et cartons un peu le bouton :
1
2

< form class = " col - lg - 6 " >


< legend >L gende </ legend >

87

CHAPITRE 4. ELMENTS DE BASE


3
4
5
6
7
8
9
10
11
12
13
14
15

< label for = " texte " > Text : </ label >
< input id = " text " type = " text " class = " form - control " >
< label for = " textarea " > Textarea : </ label >
< textarea id = " textarea " type = " textarea " class = " form - control
" > </ textarea >
< label for = " select " > Select : </ label >
< select id = " select " class = " form - control " >
< option > Option 1 </ option >
< option > Option 2 </ option >
< option > Option 3 </ option >
</ select >
< br >
< button > Envoyer </ button >
</ form >

Le rsultat se trouve la figure 4.17.

Figure 4.17 Ajout de balises <label>


On a gagn en esthtique. On peut encore amliorer lespacement en utilisant la classe
form-group :
1
2
3
4
5
6
7
8
9
10
11
12

88

< form class = " col - lg - 6 " >


< legend >L gende </ legend >
< div class = " form - group " >
< label for = " texte " > Text : </ label >
< input id = " text " type = " text " class = " form - control " >
</ div >
< div class = " form - group " >
< label for = " textarea " > Textarea : </ label >
< textarea id = " textarea " type = " textarea " class = " form control " > </ textarea >
</ div >
< div class = " form - group " >
< label for = " select " > Select : </ label >

FORMULAIRES
13
14
15
16
17
18
19
20

< select id = " select " class = " form - control " >
< option > Option 1 </ option >
< option > Option 2 </ option >
< option > Option 3 </ option >
</ select >
</ div >
< button > Envoyer </ button >
</ form >

On obtient alors le rsultat visible la figure 4.18.

Figure 4.18 Effet de la classe form-group


Le formulaire est bien ar et jai pu enlever la balise <br> qui me servait espacer le
bouton.

La page dexemple
Voici la troisime version de notre page consacre aux tigres :
1
2

<! DOCTYPE HTML >


< html >

3
4
5
6
7
8
9
10
11
12
13

< head >


< meta charset = " utf - 8 " >
< link href = " assets / css / bootstrap . css " rel = " stylesheet " >
< style type = " text / css " >
body { background - color :# DDD ; }
[ class *= " col " ] { margin - bottom : 20px ; }
img { width : 100 %; }
. well {
background - color :# CCC ;
padding : 20px ;

89

CHAPITRE 4. ELMENTS DE BASE


14
15
16

}
</ style >
</ head >

17
18
19
20
21
22
23
24
25
26

27

28
29
30
31

32

33

34

35
36

37
38
39
40
41
42
43
44

90

< body >


< div class = " container " >
< header class = " page - header " >
< h1 > Mon amour pour les tigres </ h1 >
</ header >
< section class = " row " >
< div class = " col - lg - 12 " >
<p >
Je suis passionn par les < strong > tigres </ strong >
depuis tr s longtemps . Ce site a t construit
en < em > hommage ces merveilleux f lins ... </ em > <
br >
Je fais partie de la < abbr title = " Soci t des
Amoureux des Tigres " > SAT </ abbr > qui a pour but
de faire conna tre ces splendides animaux .
</ p >
<p > Voici ce qu ' en dit le wikipedia : </ p >
< blockquote >
Le Tigre ( Panthera tigris ) est un mammif re
carnivore de la famille des f lid s ( Felidae )
du genre Panthera .
Ais ment reconnaissable sa fourrure rousse ray e de noir , il
est le plus grand f lin sauvage et l ' un des plus grands
carnivores du monde .
L ' esp ce est divis e en neuf sous - esp ces poss dant des diff
rences mineures en termes de taille ou de comportement .
Superpr dateur ,
il chasse principalement les cerfs et les sangliers , bien qu ' il
puisse s ' attaquer des proies de taille plus importante
comme les buffles .
Jusqu ' au XIXe si cle , le Tigre tait r put mangeur d ' homme . La
structure sociale des tigres en fait un animal solitaire ;
le m le poss de un territoire qui englobe les domaines de
plusieurs femelles et ne participe pas l ' ducation des
petits . < br >
< small class = " pull - right " > Wikipedia </ small > < br >
</ blockquote >
</ div >
</ section >
< section class = " row " >
< div class = " col - xs - 4 col - sm - 3 col - md - 2 " > < img src = "
images / t1 . jpg " alt = " Tigre " > </ div >
< div class = " col - xs - 4 col - sm - 3 col - md - 2 " > < img src = "
images / t2 . jpg " alt = " Tigre " > </ div >
< div class = " col - xs - 4 col - sm - 3 col - md - 2 " > < img src = "
images / t3 . jpg " alt = " Tigre " > </ div >

FORMULAIRES
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84

< div class = " col - xs - 4 col - sm - 3 col - md - 2 " > < img src = "
images / t4 . jpg " alt = " Tigre " > </ div >
< div class = " col - xs - 4 col - sm - 3 col - md - 2 " > < img src = "
images / t5 . jpg " alt = " Tigre " > </ div >
< div class = " col - xs - 4 col - sm - 3 col - md - 2 " > < img src = "
images / t6 . jpg " alt = " Tigre " > </ div >
< div class = " col - xs - 4 col - sm - 3 col - md - 2 " > < img src = "
images / t7 . jpg " alt = " Tigre " > </ div >
< div class = " col - xs - 4 col - sm - 3 col - md - 2 " > < img src = "
images / t8 . jpg " alt = " Tigre " > </ div >
< div class = " col - xs - 4 col - sm - 3 col - md - 2 " > < img src = "
images / t9 . jpg " alt = " Tigre " > </ div >
< div class = " col - xs - 4 col - sm - 3 col - md - 2 " > < img src = "
images / t10 . jpg " alt = " Tigre " > </ div >
< div class = " col - xs - 4 col - sm - 3 col - md - 2 " > < img src = "
images / t11 . jpg " alt = " Tigre " > </ div >
< div class = " col - xs - 4 col - sm - 3 col - md - 2 " > < img src = "
images / t12 . jpg " alt = " Tigre " > </ div >
</ section >
< div class = " row " >
< section class = " col - sm - 4 " >
< h5 > Voici les sous - esp ces des tigres : </ h5 >
< br >
< ul >
< li > Tigre de Sib rie </ li >
< li > Tigre de Chine m ridionale </ li >
< li > Tigre de Bali </ li >
< li > Tigre de d ' Indochine </ li >
< li > Tigre de Malaisie </ li >
< li > Tigre de Java </ li >
< li > Tigre de Sumatra </ li >
< li > Tigre du Bengale </ li >
< li > Tigre de la Caspienne </ li >
</ ul >
</ section >
< section class = " col - sm - 8 " >
< img src = " images / photo - tigre . jpg " alt = " Tigre " >
</ section >
</ div >
< div class = " row " >
< section class = " col - sm - 12 " >
< table class = " table table - bordered table - striped
table - condensed " >
< caption >
< h4 > Les menaces pour les tigres </ h4 >
</ caption >
< thead >
< tr >
< th > Lieu </ th >
< th > Menace </ th >

91

CHAPITRE 4. ELMENTS DE BASE


85
86
87
88
89
90

91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124

92

</ tr >
</ thead >
< tbody >
< tr >
< td > Grand Mekong </ td >
< td > Demande croissante de certaines parties de
l ' animal pour la m decine chinoise
traditionnelle et fragmentation des habitats
du fait du d veloppement non durable d '
infrastructures </ td >
</ tr >
< tr >
< td > le de Sumatra </ td >
< td > Production d ' huile de palme et de p tes
papiers </ td >
</ tr >
< tr >
< td > Indon sie et Malaisie </ td >
< td >P te papier , l ' huile de palme et le
caoutchouc </ td >
</ tr >
< tr >
< td > tats - Unis </ td >
< td > Les tigres captifs repr sentent un danger
pour les tigres sauvages </ td >
</ tr >
< tr >
< td > Europe </ td >
< td > Gros app tit pour l ' huile de palme </ td >
</ tr >
< tr >
< td >N pal </ td >
< td > Commerce ill gal de produits d riv s de
tigres </ td >
</ tr >
</ tbody >
</ table >
</ section >
</ div >
< div class = " row " >
< section class = " col - sm - 8 " >
< form class = " well " >
< legend > Si vous voulez me laisser un message </
legend >
< h4 > Comment m ' avez - vous trouv ? </ h4 >
< fieldset >
< label for = " ami " class = " radio " >
< input type = " radio " name = " origine " value = " ami "
id = " ami " >
Par un ami

FORMULAIRES
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156

</ label >


< label for = " web " class = " radio " >
< input type = " radio " name = " origine " value = " web "
id = " web " >
Sur le web
</ label >
< label for = " hasard " class = " radio " >
< input type = " radio " name = " origine " value = "
hasard " id = " hasard " >
Par hasard
</ label >
< label for = " autre " class = " radio " >
< input type = " radio " name = " origine " value = " autre
" id = " autre " >
Autre ...
</ label >
< label for = " textarea " > Votre message : </ label >
< textarea id = " textarea " rows = " 4 " class = " form control " > </ textarea >
<p class = " help - block " > Vous pouvez agrandir la
fen tre </ p >
< button class = " btn btn - primary " type = " submit " >
Envoyer </ button >
</ fieldset >
</ form >
</ section >
< section class = " col - sm - 4 " >
< address >
<p > Vous pouvez me contacter cette adresse : </ p >
< strong > Tigrou Alfred </ strong > < br >
All e des fauves < br >
28645 F lins - sur - Loire < br >
</ address >
</ section >
</ div >
</ div >
</ body >
</ html >

Pour cette troisime version, jai ajout un peu de style et un formulaire, ce qui donne
les figures 4.19 et 4.20.
Testez ! http://bootstrap.twit.free.fr/tutov3/base02.html
Au niveau du style, juste une petite touche :
1
2
3
4
5
6

body { background - color :# DDD ; }


[ class *= " col " ] { margin - bottom : 20px ; }
img { width : 100 %; }
. well {
background - color :# CCC ;
padding : 20px ;

93

CHAPITRE 4. ELMENTS DE BASE

Figure 4.19 La page dexemple, premire partie

94

FORMULAIRES

Figure 4.20 La page dexemple, deuxime partie

95

CHAPITRE 4. ELMENTS DE BASE


7

Le fond dun lger gris met bien en valeur le texte et les photos. Quant au formulaire
(concern par la classe well), cest lobjet de ce chapitre. . .
Les classes radio et checkbox
Bootstrap propose lutilisation dune classe particulire pour les cases cocher (checkbox) et les zones doption (radio). Nous lavons utilise dans le formulaire de la page :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

< form class = " well " >


< legend > Si vous voulez me laisser un message </ legend >
< h4 > Comment m ' avez - vous trouv ? </ h4 >
< fieldset >
< label for = " ami " class = " radio " >
< input type = " radio " name = " origine " value = " ami " id = " ami " >
Par un ami
</ label >
< label for = " web " class = " radio " >
< input type = " radio " name = " origine " value = " web " id = " web " >
Sur le web
</ label >
< label for = " hasard " class = " radio " >
< input type = " radio " name = " origine " value = " hasard " id = "
hasard " >
Par hasard
</ label >
< label for = " autre " class = " radio " >
< input type = " radio " name = " origine " value = " autre " id = "
autre " >
Autre ...
</ label >
< label for = " textarea " > Votre message : </ label >
< textarea id = " textarea " class = " form - control " rows = " 4 " > </
textarea >
<p class = " help - block " > Vous pouvez agrandir la fen tre </ p >
< button class = " btn btn - primary " type = " submit " > Envoyer </
button >
</ fieldset >
</ form >

La classe well , un peu de style, un joli bouton et un texte daide


Voil une classe que jaime bien, elle provoque une jolie stylisation. Jai apport ce
petit complment au formulaire de la page :
1

96

< form class = " well " >

FORMULAIRES
On peut ajuster la dimension en ajoutant la classe well-lg pour agrandir ou well-sm
pour rduire. Jai aussi peaufin en ajoutant des rgles de style la page :
1
2
3
4
5
6
7
8
9

< style type = " text / css " >


body { background - color :# DDD ; }
[ class *= " col " ] { margin - bottom : 20px ; }
img { width : 100 %; }
. well {
background - color :# CCC ;
padding : 20px ;
}
</ style >

La dernire touche a consist amliorer laspect du bouton avec 2 classes que nous
verrons plus loin dans ce cours :
1

< button class = " btn btn - primary " type = " submit " > Envoyer </ button >

Il ne reste plus qu rendre plus discret le texte daide situ au-dessous de la zone de
texte, ce que nous accomplissons avec la classe help-block (voir figure 4.21) :
1

<p class = " help - block " > Vous pouvez agrandir la fen tre </ p >

Figure 4.21 Effet de la classe help-block

Formulaire horizontal
Pour raliser un formulaire horizontal, nous allons utiliser tout ce que nous venons
de voir en exploitant la classe form-horizontal et une grille pour positionner les
tiquettes et les contrles :
1
2
3
4
5
6
7
8
9
10

< form class = " form - horizontal col - lg - 6 " >


< div class = " form - group " >
< legend >L gende </ legend >
</ div >
< div class = " row " >
< div class = " form - group " >
< label for = " text " class = " col - lg - 2 " > Text : </ label >
< div class = " col - lg - 10 " >
< input type = " text " class = " form - control " id = " text " >
</ div >

97

CHAPITRE 4. ELMENTS DE BASE


11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

</ div >


</ div >
< div class = " row " >
< div class = " form - group " >
< label for = " textarea " class = " col - lg - 2 " > Textarea : </ label
>
< div class = " col - lg - 10 " >
< input type = " textarea " class = " form - control " id = "
textarea " >
</ div >
</ div >
</ div >
< div class = " row " >
< div class = " form - group " >
< label for = " select " class = " col - lg - 2 " > Select : </ label >
< div class = " col - lg - 10 " >
< select id = " select " class = " form - control " >
< option > Option 1 </ option >
< option > Option 2 </ option >
< option > Option 3 </ option >
</ select >
</ div >
</ div >
</ div >
< div class = " form - group " >
< button class = " pull - right btn btn - default " > Envoyer </ button >
</ div >
</ form >

Ce qui nous donne la figure 4.22.

Figure 4.22 Un formulaire horizontal


Les tiquettes disposent de 2 colonnes et les champs de saisie de 10 colonnes. On peut
voir aussi lutilisation de la classe pull-right pour envoyer le bouton vers la droite.
Voici la figure 4.23 une visualisation du dcoupage.
98

FORMULAIRES

Figure 4.23 Dcryptage du formulaire horizontal

Formulaire en ligne
Il arrive quon ait besoin davoir un formulaire dispos sur une ligne, par exemple dans
une barre de navigation. Faisons un essai avec un formulaire lmentaire :
1
2
3
4
5

< form >


< input type = " text " >
< input type = " checkbox " > Se rappeler de moi
< button > Envoyer </ button >
</ form >

En ltat, on obtient le rsultat visible la figure 4.24.

Figure 4.24 Un formulaire sans style


Bon ce nest pas trs joli, alors arrangeons a avec tout ce que nous avons dj vu et
en prcisant la classe form-inline :
1
2
3
4
5
6
7
8
9
10
11
12
13

< form class = " form - inline " >


< div class = " form - group " >
< label class = " sr - only " for = " text " > Texte </ label >
< input type = " text " class = " form - control " id = " text "
placeholder = " un texte ici " >
</ div >
< div class = " form - group " >
< div class = " checkbox " >
< label >
< input type = " checkbox " > Se rappeler de moi ...
</ label >
</ div >
< button type = " submit " class = " btn btn - default " > Envoyer </ button
>
</ form >

On obtient alors la figure 4.25.


99

CHAPITRE 4. ELMENTS DE BASE

Figure 4.25 Un formulaire en ligne stylis


Cest beaucoup mieux ! Remarquez lutilisation dune tiquette invisible pour la zone
de texte. Il est conseill davoir toujours une tiquette pour chaque contrle pour les
lecteurs dcran (accessibilit), la classe sr-only permet de rendre cette tiquette invisible.

Les classes input-group, input-group-addon et input-group-btn


luvre
Accoler une information un contrle
Les classes input-group et input-group-addon servent accoler une information
un contrle de formulaire :
1
2
3
4
5
6
7
8

< div class = " input - group col - lg - 3 " >


< span class = " input - group - addon " >e</ span >
< input type = " text " class = " form - control " value = " 100 " >
</ div >
< div class = " input - group col - lg - 3 " >
< input type = " text " class = " form - control " style = " text - align :
right " value = " 100 , 50 " >
< span class = " input - group - addon " >e</ span >
</ div >

Ce qui nous donne la figure 4.26.

Figure 4.26 Une information accole un contrle


On peut aussi les utiliser conjointement pour accoler devant et derrire :
1
2
3
4
5

< div class = " input - group col - lg - 2 " >


< span class = " input - group - addon " >e</ span >
< input type = " text " class = " form - control " style = " text - align :
right " value = " 100 " >
< span class = " input - group - addon " >. 00 </ span >
</ div >

Ce qui nous donne la figure 4.27.


100

FORMULAIRES

Figure 4.27 Deux informations accoles un contrle


Accoler un bouton un contrle
On peut aussi accoler un bouton avec la classe input-group-btn :
1
2
3
4
5
6

< div class = " input - group col - lg - 3 " >


< input type = " text " class = " form - control " style = " text - align :
right " value = " 10 000 " >
< span class = " input - group - btn " >
< button class = " btn btn - default " type = " button " > Valider </
button >
</ span >
</ div >

Ce qui nous donne la figure 4.28.

Figure 4.28 Un bouton accol un contrle


Et rien nempche den ajouter plusieurs, comme pour la figure 4.29.
1
2
3
4
5
6
7
8
9
10

< div class = " input - group col - lg - 4 " >


< span class = " input - group - btn " >
< button class = " btn btn - default " type = " button " >V rifier </
button >
</ span >
< input type = " text " class = " form - control " style = " text - align :
right " value = " 10 000 " >
< span class = " input - group - btn " >
< button class = " btn btn - default " type = " button " > Valider </
button >
< button class = " btn btn - default " type = " button " > Annuler </
button >
</ span >
</ div >

Figure 4.29 Plusieurs boutons accols un contrle


a fonctionne correctement, mais la documentation officielle prcise que cela nest pas
pris en charge. . .
101

CHAPITRE 4. ELMENTS DE BASE


Accoler une case cocher ou un bouton radio un contrle
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

< div class = " input - group col - lg - 3 " >


< div class = " form - group " >
< div class = " input - group " >
< span class = " input - group - addon " >
< input type = " checkbox " >
</ span >
< input type = " text " class = " form - control " >
</ div >
</ div >
< div class = " form - group " >
< div class = " input - group " >
< span class = " input - group - addon " >
< input type = " radio " >
</ span >
< input type = " text " class = " form - control " >
</ div >
</ div >
</ div >

Ce qui nous donne la figure 4.30.

Figure 4.30 Bouton radio et case cocher accols un contrle

Dimension des contrles


Pour ajuster un formulaire, il est parfois utile de jouer sur la taille des contrles.
Bootstrap propose les classes input-lg et input-sm pour le faire dans un sens ou dans
lautre :
1
2
3
4
5

< div class = " col - lg - 3 " >


< input type = " text " class = " form - control input - sm " value = " Petit
">
< input type = " text " class = " form - control " value = " Normal " >
< input type = " text " class = " form - control input - lg " value = " Grand
">
</ div >

Ce qui nous donne la figure 4.31.


Notez quon joue ici uniquement sur la hauteur du contrle, la largeur tant dfinie par
la grille.
102

FORMULAIRES

Figure 4.31 Contrles de dimensions diffrentes

Stylisation selon ltat


Bootstrap embarque des classes de stylisation des zones de saisie selon ltat. Voici un
exemple :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

< form class = " col - lg - 5 " >


< fieldset >
< legend > Validation , erreur et succ s </ legend >
< div class = " form - group has - error " >
< label class = " control - label " for = " idError " > Erreur </ label >
< input type = " text " class = " form - control " id = " idError " >
< span class = " help - block " > Corrigez l ' erreur s ' il vous
plait </ span >
</ div >
< div class = " form - group has - warning " >
< label class = " control - label " for = " idWarning " >
Avertissement </ label >
< input type = " text " class = " form - control " id = " idWarning " >
< span class = " help - block " > Il y a un probl me dans la
saisie </ span >
</ div >
< div class = " form - group has - success " >
< label class = " control - label " for = " idSuccess " >R ussite </
label >
< input type = " text " class = " form - control " id = " idSuccess " >
< span class = " help - block " > Saisie correcte </ span >
</ div >
</ fieldset >
</ form >

Ce qui nous donne la figure 4.32.


La version 3.1 de Bootstrap a prvu la possibilit dajouter une icne pour amliorer
leffet visuel. Nous verrons comment Bootstrap permet dutiliser des icnes dans le
chapitre suivant. Je vous mets juste lexemple prcdent complt sans commenter
lajout des icnes, vous pourrez y revenir plus tard quand vous aurez avanc dans ce
cours :
1
2
3
4

< form class = " col - lg - 5 " >


< fieldset >
< legend > Validation , erreur et succ s </ legend >
< div class = " form - group has - error has - feedback " >

103

CHAPITRE 4. ELMENTS DE BASE

Figure 4.32 Stylisation selon ltat

5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

< label class = " control - label " for = " idError " > Erreur </ label >
< input type = " text " class = " form - control " id = " idError " >
< span class = " glyphicon glyphicon - remove form - control feedback " > </ span >
< span class = " help - block " > Corrigez l ' erreur s ' il vous
plait </ span >
</ div >
< div class = " form - group has - warning has - feedback " >
< label class = " control - label " for = " idWarning " >
Avertissement </ label >
< input type = " text " class = " form - control " id = " idWarning " >
< span class = " glyphicon glyphicon - warning - sign form control - feedback " > </ span >
< span class = " help - block " > Il y a un probl me dans la
saisie </ span >
</ div >
< div class = " form - group has - success has - feedback " >
< label class = " control - label " for = " idSuccess " >R ussite </
label >
< input type = " text " class = " form - control " id = " idSuccess " >
< span class = " glyphicon glyphicon - ok form - control - feedback
" > </ span >
< span class = " help - block " > Saisie correcte </ span >
</ div >
</ fieldset >
</ form >

Remarquez lajout des classes has-feedback et form-control-feedback pour que


licne soit bien intgre dans le contrle. Ce qui nous donne la figure 4.33.
104

FORMULAIRES

Figure 4.33 Stylisation selon ltat avec des icnes


Dans ces exemples il y a peu dactions possibles car, pour le moment, je nai pas prvu
dinteractivit. Alors un petit exemple : nous voulons faire un formulaire comme celui
de la figure 4.34.

Figure 4.34 Formulaire obtenir


Et nous voulons tester la saisie pour vrifier que le texte fait au moins 4 caractres.
Si ce nest pas le cas, on change le style de la zone de texte et on fait apparatre un
message davertissement, comme la figure 4.35.

Figure 4.35 Message afficher


Tant qu faire, on veut aussi que le message davertissement disparaisse au bout de 4
secondes et que le tout se fasse avec fluidit. En combinant Bootstrap et jQuery cest
un jeu denfant :
105

CHAPITRE 4. ELMENTS DE BASE


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

< div class = " col - lg - 4 " >


< form class = " form - inline well " >
< div class = " form - group " >
< label class = " sr - only " for = " text " > Saisie </ label >
< input id = " text " type = " text " class = " form - control "
placeholder = " Texte ici " >
</ div >
< button type = " submit " class = " btn btn - primary pull - right " >
Envoyer </ button >
< div class = " alert alert - block alert - danger " style = " display :
none " >
< h4 > Erreur ! </ h4 >
Vous devez entrer au moins 4 caract res !
</ div >
</ form >
</ div >
< script src = " assets / js / jquery . js " > </ script >
< script >
$ ( function () {
$ ( " form " ) . on ( " submit " , function () {
if ( $ ( " input " ) . val () . length < 4 ) {
$ ( " div . form - group " ) . addClass ( " has - error " ) ;
$ ( " div . alert " ) . show ( " slow " ) . delay ( 4000 ) . hide ( " slow " ) ;
return false ;
}
}) ;
}) ;
</ script >

Testez ! http://bootstrap.twit.free.fr/tutov3/form01.html
Je ne commente pas le code jQuery ajout parce que ce nest pas lobjet de ce cours,
mais je conseille vraiment de connatre ce framework Javascript puissant et lgant
pour tirer pleinement parti de toutes les possibilits de Bootstrap.

Un gnrateur de formulaire
Le site bootsnipp - http://bootsnipp.com propose un gnrateur de formulaire http://bootsnipp.com/forms pour Bootstrap (voir la figure 4.36).
On construit le formulaire avec de simples glisser-dposer. On renseigne ensuite les
paramtres avec un formulaire qui apparat en fentre modale. la fin, on na plus qu
copier le code HTML. On ne peut raliser que des formulaires horizontaux, mais une
simple adaptation du code permet de raliser facilement dautres sortes de formulaires.
106

FORMULAIRES

Figure 4.36 Un gnrateur de formulaire pour Bootstrap

107

CHAPITRE 4. ELMENTS DE BASE

Boutons, icnes et images


La page dexemple
Voici la nouvelle version de la page dexemple :
1
2

<! DOCTYPE HTML >


< html >

3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

< head >


< meta charset = " utf - 8 " >
< link href = " assets / css / bootstrap . css " rel = " stylesheet " >
< style type = " text / css " >
body { background - color :# DDD ; }
[ class *= " col " ] { margin - bottom : 20px ; }
. form - inline { margin - top : 20px }
img { width : 100 %; }
. well {
background - color :# CCC ;
padding : 20px ;
}
</ style >
</ head >

18
19
20
21
22
23
24
25
26
27
28

29
30
31
32
33
34
35

36

108

< body >


< div class = " container " >
< header class = " row " >
< div class = " col - sm - 12 col - lg - 7 " >
< h1 > Mon amour pour les tigres </ h1 >
</ div >
< div class = " col - sm - 12 col - lg - 5 " >
< form class = " form - inline pull - right " >
< input type = " text " style = " width : 150px " class = " input
- sm form - control " placeholder = " Recherche " >
< button type = " submit " class = " btn btn - primary btn - xs
" > < span class = " glyphicon glyphicon - eye - open " > </
span > Chercher </ button >
</ form >
</ div >
</ header >
< section class = " row " >
< div class = " col - lg - 12 " >
<p >
Je suis passionn par les < strong > tigres </ strong >
depuis tr s longtemps . Ce site a t construit
en < em >
hommage ces merveilleux f lins ... </
em > < br >
Je fais partie de la < abbr title = " Soci t des
Amoureux des Tigres " > SAT </ abbr > qui a pour but
de faire conna tre ces splendides animaux .

BOUTONS, ICNES ET IMAGES


37
38
39
40

41

42
43

44
45

46
47
48
49
50
51

52

53

54

55

56

57

58

59

</ p >
<p > Voici ce qu ' en dit le wikipedia : </ p >
< blockquote >
Le Tigre ( Panthera tigris ) est un mammif re
carnivore de la famille des f lid s ( Felidae )
du genre Panthera .
Ais ment reconnaissable sa fourrure rousse ray e de noir , il
est le plus grand f lin sauvage et l ' un des plus grands
carnivores du monde .
L ' esp ce est divis e en neuf sous - esp ces poss dant des diff
rences mineures en termes de taille ou de comportement .
Superpr dateur , il chasse principalement les cerfs et les
sangliers , bien qu ' il puisse s ' attaquer des proies de
taille plus importante comme les buffles .
Jusqu ' au XIXe si cle , le Tigre tait r put mangeur d ' homme . La
structure sociale des tigres en fait un animal solitaire ;
le m le poss de un territoire qui englobe les domaines de
plusieurs femelles et ne participe pas l ' ducation des
petits . < br >
< small class = " pull - right " > Wikipedia </ small > < br >
</ blockquote >
</ div >
</ section >
< section class = " row " >
< div class = " col - xs - 4 col - sm - 3 col - md - 2 " > < img src = "
images / t1 . jpg " alt = " Tigre " class = " img - rounded " > </ div
>
< div class = " col - xs - 4 col - sm - 3 col - md - 2 " > < img src = "
images / t2 . jpg " alt = " Tigre " class = " img - rounded " > </ div
>
< div class = " col - xs - 4 col - sm - 3 col - md - 2 " > < img src = "
images / t3 . jpg " alt = " Tigre " class = " img - rounded " > </ div
>
< div class = " col - xs - 4 col - sm - 3 col - md - 2 " > < img src = "
images / t4 . jpg " alt = " Tigre " class = " img - rounded " > </ div
>
< div class = " col - xs - 4 col - sm - 3 col - md - 2 " > < img src = "
images / t5 . jpg " alt = " Tigre " class = " img - rounded " > </ div
>
< div class = " col - xs - 4 col - sm - 3 col - md - 2 " > < img src = "
images / t6 . jpg " alt = " Tigre " class = " img - rounded " > </ div
>
< div class = " col - xs - 4 col - sm - 3 col - md - 2 " > < img src = "
images / t7 . jpg " alt = " Tigre " class = " img - rounded " > </ div
>
< div class = " col - xs - 4 col - sm - 3 col - md - 2 " > < img src = "
images / t8 . jpg " alt = " Tigre " class = " img - rounded " > </ div
>
< div class = " col - xs - 4 col - sm - 3 col - md - 2 " > < img src = "
images / t9 . jpg " alt = " Tigre " class = " img - rounded " > </ div

109

CHAPITRE 4. ELMENTS DE BASE

60

61

62

63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99

110

>
< div class = " col - xs - 4 col - sm - 3 col - md - 2 " > < img src = "
images / t10 . jpg " alt = " Tigre " class = " img - rounded " > </
div >
< div class = " col - xs - 4 col - sm - 3 col - md - 2 " > < img src = "
images / t11 . jpg " alt = " Tigre " class = " img - rounded " > </
div >
< div class = " col - xs - 4 col - sm - 3 col - md - 2 " > < img src = "
images / t12 . jpg " alt = " Tigre " class = " img - rounded " > </
div >
</ section >
< div class = " row " >
< section class = " col - sm - 4 " >
< h5 > Voici les sous - esp ces des tigres : </ h5 >
< br >
< ul >
< li > Tigre de Sib rie </ li >
< li > Tigre de Chine m ridionale </ li >
< li > Tigre de Bali </ li >
< li > Tigre de d ' Indochine </ li >
< li > Tigre de Malaisie </ li >
< li > Tigre de Java </ li >
< li > Tigre de Sumatra </ li >
< li > Tigre du Bengale </ li >
< li > Tigre de la Caspienne </ li >
</ ul >
</ section >
< section class = " col - sm - 8 " >
< img src = " images / photo - tigre . jpg " alt = " Tigre " class = "
img - rounded " >
</ section >
</ div >
< div class = " row " >
< section class = " col - sm - 12 " >
< table class = " table table - bordered table - striped
table - condensed " >
< caption >
< h4 > Les menaces pour les tigres </ h4 >
</ caption >
< thead >
< tr >
< th > Lieu </ th >
< th > Menace </ th >
</ tr >
</ thead >
< tbody >
< tr >
< td > Grand Mekong </ td >
< td > Demande croissante de certaines parties de
l ' animal pour la m decine chinoise

BOUTONS, ICNES ET IMAGES


traditionnelle et fragmentation des habitats
du fait du d veloppement non durable d '
infrastructures </ td >

100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139

</ tr >
< tr >
< td > le de Sumatra </ td >
< td > Production d ' huile de palme et de p tes
papiers </ td >
</ tr >
< tr >
< td > Indon sie et Malaisie </ td >
< td >P te papier , l ' huile de palme et le
caoutchouc </ td >
</ tr >
< tr >
< td > tats - Unis </ td >
< td > Les tigres captifs repr sentent un danger
pour les tigres sauvages </ td >
</ tr >
< tr >
< td > Europe </ td >
< td > Gros app tit pour l ' huile de palme </ td >
</ tr >
< tr >
< td >N pal </ td >
< td > Commerce ill gal de produits d riv s de
tigres </ td >
</ tr >
</ tbody >
</ table >
</ section >
</ div >
< div class = " row " >
< section class = " col - sm - 8 " >
< form class = " well " >
< legend > Si vous voulez me laisser un message </
legend >
< h4 > Comment m ' avez - vous trouv ? </ h4 >
< fieldset >
< label for = " ami " class = " radio " >
< input type = " radio " name = " origine " value = " ami "
id = " ami " >
Par un ami
</ label >
< label for = " web " class = " radio " >
< input type = " radio " name = " origine " value = " web "
id = " web " >
Sur le web
</ label >
< label for = " hasard " class = " radio " >

111

CHAPITRE 4. ELMENTS DE BASE


140
141
142
143
144
145
146
147
148
149
150

151
152
153
154
155
156
157
158
159
160
161
162
163
164
165

< input type = " radio " name = " origine " value = "
hasard " id = " hasard " >
Par hasard
</ label >
< label for = " autre " class = " radio " >
< input type = " radio " name = " origine " value = " autre
" id = " autre " >
Autre ...
</ label >
< label for = " textarea " > Votre message : </ label >
< textarea id = " textarea " rows = " 4 " class = " form control " > </ textarea >
<p class = " help - block " > Vous pouvez agrandir la
fen tre </ p >
< button class = " btn btn - primary " type = " submit " > <
span class = " glyphicon glyphicon - ok - sign " > </
span > Envoyer </ button >
</ fieldset >
</ form >
</ section >
< section class = " col - sm - 4 " >
< address >
<p > Vous pouvez me contacter cette adresse : </ p >
< strong > Tigrou Alfred </ strong > < br >
All e des fauves < br >
28645 F lins - sur - Loire < br >
</ address >
</ section >
</ div >
</ div >
</ body >
</ html >

Testez ! http://bootstrap.twit.free.fr/tutov3/base03.html
Quy a-t-il de nouveau ? Dj un formulaire de recherche dans la partie suprieure
droite, avec une zone de texte et un bouton muni dune icne (voir figure 4.37).

Figure 4.37 Le formulaire de recherche


Remarquez le traitement du responsive pour ce formulaire. Pour un cran large, il est
cal en haut droite avec une classe col-lg-5 et un pull-right. Quand on passe au
format moyen, il se retrouve avec la classe col-sm-12 de telle manire quil vienne se
disposer sous le titre, toujours cal droite (voir figure 4.38).
Les vignettes des images ont dsormais leurs coins arrondis, comme le montre la figure
4.39.
112

BOUTONS, ICNES ET IMAGES

Figure 4.38 Effet de la classe pull-right

Figure 4.39 Des images aux coins arrondis


Le bouton du formulaire de contact a hrit dune icne (voir figure 4.40).

Figure 4.40 Une icne dans le bouton


Nous allons passer en revue ces nouveauts et dtailler les possibilits de Bootstrap
pour les boutons, les icnes et les images.

Des jolis boutons


Pour crer un bouton avec Bootstrap il suffit dajouter les classes btn et btn-default
une balise <button>, <a> ou <input> :
1
2
3

< button type = " button " class = " btn btn - default " > Bouton de base </
button >
<a class = " btn btn - default " href = " # " > Bouton avec lien </ a >
< input class = " btn btn - default " type = " button " value = " Bouton avec
input " >

113

CHAPITRE 4. ELMENTS DE BASE


Ce qui nous donne la figure 4.41.

Figure 4.41 Apparence des boutons


Le rendu est le mme, tout dpend du contexte dutilisation.

Les diffrents types de boutons


Laspect par dfaut est un gris avec le fond blanc. Il existe dautres possibilit plus
colores :
1
2
3
4
5
6

< button type = " button "


button >
< button type = " button "
< button type = " button "
< button type = " button "
button >
< button type = " button "
< button type = " button "

class = " btn btn - primary " > Bouton standard </
class = " btn btn - success " >R ussite </ button >
class = " btn btn - info " > Information </ button >
class = " btn btn - warning " > Avertissement </
class = " btn btn - danger " > Danger </ button >
class = " btn btn - link " > Lien </ button >

Ce qui nous donne les boutons visibles la figure 4.42.

Figure 4.42 Des boutons colors


utiliser selon les situations et faire varier selon lhumeur !

Dimension des boutons


On peut aussi ajuster la dimension du bouton :
1
2
3
4

< button type = " button "


gros </ button >
< button type = " button "
button >
< button type = " button "
petit </ button >
< button type = " button "
s petit </ button >

class = " btn btn - primary btn - lg " > Bouton


class = " btn btn - primary " > Bouton standard </
class = " btn btn - primary btn - sm " > Bouton
class = " btn btn - primary btn - xs " > Bouton tr

Ce qui nous donne la figure 4.43.


114

BOUTONS, ICNES ET IMAGES

Figure 4.43 Plusieurs dimensions de boutons


Boutons block
La classe btn-block rgle la dimension du bouton sur la dimension de son contenant.
Voici un exemple :
1
2
3
4
5
6
7
8
9
10
11

< div class = " row " >


< div class = " col - sm - 3 " >
< button type = " button " class = " btn btn - primary btn - block " >
Bouton " block " </ button >
</ div >
< div class = " col - sm - 6 " >
< button type = " button " class = " btn btn - success btn - block " >
Bouton " block " </ button >
</ div >
< div class = " col - sm - 3 " >
< button type = " button " class = " btn btn - danger btn - block " >
Bouton " block " </ button >
</ div >
</ div >

Ce qui nous donne la figure 4.44.

Figure 4.44 Effet de la classe bouton-block


Grouper des boutons
Il est possible de grouper des boutons horizontalement avec la classe btn-group. Ce
groupement peut seffectuer aussi verticalement avec la classe btn-group-vertical.
Voici un exemple avec les deux groupements :
1
2
3
4
5
6
7
8
9
10

< div class = " row " >


< div class = " col - lg - 2 " >
< div class = " btn - group " >
<a class = " btn btn - danger " href = " # " >1 </ a >
<a class = " btn btn - info " href = " # " >2 </ a >
<a class = " btn btn - warning " href = " # " >3 </ a >
</ div >
</ div >
< div class = " col - lg - 1 " >
< div class = " btn - group - vertical " >

115

CHAPITRE 4. ELMENTS DE BASE


11
12
13
14
15
16

<a class = " btn btn - danger " href = " # " >4 </ a >
<a class = " btn btn - info " href = " # " >5 </ a >
<a class = " btn btn - warning " href = " # " >6 </ a >
</ div >
</ div >
</ div >

Ce qui nous donne la figure 4.45.

Figure 4.45 Groupement de boutons


On peut dimensionner le groupement :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

< div class = " row " >


< div class = " col - lg - 1 " >
< div class = " btn - group - vertical btn - group - lg " >
<a class = " btn btn - danger " href = " # " >4 </ a >
<a class = " btn btn - info " href = " # " >5 </ a >
<a class = " btn btn - warning " href = " # " >6 </ a >
</ div >
</ div >
< div class = " col - lg - 1 " >
< div class = " btn - group - vertical " >
<a class = " btn btn - danger " href = " # " >4 </ a >
<a class = " btn btn - info " href = " # " >5 </ a >
<a class = " btn btn - warning " href = " # " >6 </ a >
</ div >
</ div >
< div class = " col - lg - 1 " >
< div class = " btn - group - vertical btn - group - sm " >
<a class = " btn btn - danger " href = " # " >4 </ a >
<a class = " btn btn - info " href = " # " >5 </ a >
<a class = " btn btn - warning " href = " # " >6 </ a >
</ div >
</ div >
< div class = " col - lg - 1 " >
< div class = " btn - group - vertical btn - group - xs " >
<a class = " btn btn - danger " href = " # " >4 </ a >
<a class = " btn btn - info " href = " # " >5 </ a >
<a class = " btn btn - warning " href = " # " >6 </ a >
</ div >
</ div >
</ div >

116

BOUTONS, ICNES ET IMAGES


Ce qui nous donne la figure 4.46.

Figure 4.46 Plusieurs dimensions de groupement de boutons

Boutons justifis
Si vous voulez que vos boutons se rpartissent harmonieusement et uniformment dans
un contenant, utilisez la classe btn-group-justified en plus de btn-group :
1
2
3
4
5
6
7

< div class = " col - lg - 6 " >


< div class = " btn - group btn - group - justified " >
<a class = " btn btn - danger " href = " # " >1 </ a >
<a class = " btn btn - info " href = " # " >2 </ a >
<a class = " btn btn - warning " href = " # " >3 </ a >
</ div >
</ div >

Ce qui nous donne la figure 4.47.

Figure 4.47 Boutons justifis


Cet exemple utilise des balises <a>. On peut raliser la mme chose avec des balises
<button> condition dutiliser la classe btn-group pour chaque bouton :
1
2
3
4
5
6
7
8
9
10
11
12
13

< div class = " col - lg - 6 " >


< div class = " btn - group btn - group - justified " >
< div class = " btn - group " >
< button type = " button " class = " btn btn - danger " >1 </ button >
</ div >
< div class = " btn - group " >
< button type = " button " class = " btn btn - info " >2 </ button >
</ div >
< div class = " btn - group " >
< button type = " button " class = " btn btn - warning " >3 </ button >
</ div >
</ div >
</ div >

117

CHAPITRE 4. ELMENTS DE BASE


Des gnrateurs de bouton
Le site bootsnipp - http://bootsnipp.com propose un gnrateur de bouton - http:
//bootsnipp.com/buttons simple utiliser (voir figure 4.48).

Figure 4.48 Un gnrateur de bouton


Vous entrez le texte du bouton, la couleur, la taille, vous choisissez licne et son
positionnement. Vous visualisez directement le rsultat et vous disposez du code HTML
correspondant.
Si vous voulez des styles diffrents pour vos boutons et sortir des couleurs standards que
Bootstrap propose, vous pouvez crer vos propres styles. Si vous ntes pas trs inspir,
il existe un gnrateur simple et pratique sur le site charliepark http://charliepark.
org/bootstrap_buttons/ (voir figure 4.49).
Il suffit de rcuprer le code et de linsrer dans votre feuille de style. Lintgration
dans un bouton (ou autre) est simple.
1

< button type = " button " class = " btn btn - custom " > Mon beau bouton </
button >

Il est ainsi facile et rapide de crer son propre style de bouton (voir figure 4.50).
118

BOUTONS, ICNES ET IMAGES

Figure 4.49 Un autre gnrateur de bouton

Figure 4.50 Un bouton gnr

119

CHAPITRE 4. ELMENTS DE BASE

De jolies icnes
Les icnes de Glyphicons
Bootstrap propose 200 icnes de Glyphicons - http://glyphicons.com/. Lintgration
dune icne est trs facile parce quil suffit dutiliser la balise <span>. Pour le formulaire
de contact de la page dexemple, le bouton est amlior en le compltant par une icne.
1

< button class = " btn btn - primary " type = " submit " > < span class = "
glyphicon glyphicon - ok - sign " > </ span > Envoyer </ button >

Ce qui nous donne la figure 4.51.

Figure 4.51 Icne dans un bouton


La syntaxe est toute simple. On utilise une balise <span> avec deux classes. La principale est glyphicon suivi de la classe qui correspond licne afficher glyphicon-*.
On peut ainsi crer dlgantes barres de boutons :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

< div class = " container " >


< div class = " row " >
< div class = " col - lg - 3 " >
< div class = " btn - group " >
<a class = " btn btn - danger " href = " # " > < span class = "
glyphicon glyphicon - fast - backward " > </ span > </ a >
<a class = " btn btn - info " href = " # " > < span class = "
glyphicon glyphicon - backward " > </ span > </ a >
<a class = " btn btn - warning " href = " # " > < span class = "
glyphicon glyphicon - play " > </ span > </ a >
<a class = " btn btn - info " href = " # " > < span class = "
glyphicon glyphicon - forward " > </ span > </ a >
<a class = " btn btn - danger " href = " # " > < span class = "
glyphicon glyphicon - fast - forward " > </ span > </ a >
</ div >
</ div >
< div class = " col - lg - 1 " >
< div class = " btn - group - vertical " >
<a class = " btn btn - danger " href = " # " > < span class = "
glyphicon glyphicon - pencil " > </ span > </ a >
<a class = " btn btn - info " href = " # " > < span class = "
glyphicon glyphicon - search " > </ span > </ a >
<a class = " btn btn - warning " href = " # " > < span class = "
glyphicon glyphicon - print " > </ span > </ a >
<a class = " btn btn - success " href = " # " > < span class = "
glyphicon glyphicon - picture " > </ span > </ a >
</ div >
</ div >

120

BOUTONS, ICNES ET IMAGES


20
21

</ div >


</ div >

Ce qui nous donne la figure 4.52.

Figure 4.52 Barres de boutons avec des icnes

Et si on veut une icne colore ?

Comme il sagit de polices, il suffit dutiliser du style :


1

< button class = " btn btn - primary " type = " submit " > < span class = "
glyphicon glyphicon - ok - sign " style = " color :# 4f4 ; " > </ span >
Envoyer </ button >

Ce qui nous donne la figure 4.53.

Figure 4.53 Une icne colore


videmment on peut mettre ces icnes ailleurs que sur des boutons. . . Partout o on
peut crire en fait !
Rien nempche videmment de sauter des lignes dans un bouton. On peut ainsi crer
des boutons en sparant bien licne du texte, comme la figure 4.54.
1
2
3
4
5

< button class = " btn btn - primary btn - lg " > < span class = " glyphicon
glyphicon - user " > </ span > < br > Utilisateurs </ button >
< button class = " btn btn - warning btn - lg " > < span class = " glyphicon
glyphicon - comment " > </ span > < br > Commentaires </ button >
< button class = " btn btn - success btn - lg " > < span class = " glyphicon
glyphicon - calendar " > </ span > < br > Ev nements </ button >
< button class = " btn btn - danger btn - lg " > < span class = " glyphicon
glyphicon - shopping - cart " > </ span > < br > Boutique </ button >
< button class = " btn btn - info btn - lg " > < span class = " glyphicon
glyphicon - bullhorn " > </ span > < br > Messages </ button >

121

CHAPITRE 4. ELMENTS DE BASE

Figure 4.54 Sparer licne du texte


Des boutons ronds ?
Il est facile, en ajoutant un peu de style, de crer des boutons ronds qui conviendront
merveille aux icnes. Voici un exemple de style ajout (voir aussi figure 4.55) :
1
2
3
4
5

. btn - lg {
width : 50px ;
height : 50px ;
border - radius : 25px ;
}

Et le code HTML :
1
2
3
4
5

< button class = " btn btn - primary btn - lg " > < span class = " glyphicon
glyphicon - user " > </ span > </ button >
< button class = " btn btn - warning btn - lg " > < span class = " glyphicon
glyphicon - comment " > </ span > </ button >
< button class = " btn btn - success btn - lg " > < span class = " glyphicon
glyphicon - calendar " > </ span > </ button >
< button class = " btn btn - danger btn - lg " > < span class = " glyphicon
glyphicon - shopping - cart " > </ button >
< button class = " btn btn - info btn - lg " > < span class = " glyphicon
glyphicon - bullhorn " > </ span > </ button >

Figure 4.55 Des boutons ronds

Les icnes de Font Awesome


Le site Font Awesome - http://fortawesome.github.io/Font-Awesome/ propose
une collection de 369 icnes toutes prtes pour Bootstrap. videmment elles ne sont
pas intgres de base dans Bootstrap et il faut dclarer le fichier CSS pour pouvoir
les utiliser. Le site propose plusieurs possibilits - http://fortawesome.github.io/
Font-Awesome/get-started/ pour le faire, la plus simple tant dutiliser le CDN :
1

< link href = " http :// netdna . bootstrapcdn . com / font - awesome / 4 . 0 . 3 /
css / font - awesome . css " rel = " stylesheet " >

122

BOUTONS, ICNES ET IMAGES


Une fois le fichier CSS dclar, vous pouvez utiliser les icnes. La syntaxe est celle qui
tait utilise pour Bootstrap 2 avec la balise <i>. Le site propose une galerie dexemples
- http://fortawesome.github.io/Font-Awesome/examples/. On peut insrer une
icne directement dans un texte (voir figure 4.56) :
1

Il faut d verrouiller <i class = " fa fa - unlock " > </ i > pour sortir
<i class = " fa fa - arrow - right " > </ i >

Figure 4.56 Icnes dans un texte


On peut aussi dimensionner les icnes selon le contexte, comme la figure 4.57 :
1
2
3
4
5

<p > <i


<p > <i
<p > <i
<p > <i
<p > <i

class = " fa
class = " fa
class = " fa
class = " fa
class = " fa

fa - print
fa - print
fa - print
fa - print
fa - print

fa - lg " > </ i >


fa - 2x " > </ i >
fa - 3x " > </ i >
fa - 4x " > </ i >
fa - 5x " > </ i >

Taille
Taille
Taille
Taille
Taille

normale </ p >


double </ p >
triple </ p >
quadruple </ p >
quintuple </ p >

Figure 4.57 Rglage de la taille des icnes


On peut aussi trs facilement crer une liste dont les lments sont bien identifis avec
une icne (voir figure 4.58) :
1
2
3
4
5
6

< ul class = " fa - ul " >


< li > <i class = " fa - li
< li > <i class = " fa - li
< li > <i class = " fa - li
< li > <i class = " fa - li
</ ul >

fa
fa
fa
fa

fa - check - square " > </ i >V rifier </ li >


fa - paperclip " > </ i > Conserver </ li >
fa - eraser " > </ i > Effacer </ li >
fa - print " > </ i > Imprimer </ li >

Il existe bien dautres possibilits comme la rotation des icnes, leur animation, leur
empilement, que je vous laisse dcouvrir en consultant la page des exemples - http:
//fortawesome.github.io/Font-Awesome/examples/ du site.
123

CHAPITRE 4. ELMENTS DE BASE

Figure 4.58 Des puces avec des icnes

Mise en forme des images


Bootstrap donne la possibilit de modifier lapparence des bordures des images. Il y a
pour cela 3 classes utilisables :
Classe
img-rounded
img-circle
img-thumbnail

Effet
Image coins arrondis
Image circulaire
Image avec liser blanc

Voici un exemple illustratif de ces trois effets :


1
2
3
4
5
6
7
8
9
10
11

< div class = " container " >


< div class = " col - lg - 2 " >
< img src = " images / t1 . jpg " class = " img - rounded " >
</ div >
< div class = " col - lg - 2 " >
< img src = " images / t2 . jpg " class = " img - circle " >
</ div >
< div class = " col - lg - 2 " >
< img src = " images / t3 . jpg " class = " img - thumbnail " >
</ div >
</ div >

Ce qui nous donne la figure 4.59.

Figure 4.59 Mise en forme des images


Notez que vous pouvez rendre les images adaptatives facilement avec la classe img-responsive.
Cette classe possde 3 rgles :
1
2
3

. img - responsive {
display : block ;
max - width : 100 %;

124

BOUTONS, ICNES ET IMAGES


4
5

height : auto ;

Le but est de faire en sorte que limage occupe toute la place disponible de son contenant.

En rsum
Bootstrap permet une mise en forme lgante des listes, descriptions et tableaux.
Bootstrap permet de raliser des formulaires classiques, horizontaux ou en ligne. Il
permet aussi denrichir les contrles en jouant sur leur dimension ou leur style.
Bootstrap permet de crer des boutons colors, seuls ou groups, de diverses dimensions.
Bootstrap comprend une collection dicnes vectorielles faciles intgrer comme des
caractres.
Bootstrap prvoie la mise en forme des images avec des coins arrondis ou avec un
effet de diapositive.

125

CHAPITRE 4. ELMENTS DE BASE

126

Chapitre

Les composants intgrs


Difficult :
Bootstrap propose des composants bien pratiques mettre en uvre : barres de navigation,
effets typographiques, panneaux, thumbnails. . . et tout a sans crire une seule ligne de
code Javascript. Nous verrons aussi alertes et barres de progression qui demandent un peu
de Javascript pour tre utilises. . .
Allez cest parti pour une visite guide !

127

CHAPITRE 5. LES COMPOSANTS INTGRS

La navigation
La page dexemple
Voici le code ajout la page dexemple pour lquiper dune barre de navigation :
1
2

<! DOCTYPE HTML >


< html >

< head >

4
5

...

en - t te

...

</ head >

8
9

< body >


< div class = " container " >

10
11
12

< nav class = " navbar navbar - inverse " >


< ul class = " nav navbar - nav " >
< li class = " active " > <a href = " # " > Accueil </ a > </ li >
< li > <a href = " # " > Liens </ a > </ li >
< li > <a href = " # " >T moignages </ a > </ li >
< li > <a href = " # " >R f rences </ a > </ li >
</ ul >
< form class = " navbar - form pull - right " >
< input type = " text " style = " width : 150px " class = " input small " placeholder = " Recherche " >
< button type = " submit " class = " btn btn - primary btn - xs " >
< span class = " glyphicon glyphicon - eye - open " > </ span >
Chercher </ button >
</ form >
</ nav >

13
14
15
16
17
18
19
20
21
22

23
24
25

...

26

contenu

...

27
28
29

</ body >


</ html >

Ce qui nous donne la figure 5.1.


Testez ! http://bootstrap.twit.free.fr/tutov3/base04.html

Une barre de navigation


Principe de base
Bootstrap propose de superbes classes pour crer une barre de navigation. la base,
une barre ncessite juste les classes navbar et navbar-default :
128

LA NAVIGATION

Figure 5.1 La page dexemple

129

CHAPITRE 5. LES COMPOSANTS INTGRS


1
2
3

< nav class = " navbar navbar - default " >


Je suis une barre
</ nav >

Ce code donne la figure 5.2.

Figure 5.2 Une simple barre


La classe navbar est toute simple :
1
2
3
4
5
6

. navbar {
position : relative ;
min - height : 50px ;
margin - bottom : 20px ;
border : 1px solid transparent ;
}

Une hauteur fixe 50 pixels, une petite marge basse pour bien distinguer la barre du
reste de la page, une bordure fine et une position relative. La classe navbar-default
fixe les couleurs du fond et de la bordure :
1
2
3
4

. navbar - default {
background - color : # f8f8f8 ;
border - color : # e7e7e7 ;
}

Pourquoi 2 classes ? Nous verrons plus loin quil est possible davoir une barre inverse , avec une couleur de fond diffrente.
Mais une barre vide ne sert pas grand chose, en gnral on la garnit ditems. Voici
un exemple :
1
2
3
4
5
6
7
8

< div class = " navbar navbar - default " >


< ul class = " nav navbar - nav " >
< li class = " active " > <a href = " # " > Accueil </ a > </ li >
< li > <a href = " # " > Liens </ a > </ li >
< li > <a href = " # " >T moignages </ a > </ li >
< li class = " disabled " > <a href = " # " >R f rences </ a > </ li >
</ ul >
</ div >

Les classes nav et navbar-nav doivent tre utilises avec une balise <ul>. Tous les
items de navigation apparaissent alors avec des balises <li>. Litem actif est repr
avec la classe active. Un item dsactiv est dfini avec la classe disabled. Voici la
figure 5.3 un aperu de la barre.
130

LA NAVIGATION

Figure 5.3 Effet des classes navbar et navbar-default


Barre avec un fond noir
Si vous prfrez une barre avec un fond noir, il suffit de remplacer la classe navbar-default
par la classe navbar-inverse :
1
2
3
4
5
6
7
8

< div class = " navbar navbar - inverse " >


< ul class = " nav navbar - nav " >
< li class = " active " > <a href = " # " > Accueil </ a > </ li >
< li > <a href = " # " > Liens </ a > </ li >
< li > <a href = " # " >T moignages </ a > </ li >
< li > <a href = " # " >R f rences </ a > </ li >
</ ul >
</ div >

On obtient alors le mme rsultat que la figure 5.4.

Figure 5.4 Un fond noir avec la classe navbar-inverse


Un titre dans la barre
On peut faire apparatre un titre avec des caractres plus visibles avec la classe navbar-brand :
1
2
3
4
5
6
7
8
9
10
11
12

< div class = " navbar navbar - default " >


< div class = " navbar - header " >
<a class = " navbar - brand " href = " # " > Mon beau site </ a >
</ div >
< ul class = " nav navbar - nav " >
< li class = " active " > <a href = " # " > Accueil </ a > </ li >
< li > <a href = " # " > Liens </ a > </ li >
< li > <a href = " # " >T moignages </ a > </ li >
< li > <a href = " # " >R f rences </ a > </ li >
< li > <a href = " # " > Bibliographie </ a > </ li >
</ ul >
</ div >

Ce qui nous donne la figure 5.5.


Le titre doit tre inclus dans une classe navbar-header pour avoir un affichage correct
sur les mobiles.
131

CHAPITRE 5. LES COMPOSANTS INTGRS

Figure 5.5 Un titre dans la barre


Fixer la barre ?
A priori, on veut une barre de navigation dans la partie suprieure dun site, mais en
gnral sous un bandeau. Avec le code tel quon la vu jusque-l, la barre se situe dans
le flux. Par exemple. . .
1
2
3
4
5
6
7
8
9
10
11
12
13
14

<p > Un paragraphe </ p >


< div class = " navbar navbar - default " >
< div class = " navbar - header " >
<a class = " navbar - brand " href = " # " > Mon beau site </ a >
</ div >
< ul class = " nav navbar - nav " >
< li class = " active " > <a href = " # " > Accueil </ a > </ li >
< li > <a href = " # " > Liens </ a > </ li >
< li > <a href = " # " >T moignages </ a > </ li >
< li > <a href = " # " >R f rences </ a > </ li >
< li > <a href = " # " > Bibliographie </ a > </ li >
</ ul >
</ div >
<p > Un autre paragraphe </ p >

. . . donnera la figure 5.6.

Figure 5.6 La barre est dans le flux


On peut fixer la barre en haut de la page du navigateur avec la classe navbar-fixed-top :
1
2
3
4
5
6
7
8
9
10

<p > Un paragraphe </ p >


< div class = " navbar navbar - default navbar - fixed - top " >
< div class = " navbar - header " >
<a class = " navbar - brand " href = " # " > Mon beau site </ a >
</ div >
< ul class = " nav navbar - nav " >
< li class = " active " > <a href = " # " > Accueil </ a > </ li >
< li > <a href = " # " > Liens </ a > </ li >
< li > <a href = " # " >T moignages </ a > </ li >
< li > <a href = " # " >R f rences </ a > </ li >

132

LA NAVIGATION
11
12
13
14
15

< li > <a href = " # " > Bibliographie </ a > </ li >
</ ul >
</ div >
<p > Un autre paragraphe </ p >
<p > Encore un autre paragraphe </ p >

Ce qui nous donne la figure 5.7.

Figure 5.7 Barre fixe en haut de la page


La barre prend alors toute la largeur de la fentre. Les lments de la page se dplacent
sous la barre fixe en cas de scrolling.
Mais o sont passs les 2 premiers paragraphes ?

Il sont sous la barre ! Il suffit de regarder la classe pour comprendre :


1
2
3
4
5
6

. navbar - fixed - top , . navbar - fixed - bottom {


position : fixed ;
right : 0 ;
left : 0 ;
z - index : 1030 ;
}

La barre est situe en positionnement fixe en haut de la page du navigateur avec un


z-index important. . . Donc si on adopte un positionnement fixe en haut de la page du
navigateur, il faut prendre la prcaution de mnager suffisamment despace pour que
les lments ne soient pas masqus par la barre :
1
2
3
4

< link href = " assets / css / bootstrap . css " rel = " stylesheet " >
< style type = " text / css " >
body { padding - top : 70px ; }
</ style >

Ce qui nous donne la figure 5.8.


Maintenant on retrouve nos paragraphes bien visibles !
Il existe aussi la classe navbar-fixed-bottom pour fixer la barre en bas de la page,
mais les cas dutilisation sont plus anecdotiques. Le principe demeure le mme.
133

CHAPITRE 5. LES COMPOSANTS INTGRS

Figure 5.8 Barre avec espace rserv


Une barre statique
Une barre fixe situe en haut reste colle au bord de la fentre, et quand vous faites
dfiler avec lascenseur, le contenu passe sous la barre de faon logique. Il se peut que
vous dsiriez que la barre suive le mouvement et ne soit plus colle au bord de la fentre,
mais au-dessus du contenu. Dans ce cas, videmment, la barre disparat quand vous
faites dfiler. Il faut alors utiliser la classe navbar-static-top :
1

< div class = " navbar navbar - default navbar - static - top " >

Un formulaire de recherche dans la barre


Pour intgrer un formulaire il suffit dajouter une balise <form> avec la classe navbar-form.
On a 2 classes pour envoyer ce formulaire sur lun des cts :
pull-right pour le fixer droite
pull-left pour le fixer gauche
Voici lintgration pour notre page dexemple :
1
2
3
4
5
6
7
8
9
10

11
12

< nav class = " navbar navbar - inverse " >


< ul class = " nav navbar - nav " >
< li class = " active " > <a href = " # " > Accueil </ a > </ li >
< li > <a href = " # " > Liens </ a > </ li >
< li > <a href = " # " >T moignages </ a > </ li >
< li > <a href = " # " >R f rences </ a > </ li >
</ ul >
< form class = " navbar - form pull - right " >
< input type = " text " style = " width : 150px " class = " input - sm form
- control " placeholder = " Recherche " >
< button type = " submit " class = " btn btn - primary btn - sm " > < span
class = " glyphicon glyphicon - eye - open " > </ span > Chercher </
button >
</ form >
</ nav >

Ce qui nous donne la figure 5.9.


Notez que jai fix la largeur de la zone de saisie de texte 150 px. Ce nest pas
indispensable, mais javais envie daugmenter un peu la valeur par dfaut.
134

LA NAVIGATION

Figure 5.9 Un formulaire dans la barre


Bouton et texte dans une barre
Il existe la classe navbar-btn pour intgrer un bouton dans une barre, mais qui doit
tre utilise uniquement si le bouton nappartient pas un formulaire. Il y a aussi la
classe navbar-text pour insrer du texte. Voici un exemple :
1
2
3
4
5
6
7

< nav class = " navbar navbar - default " >


< div class = " navbar - header " >
<a class = " navbar - brand " href = " # " > Accueil </ a >
</ div >
<p class = " navbar - text " > Connexion au site : </ p >
< button type = " button " class = " btn btn - default navbar - btn " >
Login </ button >
</ nav >

Ce qui nous donne la figure 5.10.

Figure 5.10 Texte et bouton dans la barre

La pagination
Un exemple simple
Bootstrap propose la classe pagination pour raliser. . . des paginations. Le principe
est tout simple, voici un exemple de base :
1
2
3
4
5
6
7

< ul class = " pagination " >


< li > <a href = " # " > < < </ a > </ li >
< li > <a href = " # " >1 </ a > </ li >
< li > <a href = " # " >2 </ a > </ li >
< li > <a href = " # " >3 </ a > </ li >
< li > <a href = " # " > >> </ a > </ li >
</ ul >

On obtient alors le rsultat visible la figure 5.11.


La dimension
Il y a 3 possibilits de dimension pour la pagination :
135

CHAPITRE 5. LES COMPOSANTS INTGRS

Figure 5.11 Pagination simple

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

< div class = " col - lg - 3 " >


< ul class = " pagination pagination - large " >
< li > <a href = " # " > < < </ a > </ li >
< li > <a href = " # " >1 </ a > </ li >
< li > <a href = " # " >2 </ a > </ li >
< li > <a href = " # " >3 </ a > </ li >
< li > <a href = " # " > >> </ a > </ li >
</ ul >
< ul class = " pagination " >
< li > <a href = " # " > < < </ a > </ li >
< li > <a href = " # " >1 </ a > </ li >
< li > <a href = " # " >2 </ a > </ li >
< li > <a href = " # " >3 </ a > </ li >
< li > <a href = " # " > >> </ a > </ li >
</ ul >
< ul class = " pagination pagination - small " >
< li > <a href = " # " > < < </ a > </ li >
< li > <a href = " # " >1 </ a > </ li >
< li > <a href = " # " >2 </ a > </ li >
< li > <a href = " # " >3 </ a > </ li >
< li > <a href = " # " > >> </ a > </ li >
</ ul >
</ div >

Ce qui nous donne le rendu visible la figure 5.12.

Figure 5.12 Plusieurs dimensions pour la pagination

136

LA NAVIGATION
Un cas pratique
On va utiliser cette possibilit de pagination sur un exemple pratique partir des
photos de tigres que jutilise dans ma page de dmonstration. Le but est de faire dfiler
les images 3 par 3. Pour dfinir la page actuelle on utilise la classe active.
1
2
3
4
5
6
7
8
9
10

<! DOCTYPE HTML >


< html >
< head >
< link href = " assets / css / bootstrap . css " rel = " stylesheet " >
< style type = " text / css " >
body { background - color :# DDD ; }
img { width : 100 %; }
a : focus { outline : 0 ; }
</ style >
</ head >

11
12

< body >

13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

< br >
< div class = " container " >
< div id = " content " class = " row " >
< div class = " col - lg - 2 " > < img src = " images / t1 . jpg " alt = "
Tigre " class = " img - thumbnail " > </ div >
< div class = " col - lg - 2 " > < img src = " images / t2 . jpg " alt = "
Tigre " class = " img - thumbnail " > </ div >
< div class = " col - lg - 2 " > < img src = " images / t3 . jpg " alt = "
Tigre " class = " img - thumbnail " > </ div >
< div class = " col - lg - 2 " > < img src = " images / t4 . jpg " alt = "
Tigre " class = " img - thumbnail " > </ div >
< div class = " col - lg - 2 " > < img src = " images / t5 . jpg " alt = "
Tigre " class = " img - thumbnail " > </ div >
< div class = " col - lg - 2 " > < img src = " images / t6 . jpg " alt = "
Tigre " class = " img - thumbnail " > </ div >
< div class = " col - lg - 2 " > < img src = " images / t7 . jpg " alt = "
Tigre " class = " img - thumbnail " > </ div >
< div class = " col - lg - 2 " > < img src = " images / t8 . jpg " alt = "
Tigre " class = " img - thumbnail " > </ div >
< div class = " col - lg - 2 " > < img src = " images / t9 . jpg " alt = "
Tigre " class = " img - thumbnail " > </ div >
< div class = " col - lg - 2 " > < img src = " images / t10 . jpg " alt = "
Tigre " class = " img - thumbnail " > </ div >
< div class = " col - lg - 2 " > < img src = " images / t11 . jpg " alt = "
Tigre " class = " img - thumbnail " > </ div >
< div class = " col - lg - 2 " > < img src = " images / t12 . jpg " alt = "
Tigre " class = " img - thumbnail " > </ div >
</ div >
< div id = " page_navigation " > </ div >
</ div >

32

137

CHAPITRE 5. LES COMPOSANTS INTGRS


33
34

< script src = " assets / js / jquery . js " > </ script >
< script >

35
36
37

var show_per_page = 3 ;
var current_page = 0 ;

38
39
40
41
42

function set_display ( first , last ) {


$ ( '# content ') . children () . css ( ' display ' , ' none ') ;
$ ( '# content ') . children () . slice ( first , last ) . css ( ' display
' , ' block ') ;
}

43
44
45
46

function previous () {
if ( $ ( '. active ') . prev ( '. page_link ') . length ) go_to_page (
current_page - 1 ) ;
}

47
48
49
50

function next () {
if ( $ ( '. active ') . next ( '. page_link ') . length ) go_to_page (
current_page + 1 ) ;
}

51
52
53
54
55
56
57
58
59

function go_to_page ( page_num ) {


current_page = page_num ;
start_from = current_page * show_per_page ;
end_on = start_from + show_per_page ;
set_display ( start_from , end_on ) ;
$ ( '. active ') . removeClass ( ' active ') ;
$ ( '# id ' + page_num ) . addClass ( ' active ') ;
}

60
61

$ ( document ) . ready ( function () {

62
63

var number_of_pages = Math . ceil ( $ ( '# content ') . children () .


size () / show_per_page ) ;

64
65

var nav = ' < ul class = " pagination " > < li > <a href = " javascript
: previous () ; " > < < </ a > ';

66
67
68
69
70
71
72
73
74

var i = -1 ;
while ( number_of_pages > ++ i ) {
nav += ' < li class = " page_link '
if (! i ) nav += ' active ';
nav += '" id = " id ' + i + ' " > ';
nav += ' <a href = " javascript : go_to_page ( ' + i + ') " > '+ ( i
+ 1 ) + ' </ a > ';
}
nav += ' < li > <a href = " javascript : next () ; " > >> </ a > </ ul > ';

75
76

138

$ ( '# page_navigation ') . html ( nav ) ;

LA NAVIGATION
77

set_display (0 , show_per_page ) ;

78
79

}) ;

80
81

</ script >

82
83

</ body >

84
85

</ html >

Ce qui nous donne la figure 5.13.

Figure 5.13 La pagination en action


Testez ! http://bootstrap.twit.free.fr/tutov3/nav10.html
Pagination esthtique
Une autre possibilit de pagination simple consiste utiliser la classe pager :
1
2
3
4

< ul class = " pager " >


< li > <a href = " # " > Pr c dent </ a > </ li >
< li > <a href = " # " > Suivant </ a > </ li >
</ ul >

Ce qui nous donne la figure 5.14.

Figure 5.14 Pagination esthtique


Par dfaut, les boutons sont centrs. Pour les disposer de part et dautre, il faut utiliser
les classes previous et next :
1
2
3

< ul class = " pager col - lg - 4 " >


< li class = " previous " > <a href = " # " > < span class = " glyphicon
glyphicon - backward " > </ span > Pr c dent </ a > </ li >
< li class = " next " > <a href = " # " > Suivant < span class = " glyphicon
glyphicon - forward " > </ span > </ a > </ li >

139

CHAPITRE 5. LES COMPOSANTS INTGRS


4

</ ul >

On obtient alors le rsultat visible la figure 5.15.

Figure 5.15 Bouton dcals avec les classes previous et next

Aide la navigation
Laide la navigation suit le mme principe que la pagination, avec la classe breadcrumb
dans la balise <ul> et utilisation de la classe active pour dfinir llment actif :
1
2
3
4
5

< ul class = " breadcrumb " >


< li > <a href = " # " > Accueil </ a > </ li >
< li > <a href = " # " >T moignages </ a > </ li >
< li class = " active " > Chasseurs </ li >
</ ul >

Ce qui nous donne la figure 5.16.

Figure 5.16 Effet de la classe breadcrumb

Effets typographiques et thumbnails


La page dexemple
Pour la nouvelle version de la page dexemple, on va avoir une amlioration de la
prsentation des photos avec le composant thumbnails et des badges dans la liste des
tigres, comme la figure 5.17.
On va aussi prvoir un libell dans le formulaire et amliorer la prsentation de ladresse
(voir figure 5.18).
Testez ! http://bootstrap.twit.free.fr/tutov3/base05.html
140

EFFETS TYPOGRAPHIQUES ET THUMBNAILS

Figure 5.17 Image utilisateur

Figure 5.18 Image utilisateur

141

CHAPITRE 5. LES COMPOSANTS INTGRS

Jumbotron
Jumbotron contenu
La classe jumbotron permet de rendre le texte trs visible. Prenons un exemple :
1
2
3
4
5
6

< h1 > Coucou </ h1 >


<p > et bonjour </ p >
< div class = " jumbotron " >
< h1 > Coucou </ h1 >
<p > et bonjour </ p >
</ div >

Ce qui donne la figure 5.19.

Figure 5.19 La classe jumbotron


On voit bien la diffrence entre les lments normaux et ceux qui bnficient de la
classe jumbotron.
Voyons cette classe :
1
2
3
4
5
6

. jumbotron {
padding : 30px ;
margin - bottom : 30px ;
color : inherit ;
background - color : # eee ;
}

Un peu de gris en fond, un rglage de hauteur de ligne et quelques marges.


Jumbotron pleine largeur
Vous avez certainement rencontr des sites crs avec Bootstrap comportant des panneaux occupant toute la largeur de la page. On ralise cela facilement avec la classe
142

EFFETS TYPOGRAPHIQUES ET THUMBNAILS


jumbotron, mais il faut organiser diffremment le code. Il ne faut pas le mettre dans
un conteneur, en revanche il faut en prvoir un lintrieur. Voici un exemple :
1
2
3
4
5

6
7

< div class = " jumbotron " >


< div class = " container " >
< h1 > Bonjour je suis le Jumbotron </ h1 >
<p >J ' aime bien prendre mes aises et occuper tout l ' espace
pour que l ' on me remarque facilement ! </ p >
<p > <a class = " btn btn - info btn - lg " role = " button " > En savoir
plus < span class = " glyphicon glyphicon glyphicon - hand right " > </ span > </ a > </ p >
</ div >
</ div >

Ce qui donne la figure 5.20.

Figure 5.20 Un jumbotron en plein largeur

Des libells colors


Pour crer des repres visuels textuels attractifs, il est possible de crer de beaux
libells :
1
2
3
4
5

<p > < span class = " label


600 </ p >
<p > < span class = " label
4000 </ p >
<p > < span class = " label
span > 8000 </ p >
<p > < span class = " label
11000 </ p >
<p > < span class = " label
12000 </ p >

label - default " > Valeur d ' inhibition </ span >
label - info " > Valeur de signalement </ span >
label - success " > Valeur de fonctionnement </
label - warning " > Valeur dangereuse </ span >
label - danger " > Valeur critique </ span >

Ce qui donne la figure 5.21.


Ces libells sadaptent en dimension :
1
2
3

< h1 > < span class = " label label - success " > H1 </ span > </ h1 >
< h2 > < span class = " label label - success " > H2 </ span > </ h2 >
< h3 > < span class = " label label - success " > H3 </ span > </ h3 >

143

CHAPITRE 5. LES COMPOSANTS INTGRS

Figure 5.21 Des libells colors


4
5
6

< h4 > < span class = " label label - success " > H4 </ span > </ h4 >
< h5 > < span class = " label label - success " > H5 </ span > </ h5 >
< h6 > < span class = " label label - success " > H6 </ span > </ h6 >

On obtient ainsi un rendu identique celui de la figure 5.22.

Figure 5.22 Plusieurs dimensions pour les libells


Jai utilis un libell dans le formulaire de contact de la page dexemple :
1
2

< h4 > < span class = " label " > Si vous voulez me laisser un message </
span > </ h4 >
< h4 > Comment m ' avez - vous trouv ? </ h4 >

On obtient ainsi la figure 5.23.

Des badges
Les badges sont un peu comme les libells, mais pour des informations plus courtes,
idalement des nombres :
1

<a href = " # " > Messages re us < span class = " badge " > 42 </ span > </ a >

Ce qui donne la figure 5.24.


144

EFFETS TYPOGRAPHIQUES ET THUMBNAILS

Figure 5.23 Un libell dans un formulaire

Figure 5.24 Un badge simple

Comme le badge se trouve dans une balise <span>, il est facile de lintgrer par exemple
un bouton et de le colorer :
1

< button class = " btn btn - danger " > Envoi < span class = " badge text success " > 42 </ span > </ button >

Ce qui donne la figure 5.25.

Figure 5.25 Stylisation du badge


Jai ajout des badges sur la page dexemple pour reprsenter le nombre de tigres :
1
2
3
4
5
6
7
8
9
10
11

< ul >
< li > Tigre
< li > Tigre
</ li >
< li > Tigre
< li > Tigre
< li > Tigre
< li > Tigre
< li > Tigre
< li > Tigre
< li > Tigre
</ ul >

de Sib rie < span class = " badge " > 230 </ span > </ li >
de Chine m ridionale < span class = " badge " > 120 </ span >
de
de
de
de
de
du
de

Bali < span class = " badge " > 540 </ span > </ li >
d ' Indochine < span class = " badge " > 230 </ span > </ li >
Malaisie < span class = " badge " > 240 </ span > </ li >
Java < span class = " badge " > 1200 </ span > </ li >
Sumatra < span class = " badge " > 710 </ span > </ li >
Bengale < span class = " badge " > 20 </ span > </ li >
la Caspienne < span class = " badge " > 40 </ span > </ li >

Ce qui donne la figure 5.26.


145

CHAPITRE 5. LES COMPOSANTS INTGRS

Figure 5.26 Badges dans une liste

Thumbnails
Si vous avez des images, des vidos ou tous autres lments afficher dans une grille,
Bootstrap propose le composant Thumbnails trs facile mettre en uvre. Je reviens
sur ma page dexemple qui comporte de petites images de tigres. Jusque-l, jai positionn les images en utilisant tout simplement la grille :
1
2
3
4
5
6
7
8
9
10
11
12
13
14

< section class = " row " >


< div class = " col - xs - 4
jpg " alt = " Tigre "
< div class = " col - xs - 4
jpg " alt = " Tigre "
< div class = " col - xs - 4
jpg " alt = " Tigre "
< div class = " col - xs - 4
jpg " alt = " Tigre "
< div class = " col - xs - 4
jpg " alt = " Tigre "
< div class = " col - xs - 4
jpg " alt = " Tigre "
< div class = " col - xs - 4
jpg " alt = " Tigre "
< div class = " col - xs - 4
jpg " alt = " Tigre "
< div class = " col - xs - 4
jpg " alt = " Tigre "
< div class = " col - xs - 4
jpg " alt = " Tigre "
< div class = " col - xs - 4
jpg " alt = " Tigre "
< div class = " col - xs - 4
jpg " alt = " Tigre "
</ section >

col - sm - 3 col - md - 2 " > < img src = " images / t1 .


class = " img - rounded " > </ div >
col - sm - 3 col - md - 2 " > < img src = " images / t2 .
class = " img - rounded " > </ div >
col - sm - 3 col - md - 2 " > < img src = " images / t3 .
class = " img - rounded " > </ div >
col - sm - 3 col - md - 2 " > < img src = " images / t4 .
class = " img - rounded " > </ div >
col - sm - 3 col - md - 2 " > < img src = " images / t5 .
class = " img - rounded " > </ div >
col - sm - 3 col - md - 2 " > < img src = " images / t6 .
class = " img - rounded " > </ div >
col - sm - 3 col - md - 2 " > < img src = " images / t7 .
class = " img - rounded " > </ div >
col - sm - 3 col - md - 2 " > < img src = " images / t8 .
class = " img - rounded " > </ div >
col - sm - 3 col - md - 2 " > < img src = " images / t9 .
class = " img - rounded " > </ div >
col - sm - 3 col - md - 2 " > < img src = " images / t10 .
class = " img - rounded " > </ div >
col - sm - 3 col - md - 2 " > < img src = " images / t11 .
class = " img - rounded " > </ div >
col - sm - 3 col - md - 2 " > < img src = " images / t12 .
class = " img - rounded " > </ div >

Ce qui donne une organisation bien rgulire, comme le montre la figure 5.27.
146

EFFETS TYPOGRAPHIQUES ET THUMBNAILS

Figure 5.27 Disposition des images avec la grille

Voyons ce que a donne avec le composant Thumbnails. Le principe est simple, il faut
utiliser la classe thumbnail, par exemple dans une balise <a>. Voil ce que a donne
pour la page dexemple en supposant que les vignettes servent de liens :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

< section class = " row " >


< div class = " col - xs - 4 col - sm - 3 col - md - 2 " >
<a href = " # " class = " thumbnail " >
< img src = " images / t1 . jpg " alt = " Tigre " class = " img - rounded " >
</ a >
</ div >
< div class = " col - xs - 4 col - sm - 3 col - md - 2 " >
<a href = " # " class = " thumbnail " >
< img src = " images / t2 . jpg " alt = " Tigre " class = " img - rounded " >
</ a >
</ div >
< div class = " col - xs - 4 col - sm - 3 col - md - 2 " >
<a href = " # " class = " thumbnail " >
< img src = " images / t3 . jpg " alt = " Tigre " class = " img - rounded " >
</ a >
</ div >
< div class = " col - xs - 4 col - sm - 3 col - md - 2 " >
<a href = " # " class = " thumbnail " >
< img src = " images / t4 . jpg " alt = " Tigre " class = " img - rounded " >
</ a >
</ div >
< div class = " col - xs - 4 col - sm - 3 col - md - 2 " >
<a href = " # " class = " thumbnail " >
< img src = " images / t5 . jpg " alt = " Tigre " class = " img - rounded " >
</ a >
</ div >
< div class = " col - xs - 4 col - sm - 3 col - md - 2 " >
<a href = " # " class = " thumbnail " >
< img src = " images / t6 . jpg " alt = " Tigre " class = " img - rounded " >
</ a >
</ div >
< div class = " col - xs - 4 col - sm - 3 col - md - 2 " >
<a href = " # " class = " thumbnail " >
< img src = " images / t7 . jpg " alt = " Tigre " class = " img - rounded " >
</ a >

147

CHAPITRE 5. LES COMPOSANTS INTGRS


36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62

</ div >


< div class = " col - xs - 4 col - sm - 3 col - md - 2 " >
<a href = " # " class = " thumbnail " >
< img src = " images / t8 . jpg " alt = " Tigre " class = " img - rounded " >
</ a >
</ div >
< div class = " col - xs - 4 col - sm - 3 col - md - 2 " >
<a href = " # " class = " thumbnail " >
< img src = " images / t9 . jpg " alt = " Tigre " class = " img - rounded " >
</ a >
</ div >
< div class = " col - xs - 4 col - sm - 3 col - md - 2 " >
<a href = " # " class = " thumbnail " >
< img src = " images / t10 . jpg " alt = " Tigre " class = " img - rounded "
>
</ a >
</ div >
< div class = " col - xs - 4 col - sm - 3 col - md - 2 " >
<a href = " # " class = " thumbnail " >
< img src = " images / t11 . jpg " alt = " Tigre " class = " img - rounded "
>
</ a >
</ div >
< div class = " col - xs - 4 col - sm - 3 col - md - 2 " >
<a href = " # " class = " thumbnail " >
< img src = " images / t12 . jpg " alt = " Tigre " class = " img - rounded "
>
</ a >
</ div >
</ section >

On obtient ainsi le mme rsultat qu la figure 5.28.

Figure 5.28 Effet de la classe thumbnail


Remarquez la figure 5.29 la stylisation quand on passe le curseur de la souris.
Pour des raisons dhomognit de la prsentation, je prvois aussi de traiter la photo
plus grande situe au-dessous :
1
2

< div class = " thumbnail " >


< img src = " images / photo - tigre . jpg " alt = " Tigre " class = " img rounded " >

148

EFFETS TYPOGRAPHIQUES ET THUMBNAILS

Figure 5.29 Effet du passage du curseur de la souris


3

</ div >

Ce qui donne la figure 5.30.

Figure 5.30 Classe thumbnail applique une grande image


Nous ne sommes videmment pas limits afficher des images dans un thumbnail.
Puisque vous pouvez mettre cette classe dans un <div> ou autre, vous pouvez garnir le thumbnail de ce que vous voulez. Par exemple jai stylis ladresse sur la page
dexemple :
1
2
3
4
5
6

< address class = " thumbnail " >


<p > Vous pouvez me contacter cette adresse : </ p >
< strong > Tigrou Alfred </ strong > < br >
All e des fauves < br >
28645 F lins - sur - Loire < br >
</ address >

Ce qui donne la figure 5.31.


149

CHAPITRE 5. LES COMPOSANTS INTGRS

Figure 5.31 Classe thumbnail applique une adresse

Listes groupes, panneaux et mdias


La page dexemple
Nous allons encore amliorer laspect de la page dexemple avec une prsentation de
vidos, comme la figure 5.32.

Figure 5.32 Image utilisateur


On va aussi prvoir un panneau pour la liste des tigres et galement pour le tableau
(voir figure 5.33).
Testez ! http://bootstrap.twit.free.fr/tutov3/base06.html

Les listes groupes


Les listes groupes proposent une mise en forme des listes non ordonnes. Voici un
premier exemple avec la visualisation dune liste sans et avec formatage pour comparer :
1
2
3
4
5
6
7
8
9

< div class = " container " >


< div class = " col - lg - 2 " >
< ul >
< li > Item 1 </ li >
< li > Item 2 </ li >
< li > Item 3 </ li >
< li > Item 4 </ li >
</ ul >
</ div >

150

LISTES GROUPES, PANNEAUX ET MDIAS

Figure 5.33 Image utilisateur

151

CHAPITRE 5. LES COMPOSANTS INTGRS


10
11
12
13
14
15
16
17
18

< div class = " col - lg - 2 " >


< ul class = " list - group " >
< li class = " list - group - item " > Item
< li class = " list - group - item " > Item
< li class = " list - group - item " > Item
< li class = " list - group - item " > Item
</ ul >
</ div >
</ div >

1 </ li >
2 </ li >
3 </ li >
4 </ li >

Ce qui donne la figure 5.34.

Figure 5.34 Liste simple et liste groupe

Liste avec badges


Il est possible dajouter des badges tout simplement en intgrant un <span>, par dfaut
affich droite :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

< ul class = " list - group " >


< li class = " list - group - item " >
< span class = " badge " > 22 </ span >
Item 1
</ li >
< li class = " list - group - item " >
< span class = " badge " > 12 </ span >
Item 2
</ li >
< li class = " list - group - item " >
< span class = " badge " > 33 </ span >
Item 3
</ li >
< li class = " list - group - item " >
< span class = " badge " > 87 </ span >
Item 4
</ li >
</ ul >

Ce qui donne la figure 5.35.


152

LISTES GROUPES, PANNEAUX ET MDIAS

Figure 5.35 Liste avec des badges


Listes avec liens
Les lments de la liste peuvent aussi tre des liens. Il suffit de prvoir des balises <a>,
litem actif est repr avec la classe active :
1
2
3
4
5
6
7

< ul class = " list - group " >


<a href = " # " class = " list - group - item active " >
< span class = " glyphicon glyphicon - chevron - right pull - right " >
</ span >
Item 1
</ a >
<a href = " # " class = " list - group - item " >
< span class = " glyphicon glyphicon - chevron - right pull - right " >
</ span >

8
9
10
11
12
13
14
15
16
17
18
19

Item 2
</ a >
<a href = " # " class = " list - group - item " >
< span class = " glyphicon glyphicon - chevron - right pull - right " >
</ span >
Item 3
</ a >
<a href = " # " class = " list - group - item " >
< span class = " glyphicon glyphicon - chevron - right pull - right " >
</ span >
Item 4
</ a >
</ ul >

Ce qui donne la figure 5.36.


Jai prvu des chevrons pour appuyer la smantique des liens, ils sont pousss sur la
droite avec la classe pull-right.
Un peu de couleur
De nouvelles classes sont apparues avec la version 3.1 de Bootstrap qui permettent
davoir un peu de couleur dans les listes groupes.
153

CHAPITRE 5. LES COMPOSANTS INTGRS

Figure 5.36 Liste avec des liens


1
2
3
4
5
6
7
8

< div class = " col - lg - 3 " >


< ul class = " list - group " >
< li class = " list - group - item list - group - item - success " > On a
gagn ! </ li >
< li class = " list - group - item list - group - item - info " > Une petite
info </ li >
< li class = " list - group - item list - group - item - warning " >
Attention c ' est chaud ! </ li >
< li class = " list - group - item list - group - item - danger " > Par l c
' est dangereux ... </ li >
</ ul >
</ div >

Vous trouverez le rsultat visuel la figure 5.37.

Figure 5.37 Un peu de couleur dans les listes

Contenus divers

La liste est suffisamment versatile pour contenir des lments varis. On peut avoir une
en-tte avec la classe list-group-item-heading, et du texte avec la classe list-group-item-te
mais on peut intgrer par exemple une image comme je le fais ici :
1
2
3
4

< ul class = " list - group " >


<a href = " # " class = " list - group - item active " >
< h4 class = " list - group - item - heading " > Tigre 1 </ h4 >
<p class = " list - group - item - text pull - right " > Mon joli tigre 1
</ p >

154

LISTES GROUPES, PANNEAUX ET MDIAS


5
6
7
8
9
10
11
12

< img src = " images / t1 . jpg " >


</ a >
<a href = " # " class = " list - group - item " >
< h4 class = " list - group - item - heading " > Tigre 2 </ h4 >
<p class = " list - group - item - text pull - right " > Mon joli tigre 2
</ p >
< img src = " images / t2 . jpg " >
</ a >
</ ul >

Ce qui donne la figure 5.38.

Figure 5.38 Liste avec des images

Utilisation de liste sur la page dexemple


Jai utilis une liste groupe sur la page dexemple pour les sous-espces de tigres (avec
badges, le tout intgr dans un panneau dont nous allons bientt parler) :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

< div class = " list - group " >


<a href = " # " class = " list - group - item " >
Tigre de Sib rie
< span class = " badge " > 120 </ span >
</ a >
<a href = " # " class = " list - group - item " >
Tigre de Chine m ridionale
< span class = " badge " > 540 </ span >
</ a >
<a href = " # " class = " list - group - item " >
Tigre de Bali
< span class = " badge " > 230 </ span >
</ a >
<a href = " # " class = " list - group - item " >
Tigre de d ' Indochine

155

CHAPITRE 5. LES COMPOSANTS INTGRS


16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

< span class = " badge " > 240 </ span >
</ a >
<a href = " # " class = " list - group - item " >
Tigre de Malaisie
< span class = " badge " > 1200 </ span >
</ a >
<a href = " # " class = " list - group - item " >
Tigre de Java
< span class = " badge " > 710 </ span >
</ a >
<a href = " # " class = " list - group - item " >
Tigre de Sumatra
< span class = " badge " > 20 </ span >
</ a >
<a href = " # " class = " list - group - item " >
Tigre du Bengale
< span class = " badge " > 40 </ span >
</ a >
<a href = " # " class = " list - group - item " >
Tigre de la Caspienne
< span class = " badge " > 200 </ span >
</ a >
</ div >
</ div >

Ce qui donne la figure 5.42.

Figure 5.39 Liste avec badges de la page dexemple

156

LISTES GROUPES, PANNEAUX ET MDIAS

Les panneaux
Les panneaux permettent disoler visuellement une partie de la page avec une bordure
esthtique, titre, contenu et pied de panneau. Voici un exemple lmentaire :
1
2
3
4
5
6
7

< div class = " panel panel - default " >


< div class = " panel - heading " >
< h3 class = " panel - title " > Titre </ h3 >
</ div >
< div class = " panel - body " > Contenu </ div >
< div class = " panel - footer " > Pied de panneau </ div >
</ div >

Ce qui donne la figure 5.40.

Figure 5.40 Un simple panneau


Il y a aussi des classes pour crer un sens visuel pour ces panneaux :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

< div class = " panel panel - primary " >


< div class = " panel - heading " >
< h3 class = " panel - title " > Titre </ h3 >
</ div >
< div class = " panel - body " > Contenu </ div >
</ div >
< div class = " panel panel - success " >
< div class = " panel - heading " >
< h3 class = " panel - title " > Titre </ h3 >
</ div >
< div class = " panel - body " > Contenu </ div >
</ div >
< div class = " panel panel - warning " >
< div class = " panel - heading " >
< h3 class = " panel - title " > Titre </ h3 >
</ div >
< div class = " panel - body " > Contenu </ div >
</ div >
< div class = " panel panel - danger " >
< div class = " panel - heading " >
< h3 class = " panel - title " > Titre </ h3 >
</ div >
< div class = " panel - body " > Contenu </ div >
</ div >

157

CHAPITRE 5. LES COMPOSANTS INTGRS


25
26
27
28
29
30

< div class = " panel panel - info " >


< div class = " panel - heading " >
< h3 class = " panel - title " > Titre </ h3 >
</ div >
< div class = " panel - body " > Contenu </ div >
</ div >

Ce qui donne la figure 5.41.

Figure 5.41 Des panneaux styliss

Utilisation avec une liste groupe


Jai intgr une liste groupe dans un panneau au niveau de la page dexemple :
1
2
3
4
5
6
7

< div class = " panel panel - info " >


< div class = " panel - heading " >
< h3 class = " panel - title " > Les sous - esp ces des tigres : </ h3 >
</ div >
< div class = " list - group " >
<a href = " # " class = " list - group - item " >
...

158

LISTES GROUPES, PANNEAUX ET MDIAS


8
9
10
11

</ a >
<a href = " # " class = " list - group - item " >
...
</ a >

12
13

...

14
15
16

</ div >


</ div >

Ce qui donne la figure 5.42.

Figure 5.42 Liste groupe dans un panneau

Utilisation avec un tableau


Jai intgr un tableau (sans bordure) dans un panneau au niveau de la page dexemple :
1
2
3
4
5
6
7
8
9
10
11

< div class = " panel panel - primary " >


< table class = " table table - striped table - condensed " >
< div class = " panel - heading " >
< h3 class = " panel - title " > Les menaces pour les tigres </ h3 >
</ div >
< thead >
< tr >
< th > Lieu </ th >
< th > Menace </ th >
</ tr >
</ thead >

159

CHAPITRE 5. LES COMPOSANTS INTGRS


12
13
14
15

16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

< tbody >


< tr >
< td > Grand Mekong </ td >
< td > Demande croissante de certaines parties de l ' animal
pour la m decine chinoise traditionnelle et
fragmentation des habitats du fait du d veloppement
non durable d ' infrastructures </ td >
</ tr >
< tr >
< td > le de Sumatra </ td >
< td > Production d ' huile de palme et de p tes papiers </
td >
</ tr >
< tr >
< td > Indon sie et Malaisie </ td >
< td >P te papier , l ' huile de palme et le caoutchouc </
td >
</ tr >
< tr >
< td > tats - Unis </ td >
< td > Les tigres captifs repr sentent un danger pour les
tigres sauvages </ td >
</ tr >
< tr >
< td > Europe </ td >
< td > Gros app tit pour l ' huile de palme </ td >
</ tr >
< tr >
< td >N pal </ td >
< td > Commerce ill gal de produits d riv s de tigres </ td >
</ tr >
</ tbody >
</ table >
</ div >

Ce qui donne la figure 5.43.

Figure 5.43 Tableau dans un panneau


160

LISTES GROUPES, PANNEAUX ET MDIAS

Les mdias
Simple insertion
Lobjet mdia permet dinsrer un mdia (audio, image, vido. . .) gauche ou droite
dun texte. Cest ce que jai prvu dans la page dexemple avec une vido de tigre :
1
2
3

4
5
6
7
8
9

< div class = " media col - lg - 12 " >


< div class = " pull - right " >
< iframe width = " 420 " height = " 320 " src = " http :// www . youtube .
com / embed / VmnIeLmjuHA " frameborder = " 0 " allowfullscreen > <
/ iframe >
</ div >
< div class = " media - body pull - right " >
< h4 class = " media - heading " > Un tigre domesique dans son canap
</ h4 >
Admirez ce noble animal ...
</ div >
</ div >

Ce qui donne la figure 5.44.

Figure 5.44 Utilisation de la classe media


La classe media englobe lensemble. On utilise ensuite au choix pull-right ou pull-left
pour le mdia. Le corps de composant est dfini par la classe media-body et on peut
mettre un titre avec media-heading.
Liste de mdias
Une autre possibilit fort intressante consiste crer une liste de mdias avec la classe
media-list. Prenons par exemple le cas dun forum, on peut imaginer ce type de
scnario :
161

CHAPITRE 5. LES COMPOSANTS INTGRS


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

< div class = " container " >


< ul class = " media - list col - lg - 7 " >
< li class = " media thumbnail " >
<a class = " pull - left " href = " # " >
< img class = " media - object " src = " images / ico01 . png " >
</ a >
< div class = " media - body " >
< h4 class = " media - heading " > Suggestion </ h4 >
<p > Je pense souhaitable d ' interdire la chasse au tigre
pour pr server l ' esp ce ! </ p >
< div class = " media thumbnail " >
<a class = " pull - left " href = " # " >
< img class = " media - object " src = " images / ico02 . png " >
</ a >
< div class = " media - body " >
< h4 class = " media - heading " > Animaux dangereux </ h4 >
<p > Tu d lires compl tement , ce sont des animaux
trop dangereux pour les laisser vivre . </ p >
< div class = " media thumbnail " >
<a class = " pull - left " href = " # " >
< img class = " media - object " src = " images / ico01 . png
">
</ a >
< div class = " media - body " >
< h4 class = " media - heading " > Quel d lire ! </ h4 >
<p >C ' est toi qui d lires ! Il faut pr server la
bio - diversit . Les tigres ne sont pas
vraiment dangereux , c ' est l ' homme qui l ' est
! </ p >
</ div >
</ div >
</ div >
< div class = " media " >
<a class = " pull - left " href = " # " >
< img class = " media - object " src = " images / ico02 . png " >
</ a >
< div class = " media - body " >
< h4 class = " media - heading " > Quel courage ! </ h4 >
<p >J ' aimerais te voir face un tigre toi ! </ p >
</ div >
</ div >
</ div >
< div class = " media thumbnail " >
<a class = " pull - left " href = " # " >
< img class = " media - object " src = " images / ico03 . png " >
</ a >
< div class = " media - body " >
< h4 class = " media - heading " > Un peu de calme </ h4 >
<p > Je suis favorable la pr servation de l ' esp ce
mais dans des sites prot g s . </ p >

162

LISTES GROUPES, PANNEAUX ET MDIAS


44
45
46
47
48
49
50
51
52
53
54
55
56
57
58

< div class = " media thumbnail " >


<a class = " pull - left " href = " # " >
< img class = " media - object " src = " images / ico04 . png
">
</ a >
< div class = " media - body " >
< h4 class = " media - heading " > Tu as vu ta t te ! </
h4 >
<p > Avec la t te que tu as tu ferais m me peur
un tigre toi ! </ p >
</ div >
</ div >
</ div >
</ div >
</ div >
</ li >
</ ul >
</ div >

Ce qui donne la figure 5.45.

Figure 5.45 Une liste de mdias


Testez ! http://bootstrap.twit.free.fr/tutov3/media01.html
Remarquez lutilisation de la classe thumbnail pour bien isoler les commentaires et
rendre le tout lisible.
163

CHAPITRE 5. LES COMPOSANTS INTGRS

Alertes et barres de progression


Nous allons voir maintenant 2 composants qui, bien que ne ncessitant pas de Javascript
pour leur prsentation, en ont besoin pour leur mise en uvre.

Alertes
Utilisation de base
Les alertes permettent de prsenter un message visuellement significatif. Il suffit dutiliser les classes alert et alert-warning :
1
2
3

< div class = " alert alert - warning col - lg - 3 " >
< strong > Attention ! </ strong > Vous allez trop loin !
</ div >

Ce qui donne la figure 5.46.

Figure 5.46 Une simple alerte

Les 3 variantes
Trois autres classes permettent de changer laspect de lalerte selon le rsultat dsir :
1
2
3
4
5
6
7
8
9

< div class = " alert col - lg - 2 alert - info " >
< strong > Infos ! </ strong >
</ div >
< div class = " alert col - lg - offset - 1 col - lg - 2 alert - success " >
< strong > Bravo ! </ strong >
</ div >
< div class = " alert col - lg - offset - 1 col - lg - 2 alert - danger " >
< strong > Danger ! </ strong >
</ div >

Ce qui donne la figure 5.47.

Figure 5.47 Des alertes colores


164

ALERTES ET BARRES DE PROGRESSION


Un bloc dinformation
Si le texte doit tre consquent, il suffit dcrire le code que lon dsire :
1
2
3

4
5

< div class = " alert span5 alert - info " >
< h3 > Information importante ! </ h3 >
L ' utilisation de la classe < strong > alert </ strong > n ' est pas
sans danger pour les yeux fatigu s des pauvres
internautes ,
et je vous demande instamment de l ' utiliser avec parcimonie ...
</ div >

Ce qui donne la figure 5.48.

Figure 5.48 Une alerte plus fournie

Un lien dans une alerte


La classe alert-link permet dinsrer un lien esthtique dans une alerte :
1
2
3

< div class = " alert alert - info col - lg - 3 " >
Un <a href = " # " class = " alert - link " > joli lien </ a > dans une
alerte ...
</ div >

Ce qui donne la figure 5.49.

Figure 5.49 Un lien dans une alerte

Un bouton de fermeture
Une fois quon a lu une alerte, on peut avoir envie de la fermer. Il suffit de prvoir un
bouton et dajouter la classe alert-dismissable :
1

< div class = " alert alert - warning alert - dismissable col - lg - 4 " >

165

CHAPITRE 5. LES COMPOSANTS INTGRS


2
3
4

< button type = " button " class = " close " data - dismiss = " alert " >&
times ; </ button >
< strong > Attention ! </ strong > Vous allez vraiment trop loin !
</ div >

Ce qui donne la figure 5.50.

Figure 5.50 Un bouton pour fermer lalerte

Utilisation dynamique
Mais videmment ces alertes ne trouvent leur sens que dans un contexte dynamique
et nous devons pouvoir les faire apparatre et disparatre quand le besoin se prsente.
Bootstrap prvoit un petit plugin qui ne me parat pas vraiment utile, tant donn
quon peut facilement grer les alertes avec quelques lignes de Javascript dopes par
jQuery :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

< div class = " container " >


< div class = " alert alert - warning alert - dismissable col - lg - 4 "
style = " display : none " >
< button type = " button " class = " close " >x </ button >
< h4 > Attention ! </ h4 > Petite information importante !
</ div >
< div class = " col - lg - 3 " >
< input type = " button " class = " btn btn - primary " id = " afficher "
value = " Afficher l ' alerte " >
</ div >
</ div >
< script src = " assets / js / jquery . js " > </ script >
< script >
$ ( function () {
$ ( " # afficher " ) . click ( function () {
$ ( " # afficher " ) . hide () ;
$ ( " . alert " ) . show ( " slow " ) ;
}) ;
$ ( " . close " ) . click ( function () {
$ ( " . alert " ) . hide ( " slow " ) ;
$ ( " # afficher " ) . show () ;
}) ;
}) ;
</ script >

Ce qui donne les figures 5.51 et 5.52.


166

ALERTES ET BARRES DE PROGRESSION

Figure 5.51 Un bouton dclencheur

Figure 5.52 Une alerte dclenche


Testez ! http://bootstrap.twit.free.fr/tutov3/alerte05.html Un bouton adapt
par la classe close a t prvu pour la fermeture de lalerte. On pourrait galement
mettre un bouton normal.

Barres de progression
Les barres de progression constituent une faon lgante de faire patienter lutilisateur
pendant une longue tche. Elles ont aussi pour vocation de le rassurer et de lui indiquer approximativement le temps quil lui reste attendre. Les classes progress et
progress-bar permettent de raliser facilement ce genre deffet. Pour les exemples, je
prvois un peu de code javascript pour simuler un processus temporel. Voici la barre
de base :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

< div class = " container " >


< div class = " progress " >
< div class = " progress - bar " > </ div >
</ div >
< input type = " button " class = " btn btn - primary " id = " animer "
value = " Animer " >
</ div >
< script src = " assets / js / jquery . js " > </ script >
< script >
function timer ( n ) {
$ ( " . progress - bar " ) . css ( " width " , n + " % " ) ;
if ( n < 100 ) {
setTimeout ( function () {
timer ( n + 10 ) ;
} , 200 ) ;
}
}
$ ( function () {
$ ( " # animer " ) . click ( function () {
timer ( 0 ) ;
}) ;
}) ;

167

CHAPITRE 5. LES COMPOSANTS INTGRS


</ script >

22

Ce qui donne la figure 5.53.

Figure 5.53 Barre de progression simple


Testez ! http://bootstrap.twit.free.fr/tutov3/barre01.html
Le code correspondant la barre figure aux lignes 2, 3 et 4, le reste est juste lintendance
pour lanimer pour lexemple. On se contente de faire voluer la proprit width de la
barre.
Il existe une version raye de la barre avec la classe progress-striped :
1
2
3

< div class = " progress progress - striped " >


< div class = " progress - bar " > </ div >
</ div >

Ce qui donne la figure 5.54.

Figure 5.54 Barre de progression raye


Testez ! http://bootstrap.twit.free.fr/tutov3/barre02.html
Il existe aussi une version raye et lgamment anime avec la classe active :
1
2
3
4
5
6
7
8
9
10
11
12
13

< div class = " container " >


< div class = " progress progress - striped active " >
< div class = " progress - bar " > </ div >
</ div >
< div id = " pourcentage " class = " pull - right " > </ div >
< input type = " button " class = " btn btn - primary " id = " animer "
value = " Animer " >
</ div >
< script src = " assets / js / jquery . js " > </ script >
< script >
function timer ( n ) {
$ ( " . progress - bar " ) . css ( " width " , n + " % " ) ;
$ ( " # pourcentage " ) . text ( n + " % " ) ;
if ( n < 100 ) {

168

ALERTES ET BARRES DE PROGRESSION


14
15
16
17
18
19
20
21
22
23
24

setTimeout ( function () {
timer ( n + 10 ) ;
} , 200 ) ;

}
}
$ ( function () {
$ ( " # animer " ) . click ( function () {
timer ( 0 ) ;
}) ;
}) ;
</ script >

Ce qui donne la figure 5.55, mme si sur limage vous ne voyez pas lanimation. . .

Figure 5.55 Barre de progression raye et anime


Testez ! http://bootstrap.twit.free.fr/tutov3/barre03.html Pour changer un
peu, jai prvu laffichage du pourcentage. Remarquez lutilisation de la classe pull-right
pour envoyer cet affichage sur la droite.
Il est galement prvu des couleurs diffrentes pour enrichir la smantique de ces barres,
que ce soit en version unie ou raye :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

< div class = " container " >


< div class = " progress " >
< div class = " progress - bar progress - bar - info " > </ div >
</ div >
< div class = " progress " >
< div class = " progress - bar progress - bar - success " > </ div >
</ div >
< div class = " progress " >
< div class = " progress - bar progress - bar - warning " > </ div >
</ div >
< div class = " progress " >
< div class = " progress - bar progress - bar - danger " > </ div >
</ div >
< div class = " progress progress - striped " >
< div class = " progress - bar progress - bar - info " > </ div >
</ div >
< div class = " progress progress - striped " >
< div class = " progress - bar progress - bar - success " > </ div >
</ div >
< div class = " progress progress - striped " >
< div class = " progress - bar progress - bar - warning " > </ div >
</ div >

169

CHAPITRE 5. LES COMPOSANTS INTGRS


23
24
25
26
27

< div class = " progress progress - striped " >


< div class = " progress - bar progress - bar - danger " > </ div >
</ div >
< input type = " button " class = " btn btn - primary " id = " animer "
value = " Animer " >
</ div >

Ce qui donne la figure 5.56.

Figure 5.56 Des barres colores


Testez ! http://bootstrap.twit.free.fr/tutov3/barre04.html
Une dernire possibilit, enfin, consiste empiler des barres :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

< div class = " container " >


< div class = " progress " >
< div class = " progress - bar progress - bar - success " > </ div >
< div class = " progress - bar progress - bar - warning " > </ div >
< div class = " progress - bar progress - bar - danger " > </ div >
</ div >
< input type = " button " class = " btn btn - primary " id = " animer "
value = " Animer " >
</ div >
< script src = " assets / js / jquery . js " > </ script >
< script >
function timer ( n ) {
$ ( " . progress - bar " ) . css ( " width " , n + " % " ) ;
if ( n < 33 . 2 ) {
setTimeout ( function () {
timer ( n + 3 . 33 ) ;
} , 200 ) ;
}

170

ALERTES ET BARRES DE PROGRESSION


18
19
20
21
22
23
24

}
$ ( function () {
$ ( " # animer " ) . click ( function () {
timer ( 0 ) ;
}) ;
}) ;
</ script >

Ce qui donne la figure 5.57.

Figure 5.57 Des barres empiles


Testez ! http://bootstrap.twit.free.fr/tutov3/barre05.html Dans cette version
empile, on conserve la possibilit davoir des rayures, animes ou pas. . .

En rsum
Bootstrap permet de crer une barre de navigation fixe ou mobile qui peut comporter
un titre, des liens, des boutons et des formulaires.
Bootstrap possde un composant pour la navigation entre pages web.
Pour des effets visuels Bootstrap propose son Jumbotron, des libells, des badges et
des thumbnails pour les images.
Les listes groupes peuvent comporter des badges, des liens, des images et tre colores.
La panneaux permettent disoler visuellement une partie de la page et peuvent comporter un titre, ils peuvent intgrer facilement une liste groupe ou un tableau.
Le composant media permet de proposer des images, des musiques, des vidos.
Bootstrap permet laffichage de bandeaux dalerte colors et de barres de progression.

171

CHAPITRE 5. LES COMPOSANTS INTGRS

172

Troisime partie

Mise en forme avance

173

Chapitre

Les plugins jQuery


Difficult :
jQuery est un framework Javascript devenu incontournable au fil des annes. Les crateurs
de Bootstrap lont choisi pour offrir des plugins esthtiques et faciles mettre en uvre,
dans la plupart des cas sans mme mettre les doigts dans du code Javascript ! Toutefois,
si vous voulez obtenir le meilleur de ces plugins, il vous faudra un peu manipuler jQuery.
Jai trait les plugins les plus importants en dlaissant Affix qui est la fois simple dutilisation et dun usage limit. Une page dexemple servira la fois de collecteur dexemples
pratiques et de fil conducteur.

175

CHAPITRE 6. LES PLUGINS JQUERY

Gnralits
La librairie jQuery

Javascript, cest quoi ?

Cest un langage de script qui permet de rendre les pages web interactives.
Cest un langage qui fonctionne ct client et ne demande aucune ressource au niveau
du serveur.
Cest un langage interprt directement par le navigateur.
jQuery, cest quoi ?

jQuery est une librairie Javascript, on dit aussi un framework, cest dire un ensemble
de fonctionnalits bien pratiques pour simplifier la mise en uvre de Javascript. On
peut ainsi facilement :

Modifier des lments dune page web : texte, style, animation. . .


Grer des vnements tels : clic de souris, action sur une touche du clavier. . .
Crer des effets graphiques. . .
Utiliser Ajax. . .

Installation de jQuery
Pour installer jQuery il faut faire un appel la bibliothque. Pour cela vous avez deux
solutions :
1. Vous allez chercher la dernire version sur le site http://jquery.com/download/
et vous copiez ce fichier dans un rpertoire de votre site.
2. Vous rfrencez un CDN : jQuery - http://code.jquery.com/, cdnjs - http://
cdnjs.com/libraries/jquery/,Google CDN - https://developers.google.com/
speed/libraries/devguide?hl=fr\textbackslash#jquery, Microsoft CDN - http:
//asp.net/ajaxlibrary/cdn.ashx. . .
Si vous choisissez de tlcharger la librairie, vous trouvez 2 lignes de versions : la 1 et
la 2. Ces 2 versions comportent les mmes fonctionnalits, la seule diffrence est que
la seconde ne prend pas en charge Internet Explorer dans ses versions 6 8. Vous avez
donc le choix de la version, les 2 tant parfaitement adaptes Bootstrap 3,
Vous trouvez aussi 2 possibilits au niveau du tlchargement :
Uncompressed : cest une version lisible et commente pour comprendre le code.
Vous lutilisez pendant le dveloppement de vos sites si vous avez besoin de savoir
ce qui se passe dans la bibliothque.
176

GNRALITS
Minified : cest une version compresse pour tre la plus lgre possible. Cest
cette version que vous devez privilgier pour la mettre sur votre site en production
Quand vous cliquez sur le lien, vous obtenez directement le code de la figure 6.1 dans
votre navigateur.

Figure 6.1 Image utilisateur


Faites un enregistrer sous en donnant le nom jquery.js pour la version complte
et jquery.min.js la version compresse.

Placer jQuery
Il est bon dorganiser un peu les fichiers dun site en rpertoires du genre (voir figure
6.2).

Figure 6.2 Organisation des dossiers dun site


Si vous organisez ainsi larchitecture de votre site, dposez les fichiers jQuery dans le
rpertoire js.

Rfrencer jQuery
Si vous avez plac la librairie sur votre site, il suffit de rfrencer le fichier dans le code
HTML, de prfrence la fin pour ne pas pjorer le chargement des lments visuels :
1

< script src = " js / jquery . js " > </ script >

Si vous passez par un CDN, cest la mme chose, part ladresse qui change. Par
exemple :
1

< script src = " http :// code . jquery . com / jquery - 2 . 1 . 0 . min . js " > </
script >

177

CHAPITRE 6. LES PLUGINS JQUERY


Utiliser jQuery
La principale fonction connatre est jQuery(), mais on utilise le symbole $ pour faire
plus court. On veut utiliser jQuery seulement lorsque le DOM de la page est totalement
charg pour viter les erreurs dexcution, ainsi on encapsule tout le code dans un bloc :
1
2
3

$ ( function () {
// ...
}) ;

Si vous connaissez les slecteurs CSS, vous savez dj utiliser une grande partie de
jQuery. En effet, cette librairie les utilise directement ! Par exemple :
1

var a = $ ( " div " ) ;

Ici la variable "a" rfrence un objet jQuery qui slectionne toutes les balises div du
document.
JQuery propose aussi des mthodes, par exemple pour ajouter une classe un lment :
1

$ ( " img " ) . addClass ( " ma_classe " ) ;

Cette action ajoute la classe ma_classe toutes les balises img du document. Il est
possible de chaner les mthodes. Par exemple :
1

$ ( '# el ') . css ( ' background - color ' , 'red ') . fadeIn ( ' slow ') ;

Ici on change la proprit background-color de llment avec lidentifiant #el, avec


la valeur red, et on le fait apparatre progressivement.
Une grande force de jQuery rside aussi dans sa gestion facilite des vnements, par
exemple :
1
2
3

$ ( " # action " ) . click ( function () {


... mon code ...
}) ;

Ici, un clic sur llment didentifiant #action va provoquer lexcution du code.

Les librairies Javascript de Bootstrap


Rfrencement
Bootstrap propose un certain nombre de plugins pour amliorer les pages web, ils sont
tous fonds sur jQuery. Il y a deux faons de faire appel ces plugins :
soit vous rfrencez juste ce qui vous est utile en prenant la librairie correspondante
dans le pack de Bootstrap (que vous rcuprez en cliquant sur Download source
sur la page "Getting Started" - http://getbootstrap.com/getting-started/ comme
la figure 6.3).
soit vous rfrencez la bibliothque complte (que vous rcuprez en cliquant sur
Download Bootstrap sur la page "Getting Started" - http://getbootstrap.
com/getting-started/).
178

GNRALITS

Figure 6.3 Les librairies Javascript de Bootstrap


Dans la premire hypothse, il faut faire attention aux dpendances. Elles ne sont pas
nombreuses mais il faut les connatre :
popover doit tre utilis avec tooltip
collapse doit tre utilis avec transition
Pour rfrencer les plugins dans lhypothse de lutilisation individuelle, par exemple
pour tab :
1
2

< script src = " js / jquery . js " > </ script >
< script src = " js / tab . js " > </ script >

On dclare dabord jQuery, puis ensuite le plugin. Dans lhypothse de la librairie


globale :
1
2

< script src = " js / jquery . js " > </ script >
< script src = " js / bootstrap . min . js " > </ script >

Vous pouvez utiliser la version commente pendant la phase de dveloppement :


1
2

< script src = " js / jquery . js " > </ script >
< script src = " js / bootstrap . js " > </ script >

Mise en uvre
Il y a 2 faons dutiliser un plugin de Bootstrap :
partir des attributs data
partir dobjets jQuery
Prenons un exemple avec leffet accordon que nous verrons en dtail ultrieurement :
1
2

<a href = " # item " data - toggle = " collapse " > Changer </ a >
< div id = " item " class = " collapse " >

179

CHAPITRE 6. LES PLUGINS JQUERY


3
4
5
6

Contenu
</ div >
< script src = " assets / js / jquery . js " > </ script >
< script src = " assets / js / bootstrap . min . js " > </ script >

Ne vous inquitez pas pour la syntaxe globale que nous verrons plus tard. Ce plugin est
destin faire apparatre ou disparatre un contenu lors dune action de lutilisateur, ici
un simple clic. Le contenu concern dans cet exemple est le mot Contenu. Le plugin est
dclench par lattribut data-toggle="collapse". Dans cette hypothse dutilisation,
vous navez pas manipuler de Javascript.
On peut obtenir exactement le mme rsultat en utilisant jQuery :
1
2
3
4
5
6
7
8
9
10
11
12
13

<a > Changer </ a >


< div id = " item " class = " collapse " >
Contenu
</ div >
< script src = " assets / js / jquery . js " > </ script >
< script src = " assets / js / bootstrap . min . js " > </ script >
< script >
$ ( function () {
$ ( 'a ') . click ( function () {
$ ( '# item ') . collapse ( ' toggle ') ;
}) ;
}) ;
</ script >

Cette fois je nai pas utilis lattribut mais un objet jQuery avec le slecteur a pour
pointer le lien et la mthode collapse avec le paramtre toggle. Nous verrons plusieurs
cas dutilisation de cette faon de procder qui est plus laborieuse que la prcdente,
mais qui savre incontournable selon les actions que nous voulons effectuer.
Les vnements
La plupart des plugins exposent des vnements. En poursuivant lexemple prcdent,
on peut faire apparatre un message lorsque le contenu est visible :
1
2
3
4
5
6
7
8
9
10
11
12
13

<a > Changer </ a >


< div id = " item " class = " collapse " >
Contenu
</ div >
< script src = " assets / js / jquery . js " > </ script >
< script src = " assets / js / bootstrap . min . js " > </ script >
< script >
$ ( function () {
$ ( 'a ') . click ( function () {
$ ( '# item ') . collapse ( ' toggle ') ;
}) ;
$ ( '# item ') . on ( ' shown . bs . collapse ' , function () {
alert ( ' On me voit ! ') ;

180

GNRALITS
14
15
16

})
}) ;
</ script >

Nous verrons aussi plusieurs exemples dvnements dans les plugins de Bootstrap.

La page dexemple
Pour viter de surcharger de code les chapitres sur les plugins, voici la page dexemple
complte avec des cas dutilisation des plugins concerns :
1
2

<! DOCTYPE HTML >


< html >

3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

< head >


< meta charset = " utf - 8 " >
< link href = " assets / css / bootstrap . css " rel = " stylesheet " >
< style type = " text / css " >
body {
background - color :# DDD ;
padding - top : 10px ;
}
[ class *= " col - " ] { margin - bottom : 20px ; }
img { width : 100 %; }
. well {
background - color :# CCC ;
padding : 20px ;
}
a : active , a : focus { outline : none ; }
</ style >
</ head >

21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

< body >


< div class = " container " >
< nav class = " navbar navbar - inverse " role = " navigation " >
< div class = " navbar - header " >
< button type = " button " class = " navbar - toggle " data toggle = " collapse " data - target = " . navbar - collapse " >
< span class = " icon - bar " > </ span >
< span class = " icon - bar " > </ span >
< span class = " icon - bar " > </ span >
</ button >
<a class = " navbar - brand " href = " # " > Les Tigres </ a >
</ div >
< div class = " collapse navbar - collapse " >
< ul class = " nav navbar - nav " >
< li > <a href = " # " > Accueil </ a > </ li >
< li class = " dropdown " >
<a class = " dropdown - toggle " data - toggle = " dropdown "
href = " # " >T moignages <b class = " caret " > </ b > </ a

181

CHAPITRE 6. LES PLUGINS JQUERY

38
39
40
41
42
43
44
45
46
47
48
49
50
51

52
53

54
55
56
57
58
59
60
61
62
63
64
65
66
67

68

< br >

69

70
71
72
73

74

182

>
< ul class = " dropdown - menu " >
< li > <a href = " # " > Dompteurs </ a > </ li >
< li > <a href = " # " > Zoos </ a > </ li >
< li > <a href = " # " > Chasseurs </ a > </ li >
< li class = " divider " > </ li >
< li > <a href = " # " > Autres t moignages </ a > </ li >
</ ul >
</ li >
< li > <a href = " # " > Liens </ a > </ li >
< li > <a href = " # " >R f rences </ a > </ li >
</ ul >
< form class = " navbar - form navbar - right " >
< div class = " input - group " >
< input type = " text " style = " width : 150px " class = "
input - sm form - control " placeholder = " Recherche "
>
< span class = " input - group - btn " >
< button type = " submit " class = " btn btn - primary
btn - sm " > < span class = " glyphicon glyphicon eye - open " > </ span > Chercher </ button >
</ span >
</ div >
</ form >
</ div >
</ nav >
< header class = " row " >
< div class = " col - lg - 12 " >
< h1 > Mon amour pour les tigres </ h1 >
</ div >
</ header >
< section class = " row " >
< div class = " col - lg - 12 " >
<p >
Je suis passionn par les < strong > tigres </ strong >
depuis tr s longtemps . Ce site a t construit
en < em > hommage ces merveilleux f lins ... </ em >

Je fais partie de la < abbr title = " Soci t des


Amoureux des Tigres " > SAT </ abbr > qui a pour but
de faire conna tre ces splendides animaux .
</ p >
<p > Voici ce qu ' en dit le wikipedia : </ p >
< blockquote >
Le Tigre ( Panthera tigris ) est un <a data - toggle = "
tooltip " href = " # " title = " Classe de vert br s " >
mammif re </ a > carnivore de la famille
des f lid s ( Felidae ) du genre Panthera . Ais ment
reconnaissable sa fourrure rousse ray e de noir , il est
le plus grand f lin sauvage et l ' un

GNRALITS
75
76

77

78

79

80
81
82
83
84
85
86
87

88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112

des plus grands <a data - toggle = " tooltip "


href = " # " title = ' Synonyme de " carnassier " ' > carnivores </ a > du
monde . L ' esp ce est divis e en neuf sous - esp ces poss dant
des diff rences mineures
en termes de taille ou de comportement . Superpr dateur , il
chasse principalement les cerfs et les sangliers , bien qu '
il puisse s ' attaquer des
proies de taille plus importante comme les buffles . Jusqu ' au
XIXe si cle , le Tigre tait r put mangeur d ' homme . La
structure sociale des tigres
en fait un animal solitaire ; le m le poss de un territoire
qui englobe les domaines de plusieurs femelles et ne
participe pas l ' ducation des petits . < br >
< small class = " pull - right " > Wikipedia </ small > < br >
</ blockquote >
</ div >
</ section >
< section class = " row " >
< div class = " media col - lg - 12 " >
< div class = " pull - right " >
< iframe width = " 420 " height = " 320 " src = " http :// www .
youtube . com / embed / VmnIeLmjuHA " frameborder = " 0 "
allowfullscreen > </ iframe >
</ div >
< div class = " media - body pull - right " >
< div class = " btn - group " data - toggle = " buttons " >
< label class = " btn btn - primary " >
< input type = " radio " > Vid o 1
</ label >
< label class = " btn btn - primary " >
< input type = " radio " > Vid o 2
</ label >
< label class = " btn btn - primary " >
< input type = " radio " > Vid o 3
</ label >
</ div >
</ div >
</ div >
</ section >
< section class = " row " >
< div class = " col - xs - 4 col - sm - 3 col - md - 2 " >
<a href = " # " class = " thumbnail " >
< img src = " images / t1 . jpg " alt = " Tigre " class = " img rounded " >
</ a >
</ div >
< div class = " col - xs - 4 col - sm - 3 col - md - 2 " >
<a href = " # " class = " thumbnail " >
< img src = " images / t2 . jpg " alt = " Tigre " class = " img rounded " >

183

CHAPITRE 6. LES PLUGINS JQUERY


113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154

184

</ a >
</ div >
< div class = " col - xs - 4 col - sm - 3 col - md - 2 " >
<a href = " # " class = " thumbnail " >
< img src = " images / t3 . jpg " alt = " Tigre " class = " img rounded " >
</ a >
</ div >
< div class = " col - xs - 4 col - sm - 3 col - md - 2 " >
<a href = " # " class = " thumbnail " >
< img src = " images / t4 . jpg " alt = " Tigre " class = " img rounded " >
</ a >
</ div >
< div class = " col - xs - 4 col - sm - 3 col - md - 2 " >
<a href = " # " class = " thumbnail " >
< img src = " images / t5 . jpg " alt = " Tigre " class = " img rounded " >
</ a >
</ div >
< div class = " col - xs - 4 col - sm - 3 col - md - 2 " >
<a href = " # " class = " thumbnail " >
< img src = " images / t6 . jpg " alt = " Tigre " class = " img rounded " >
</ a >
</ div >
< div class = " col - xs - 4 col - sm - 3 col - md - 2 " >
<a href = " # " class = " thumbnail " >
< img src = " images / t7 . jpg " alt = " Tigre " class = " img rounded " >
</ a >
</ div >
< div class = " col - xs - 4 col - sm - 3 col - md - 2 " >
<a href = " # " class = " thumbnail " >
< img src = " images / t8 . jpg " alt = " Tigre " class = " img rounded " >
</ a >
</ div >
< div class = " col - xs - 4 col - sm - 3 col - md - 2 " >
<a href = " # " class = " thumbnail " >
< img src = " images / t9 . jpg " alt = " Tigre " class = " img rounded " >
</ a >
</ div >
< div class = " col - xs - 4 col - sm - 3 col - md - 2 " >
<a href = " # " class = " thumbnail " >
< img src = " images / t10 . jpg " alt = " Tigre " class = " img rounded " >
</ a >
</ div >

GNRALITS
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177

178
179
180
181

182

183
184
185
186

187

188

< div class = " col - xs - 4 col - sm - 3 col - md - 2 " >


<a href = " # " class = " thumbnail " >
< img src = " images / t11 . jpg " alt = " Tigre " class = " img rounded " >
</ a >
</ div >
< div class = " col - xs - 4 col - sm - 3 col - md - 2 " >
<a href = " # " class = " thumbnail " >
< img src = " images / t12 . jpg " alt = " Tigre " class = " img rounded " >
</ a >
</ div >
</ section >
< div class = " row " >
< section class = " col - sm - 4 " >
< div class = " panel panel - info " >
< div class = " panel - heading " >
< h3 class = " panel - title " > Les sous - esp ces des
tigres : </ h3 >
</ div >
< div class = " list - group " >
<a href = " # infos " class = " list - group - item " data toggle = " modal " >
Tigre de Sib rie
< span class = " badge " > 120 </ span >
</ a >
< div class = " modal fade " id = " infos " role = " dialog "
aria - labelledby = " modalTitre " aria - hidden = " true
">
< div class = " modal - dialog " >
< div class = " modal - content " >
< div class = " modal - header " >
< button type = " button " class = " close " data dismiss = " modal " aria - hidden = " true " >x </
button >
< h4 id = " modalTitre " class = " modal - title " >
Plus d ' informations sur le tigre de
Sib rie </ h4 >
</ div >
< div class = " modal - body " >
< blockquote >
Les tigres de Sib rie p sent de 180
350 kg pour les m les et de 100
200 kg pour les femelles . Le plus
gros tigre de Sib rie ,
tu en 1950 , atteignait les 384 kg . Le Tigre de Sib rie est le
troisi me plus gros pr dateur terrestre derri re l ' ours
kodiak et l ' ours polaire .
La longueur totale du corps avec la queue est comprise entre 2 ,
7 et 3 , 8 m pour les m les et entre 2 , 4 et 2 , 75 m pour les

185

CHAPITRE 6. LES PLUGINS JQUERY

189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234

femelles . La longueur
du cr ne est de 341 383 mm pour les m les et 279 318 mm
pour les femelles . < hr >
< small class = " pull - right " > Wikipedia </
small >
</ blockquote >
</ div >
</ div >
</ div >
</ div >
<a href = " # " class = " list - group - item " >
Tigre de Chine m ridionale
< span class = " badge " > 540 </ span >
</ a >
<a href = " # " class = " list - group - item " >
Tigre de Bali
< span class = " badge " > 230 </ span >
</ a >
<a href = " # " class = " list - group - item " >
Tigre de d ' Indochine
< span class = " badge " > 240 </ span >
</ a >
<a href = " # " class = " list - group - item " >
Tigre de Malaisie
< span class = " badge " > 1200 </ span >
</ a >
<a href = " # " class = " list - group - item " >
Tigre de Java
< span class = " badge " > 710 </ span >
</ a >
<a href = " # " class = " list - group - item " >
Tigre de Sumatra
< span class = " badge " > 20 </ span >
</ a >
<a href = " # " class = " list - group - item " >
Tigre du Bengale
< span class = " badge " > 40 </ span >
</ a >
<a href = " # " class = " list - group - item " >
Tigre de la Caspienne
< span class = " badge " > 200 </ span >
</ a >
</ div >
</ div >
</ section >
< section class = " col - sm - 8 " >
< div id = " carousel " class = " carousel slide " >
< ol class = " carousel - indicators " >
< li data - target = " # carousel " data - slide - to = " 0 "
class = " active " > </ li >

186

GNRALITS
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264

265
266
267
268
269
270
271

< li data - target = " # carousel " data - slide - to = " 1 " > </
li >
< li data - target = " # carousel " data - slide - to = " 2 " > </
li >
< li data - target = " # carousel " data - slide - to = " 3 " > </
li >
</ ol >
< div class = " carousel - inner " >
< div class = " item active " > < img alt = " Tigre " src = "
images / photo - tigre . jpg " > </ div >
< div class = " item " > < img alt = " Tigre " src = " images /
photo - tigre1 . jpg " > </ div >
< div class = " item " > < img alt = " Tigre " src = " images /
photo - tigre2 . jpg " > </ div >
< div class = " item " > < img alt = " Tigre " src = " images /
photo - tigre3 . jpg " > </ div >
</ div >
</ div >
</ section >
</ div >
< div class = " row " >
< section class = " col - sm - 12 " >
< div class = " panel panel - primary " >
< table class = " table table - striped table - condensed " >
< div class = " panel - heading " >
< h3 class = " panel - title " > Les menaces pour les
tigres </ h3 >
</ div >
< thead >
< tr >
< th > Lieu </ th >
< th > Menace </ th >
</ tr >
</ thead >
< tbody >
< tr >
< td > Grand Mekong </ td >
< td > Demande croissante de certaines parties
de l ' animal pour la m decine chinoise
traditionnelle et fragmentation des
habitats du fait du d veloppement non
durable d ' infrastructures </ td >
</ tr >
< tr >
< td > le de Sumatra </ td >
< td > Production d ' huile de palme et de p tes
papiers </ td >
</ tr >
< tr >
< td > Indon sie et Malaisie </ td >

187

CHAPITRE 6. LES PLUGINS JQUERY


272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312

188

< td >P te papier , l ' huile de palme et le


caoutchouc </ td >
</ tr >
< tr >
< td > tats - Unis </ td >
< td > Les tigres captifs repr sentent un danger
pour les tigres sauvages </ td >
</ tr >
< tr >
< td > Europe </ td >
< td > Gros app tit pour l ' huile de palme </ td >
</ tr >
< tr >
< td >N pal </ td >
< td > Commerce ill gal de produits d riv s de
tigres </ td >
</ tr >
</ tbody >
</ table >
</ div >
</ section >
</ div >
< div class = " row " >
< section class = " col - sm - 8 " >
< ul class = " nav nav - pills " >
< li class = " active " > <a href = " # contact " data - toggle = "
tab " > Contact </ a > </ li >
< li > <a href = " # informations " data - toggle = " tab " >
Informations pratiques </ a > </ li >
</ ul >
< div class = " tab - content " >
< div class = " tab - pane active fade in " id = " contact " >
< form class = " well " >
< h4 > < span class = " label label - default " > Si vous
voulez me laisser un message </ span > </ h4 >
< h4 > Comment m ' avez - vous trouv ? </ h4 >
< fieldset >
< label for = " ami " class = " radio " >
< input type = " radio " name = " origine " value = "
ami " id = " ami " >
Par un ami
</ label >
< label for = " web " class = " radio " >
< input type = " radio " name = " origine " value = "
web " id = " web " >
Sur le web
</ label >
< label for = " hasard " class = " radio " >
< input type = " radio " name = " origine " value = "
hasard " id = " hasard " >

GNRALITS
313
314
315
316
317
318
319
320
321
322

323
324
325
326
327
328
329

330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353

Par hasard
</ label >
< label for = " autre " class = " radio " >
< input type = " radio " name = " origine " value = "
autre " id = " autre " >
Autre ...
</ label >
< label for = " textarea " > Votre message : </ label >
< textarea id = " textarea " rows = " 4 " class = "
form - control " > </ textarea >
<p class = " help - block " > Vous pouvez agrandir
la fen tre </ p >
< button class = " btn btn - primary " type = " submit "
> < span class = " glyphicon glyphicon - ok - sign "
> </ span > Envoyer </ button >
</ fieldset >
</ form >
</ div >
< div class = " tab - pane fade " id = " informations " >
< div class = " well " >
< h2 > Informations pratiques </ h2 >
<p > Si vous tes int ress s par la protection
des tigres et si vous d sirez prendre part
aux actions men es ... blablabla ... </ p >
</ div >
</ div >
< div class = " tab - content " >
</ section >
< section class = " col - sm - 4 " >
< address class = " thumbnail " >
<p > Vous pouvez me contacter cette adresse : </ p >
< strong > Tigrou Alfred </ strong > < br >
All e des fauves < br >
28645 F lins - sur - Loire < br >
</ address >
</ section >
</ div >
</ div >
< script src = " assets / js / jquery . js " > </ script >
< script src = " assets / js / bootstrap . min . js " > </ script >
< script >
$ ( function () {
$ ( '. carousel ') . carousel () ;
$ ( ' blockquote a ') . tooltip () ;
$ ( '. btn - group . btn : nth - child ( 1 ) ') . click ( function () {
$ ( ' iframe ') . attr ( ' src ' , ' http :// www . youtube . com / embed
/ VmnIeLmjuHA ') ;
})
$ ( '. btn - group . btn : nth - child ( 2 ) ') . click ( function () {

189

CHAPITRE 6. LES PLUGINS JQUERY


$ ( ' iframe ') . attr ( ' src ' , ' http :// www . youtube . com / embed
/ HQU2ZFnMbJg ') ;

354
355
356
357
358
359
360
361
362

})
$ ( '. btn - group . btn : nth - child ( 3 ) ') . click ( function () {
$ ( ' iframe ') . attr ( ' src ' , ' http :// www . youtube . com / embed
/ qDBKzdNpiy0 ') ;
})
}) ;
</ script >
</ body >
</ html >

Testez ! http://bootstrap.twit.free.fr/tutov3/base13.html Je dtaillerai dans


chaque chapitre la mise en uvre des diffrents plugins utiliss dans cette page.

Menu droulant
Menu droulant dans la barre de navigation
Le plugin jQuery Dropdown permet de faire de jolis menus droulants. Il suffit de
modifier une barre de navigation pour ajouter un menu droulant (voir figure 6.4) :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

<! DOCTYPE HTML >


< html >
< head >
< meta charset = " utf - 8 " >
< link href = " assets / css / bootstrap . css " rel = " stylesheet " >
</ head >
< body >
< div class = " container " >
< nav class = " navbar navbar - default " >
< ul class = " nav navbar - nav " >
< li > <a href = " # " > Accueil </ a > </ li >
< li > <a href = " # " > Liens </ a > </ li >
< li class = " dropdown " >
<a data - toggle = " dropdown " href = " # " >T moignages <b
class = " caret " > </ b > </ a >
< ul class = " dropdown - menu " >
< li > <a href = " # " > Dompteurs </ a > </ li >
< li > <a href = " # " > Zoos </ a > </ li >
< li > <a href = " # " > Chasseurs </ a > </ li >
< li class = " divider " > </ li >
< li > <a href = " # " > Autres t moignages </ a > </ li >
</ ul >
</ li >
< li > <a href = " # " >R f rences </ a > </ li >
</ ul >
</ nav >
</ div >

190

MENU DROULANT
27
28
29
30

< script src = " assets / js / jquery . js " > </ script >
< script src = " assets / js / bootstrap . min . js " > </ script >
</ body >
</ html >

Figure 6.4 Menu droulant dans une barre de navigation


Il a fallu ajouter quelques classes mais le rsultat est trs russi !
Voyons a de plus prs : pour ajouter la fonctionnalit de dropdown, il faut utiliser
la classe dropdown et ajouter data-toggle="dropdown" dans la balise concerne pour
que le menu fonctionne. Ici, je lai fait pour la balise <a> qui contient le libell du
lien du menu. Il faut aussi utiliser la classe dropdown-menu dans la balise <ul> qui doit
englober le menu droulant.
Cest ce qui a t ralis dans la page dexemple - http://bootstrap.twit.free.fr/
tutov3/base13.html .

Menu droulant dans un bouton


On peut crer un menu droulant activ par un bouton. Voici un code de base :
1
2
3
4
5
6
7
8
9
10

< div class = " btn - group " >


< button class = " btn btn - default dropdown - toggle " data - toggle = "
dropdown " > Action </ button >
< ul class = " dropdown - menu " >
< li > <a href = " # " > Dompteurs </ a > </ li >
< li > <a href = " # " > Zoos </ a > </ li >
< li > <a href = " # " > Chasseurs </ a > </ li >
< li class = " divider " > </ li >
< li > <a href = " # " > Autres t moignages </ a > </ li >
</ ul >
</ div >

Vous remarquez lutilisation de la classe btn-group ncessaire au fonctionnement du


plugin, ainsi que la classe dropdown-toggle, mais pour le reste cest pratiquement
identique au code quon a vu pour la barre de navigation. Vous trouverez le rsultat
la figure 6.5.
191

CHAPITRE 6. LES PLUGINS JQUERY

Figure 6.5 Menu droulant dans un bouton


Cest pas mal, mais comme a, on ne comprend pas vraiment que cest un
bouton spcial, on peut avoir un repre graphique ?
On peut, en ajoutant une classe :
1

< button class = " btn btn - default dropdown - toggle " data - toggle = "
dropdown " > Action < span class = " caret " > </ span > </ button >

Jai ajout la classe caret pour le bouton et maintenant celui-ci est bien identifi,
comme la figure 6.6.

Figure 6.6 Menu droulant dans un bouton avec repre

Oui cest bien, mais parfois jai besoin que le menu saffiche vers le haut

On peut aussi le faire, en ajoutant la classe dropup (voir figure 6.7) :


1

< div class = " btn - group dropup " >

Des boutons colors et des icnes


On peut aussi ajouter des icnes et avoir de la couleur, comme pour tout bouton (voir
figure 6.8) :
192

MENU DROULANT

Figure 6.7 Menu se droulant vers le haut


1
2
3
4
5
6
7
8
9
10

< div class = " btn - group " >


< button class = " btn btn - primary dropdown - toggle " data - toggle = "
dropdown " > Action < span class = " caret " > </ span > </ button >
< ul class = " dropdown - menu " >
< li > <a href = " # " > < span class = " glyphicon glyphicon - user " > </
span > Dompteurs </ a > </ li >
< li > <a href = " # " > < span class = " glyphicon glyphicon - picture " > <
/ span > Zoos </ a > </ li >
< li > <a href = " # " > < span class = " glyphicon glyphicon - screenshot
" > </ span > Chasseurs </ a > </ li >
< li class = " divider " > </ li >
< li > <a href = " # " > < span class = " glyphicon glyphicon - list - alt " >
</ span > Autres t moignages </ a > </ li >
</ ul >
</ div >

Figure 6.8 Des icnes dans un menu droulant

Sparer les fonctions


On peut faire en sorte que le bouton ait 2 usages : en tant que bouton pour une action
et en tant que dclencheur de menu droulant. Il est alors spar en 2 parties : gauche
pour laction, droite pour le menu. Pour raliser cela, on cre un groupe de 2 boutons,
un avec le texte, lautre avec le signe, comme la figure 6.9 :
1

< div class = " btn - group " >

193

CHAPITRE 6. LES PLUGINS JQUERY


2
3
4
5
6
7
8
9
10
11

< button class = " btn btn - info " > Action </ button >
< button class = " btn btn - info dropdown - toggle " data - toggle = "
dropdown " > < span class = " caret " > </ span > </ button >
< ul class = " dropdown - menu " >
< li > <a href = " # " > < span class = " glyphicon glyphicon - user " > </
span > Dompteurs </ a > </ li >
< li > <a href = " # " > < span class = " glyphicon glyphicon - picture " > <
/ span > Zoos </ a > </ li >
< li > <a href = " # " > < span class = " glyphicon glyphicon - screenshot
" > </ span > Chasseurs </ a > </ li >
< li class = " divider " > </ li >
< li > <a href = " # " > < span class = " glyphicon glyphicon - list - alt " >
</ span > Autres t moignages </ a > </ li >
</ ul >
</ div >

Figure 6.9 Deux fonctions pour un bouton

En-ttes
Pour ajouter des en-ttes pour subdiviser le menu, il faut utiliser la classe dropdown-header
(voir figure 6.10) :
1
2
3
4
5
6
7
8
9
10
11

< div class = " btn - group " >


< button class = " btn btn - info " > Action </ button >
< button class = " btn btn - info dropdown - toggle " data - toggle = "
dropdown " > < span class = " caret " > </ span > </ button >
< ul class = " dropdown - menu " >
< li class = " dropdown - header " > Personnel </ li >
< li > <a href = " # " > < span class = " glyphicon glyphicon - user " > </
span > Dompteurs </ a > </ li >
< li > <a href = " # " > < span class = " glyphicon glyphicon - screenshot
" > </ span > Chasseurs </ a > </ li >
< li class = " divider " > </ li >
< li class = " dropdown - header " > Lieux </ li >
< li > <a href = " # " > < span class = " glyphicon glyphicon - book " > </
span > Biblioth ques </ a > </ li >
< li > <a href = " # " > < span class = " glyphicon glyphicon - cutlery " > <
/ span > Restaurants </ a > </ li >

194

MENU DROULANT
12
13

</ ul >
</ div >

Figure 6.10 Des en-ttes dans un menu droulant


Alignement droite
Par dfaut, le menu est align sur le ct gauche du bouton. On peut utiliser la classe
pull-right pour laligner sur le ct droit (voir figure 6.11) :
1
2
3
4
5
6
7
8
9
10
11

< div class = " btn - group " >


< button class = " btn btn - warning " > Action </ button >
< button class = " btn btn - warning dropdown - toggle " data - toggle = "
dropdown " > < span class = " caret " > </ span > </ button >
< ul class = " dropdown - menu pull - right " >
< li > <a href = " # " > < span class = " glyphicon glyphicon - user " > </
span > Dompteurs </ a > </ li >
< li > <a href = " # " > < span class = " glyphicon glyphicon - picture " > <
/ span > Zoos </ a > </ li >
< li > <a href = " # " > < span class = " glyphicon glyphicon - screenshot
" > </ span > Chasseurs </ a > </ li >
< li class = " divider " > </ li >
< li > <a href = " # " > < span class = " glyphicon glyphicon - list - alt " >
</ span > Autres t moignages </ a > </ li >
</ ul >
</ div >

Dsactiver une option


Pour rendre une option du menu inactive, il faut utiliser la classe disabled (exemple
la figure 6.12).
1
2
3

< div class = " btn - group " >


< button class = " btn btn - danger " > Action </ button >
< button class = " btn btn - danger dropdown - toggle " data - toggle = "
dropdown " > < span class = " caret " > </ span > </ button >

195

CHAPITRE 6. LES PLUGINS JQUERY

Figure 6.11 Menu droulant align droite


4
5
6
7
8
9

< ul class = " dropdown - menu " >


< li > <a href = " # " > < span class = " glyphicon glyphicon - book " > </
span > Lire </ a > </ li >
< li class = " disabled " > <a href = " # " > < span class = " glyphicon
glyphicon - print " > </ span > Imprimer </ a > </ li >
< li > <a href = " # " > < span class = " glyphicon glyphicon - pencil " > </
span > Ecrire </ a > </ li >
</ ul >
</ div >

Figure 6.12 Option dsactive dans un menu droulant

Des sous-menus
La version 3 de Bootstrap, principalement oriente vers linformatique nomade, na pas
reconduit la possibilit de crer des sous-menus. Il est toutefois possible avec quelques
styles de rtablir cette possibilit (astuce trouve sur le site bootply - http://bootply.
com). Prvoyez ces styles pour votre page :
1
2
3
4
5

. dropdown - submenu { position : relative ;}


. dropdown - submenu >. dropdown - menu { top : 0 ; left : 100 %; margin - top : 6px ; margin - left : - 1px ;
- webkit - border - radius : 0 6px 6px 6px ; - moz - border - radius : 0 6px
6px 6px ; border - radius : 0 6px 6px 6px ;}
. dropdown - submenu : hover >. dropdown - menu { display : block ;}
. dropdown - submenu > a : after { display : block ; content : " " ; float : right
; width : 0 ; height : 0 ;

196

MENU DROULANT
6

7
8
9

border - color : transparent ; border - style : solid ; border - width : 5px 0


5px 5px ; border - left - color :# cccccc ; margin - top : 5px ; margin right : - 10px ;}
. dropdown - submenu : hover > a : after { border - left - color :# ffffff ;}
. dropdown - submenu . pull - left { float : none ;}. dropdown - submenu . pull left >. dropdown - menu { left : - 100 %; margin - left : 10px ;
- webkit - border - radius : 6px 0 6px 6px ; - moz - border - radius : 6px 0
6px 6px ; border - radius : 6px 0 6px 6px ;}

Un exemple de mise en uvre la figure 6.13 :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

< div class = " btn - group " >


< button class = " btn btn - primary dropdown - toggle " data - toggle = "
dropdown " > Action < span class = " caret " > </ span > </ button >
< ul class = " dropdown - menu " >
< li > <a href = " # " > < span class = " glyphicon glyphicon - user " > </
span > Dompteurs </ a > </ li >
< li > <a href = " # " > < span class = " glyphicon glyphicon - picture " > <
/ span > Zoos </ a > </ li >
< li > <a href = " # " > < span class = " glyphicon glyphicon - screenshot
" > </ span > Chasseurs </ a > </ li >
< li class = " divider " > </ li >
< li class = " dropdown - submenu " >
<a tabindex = " -1 " href = " # " > < span class = " glyphicon
glyphicon - list - alt " > </ span > Autres t moignages </ a >
< ul class = " dropdown - menu " >
< li > <a tabindex = " -1 " href = " # " > < span class = " glyphicon
glyphicon - eye - close " > </ span > Non classifi s </ a > </ li >
< li class = " dropdown - submenu " >
<a href = " # " > Autres ... </ a >
< ul class = " dropdown - menu " >
< li > <a href = " # " > < span class = " glyphicon glyphicon cutlery " > </ span > Restaurateurs </ a > </ li >
< li > <a href = " # " > < span class = " glyphicon glyphicon globe " > </ span > Voyageurs </ a > </ li >
</ ul >
</ li >
< li > <a href = " # " > < span class = " glyphicon glyphicon shopping - cart " > </ span > Commer ants </ a > </ li >
< li > <a href = " # " > < span class = " glyphicon glyphicon - wrench
" > </ span > M caniciens </ a > </ li >
</ ul >
</ li >
</ ul >
</ div >

197

CHAPITRE 6. LES PLUGINS JQUERY

Figure 6.13 Des sous-menus

Activation par Javascript


Dclenchement du menu
Tant quon veut une mise en uvre du menu droulant avec un clic, la proprit
data-toggle est suffisante. Mais il peut se prsenter des cas de figure particuliers.
Imaginez que vous vouliez dclencher le menu droulant non plus par un clic, mais par
le passage du curseur de la souris au-dessus dun lment particulier. Dans ce cas, vous
devez utiliser Javascript pour faire fonctionner votre menu. Reprenons par exemple le
cas dun menu dclench par un bouton, comme nous lavons vu prcdemment, mais
en supprimant la proprit data-toggle pour viter de dclencher automatiquement
le plugin :
1
2
3
4
5
6
7
8
9
10

< div class = " btn - group " >


< button class = " btn btn - info dropdown - toggle " > Action </ button >
< ul class = " dropdown - menu " >
< li > <a href = " # " > Dompteurs </ a > </ li >
< li > <a href = " # " > Zoos </ a > </ li >
< li > <a href = " # " > Chasseurs </ a > </ li >
< li class = " divider " > </ li >
< li > <a href = " # " > Autres t moignages </ a > </ li >
</ ul >
</ div >

En ltat le menu ne fonctionne plus. Maintenant nous voulons quil se dclenche au


survol. Il faut ajouter un peu de Javascript pour grer lvnement correspondant et
utiliser la mthode dropdown du plugin :
1
2
3
4
5

< script >


$ ( '. dropdown - toggle ') . mouseover ( function () {
$ ( this ) . dropdown ( ' toggle ') ;
}) ;
</ script >

198

FENTRE MODALE
Maintenant, le menu souvre au survol. Mais on rencontre un petit inconvnient : on
narrive plus le refermer ! Pourtant, normalement, un toggle est cens changer
chaque fois ltat. On va arranger cela. Le plugin ajoute la classe open dans la <div>
qui contient la classe btn-group lorsque le menu est ouvert. Il faut donc sarranger
pour supprimer cette classe au survol si elle est prsente :
1
2
3
4
5
6

< script >


$ ( '. dropdown - toggle ') . mouseover ( function () {
if ( $ ( '. btn - group ') . hasClass ( ' open ') ) $ ( '. btn - group ') .
removeClass ( ' open ') ;
else $ ( this ) . dropdown ( ' toggle ') ;
}) ;
</ script >

La syntaxe que jai utilise nest pas la plus concise, mais elle a le mrite dtre lisible.
Maintenant le menu se referme au survol sil tait ouvert. En revanche, il ne se referme
pas lorsque lon clique sur une option. Il faudrait donc prvoir de le faire lors du
traitement de loption slectionne.
Les vnements
Vous disposez galement de 4 vnements pour ce composant :
vnement
show.bs.dropdown
shown.bs.dropdown
hide.bs.dropdown
hidden.bs.dropdown

Description
Se dclenche
Se dclenche
Se dclenche
Se dclenche

ds lappel la mthode
lorsque le menu devient visible
ds lappel la mthode hide
lorsque le menu est masqu

Lutilit de ces vnements ne saute pas spontanment aux yeux. Si vous en avez
nanmoins besoin la syntaxe est celle-ci :
1
2
3

$ ( '# mon_dropdown ') . on ( ' shown . bs . dropdown ' , function () {


// Je fais un truc quand le menu est devenu visible
})

Fentre modale
Un premier exemple simple
La mise en place dune fentre modale ncessite lutilisation de quelques classes. Voici
un premier exemple :
1
2
3

< button data - toggle = " modal " href = " # infos " class = " btn btn primary " > Informations </ button >
< div class = " modal " id = " infos " >
< div class = " modal - dialog " >

199

CHAPITRE 6. LES PLUGINS JQUERY


4
5
6
7
8
9
10
11
12
13
14

< div class = " modal - content " >


< div class = " modal - header " >
< button type = " button " class = " close " data - dismiss = " modal
" >x </ button >
< h4 class = " modal - title " > Plus d ' informations </ h4 >
</ div >
< div class = " modal - body " >
Le Tigre ( Panthera tigris ) est un mammif re carnivore
de la famille des f lid s ...
</ div >
</ div >
</ div >
</ div >

Le principe est simple : on cre un <div> englobant avec la classe modal, qui se
charge de configurer et positionner la fentre. On cre un second <div> englobant
avec la classe modal-dialog. On peut ensuite organiser la fentre avec une classe
englobante modal-content, un en-tte grce la classe modal-header et un corps
avec modal-body. On prvoit galement une action pour fermer la fentre (sinon
elle va toujours rester ouverte !) avec un bouton et la classe close, et la proprit
data-dismiss="modal". Il ne reste plus qu crer un bouton pour ouvrir la fentre
en faisant correspondre bouton et fentre avec un identifiant, et en utilisant
data-toggle="modal" pour que le plugin fonctionne. Au dpart, on na donc que le
bouton de la figure 6.14 lcran.

Figure 6.14 Bouton de commande


Et quand on clique, on obtient la fentre modale et le fond devient gris, comme la
figure 6.15.

Figure 6.15 Fentre modale sur fond gris


Testez ! http://bootstrap.twit.free.fr/tutov3/modal01.html On a une petite croix
pour fermer la fentre.
200

FENTRE MODALE

Un pied de page
On peut amliorer un peu lesthtique en crant un pied de page avec la classe modal-footer
et un bouton pour sortir, comme la figure 6.16.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

< button data - toggle = " modal " href = " # infos " class = " btn btn primary " > Informations </ button >
< div class = " modal " id = " infos " >
< div class = " modal - dialog " >
< div class = " modal - content " >
< div class = " modal - header " >
< button type = " button " class = " close " data - dismiss = " modal
" >x </ button >
< h4 class = " modal - title " > Plus d ' informations </ h4 >
</ div >
< div class = " modal - body " >
Le Tigre ( Panthera tigris ) est un mammif re carnivore
de la famille des f lid s ...
</ div >
< div class = " modal - footer " >
< button class = " btn btn - info " data - dismiss = " modal " >
Fermer </ button >
</ div >
</ div >
</ div >
</ div >

Figure 6.16 Pied de page dans une fentre modale

Une transition
Il est possible galement dobtenir un effet de transition en ajoutant la classe fade,
comme la figure 6.17 :
1

< div class = " modal fade " id = " infos " >

Testez ! http://bootstrap.twit.free.fr/tutov3/modal03.html
201

CHAPITRE 6. LES PLUGINS JQUERY

Figure 6.17 Effet de transition pour une fentre modale

Garder le fond de lcran


Si vous dsirez conserver laspect normal de la fentre de fond, il faut renseigner loption
backdrop qui est vraie par dfaut (voir figure 6.18) :
1

< button data - toggle = " modal " data - backdrop = " false " href = " # infos "
class = " btn btn - primary " > Informations </ button >

Figure 6.18 Fentre modale avec fond dcran conserv


Testez ! http://bootstrap.twit.free.fr/tutov3/modal04.html

Injecter une page HTML


Il est possible dinjecter une page HTML dans le corps de la fentre modale, mais il
faut que cette page ait t pense pour cela.
1
2

<! DOCTYPE HTML >


< html >

202

FENTRE MODALE
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

< head >


< meta charset = " utf - 8 " >
< link href = " assets / css / bootstrap . css " rel = " stylesheet " >
< style type = " text / css " >
body { padding - top : 20px ; }
</ style >
</ head >
< body >
< div class = " container " >
< button data - toggle = " modal " href = " remote . html " data target = " # infos " class = " btn btn - primary " >
informations
</ button >
< div class = " modal fade " id = " infos " >
< div class = " modal - dialog " >
< div class = " modal - content " > </ div >
</ div >
</ div >
</ div >
</ div >
< script src = " assets / js / jquery . js " > </ script >
< script src = " assets / js / bootstrap . min . js " > </ script >
</ body >
</ html >

Le bouton comporte ladresse de la page charger avec lattribut href. On se contente


de prvoir le contenant avec la classe modal-content. Quand on clique sur le bouton, jQuery charge la page cible et linjecte dans la <div> qui comporte la classe
modal-content.
Cette mise en uvre a chang avec la version 3.1 de Bootstrap. Auparavant
on se contentait dune div avec la classe modal.
Voici le code de la page charger :
1
2
3
4
5
6
7
8
9
10
11

< div class = " modal - header " >


< button type = " button " class = " close " data - dismiss = " modal " >&
times ; </ button >
< h1 > Mon amour pour les tigres </ h1 >
</ div >
< div class = " modal - body " >
<p >
Je suis passionn par les < strong > tigres </ strong > depuis tr
s longtemps . Ce site a t construit en < em >
hommage ces merveilleux f lins ... </ em > < br >
Je fais partie de la < abbr title = " Soci t des Amoureux des
Tigres " > SAT </ abbr > qui a pour but de faire
conna tre ces splendides animaux .
</ p >

203

CHAPITRE 6. LES PLUGINS JQUERY


12
13
14
15
16
17
18
19
20
21
22
23

<p > Voici ce qu ' en dit le wikipedia : </ p >


< blockquote >
Le Tigre ( Panthera tigris ) est un mammif re carnivore de la
famille des f lid s ( Felidae ) du genre Panthera .
Ais ment reconnaissable sa fourrure rousse ray e de noir , il
est le plus grand f lin sauvage et l ' un des plus
grands carnivores du monde . L ' esp ce est divis e en neuf sous esp ces poss dant des diff rences mineures en termes
de taille ou de comportement . Superpr dateur , il chasse
principalement les cerfs et les sangliers , bien qu ' il
puisse s ' attaquer des proies de taille plus importante comme
les buffles . Jusqu ' au XIXe si cle , le Tigre tait
r put mangeur d ' homme . La structure sociale des tigres en
fait un animal solitaire ; le m le poss de un territoire
qui englobe les domaines de plusieurs femelles et ne participe
pas l ' ducation des petits . < br >
< small class = " pull - right " > Wikipedia </ small > < br >
</ blockquote >
</ div >

Il faut prvoir les classes pour faire bien apparatre la fentre modale. Vous verrez le
rsultat la figure 6.19.

Figure 6.19 Une page HTML dans une fentre modale


Testez ! http://bootstrap.twit.free.fr/tutov3/modal05.html
Mon exemple tel quil est trait ne prsente pas un grand intrt, autant prvoir le code
directement dans la page de base. En revanche, cela peut devenir intressant dans le
cas o plusieurs contenus sont disponibles. Vous en verrez un exemple la figure 6.20 :
204

FENTRE MODALE
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

<! DOCTYPE HTML >


< html >
< head >
< meta charset = " utf - 8 " >
< link href = " assets / css / bootstrap . css " rel = " stylesheet " >
< style type = " text / css " >
body { padding - top : 20px ; }
</ style >
</ head >
< body >
< div class = " container " >
< div class = " btn - group " >
< button id = " page1 " type = " button " class = " btn btn - primary
" > Page 1 </ button >
< button id = " page2 " type = " button " class = " btn btn - primary
" > Page 2 </ button >
< button id = " page3 " type = " button " class = " btn btn - primary
" > Page 3 </ button >
</ div >
< div class = " modal fade " id = " infos " >
< div class = " modal - dialog " >
< div class = " modal - content " > </ div >
</ div >
</ div >
</ div >
< script src = " assets / js / jquery . js " > </ script >
< script src = " assets / js / bootstrap . min . js " > </ script >
< script >
$ ( " body " ) . on ( " hidden . bs . modal " , " . modal " , function () {
$ ( this ) . removeData ( " bs . modal " ) ;
}) ;
$ ( " # page1 " ) . click ( function () {
$ ( " # infos " ) . modal ({ remote : " remote1 . html " } ," show " ) ;
}) ;
$ ( " # page2 " ) . click ( function () {
$ ( " # infos " ) . modal ({ remote : " remote2 . html " } , " show " ) ;
}) ;
$ ( " # page3 " ) . click ( function () {
$ ( " # infos " ) . modal ({ remote : " remote3 . html " } , " show " ) ;
}) ;
</ script >
</ body >
</ html >

Testez ! http://bootstrap.twit.free.fr/tutov3/modal06.html Notez lutilisation


de lvnement hidden.bs.modal qui survient la fermeture de la fentre modale. Il
est ncessaire de rinitialiser la fentre sinon on ouvre toujours la mme. . .
205

CHAPITRE 6. LES PLUGINS JQUERY

Figure 6.20 Fentres modales commandes par des boutons

Largeur de la fentre modale


La version 3.1 de Bootstrap a ajout la possibilit de choisir la dimension dune fentre
modale avec 2 classes : modal-lg et modal-sm. La premire permet dobtenir une fentre
large, alors que la seconde fait linverse en crant une fentre troite. Ces classes doivent
aller avec la classe modal-dialog. Vous en trouverez des exemples aux figures 6.21 et
6.22 :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

< div class = " container " >


< button class = " btn btn - primary " data - toggle = " modal " data target = " # f1 " > Grande fen tre </ button >
< div class = " modal fade " id = " f1 " >
< div class = " modal - dialog modal - lg " >
< div class = " modal - content " >
< div class = " modal - body " >
Je suis une grande fen tre !
< button type = " button " class = " close " data - dismiss = "
modal " >x </ button >
</ div >
</ div >
</ div >
</ div >
< button class = " btn btn - primary " data - toggle = " modal " data target = " # f2 " > Petite fen tre </ button >
< div class = " modal fade " id = " f2 " >
< div class = " modal - dialog modal - sm " >
< div class = " modal - content " >
< div class = " modal - body " >
Je suis une petite fen tre !
< button type = " button " class = " close " data - dismiss = "
modal " >x </ button >
</ div >
</ div >
</ div >
</ div >
</ div >

206

FENTRE MODALE

Figure 6.21 Petite fentre avec la classe modal-sm

Figure 6.22 Grande fentre avec la classe modal-lg

La page dexemple et laccessibilit


Une fentre modale a t ajoute la page dexemple. Pour ne pas trop alourdir cette
page, jai juste prvu une fentre qui souvre quand on clique sur le lien Tigre de
Sibrie , comme la figure 6.23.

Figure 6.23 Fentre modale dans la page dexemple


Testez ! http://bootstrap.twit.free.fr/tutov3/base13.html Voici le code correspondant :
1
2
3
4
5
6
7
8

<a href = " # infos " class = " list - group - item " data - toggle = " modal " >
Tigre de Sib rie
< span class = " badge " > 120 </ span >
</ a >
< div class = " modal fade " id = " infos " role = " dialog " aria labelledby = " modalTitre " aria - hidden = " true " >
< div class = " modal - dialog " >
< div class = " modal - content " >
< div class = " modal - header " >

207

CHAPITRE 6. LES PLUGINS JQUERY


9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

< button type = " button " class = " close " data - dismiss = " modal
" aria - hidden = " true " >x </ button >
< h4 id = " modalTitre " class = " modal - title " > Plus d '
informations sur le tigre de Sib rie </ h4 >
</ div >
< div class = " modal - body " >
< blockquote >
Les tigres de Sib rie p sent de 180 350 kg pour les
m les et de 100 200 kg pour les femelles .
Le plus gros tigre de Sib rie , tu en 1950 , atteignait les 384
kg . Le Tigre de Sib rie est le troisi me plus
gros pr dateur terrestre derri re l ' ours kodiak et l ' ours
polaire . La longueur totale du corps avec la queue
est comprise entre 2 , 7 et 3 , 8 m pour les m les et entre 2 , 4 et
2 , 75 m pour les femelles . La longueur du cr ne
est de 341 383 mm pour les m les et 279 318 mm pour les
femelles . < hr >
< small class = " pull - right " > Wikipedia </ small >
</ blockquote >
</ div >
</ div >
</ div >
</ div >

Jai intgr le code ARIA pour laccessibilit. Le rle a t dfini comme dialog (dfinition du W3C - http://www.w3.org/TR/wai-aria/roles#dialog), cest ce qui est
prconis par les auteurs de Bootstrap. Si on lit la dfinition, on parle de fentre qui
interrompt le flux normal et qui requiert une entre de lutilisateur (ce qui nest pas
le cas ici). Javoue ne mtre jamais vraiment inquit de cet aspect daccessibilit et
la lecture de la prconisation W3C est quelque peu laborieuse. Il me semble toutefois
judicieux de prendre en compte les besoins des personnes prsentant un dficit sensoriel. En parcourant les rles, jaurais plutt eu tendance utiliser complmentary http://www.w3.org/TR/wai-aria/roles#complementarydans le cas prsent. La proprit aria-labelledby - http://www.w3.org/TR/wai-aria/states_and_properties#
aria-labelledby fait rfrence au titre de la fentre modale. Par exemple, un lecteur
dcran va lire le texte correspondant pour renseigner lutilisateur sur le contenu de la
fentre modale. Enfin la proprit aria-hidden - http://www.w3.org/TR/wai-aria/
states_and_properties#aria-hidden indique de ne pas tenir compte de llment.
videmment, ces ajouts daccessibilit nont vraiment de sens que si toute la page est
traite de cette faon. . .

Activation avec Javascript


Dclenchement de la fentre modale
On a vu que lon peut pratiquement tout faire avec des proprits, mais vous avez aussi
la possibilit dutiliser Javascript pour utiliser ce plugin. La proprit data-toggle="modal"
place dans llment dclencheur active automatiquement le plugin. Reprenons un
208

FENTRE MODALE
exemple vu ci-dessus en nutilisant plus cette proprit :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

< button class = " btn btn - primary " > Informations </ button >
< div class = " modal " id = " infos " >
< div class = " modal - dialog " >
< div class = " modal - content " >
< div class = " modal - header " >
< button type = " button " class = " close " data - dismiss = " modal
" >x </ button >
< h4 class = " modal - title " > Plus d ' informations </ h4 >
</ div >
< div class = " modal - body " >
Le Tigre ( Panthera tigris ) est un mammif re carnivore
de la famille des f lid s ...
</ div >
< div class = " modal - footer " >
< button class = " btn btn - info " data - dismiss = " modal " >
Fermer </ button >
</ div >
</ div >
</ div >
</ div >

Maintenant lorsquon clique sur le bouton, il ne se passe plus rien. Pour activer le
plugin, il faut utiliser du Javascript :
1
2
3

$ ( '. btn ') . click ( function () {


$ ( '. modal ') . modal ( ' show ') ;
}) ;

On peut aussi modifier le comportement de la fentre avec des proprits. Par exemple,
la proprit boolenne keyboard, qui est normalement vraie, permet de fermer la fentre
par action sur la touche dchappement. On peut la renseigner en compltant notre
exemple. Mais il faut aussi renseigner la proprit show qui est vraie par dfaut, et
ouvre la fentre ds le chargement de la page, ce que lon ne dsire videmment pas.
Voici le code correspondant :
1
2
3
4

$ ( '. modal ') . modal ({


keyboard : false ,
show : false
}) ;

Les vnements
Vous disposez galement de 5 vnements pour ce composant :
Vous avez par exemple un formulaire sur la page modale et vous dsirez que le premier
contrle soit actif, vous pouvez le raliser facilement ainsi :
1
2

$ ( " . modal " ) . on ( ' shown . bs . modal ' , function () {


$ ( ' input : first ') . focus () ;

209

CHAPITRE 6. LES PLUGINS JQUERY


vnement
show.bs.modal
shown.bs.modal
hide.bs.modal
hidden.bs.modal
loaded.bs.modal

Description
Se dclenche ds lappel la mthode show
Se dclenche lorsque la fentre devient visible
Se dclenche ds lappel la mthode hide
Se dclenche lorsque la fentre est masque
Se dclenche lorsque la fentre a charg le contenu
rcupr avec la proprit remote

}) ;

Onglets
Un premier exemple simple
Le plugin Tab permet de crer facilement des onglets, comme la figure 6.24.
1
2
3
4
5
6
7
8
9
10

< ul class = " nav nav - tabs " >


< li class = " active " > <a href = " # accueil " data - toggle = " tab " >
Accueil </ a > </ li >
< li > <a href = " # livres " data - toggle = " tab " > Livres </ a > </ li >
< li > <a href = " # temoignages " data - toggle = " tab " >T moignages </ a
> </ li >
</ ul >
< div class = " tab - content " >
< div class = " tab - pane active " id = " accueil " > Texte d ' accueil </
div >
< div class = " tab - pane " id = " livres " > Tous les livres </ div >
< div class = " tab - pane " id = " t moignages " > Tous les temoignages
</ div >
</ div >

Figure 6.24 Onglets simples


On utilise une liste et quelques classes, rien de bien compliqu. Les classes nav et
nav-tab soccupent de la mise en forme. Le plugin est activ par data-toggle="tab".
On pointe le bon contenu avec href.
210

ONGLETS

Un autre aspect
Si cette apparence tabulaire ne vous convient pas, vous pouvez changer pour un autre
aspect avec une modification minime, comme la figure 6.25.
1

< ul class = " nav nav - pills " >

Figure 6.25 Onglets styliss

Transition progressive
Pour obtenir un effet progressif, il suffit dajouter la classe fade pour chacun des
tab-pane :
1
2
3
4
5
6
7
8
9
10

< ul class = " nav nav - pills " >


< li class = " active " > <a href = " # accueil " data - toggle = " tab " >
Accueil </ a > </ li >
< li > <a href = " # livres " data - toggle = " tab " > Livres </ a > </ li >
< li > <a href = " # temoignages " data - toggle = " tab " >T moignages </ a
> </ li >
</ ul >
< div class = " tab - content " >
< div class = " tab - pane fade active in " id = " accueil " > Texte d '
accueil </ div >
< div class = " tab - pane fade " id = " livres " > Tous les livres </ div
>
< div class = " tab - pane fade " id = " temoignages " > Tous les t
moignages </ div >
</ div >

Il faut ajouter aussi la classe in pour le tab-pane actif pour faire apparatre le texte
(opacity 1) au chargement de la page.

Empilage
Si a ne vous convient encore pas (mais vous tes difficile l !), vous pouvez empiler les
liens (voir figure 6.26).
1

< ul class = " nav nav - pills nav - stacked " >

211

CHAPITRE 6. LES PLUGINS JQUERY

Figure 6.26 Onglets empils

Justification
Il est aussi possible de faire en sorte que les onglets occupent tout lespace disponible
en se rpartissant de faon homogne (voir figure 6.27).
1
2
3
4
5
6
7
8
9
10
11
12

< div class = " col - lg - 8 " >


< ul class = " nav nav - pills nav - justified " >
< li class = " active " > <a href = " # accueil " data - toggle = " tab " >
Accueil </ a > </ li >
< li > <a href = " # livres " data - toggle = " tab " > Livres </ a > </ li >
< li > <a href = " # temoignages " data - toggle = " tab " >T moignages <
/ a > </ li >
</ ul >
< div class = " tab - content " >
< div class = " tab - pane active " id = " accueil " > Texte d ' accueil
</ div >
< div class = " tab - pane " id = " livres " > Tous les livres </ div >
< div class = " tab - pane " id = " temoignages " > Tous les t
moignages </ div >
</ div >
</ div >

Figure 6.27 Onglets justifis

Dsactiver un lien
Vous pouvez marquer un lien comme inactif avec la classe disabled, comme la figure
6.28 :
1
2

< ul class = " nav nav - pills " >


< li class = " active " > <a href = " # accueil " data - toggle = " tab " >
Accueil </ a > </ li >

212

ONGLETS
3
4
5
6
7
8
9
10

< li class = " disabled " > <a href = " # livres " data - toggle = " tab " >
Livres </ a > </ li >
< li > <a href = " # temoignages " data - toggle = " tab " >T moignages </ a
> </ li >
</ ul >
< div class = " tab - content " >
< div class = " tab - pane active " id = " accueil " > Texte d ' accueil </
div >
< div class = " tab - pane " id = " livres " > Tous les livres </ div >
< div class = " tab - pane " id = " temoignages " > Tous les t moignages
</ div >
</ div >

Figure 6.28 Un onglet dsactiv


Mais ce nest pas parce quil apparat comme inactif quil lest vraiment ! Pour le rendre
rellement inactif, il faut supprimer la proprit data-toggle :
1

< li class = " disabled " > <a href = " # livres " > Livres </ a > </ li >

Un menu droulant dans un onglet


Pour avoir un menu droulant sur un onglet, il faut utiliser le plugin dropdown que
nous avons dj vu (comme la figure 6.29) :
1
2
3
4
5
6
7
8
9
10
11
12
13
14

< ul class = " nav nav - tabs " >


< li > <a href = " # accueil " data - toggle = " tab " > Accueil </ a > </ li >
< li class = " dropdown " > <a class = " dropdown - toggle " data - toggle = "
dropdown " href = " # " > Livres < span class = " caret " > </ span > </ a >
< ul class = " dropdown - menu " >
< li > <a href = " # policiers " data - toggle = " tab " > Policiers </ a > <
/ li >
< li > <a href = " # romans " data - toggle = " tab " > Romans </ a > </ li >
< li > <a href = " # contes " data - toggle = " tab " > Contes </ a > </ li >
</ ul >
</ li >
< li > <a href = " # temoignages " data - toggle = " tab " >T moignages </ a > <
/ li >
</ ul >
< div class = " tab - content " >
< div class = " tab - pane active " id = " accueil " > Texte d ' accueil </
div >
< div class = " tab - pane " id = " temoignages " > Tous les t moignages
</ div >

213

CHAPITRE 6. LES PLUGINS JQUERY


15
16
17
18

< div class = " tab - pane " id = " policiers " > Tous les livres
policiers </ div >
< div class = " tab - pane " id = " romans " > Tous les romans </ div >
< div class = " tab - pane " id = " contes " > Tous les contes </ div >
</ div >

Figure 6.29 Menu droulant dans un onglet

Onglets latraux
Vous pouvez adapter la disposition et mettre par exemple les onglets empils gauche,
comme la figure 6.30 :
1
2
3
4
5
6
7
8
9
10

< ul class = " nav nav - pills nav - stacked pull - left " >
< li > <a href = " # accueil " data - toggle = " tab " > Accueil </ a > </ li >
< li class = " active " > <a href = " # livres " data - toggle = " tab " > Livres
</ a > </ li >
< li > <a href = " # temoignages " data - toggle = " tab " >T moignages </ a > <
/ li >
</ ul >
< div class = " tab - content " >
< div class = " tab - pane " id = " accueil " > Texte d ' accueil </ div >
< div class = " tab - pane " id = " temoignages " > Tous les t moignages
</ div >
< div class = " tab - pane active " id = " livres " > Tous les livres </
div >
</ div >

Figure 6.30 Onglets gauche


Ou droite (voir figure 6.31) :
214

ONGLETS
1

< ul class = " nav nav - pills nav - stacked pull - right " >

Figure 6.31 Onglets droite

La page dexemple
Notre page dexemple est maintenant enrichie donglets dans la partie infrieure, comme
la figure 6.32.

Figure 6.32 Onglets dans la page dexemple


Testez ! http://bootstrap.twit.free.fr/tutov3/base13.html Voici la partie du
code concerne :
1
2
3
4
5
6
7
8
9

< section class = " col - sm - 8 " >


< ul class = " nav nav - pills " >
< li class = " active " > <a href = " # contact " data - toggle = " tab " >
Contact </ a > </ li >
< li > <a href = " # informations " data - toggle = " tab " > Informations
pratiques </ a > </ li >
</ ul >
< div class = " tab - content " >
< div class = " tab - pane active fade in " id = " contact " >
< form class = " well " >
< h4 > < span class = " label label - default " > Si vous voulez me
laisser un message </ span > </ h4 >

215

CHAPITRE 6. LES PLUGINS JQUERY


10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

32
33
34
35
36
37
38

39
40
41
42

< h4 > Comment m ' avez - vous trouv ? </ h4 >


< fieldset >
< label for = " ami " class = " radio " >
< input type = " radio " name = " origine " value = " ami " id = "
ami " >
Par un ami
</ label >
< label for = " web " class = " radio " >
< input type = " radio " name = " origine " value = " web " id = "
web " >
Sur le web
</ label >
< label for = " hasard " class = " radio " >
< input type = " radio " name = " origine " value = " hasard "
id = " hasard " >
Par hasard
</ label >
< label for = " autre " class = " radio " >
< input type = " radio " name = " origine " value = " autre " id
= " autre " >
Autre ...
</ label >
< label for = " textarea " > Votre message : </ label >
< textarea id = " textarea " rows = " 4 " class = " form control " > </ textarea >
<p class = " help - block " > Vous pouvez agrandir la fen
tre </ p >
< button class = " btn btn - primary " type = " submit " > < span
class = " glyphicon glyphicon - ok - sign " > </ span >
Envoyer </ button >
</ fieldset >
</ form >
</ div >
< div class = " tab - pane fade " id = " informations " >
< div class = " well " >
< h2 > Informations pratiques </ h2 >
<p > Si vous tes int ress s par la protection des tigres
et si vous d sirez prendre part aux actions men es
... blablabla ... </ p >
</ div >
</ div >
< div class = " tab - content " >
</ section >

216

ONGLETS

Utilisation de Javascript
Activation des onglets
Nous avons ci-dessus activ le plugin avec la proprit data-toggle="tab". Il est aussi
possible dutiliser le plugin directement avec du Javascript. Voici un des exemples sans
la proprit renseigne :
1
2
3
4
5
6
7
8
9
10

< ul class = " nav nav - pills nav - stacked pull - right " >
< li > <a href = " # accueil " data - toggle = " tab " > Accueil </ a > </ li >
< li class = " active " > <a href = " # livres " data - toggle = " tab " > Livres
</ a > </ li >
< li > <a href = " # temoignages " data - toggle = " tab " >T moignages </ a > <
/ li >
</ ul >
< div class = " tab - content " >
< div class = " tab - pane " id = " accueil " > Texte d ' accueil </ div >
< div class = " tab - pane " id = " temoignages " > Tous les t moignages
</ div >
< div class = " tab - pane active " id = " livres " > Tous les livres </
div >
</ div >

Les onglets sont devenus inactifs. Pour que a fonctionne il faut ajouter un peu de
Javascript :
1
2
3
4

$ ( 'a ') . click ( function ( e ) {


e . preventDefault () ;
$ ( this ) . tab ( ' show ') ;
}) ;

Tous les onglets doivent tre activs, cest pour cette raison que jai choisi pour ma
page le slecteur a qui est sans ambigut.
Les vnements
Vous disposez galement de 2 vnements pour ce composant :
vnement
show.bs.tab
shown.bs.tab

Description
Se dclenche ds lappel la mthode show
Se dclenche lorsque longlet devient visible

Dautre part il est possible de connatre longlet actif avec event.target et longlet
prcdemment slectionn avec event.relatedTarget. On va utiliser tout cela pour
afficher le nom de longlet actuel et du prcdent chaque changement. On va donc
ajouter le code HTML pour accueillir linformation :
1
2

< ul class = " nav nav - pills " >


< li class = " active " > <a href = " # accueil " > Accueil </ a > </ li >

217

CHAPITRE 6. LES PLUGINS JQUERY


3
4
5
6
7
8
9
10
11
12
13

< li > <a href = " # livres " > Livres </ a > </ li >
< li > <a href = " # temoignages " >T moignages </ a > </ li >
</ ul >
< div class = " tab - content " >
< div class = " tab - pane active " id = " accueil " > Texte d ' accueil </
div >
< div class = " tab - pane " id = " livres " > Tous les livres </ div >
< div class = " tab - pane " id = " temoignages " > Tous les t moignages
</ div >
</ div >
< hr >
<p id = ' actif ' > < strong > Onglet actif </ strong >: < span > </ span > </ p >
<p id = ' precedent ' > < strong > Onglet pr c dent </ strong >: < span > </
span > </ p >

Il ne reste plus qu prvoir le code Javascript pour dclencher le plugin et mettre en


place lcoute de lvnement et agir en consquence (voir figure 6.33) :
1
2
3
4
5
6
7
8
9
10
11

$ ( function () {
$ ( 'a ')
. click ( function ( e ) {
e . preventDefault () ;
$ ( this ) . tab ( ' show ') ;
})
. on ( ' shown . bs . tab ' , function ( e ) {
$ ( '# actif span ') . html ( $ ( e . target ) . text () ) ;
$ ( '# precedent span ') . html ( $ ( e . relatedTarget ) . text () ) ;
}) ;
}) ;

Figure 6.33 Utilisation de lvnement shown.bs.tab

Boutons
Bouton bascule
On a parfois besoin de boutons 2 tats stabiliss : repos et appuy. Le plugin permet de
raliser cela facilement. Il suffit de crer le bouton en prvoyant data-toggle="button"
(comme la figure 6.34) :
218

BOUTONS
1

<a class = " btn btn - success " data - toggle = " button " > Simple Bascule <
/a>

Figure 6.34 Bouton bascule

Boutons effet checkbox


On peut grouper des boutons avec la classe btn-group et les faire fonctionner comme
des checkbox avec data-toggle="buttons". Les boutons restent indpendants dans
leur fonctionnement mais ont lavantage dtre groups. Pour raliser cela, il faut utiliser
des contrles imput de type checkbox (voir figure 6.35) :
1
2
3
4
5
6
7
8
9
10
11

< div class = " btn - group " data - toggle = " buttons " >
< label class = " btn btn - success " >
< input type = " checkbox " > Un
</ label >
< label class = " btn btn - success " >
< input type = " checkbox " > Deux
</ label >
< label class = " btn btn - success " >
< input type = " checkbox " > Trois
</ label >
</ div >

Figure 6.35 Boutons avec effet checkbox

Boutons effet radio


On peut grouper des boutons avec la classe btn-group et les faire fonctionner comme
des boutons radio avec data-toggle="buttons". Les boutons sont maintenant lis
dans leur fonctionnement, un seul peut tre enfonc. Pour raliser cela, il faut utiliser
des contrles imput de type radio (voir figure 6.36) :
1
2
3
4
5
6
7

< div class = " btn - group " data - toggle = " buttons " >
< label class = " btn btn - success " >
< input type = " radio " > Un
</ label >
< label class = " btn btn - success " >
< input type = " radio " > Deux
</ label >

219

CHAPITRE 6. LES PLUGINS JQUERY


8
9
10
11

< label class = " btn btn - success " >


< input type = " radio " > Trois
</ label >
</ div >

Figure 6.36 Boutons avec effet radio

Boutons pour attente de processus


Parfois on clique sur un bouton pour raliser un processus qui demande un certain
temps, comme par exemple un envoi de fichier. Le plugin prvoit cette possibilit.
Voici un premier exemple avec une temporisation artificielle juste pour marquer leffet.
Dabord on cre le bouton :
1

< button type = " button " class = " btn btn - primary " data - loading - text
= " Chargement ... " > Cliquez ! </ button >

Ensuite, on cre le code pour grer leffet. La mthode loading provoque le changement
du texte du bouton avec ce qui est indiqu dans data-loading-text et la mthode
reset ramne le bouton son tat initial (voir figure 6.37) :
1
2
3
4
5
6
7
8
9
10

$ ( function () {
$ ( 'a ') . click ( function () {
with ( $ ( this ) ) {
button ( ' loading ') ;
setTimeout ( function () {
button ( ' reset ') ;
} , 4000 ) ;
}
})
}) ;

Figure 6.37 Bouton pour attente de fin dun processus


Testez ! http://bootstrap.twit.free.fr/tutov3/bouton06.html
Maintenant voyons un cas dutilisation un peu plus raliste que notre minuterie. Nous
avons une image lourde charger, et nous voulons que le bouton change dtat le temps
de chargement de limage. Voil le bouton et la balise prte recevoir limage :
1
2

<a class = " btn btn - primary " data - loading - text = " Chargement en
cours ... " > Chargez l ' image ! </ a >
< img id = " mon_image " >

220

BOUTONS
Et voici le code Javascript pour grer leffet :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

$ ( function () {
$ ( 'a ') . click ( function () {
with ( $ ( this ) ) {
if ( hasClass ( ' btn - primary ') ) {
removeClass ( ' btn - primary ') . addClass ( ' btn - danger ') .
button ( ' loading ') ;
var image = new Image () ;
image . onload = function () {
removeClass ( ' btn - danger ') . addClass ( ' btn - primary ') .
button ( ' reset ') ;
$ ( " # mon_image " ) . attr ({ src : " images / legumes . jpg " }) ;
};
image . src = " images / legumes . jpg " ;
}
}
})
}) ;

Testez ! http://bootstrap.twit.free.fr/tutov3/bouton08.html Avec cet exemple,


vous ne verrez certainement leffet quune fois dans votre navigateur, tant donn quensuite limage sera en cache.

La page dexemple
La page dexemple a t agrmente de boutons groups de type radio pour choisir
une vido (voir la figure 6.38).

Figure 6.38 Boutons avec effet option dans la page dexemple


Testez ! http://bootstrap.twit.free.fr/tutov3/base13.html
1

< div class = " btn - group " data - toggle = " buttons " >

221

CHAPITRE 6. LES PLUGINS JQUERY


2
3
4
5
6
7
8
9
10
11

< label class = " btn btn - primary " >


< input type = " radio " > Vid o 1
</ label >
< label class = " btn btn - primary " >
< input type = " radio " > Vid o 2
</ label >
< label class = " btn btn - primary " >
< input type = " radio " > Vid o 3
</ label >
</ div >

Carrousel
La page dexemple
La page dexemple comporte un carrousel (voir la figure 6.39). Pour information, ce
terme prend un R en anglais et deux en franais.

Figure 6.39 Carrousel dans la page dexemple


Testez ! http://bootstrap.twit.free.fr/tutov3/base13.html

Un premier exemple simple


Ce plugin permet de crer facilement un carrousel. La mise en place ncessite lutilisation de quelques classes. Voici la structure de base HTML :
1
2
3
4
5
6
7

< div class = " carousel slide " >


< div class = " carousel - inner " >
< div class = " item active " > ... </ div >
< div class = " item " > ... </ div >
< div class = " item " > ... </ div >
</ div >
</ div >

222

CARROUSEL
Voici un premier exemple simple :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

< div class = " container " >


< div class = " col - lg - offset - 2 col - lg - 8 " >
< div class = " carousel slide " >
< div class = " carousel - inner " >
< div class = " item active " > < img alt = " " src = " images / img47
. png " > </ div >
< div class = " item " > < img alt = " " src = " images / img48 . png " > <
/ div >
< div class = " item " > < img alt = " " src = " images / img49 . png " > <
/ div >
</ div >
</ div >
</ div >
</ div >
< script src = " assets / js / jquery . js " > </ script >
< script src = " assets / js / bootstrap . min . js " > </ script >
< script >
$ ( function () {
$ ( '. carousel ') . carousel () ;
}) ;
</ script >

Pour chaque item on place une balise <img> pour rfrencer une image. On utilise la
classe active pour dsigner limage qui doit apparatre en premier. Jai utilis une
classe col-lg-8 pour calibrer le carrousel et une classe col-lg-offset-2 pour le centrer. Les 3 images sont aux mmes dimensions. Il nous faut aussi initialiser le carrousel
avec jQuery. Par dfaut les images dfilent au rythme de 5s (voir figure 6.40) :

Figure 6.40 Un carrousel simple


Testez ! http://bootstrap.twit.free.fr/tutov3/carousel01.html
223

CHAPITRE 6. LES PLUGINS JQUERY

Des titres pour les images


Il est possible de faire apparatre un titre pour chaque image dans la partie infrieure
avec la classe carousel-caption (voir figure 6.41) :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

< div class = " col - lg - offset - 2 col - lg - 8 " >


< div class = " carousel slide " >
< div class = " carousel - inner " >
< div class = " item active " > < img alt = " " src = " images / img47 .
png " >
< h1 class = " carousel - caption " > Une pr sentation </ h1 >
</ div >
< div class = " item " > < img alt = " " src = " images / img48 . png " >
< h1 class = " carousel - caption " > Une autre pr sentation </ h1
>
</ div >
< div class = " item " > < img alt = " " src = " images / img49 . png " >
< h1 class = " carousel - caption " > Et encore une autre ! </ h1p
>
</ div >
</ div >
</ div >
</ div >

Figure 6.41 Des titres dans les images


Testez ! http://bootstrap.twit.free.fr/tutov3/carousel02.html
Notez que le titre vient au-dessus de limage et quil faut donc adapter le
style aux couleurs prsentes sur limage pour que le titre soit lisible.

224

CARROUSEL

Un indicateur de limage affiche


Il est possible de faire apparatre un indicateur pour savoir quelle image est affiche et
aussi pour accder directement une image particulire. Il faut identifier le carrousel et
le pointer avec lattribut data-target. Lattribut data-slide-to permet didentifier
la diapositive concerne. On peut aussi slectionner la diapositive afficher en cliquant
sur lindicateur (voir figure 6.42) :
1
2
3
4
5
6
7
8
9
10
11
12

< div id = " carousel " class = " carousel slide " >
< ol class = " carousel - indicators " >
< li data - target = " # carousel " data - slide - to = " 0 " class = " active
" > </ li >
< li data - target = " # carousel " data - slide - to = " 1 " > </ li >
< li data - target = " # carousel " data - slide - to = " 2 " > </ li >
</ ol >
< div class = " carousel - inner " >
< div class = " item active " > < img alt = " " src = " images / img47 . png
" > </ div >
< div class = " item " > < img alt = " " src = " images / img48 . png " > </ div
>
< div class = " item " > < img alt = " " src = " images / img49 . png " > </ div
>
</ div >
</ div >

Figure 6.42 Un indicateur de limage affiche


Testez ! http://bootstrap.twit.free.fr/tutov3/carousel03.html
Notez que lindicateur vient au-dessus de limage et quil faut donc adapter
le style aux couleurs prsentes sur limage pour quil soit lisible.

225

CHAPITRE 6. LES PLUGINS JQUERY

Des boutons de dfilement


On peut aussi afficher des boutons droite et gauche pour permettre un dfilement
manuel des images. Il faut identifier le carrousel pour le rfrencer dans les liens avec
href (voir figure 6.43) :
1
2
3
4
5
6
7
8
9
10
11

< div class = " carousel - inner " >


< div class = " item active " > < img alt = " " src = " images / img47 . png " >
</ div >
< div class = " item " > < img alt = " " src = " images / img48 . png " > </ div >
< div class = " item " > < img alt = " " src = " images / img49 . png " > </ div >
</ div >
<a class = " left carousel - control " href = " # carousel " data - slide = "
prev " >
< span class = " icon - prev " > </ span >
</ a >
<a class = " right carousel - control " href = " # carousel " data - slide = "
next " >
< span class = " icon - next " > </ span >
</ a >

Figure 6.43 Des boutons pour le dfilement des images


Testez ! http://bootstrap.twit.free.fr/tutov3/carousel04.html
Notez que les chevrons viennent au-dessus de limage et quil faut donc adapter le style aux couleurs prsentes sur limage pour quils soient visibles.

Amliorer la prsentation
On peut amliorer la prsentation du diaporama avec du style, comme la figure 6.44 :
1

. carousel - inner {

226

CARROUSEL
2
3
4
5

border - radius : 5px 5px 5px 5px ;


border : 5px solid white ;
box - shadow : 0 1px 1px rgba (0 , 0 , 0 , 0 . 3 ) ;

Figure 6.44 Amlioration de la prsentation


Mais on peut aussi utiliser une classe de Bootstrap pour obtenir un effet sympathique
sans ajouter de style (voir figure 6.45 ) :
1

< div class = " carousel - inner thumbnail " >

Figure 6.45 Utilisation de la classe thumbnail pour la prsentation

Les options du carrousel


Dlai de dfilement
1
2

$ ( function () {
$ ( '. carousel ') . carousel ({ interval : 2000 }) ;

227

CHAPITRE 6. LES PLUGINS JQUERY


3

}) ;

Testez ! http://bootstrap.twit.free.fr/tutov3/carousel07.html
Cycle et pause
On peut avec jQuery commander le dmarrage du cycle ou la pause (voir figure 6.46) :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

< div class = " container " >


< div class = " col - lg - 2 " >
< div class = " btn - group " data - toggle = " buttons " >
< label class = " btn btn - primary active " id = " cycle " >
< input type = " radio " name = " options " > Cycle
</ label >
< label class = " btn btn - primary " id = " pause " >
< input type = " radio " name = " options " > Pause
</ label >
</ div >
</ div >
< div class = " col - lg - 8 " >
< div id = " carousel " class = " carousel slide " >
< div class = " carousel - inner " >
< div class = " item active " > < img alt = " " src = " images / img47
. png " > </ div >
< div class = " item " > < img alt = " " src = " images / img48 . png " > <
/ div >
< div class = " item " > < img alt = " " src = " images / img49 . png " > <
/ div >
</ div >
</ div >
</ div >
</ div >
< script src = " assets / js / jquery . js " > </ script >
< script src = " assets / js / bootstrap . min . js " > </ script >
< script >
$ ( function () {
$ ( '. carousel ') . carousel ({ interval : 2000 }) ;
$ ( '# cycle ') . click ( function () {
$ ( '. carousel ') . carousel ( ' cycle ') ;
}) ;
$ ( '# pause ') . click ( function () {
$ ( '. carousel ') . carousel ( ' pause ') ;
}) ;
}) ;
</ script >

Testez ! http://bootstrap.twit.free.fr/tutov3/carousel08a.html Les deux boutons commandent le diaporama. Une bonne occasion pour revoir comment configurer
des boutons de type radio avec Bootstrap.
228

CARROUSEL

Figure 6.46 Commande du carrousel avec des boutons


Autres commandes
Voici maintenant un exemple plus complet avec une palette de boutons de commande
(voir figure 6.47) :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

< div class = " container " >


< div class = " row " >
< div class = " col - lg - offset - 2 col - lg - 8 " >
< div id = " carousel " class = " carousel slide " >
< div class = " carousel - inner " >
< div class = " item active " > < img alt = " " src = " images /
img47 . png " > </ div >
< div class = " item " > < img alt = " " src = " images / img48 . png "
> </ div >
< div class = " item " > < img alt = " " src = " images / img49 . png "
> </ div >
</ div >
</ div >
</ div >
</ div >
< div class = " row " >
< div class = " col - lg - 12 " >
< div class = " btn - group " data - toggle = " buttons " >
< label class = " btn btn - success " id = " first " >
< input type = " radio " name = " options " > < span class = "
glyphicon glyphicon - fast - backward " > </ span >
</ label >
< label class = " btn btn - success " id = " previous " >
< input type = " radio " name = " options " > < span class = "
glyphicon glyphicon - step - backward " > </ span >
</ label >
< label class = " btn btn - success " id = " pause " >
< input type = " radio " name = " options " > < span class = "
glyphicon glyphicon - pause " > </ span >
</ label >
< label class = " btn btn - success active " id = " play " >

229

CHAPITRE 6. LES PLUGINS JQUERY


26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50

< input type = " radio " name = " options " > < span class = "
glyphicon glyphicon - play " > </ span >
</ label >
< label class = " btn btn - success " id = " next " >
< input type = " radio " name = " options " > < span class = "
glyphicon glyphicon - step - forward " > </ span >
</ label >
< label class = " btn btn - success " id = " last " >
< input type = " radio " name = " options " > < span class = "
glyphicon glyphicon - fast - forward " > </ span >
</ label >
</ div >
</ div >
</ div >
</ div >
< script src = " assets / js / jquery . js " > </ script >
< script src = " assets / js / bootstrap . min . js " > </ script >
< script >
$ ( function () {
$ ( '. carousel ') . carousel ({ interval : 2000 }) ;
$ ( '# first ') . click ( function () { $ ( '. carousel ') . carousel ( 0 ) ;
}) ;
$ ( '# previous ') . click ( function () { $ ( '. carousel ') . carousel ( '
prev ') ; }) ;
$ ( '# pause ') . click ( function () { $ ( '. carousel ') . carousel ( '
pause ') ; }) ;
$ ( '# play ') . click ( function () { $ ( '. carousel ') . carousel ( '
cycle ') ; }) ;
$ ( '# next ') . click ( function () { $ ( '. carousel ') . carousel ( ' next
') ; }) ;
$ ( '# last ') . click ( function () { $ ( '. carousel ') . carousel ( 2 ) ;
}) ;
}) ;
</ script >

Testez ! http://bootstrap.twit.free.fr/tutov3/carousel09a.html

Les vnements
Vous disposez de 2 vnements pour ce composant :
vnement
slide.bs.carousel
slid.bs.carousel

Description
Se dclenche ds lappel la mthode slide
Se dclenche lorsque la translation est termine

Compltons lexemple prcdent en prvoyant laffichage de lindex de la diapositive en


cours ainsi que du nombre total de diapositives (voir figure 6.48). Voici le code avec ce
complment :
230

CARROUSEL

Figure 6.47 Une barre de boutons pour la commande du carrousel

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

< div class = " container " >


< div class = " row " >
< div class = " col - lg - offset - 2 col - lg - 8 " >
< div id = " carousel " class = " carousel slide " >
< div class = " carousel - inner " >
< div class = " item active " > < img alt = " " src = " images /
img47 . png " > </ div >
< div class = " item " > < img alt = " " src = " images / img48 . png "
> </ div >
< div class = " item " > < img alt = " " src = " images / img49 . png "
> </ div >
</ div >
</ div >
</ div >
</ div >
< div class = " row " >
< div class = " col - lg - 12 " >
< div class = " btn - group " data - toggle = " buttons " >
< label class = " btn btn - success " id = " first " >
< input type = " radio " name = " options " > < span class = "
glyphicon glyphicon - fast - backward " > </ span >
</ label >
< label class = " btn btn - success " id = " previous " >
< input type = " radio " name = " options " > < span class = "
glyphicon glyphicon - step - backward " > </ span >
</ label >
< label class = " btn btn - success " id = " pause " >
< input type = " radio " name = " options " > < span class = "
glyphicon glyphicon - pause " > </ span >
</ label >
< label class = " btn btn - success active " id = " play " >
< input type = " radio " name = " options " > < span class = "

231

CHAPITRE 6. LES PLUGINS JQUERY


glyphicon glyphicon - play " > </ span >
</ label >
< label class = " btn btn - success " id = " next " >
< input type = " radio " name = " options " > < span class = "
glyphicon glyphicon - step - forward " > </ span >
</ label >
< label class = " btn btn - success " id = " last " >
< input type = " radio " name = " options " > < span class = "
glyphicon glyphicon - fast - forward " > </ span >
</ label >
</ div >
<p > < span class = " label label - info " > </ span > </ p >
</ div >
</ div >

27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57

</ div >


< script src = " assets / js / jquery . js " > </ script >
< script src = " assets / js / bootstrap . min . js " > </ script >
< script >
$ ( function () {
$ ( '. carousel ') . carousel ({ interval : 2000 }) ;
$ ( '# first ') . click ( function () { $ ( '. carousel ') . carousel ( 0 ) ;
}) ;
$ ( '# previous ') . click ( function () { $ ( '. carousel ') . carousel ( '
prev ') ; }) ;
$ ( '# pause ') . click ( function () { $ ( '. carousel ') . carousel ( '
pause ') ; }) ;
$ ( '# play ') . click ( function () { $ ( '. carousel ') . carousel ( '
cycle ') ; }) ;
$ ( '# next ') . click ( function () { $ ( '. carousel ') . carousel ( ' next
') ; }) ;
$ ( '# last ') . click ( function () { $ ( '. carousel ') . carousel ( 2 ) ;
}) ;
$ ( '. carousel ') . on ( ' slid . bs . carousel ' , function () {
var total = $ ( '. item ') . length ;
var current = $ ( '. item . active ') . index () + 1 ;
$ ( '. label ') . text ( current + ' / '+ total ) ;
}) ;
}) ;
</ script >

Figure 6.48 Affichage de lindex et du nombre total de diapositives


Testez ! http://bootstrap.twit.free.fr/tutov3/carousel09b.html Pour rester dans
lutilisation de Bootstrap, jai prvu laffichage dans un badge. Pour dterminer le
232

INFO-BULLES ET POPOVER
nombre de diapositives, on compte le nombre de fois o on trouve la classe item. Pour
la diapositive en cours, on recherche la classe active.

Info-bulles et Popover
La page dexemple
La page dexemple est agrmente dinfos-bulles (voir figure 6.49).

Figure 6.49 Des infos-bulles dans la page dexemple


Testez ! http://bootstrap.twit.free.fr/tutov3/base13.html
Ces deux plugins (Info-bulles et Popover) partagent une bibliothque et ont un fonctionnement analogue, nous allons donc les traiter ensemble.

Info-bulle
Un exemple simple
Le but est dobtenir de jolies info-bulles, comme la figure 6.50.

Figure 6.50 Apparence dune info-bulle


Voici le code correspondant ce premier exemple :
233

CHAPITRE 6. LES PLUGINS JQUERY


1
2
3
4
5

Le Tigre ( Panthera tigris ) est un <a data - toggle = " tooltip " href
= " # " title = " Classe de vert br s " >
mammif re </ a > carnivore de la famille des f lid s ( Felidae ) du
genre Panthera . Ais ment reconnaissable sa
fourrure rousse ray e de noir , il est le plus grand f lin
sauvage et l ' un des plus grands <a data - toggle = " tooltip "
href = " # " title = ' Synonyme de " carnassier " ' > carnivores </ a > du
monde . L ' esp ce est divis e en neuf
sous - esp ces poss dant des diff rences mineures en termes de
taille ou de comportement .

On utilise des balises <a> avec lattribut data-toggle gal tooltip. Le contenu de
linfo-bulle se place dans lattribut title. Si vous testez ce code il ne se passera rien
parce quil faut initialiser le plugin avec jQuery :
1
2
3

$ ( function () {
$ ( 'a ') . tooltip () ;
}) ;

Il suffit dutiliser la fonction tooltip avec le bon slecteur, ici on a choisit la balise
<a> parce quon veut une info-bulle sur tous les liens de la page. Dans un contexte
plus complexe il faudrait videmment affiner la slection, mais ce nest pas lobjet de
ce cours.

Positionnement de linfo-bulle
On peut changer le positionnement de linfo-bulle qui par dfaut se situe juste audessus avec loption placement. Les possibilits sont top (au-dessus, cest loption par
dfaut), bottom (au-dessous), left ( gauche) et right ( droite). Voici un exemple
dutilisation avec le mme code HTML :
1
2
3
4

$ ( function () {
$ ( ' a : first - child ') . tooltip ({ placement : ' left ' }) ;
$ ( ' a : last - child ') . tooltip ({ placement : ' bottom ' }) ;
}) ;

Ici on utilise loption placement en la dfinissant left pour le premier lien et bottom
pour le second (voir figure 6.51).

Figure 6.51 Info-bulle au-dessous

234

INFO-BULLES ET POPOVER
Dclenchement de linfo-bulle
Par dfaut linfo-bulle est dclenche lorsque le curseur de la souris se dplace sur
llment concern ou si celui-ci a le focus. On peut modifier ce comportement avec
loption trigger. Les possibilits sont click, hover, focus et manual. Voici un exemple
dutilisation avec le mme code HTML :
1
2
3
4

$ ( function () {
$ ( ' a : first - child ') . tooltip ({ trigger : ' click ' }) ;
$ ( ' a : last - child ') . tooltip ({ placement : ' bottom ' , trigger : '
hover click ' }) ;
}) ;

Ici on utilise loption trigger en la dfinissant click pour le premier lien et hover
et click pour le second (voir figure 6.52). Testez ! http://bootstrap.twit.free.

Figure 6.52 Varit de dclenchement des info-bulles


fr/tutov3/tooltip03.html

Dlai de dclenchement de linfo-bulle


Par dfaut linfo-bulle saffiche immdiatement et disparat avec la mme clrit. On
peut modifier ce comportement avec loption delay. On peut soit dfinir un dlai
identique pour lapparition et la disparition, soit diffrencier les deux. Voici un exemple
dutilisation avec le mme code HTML :
1
2
3
4

$ ( function () {
$ ( ' a : first - child ') . tooltip ({ delay : 400 }) ;
$ ( ' a : last - child ') . tooltip ({ delay : { show : 400 , hide : 200 }
}) ;
}) ;

Ici on utilise loption delay en la dfinissant 400 ms pour le premier lien pour laffichage et la disparition. On diffrencie avec 400 ms pour laffichage et 200 ms pour la
disparition pour le second (voir figure 6.53).
Testez ! http://bootstrap.twit.free.fr/tutov3/tooltip04.html
235

CHAPITRE 6. LES PLUGINS JQUERY

Figure 6.53 Dlai de dclenchement dune info-bulle

Popover
Un exemple simple
Un popover est une grosse info-bulle. Le fonctionnement est identique ce que nous
avons vu prcdemment. Voici un premier exemple de mise en uvre au niveau HTML :
1

<a href = " # " id = " pop " class = " btn btn - info " data - toggle = " popover "
data - content = "C ' est tout simple faire ! " title = " Test du
Popover " >
Cliquez sur moi pour le popover </ a >

On utilise des balises <a> avec lattribut data-toggle gal popover. Le contenu se
place dans lattribut data-content et le titre dans lattribut title. Si vous testez ce
code, il ne se passera rien parce quil faut initialiser le plugin avec jQuery :
1
2
3

$ ( function () {
$ ( " # pop " ) . popover () ;
}) ;

Il suffit dutiliser la fonction popover avec le bon slecteur, ici on a choisi tout simplement un id. Vous verrez le rsultat la figure 6.54.

Figure 6.54 Popover dclench par un bouton

Positionnement
Comme pour linfo-bulle on peut modifier le positionnement avec loption placement
avec les mmes possibilits top (au-dessus, cest loption par dfaut), bottom (audessous), left( gauche) et right ( droite) (voir figure 6.55) :
1

$ ( " # pop " ) . popover ({ placement : ' left '}) ;

236

INFO-BULLES ET POPOVER

Figure 6.55 Popover gauche


Dlai
On peut aussi dfinir un dlai dapparition et de disparition :
1

$ ( " # pop " ) . popover ({ delay : { show : 800 , hide : 300 }}) ;

Testez ! http://bootstrap.twit.free.fr/tutov3/popover04.html
Dclenchement
Le comportement par dfaut est un dclenchement au clic sur llment, mais on peut
facilement changer ce comportement :
1

$ ( " # pop " ) . popover ({ placement : ' bottom ' , trigger : ' hover '}) ;

Ici on a utilis loption trigger pour avoir un dclenchement au passage (hover) sur
llment (les autres possibilits sont click, focus et manual). On montre aussi quon
peut cumuler plusieurs options puisquon a aussi dfini le positionnement en bas avec
bottom. Testez ! http://bootstrap.twit.free.fr/tutov3/popover03.html
Avec loption manual on peut dfinir une action quelconque pour dclencher le popover
que lon veut. Regardez cet exemple au niveau HTML :
1
2

3
4

< div class = " well " >


< img id = " img " data - toggle = " popover " data - content = " Je suis en
col re ! " title = " Attention vous ! " src = " images / visage .
png " >
<a href = " # " id = " pop " class = " btn btn - info pull - right " > Cliquer
sur moi plusieurs fois pour le popover </ a >
</ div >

Cette fois, on a dfini le popover au niveau dune image et on se propose de le dclencher


partir dun bouton. Voici le code jQuery correspondant :
1
2
3
4

$ ( " # img " ) . popover ({ trigger : ' manual '}) ;


$ ( " # pop " ) . click ( function () {
$ ( '# img ') . popover ( ' toggle ') ;
}) ;

On initialise le popover sur limage en dclenchement manuel : $("#img").popover({trigger:manua


On utilise lvnement click du bouton pour lancer la fonction popover avec toggle
comme paramtre : $(#img).popover(toggle); Vous verrez le rsultat la figure
6.56. Testez ! http://bootstrap.twit.free.fr/tutov3/popover05.html
237

CHAPITRE 6. LES PLUGINS JQUERY

Figure 6.56 Popover au niveau dune image


Du HTML dans le popover
Par dfaut, vous ne pouvez mettre que du simple texte dans le popover. Toutefois, vous
pouvez mettre loption html true pour changer ce fonctionnement (voir figure 6.57) :
1

2
3

<a href = " # " id = " pop " class = " btn btn - info " data - toggle = " popover "
data - html = " true " data - content = " <em >C ' est tout simple
faire ! </ em > "
title = " <h3 > Test du popover </ h3 > " >
Cliquez sur moi pour le popover </ a >

Figure 6.57 Du HTML dans un popover

Effet accordon
Un exemple simple
Le plugin accordon (Collapse) est bien adapt au composant panel, voici un premier
exemple (voir figure 6.58) :
1
2
3
4
5
6
7
8
9

< div class = " panel panel - default col - lg - 6 " >
< h4 > Les plugins de Bootstrap </ h4 >
< div class = " panel - heading " >
<a class = " accordion - toggle " href = " # item1 " data - toggle = "
collapse " > Accord on </ a >
</ div >
< div id = " item1 " class = " panel - collapse collapse in " >
< div class = " panel - body " > Ce plugin permet de cr er des
effets " accord on " totalement param trables </ div >
</ div >
< div class = " panel - heading " >

238

EFFET ACCORDON
10
11
12
13

14
15
16
17
18
19

20
21

<a class = " accordion - toggle " href = " # item2 " data - toggle = "
collapse " > Fen tre modale </ a >
</ div >
< div id = " item2 " class = " panel - collapse collapse " >
< div class = " panel - body " > Ce plugin permet de cr er des fen
tres modales l gantes avec une grande simplicit . </ div
>
</ div >
< div class = " panel - heading " >
<a class = " accordion - toggle " href = " # item3 " data - toggle = "
collapse " > Carousel </ a >
</ div >
< div id = " item3 " class = " panel - collapse collapse " >
< div class = " panel - body " > Ce plugin permet de faire d filer
des images ou des vid o , ou tout autre l ment m dia
avec une mise
en forme esth tique </ div >
</ div >

Figure 6.58 Effet accordon


Testez ! http://bootstrap.twit.free.fr/tutov3/collapse01.html Il faut distinguer deux lments :
Le dclencheur sur lequel on clique : ici cest un lien avec une balise <a>. Il doit comporter la classe accordion-toggle, comporter la proprit data-toggle= collapse
et videmment la cible avec href
La zone masquer ou dmasquer : elle est englobe avec un <div> quip de la
classe collapse
Le lien entre le dclencheur et la zone se fait par lidentifiant de la zone. La classe in
permet de dterminer si une zone est affiche ou pas. Dans mon exemple, jai mis cette
classe pour la premire zone, celle-ci saffiche donc ds le chargement. Si vous testez le
composant, vous verrez quil se contente daffecter cette classe. Jai un peu trich avec
lutilisation du composant panel. . .
239

CHAPITRE 6. LES PLUGINS JQUERY

Des bordures pour bien dlimiter les lments


Nous allons voir maintenant une utilisation plus complte du composant panel (voir
figure 6.59) :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

21
22
23
24
25
26
27
28
29
30

31
32
33
34

< div class = " panel - group col - lg - 6 " >


< h3 > Les plugins de Bootstrap </ h3 >
< div class = " panel panel - default " >
< div class = " panel - heading " >
< h3 class = " panel - title " >
<a class = " accordion - toggle " href = " # item1 " data - toggle
= " collapse " > Accord on </ a >
</ h3 >
</ div >
< div id = " item1 " class = " panel - collapse collapse in " >
< div class = " panel - body " > Ce plugin permet de cr er des
effets " accord on " totalement param trables </ div >
</ div >
</ div >
< div class = " panel panel - default " >
< div class = " panel - heading " >
< h3 class = " panel - title " >
<a class = " accordion - toggle " href = " # item2 " data - toggle
= " collapse " > Fen tre modale </ a >
</ h3 >
</ div >
< div id = " item2 " class = " panel - collapse collapse " >
< div class = " panel - body " > Ce plugin permet de cr er des
fen tres modales l gantes avec une grande simplicit
. </ div >
</ div >
</ div >
< div class = " panel panel - default " >
< div class = " panel - heading " >
< h3 class = " panel - title " >
<a class = " accordion - toggle " href = " # item3 " data - toggle
= " collapse " > Carousel </ a >
</ h3 >
</ div >
< div id = " item3 " class = " panel - collapse collapse " >
< div class = " panel - body " > Ce plugin permet de faire d
filer des images ou des vid o , ou tout autre l ment
m dia avec une mise
en forme esth tique </ div >
</ div >
</ div >
</ div >

Maintenant les blocs sont bien distincts. . .


240

EFFET ACCORDON

Figure 6.59 Des bordures pour distinguer les blocs

Afficher une seule zone


En gnral, lorsquon cre un effet accordon, on veut que lorsquon affiche une zone,
les autres seffacent automatiquement. Voil comment procder (rsultat la figure
6.60) :
1
2
3
4
5
6

7
8
9
10
11
12
13
14
15
16

17
18
19
20

21
22

< div id = " monaccordeon " class = " panel - group col - lg - 6 " >
< h3 > Les plugins de Bootstrap </ h3 >
< div class = " panel panel - default " >
< div class = " panel - heading " >
< h3 class = " panel - title " >
<a class = " accordion - toggle " href = " # item1 " data - parent
= " # monaccordeon " data - toggle = " collapse " > Accord on
</ a >
</ h3 >
</ div >
< div id = " item1 " class = " panel - collapse collapse in " >
< div class = " panel - body " > Ce plugin permet de cr er des
effets " accord on " totalement param trables </ div >
</ div >
</ div >
< div class = " panel panel - default " >
< div class = " panel - heading " >
< h3 class = " panel - title " >
<a class = " accordion - toggle " href = " # item2 " data - parent
= " # monaccordeon " data - toggle = " collapse " > Fen tre
modale </ a >
</ h3 >
</ div >
< div id = " item2 " class = " panel - collapse collapse " >
< div class = " panel - body " > Ce plugin permet de cr er des
fen tres modales l gantes avec une grande simplicit
. </ div >
</ div >
</ div >

241

CHAPITRE 6. LES PLUGINS JQUERY


23
24
25
26

27
28
29
30

31
32
33
34

< div class = " panel panel - default " >


< div class = " panel - heading " >
< h3 class = " panel - title " >
<a class = " accordion - toggle " href = " # item3 " data - parent
= " # monaccordeon " data - toggle = " collapse " > Carrousel
</ a >
</ h3 >
</ div >
< div id = " item3 " class = " panel - collapse collapse " >
< div class = " panel - body " > Ce plugin permet de faire d
filer des images ou des vid o , ou tout autre l ment
m dia avec une mise
en forme esth tique </ div >
</ div >
</ div >
</ div >

Il a fallu ajouter un identifiant (#monaccordeon) la balise englobante et faire une

Figure 6.60 Affichage dune seule zone la fois


rfrence dans les dclencheurs avec data-parent="#monaccordeon".

De jolies en-ttes
a fonctionne bien mais cest un peu triste sans couleur, comme on utilise le composant
panel, cest facile arranger (voir figure 6.61) :
1
2
3
4
5
6

< div id = " monaccordeon " class = " panel - group col - lg - 6 " >
< h3 > Les plugins de Bootstrap </ h3 >
< div class = " panel panel - info " >
< div class = " panel - heading " >
< h3 class = " panel - title " >
<a class = " accordion - toggle " href = " # item1 " data - parent
= " # monaccordeon " data - toggle = " collapse " > Accord on
</ a >

242

EFFET ACCORDON
7
8
9
10
11
12
13
14
15
16

17
18
19
20

21
22
23
24
25
26

27
28
29
30

31
32
33
34

</ h3 >
</ div >
< div id = " item1 " class = " panel - collapse collapse in " >
< div class = " panel - body " > Ce plugin permet de cr er des
effets " accord on " totalement param trables </ div >
</ div >
</ div >
< div class = " panel panel - info " >
< div class = " panel - heading " >
< h3 class = " panel - title " >
<a class = " accordion - toggle " href = " # item2 " data - parent
= " # monaccordeon " data - toggle = " collapse " > Fen tre
modale </ a >
</ h3 >
</ div >
< div id = " item2 " class = " panel - collapse collapse " >
< div class = " panel - body " > Ce plugin permet de cr er des
fen tres modales l gantes avec une grande simplicit
. </ div >
</ div >
</ div >
< div class = " panel panel - info " >
< div class = " panel - heading " >
< h3 class = " panel - title " >
<a class = " accordion - toggle " href = " # item3 " data - parent
= " # monaccordeon " data - toggle = " collapse " > Carrousel
</ a >
</ h3 >
</ div >
< div id = " item3 " class = " panel - collapse collapse " >
< div class = " panel - body " > Ce plugin permet de faire d
filer des images ou des vid o , ou tout autre l ment
m dia avec une mise
en forme esth tique </ div >
</ div >
</ div >
</ div >

Effet accordon sur une liste groupe


Leffet accordon nest pas limit au composant panel. On peut par exemple lutiliser
pour une liste groupe. Voici un exemple de mise en uvre (voir aussi figure 6.62) :
1
2
3
4
5

< div class = " col - sm - 3 col - md - 3 " >


< div class = " panel panel - info " >
< div class = " panel - heading " >
< h4 class = " panel - title " >
< span id = " icone " class = " glyphicon glyphicon - folder close " > </ span > <a data - toggle = " collapse " href = " # menu

243

CHAPITRE 6. LES PLUGINS JQUERY

Figure 6.61 Des en-ttes esthtiques

6
7
8
9
10
11
12
13
14
15
16
17
18
19

" > Contenu </ a >


</ h4 >
</ div >
< ul id = " menu " class = " list - group collapse in " >
< li class = " list - group - item " > < span class = " glyphicon
glyphicon - pencil text - primary " > </ span >
<a href = " # " > Articles </ a > </ li >
< li class = " list - group - item " > < span class = " glyphicon
glyphicon - tag text - primary " > </ span >
<a href = " # " > Nouvelles </ a > </ li >
< li class = " list - group - item " > < span class = " glyphicon
glyphicon - file text - primary " > </ span >
<a href = " # " >
Lettre d ' information </ a > </ li >
< li class = " list - group - item " > < span class = " glyphicon
glyphicon - comment text - success " > </ span >
<a class = " text - success " href = " # " > Commentaires </ a > < span class = "
badge " > 28 </ span > </ li >
</ ul >
</ div >
</ div >

Figure 6.62 Effet accordon sur une liste groupe


244

EFFET ACCORDON

Commande en Javascript
On peut activer ce plugin avec Javascript et lancer des commandes sur nimporte quel
lment. Voici un exemple (rsultat la figure 6.63) :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

< div class = " container " >


< div class = " col - lg - 6 " >
< div class = " btn - group btn - group - justified " data - toggle = "
buttons " >
< label class = " btn btn - primary active " id = " show " >
< input type = " radio " name = " options " > Show
</ label >
< label class = " btn btn - primary " id = " hide " >
< input type = " radio " name = " options " > Hide
</ label >
< label class = " btn btn - primary " id = " toggle " >
< input type = " radio " name = " options " > Toggle
</ label >
</ div >
< div class = " panel panel - info " >
< div class = " panel - heading " >
< h3 class = " panel - title " > Je suis le titre de l ' accord
on </ h3 >
</ div >
< div class = " panel - body " > Je suis le contenu de l ' accord
on </ div >
</ div >
</ div >
</ div >
< script src = " assets / js / jquery . js " > </ script >
< script src = " assets / js / bootstrap . min . js " > </ script >
< script type = " text / javascript " >
$ ( function () {
$ ( '. panel ') . collapse () ;
$ ( '# show , # hide , # toggle ') . click ( function () {
$ ( '. panel ') . collapse ( $ ( this ) . attr ( ' id ') ) ;
}) ;
}) ;
</ script >

Figure 6.63 Utilisation de Javascript


245

CHAPITRE 6. LES PLUGINS JQUERY


Testez ! http://bootstrap.twit.free.fr/tutov3/collapse04a.html Leffet accordon est ici appliqu sur la <div> qui contient la classe panel. Le plugin est activ avec
la mthode collapse. Ensuite une action sur lun des trois boutons lance la commande
correspondante : show, hide ou toggle. Pour rendre le code plus concis, jai fait en sorte
que lidentifiant des boutons corresponde au nom dune commande.

Utilisation des vnements


Il y a plusieurs vnements utilisables pour ce composant :
vnement
show.bs.collapse
shown.bs.collapse
hide.bs.collapse
hidden.bs.collapse

Description
Se dclenche ds lappel la mthode show
Se dclenche lorsque la zone devient visible
Se dclenche ds lappel la mthode hide
Se dclenche lorsque la zone est masque

Voici un exemple dutilisation de lvnement shown.bs.collapse (voir aussi la


figure 6.64) :
1
2
3
4
5
6
7

8
9
10
11

12
13
14
15
16
17

18
19
20
21

< div class = " container " >


< div id = " monaccordeon " class = " panel - group col - lg - 6 " >
< h3 > Les plugins de Bootstrap </ h3 >
< div class = " panel panel - info " >
< div class = " panel - heading " >
< h3 class = " panel - title " >
<a class = " accordion - toggle " href = " # item1 " data parent = " # monaccordeon " data - toggle = " collapse " >
Accord on </ a >
</ h3 >
</ div >
< div id = " item1 " class = " panel - collapse collapse in " >
< div class = " panel - body " > Ce plugin permet de cr er
des effets " accord on " totalement param trables </
div >
</ div >
</ div >
< div class = " panel panel - info " >
< div class = " panel - heading " >
< h3 class = " panel - title " >
<a class = " accordion - toggle " href = " # item2 " data parent = " # monaccordeon " data - toggle = " collapse " >
Fen tre modale </ a >
</ h3 >
</ div >
< div id = " item2 " class = " panel - collapse collapse " >
< div class = " panel - body " > Ce plugin permet de cr er
des fen tres modales l gantes avec une grande
simplicit . </ div >

246

EFFET ACCORDON
22
23
24
25
26
27

28
29
30
31

32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53

</ div >


</ div >
< div class = " panel panel - info " >
< div class = " panel - heading " >
< h3 class = " panel - title " >
<a class = " accordion - toggle " href = " # item3 " data parent = " # monaccordeon " data - toggle = " collapse " >
Carrousel </ a >
</ h3 >
</ div >
< div id = " item3 " class = " panel - collapse collapse " >
< div class = " panel - body " > Ce plugin permet de faire d
filer des images ou des vid o , ou tout autre l
ment m dia avec une mise
en forme esth tique </ div >
</ div >
</ div >
< br >
< div id = " affichage " > < span class = " label label - warning " >"
Accord on " a t affich ! </ span > </ div >
</ div >
</ div >
< script src = " assets / js / jquery . js " > </ script >
< script src = " assets / js / bootstrap . min . js " > </ script >
< script >
$ ( function () {
$ ( " # item1 " ) . on ( " shown . bs . collapse " , function () {
$ ( " # affichage " ) . html ( ' < span class = " label label - warning " >"
Accord on " a t affich ! </ span > ') ;
})
$ ( " # item2 " ) . on ( " shown . bs . collapse " , function () {
$ ( " # affichage " ) . html ( ' < span class = " label label - warning " >"
Fen tre modale " a t affich ! </ span > ') ;
})
$ ( " # item3 " ) . on ( " shown . bs . collapse " , function () {
$ ( " # affichage " ) . html ( ' < span class = " label label - warning " >"
Carrousel " a t affich ! </ span > ') ;
})
}) ;
</ script >

Testez ! http://bootstrap.twit.free.fr/tutov3/collapse05.html
Voyons prsent un second exemple, en reprenant leffet accordon sur une liste groupe
vu plus haut. Il serait trs esthtique de modifier licne en fonction de la visibilit de
la liste. Il suffit de modifier lgrement le code en identifiant la liste et en ajoutant un
peu de Javascript (rsultat la figure 6.65) :
1
2
3

< div class = " container " >


< div class = " row " >
< div class = " col - sm - 3 col - md - 3 " >

247

CHAPITRE 6. LES PLUGINS JQUERY

Figure 6.64 Utilisation des vnements

4
5
6
7

8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

< div class = " panel panel - info " >


< div class = " panel - heading " >
< h4 class = " panel - title " >
< span id = " icone " class = " glyphicon glyphicon - folder open " > </ span > <a data - toggle = " collapse " href = " #
menu " > Contenu </ a >
</ h4 >
</ div >
< ul id = " menu " class = " list - group collapse in " >
< li class = " list - group - item " > < span class = " glyphicon
glyphicon - pencil text - primary " > </ span >
<a href = " # " > Articles </ a > </ li >
< li class = " list - group - item " > < span class = " glyphicon
glyphicon - tag text - primary " > </ span >
<a href = " # " > Nouvelles </ a > </ li >
< li class = " list - group - item " > < span class = " glyphicon
glyphicon - file text - primary " > </ span >
<a href = " # " > Lettre d ' information </ a > </ li >
< li class = " list - group - item " > < span class = " glyphicon
glyphicon - comment text - success " > </ span >
<a class = " text - success " href = " # " > Commentaires </ a > < span class = "
badge " > 28 </ span > </ li >
</ ul >
</ div >
</ div >
</ div >
</ div >
< script src = " assets / js / jquery . js " > </ script >
< script src = " assets / js / bootstrap . min . js " > </ script >
< script >
$ ( function () {
$ ( '# menu ') . on ( ' shown . bs . collapse ' , function () {
$ ( '# icone ') . removeClass ( ' glyphicon - folder - close ') .

248

EFFET ACCORDON

30
31
32
33
34
35

addClass ( ' glyphicon - folder - open ') ;


})
$ ( '# menu ') . on ( ' hidden . bs . collapse ' , function () {
$ ( '# icone ') . removeClass ( ' glyphicon - folder - open ') . addClass
( ' glyphicon - folder - close ') ;
})
}) ;
</ script >

Figure 6.65 Les deux tats de la liste avec changement de licne


Testez ! http://bootstrap.twit.free.fr/tutov3/collapse06a.html

Une barre de navigation rtractable


Une utilisation du composant accordon consiste rendre une barre de navigation rtractable selon la dimension de laffichage, en dautres termes de la rendre responsive.
Nous lavons fait pour la page dexemple (voir la figure 6.66).

Figure 6.66 Barre de navigation rtractable dans la page dexemple


Testez ! http://bootstrap.twit.free.fr/tutov3/base13.html Voici la partie du
code concerne :
1
2
3
4
5
6
7
8

< nav class = " navbar navbar - inverse " >


< div class = " navbar - header " >
< button type = " button " class = " navbar - toggle " data - toggle = "
collapse " data - target = " . navbar - collapse " >
< span class = " icon - bar " > </ span >
< span class = " icon - bar " > </ span >
< span class = " icon - bar " > </ span >
</ button >
<a class = " navbar - brand " href = " # " > Les Tigres </ a >

249

CHAPITRE 6. LES PLUGINS JQUERY


9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

31
32
33
34
35

</ div >


< div class = " collapse navbar - collapse " >
< ul class = " nav navbar - nav " >
< li > <a href = " # " > Accueil </ a > </ li >
< li class = " dropdown " >
<a class = " dropdown - toggle " data - toggle = " dropdown " href =
" # " >T moignages <b class = " caret " > </ b > </ a >
< ul class = " dropdown - menu " >
< li > <a href = " # " > Dompteurs </ a > </ li >
< li > <a href = " # " > Zoos </ a > </ li >
< li > <a href = " # " > Chasseurs </ a > </ li >
< li class = " divider " > </ li >
< li > <a href = " # " > Autres t moignages </ a > </ li >
</ ul >
</ li >
< li > <a href = " # " > Liens </ a > </ li >
< li > <a href = " # " >R f rences </ a > </ li >
</ ul >
< form class = " navbar - form navbar - right " >
< div class = " input - group " >
< input type = " text " style = " width : 150px " class = " input - sm
form - control " placeholder = " Recherche " >
< span class = " input - group - btn " >
< button type = " submit " class = " btn btn - primary btn - sm
" > < span class = " glyphicon glyphicon - eye - open " > </
span > Chercher </ button >
</ span >
</ div >
</ form >
</ div >
</ nav >

On ajoute un bouton charg de commander leffet accordon aux lignes 3 7. Ensuite


on englobe tout ce qui doit subir leffet avec les classes collapse et navbar-collapse.
Par dfaut le point de transition (cest--dire de dclenchement de leffet) se produit
lorsque laffichage est infrieur 768 pixels. Il est possible de changer ce point de
transition en modifiant le fichier LESS de Bootstrap. Nous verrons dans un prochain
chapitre comment justement modifier Bootstrap pour ladapter nos besoins.

Le Scrollspy
Mise en page avec le Scrollspy
Ce plugin permet de relier automatiquement des lments de navigation avec des zones
HTML en utilisant un dfilement. Comme un exemple est souvent bien plus efficace
quune explication, surtout pour ce genre de fonctionnement, voici un style de mise en
page de plus en plus utilis sur les sites (voir aussi figure 6.67) :
250

LE SCROLLSPY
1
2
3
4
5
6
7

<! DOCTYPE HTML >


< html >
< head >
< meta charset = " utf - 8 " >
< link href = " assets / css / bootstrap . css " rel = " stylesheet " >
</ head >
< body data - spy = " scroll " data - target = " . navbar " >

8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

< div class = " container - fluid " >


< nav class = " navbar navbar - default navbar - fixed - top " >
< div class = " navbar - header " >
< button type = " button " data - target = " . navbar - collapse " data
- toggle = " collapse " class = " navbar - toggle " >
< span class = " icon - bar " > </ span >
< span class = " icon - bar " > </ span >
< span class = " icon - bar " > </ span >
</ button >
<a href = " # " class = " navbar - brand " > La boutique en d lire </ a
>
</ div >
< div class = " collapse navbar - collapse " >
< ul class = " nav navbar - nav " >
< li class = " active " > <a href = " # accueil " > Accueil </ a > </ li >
< li > <a href = " # produits " > Produits </ a > </ li >
< li > <a href = " # nouvelles " > Nouvelles </ a > </ li >
< li > <a href = " # localisation " > Localisation </ a > </ li >
</ ul >
</ div >
</ nav >

28
29
30
31
32

33

34

35

36

37

< div class = " jumbotron " id = " accueil " >
< div class = " container " >
< h1 class = " well " > Bienvenue dans notre espace ! </ h1 >
<p >" Sed ut perspiciatis unde omnis iste natus error sit
voluptatem accusantium doloremque laudantium , totam
rem aperiam ,
eaque ipsa quae ab illo inventore veritatis et quasi
architecto beatae vitae dicta sunt explicabo . Nemo enim
ipsam voluptatem
quia voluptas sit aspernatur aut odit aut fugit , sed quia
consequuntur magni dolores eos qui ratione voluptatem sequi
nesciunt .
Neque porro quisquam est , qui dolorem ipsum quia dolor sit
amet , consectetur , adipisci velit , sed quia non numquam
eius modi
tempora incidunt ut labore et dolore magnam aliquam quaerat
voluptatem . Ut enim ad minima veniam , quis nostrum
exercitationem
ullam corporis suscipit laboriosam , nisi ut aliquid ex ea
commodi consequatur ? Quis autem vel eum iure reprehenderit

251

CHAPITRE 6. LES PLUGINS JQUERY


qui in ea
voluptate velit esse quam nihil molestiae consequatur , vel
illum qui dolorem eum fugiat quo voluptas nulla pariatur ? "
</ p >
</ div >
</ div >

38
39
40
41
42
43
44
45
46

47

48

49

50

51

52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68

< div class = " jumbotron " id = " produits " >
< div class = " container " >
< h1 class = " well " > Nos produits attractif ! </ h1 >
<p >" Sed ut perspiciatis unde omnis iste natus error sit
voluptatem accusantium doloremque laudantium , totam
rem aperiam ,
eaque ipsa quae ab illo inventore veritatis et quasi architecto
beatae vitae dicta sunt explicabo . Nemo enim ipsam
voluptatem
quia voluptas sit aspernatur aut odit aut fugit , sed quia
consequuntur magni dolores eos qui ratione voluptatem sequi
nesciunt .
Neque porro quisquam est , qui dolorem ipsum quia dolor sit
amet , consectetur , adipisci velit , sed quia non numquam
eius modi
tempora incidunt ut labore et dolore magnam aliquam quaerat
voluptatem . Ut enim ad minima veniam , quis nostrum
exercitationem
ullam corporis suscipit laboriosam , nisi ut aliquid ex ea
commodi consequatur ? Quis autem vel eum iure reprehenderit
qui in ea
voluptate velit esse quam nihil molestiae consequatur , vel
illum qui dolorem eum fugiat quo voluptas nulla pariatur ? "
</ p >
< hr >
< div class = " row " >
< div class = " well " >
< div class = " row " >
< div class = " col - sm - 4 " >
< button type = " button " class = " btn btn - primary btn lg btn - block " >
< span class = " glyphicon glyphicon - wrench " > </ span
> < br > Outillage
</ button >
</ div >
< div class = " col - sm - 4 " >
< button type = " button " class = " btn btn - primary btn lg btn - block " >
< span class = " glyphicon glyphicon - fire " > </ span > < br
> Incendie
</ button >
</ div >
< div class = " col - sm - 4 " >

252

LE SCROLLSPY
69
70
71
72
73
74
75
76
77
78

< button type = " button " class = " btn btn - primary btn lg btn - block " >
< span class = " glyphicon glyphicon - home " > </ span > < br
> Habitation
</ button >
</ div >
</ div >
</ div >
</ div >
< hr >
</ div >
</ div >

79
80
81
82
83

84

85

86

87

88

89
90
91
92
93
94
95
96
97
98
99
100
101

< div class = " jumbotron " id = " nouvelles " >
< div class = " container " >
< h1 class = " well " > Les nouvelles de nos activit s ! </ h1 >
<p >" Sed ut perspiciatis unde omnis iste natus error sit
voluptatem accusantium doloremque laudantium , totam
rem aperiam , eaque ipsa
quae ab illo inventore veritatis et quasi architecto beatae
vitae dicta sunt explicabo . Nemo enim ipsam voluptatem quia
voluptas sit
aspernatur aut odit aut fugit , sed quia consequuntur magni
dolores eos qui ratione voluptatem sequi nesciunt . Neque
porro quisquam est ,
qui dolorem ipsum quia dolor sit amet , consectetur , adipisci
velit , sed quia non numquam eius modi tempora incidunt ut
labore et dolore
magnam aliquam quaerat voluptatem . Ut enim ad minima veniam ,
quis nostrum exercitationem ullam corporis suscipit
laboriosam , nisi ut
aliquid ex ea commodi consequatur ? Quis autem vel eum iure
reprehenderit qui in ea voluptate velit esse quam nihil
molestiae consequatur ,
vel illum qui dolorem eum fugiat quo voluptas nulla pariatur ? "
</ p >
< hr >
< div class = " row " >
< div class = " well " >
< div class = " row " >
< div class = " col - sm - 4 " >
< button type = " button " class = " btn btn - info btn - lg
btn - block " >
< span class = " glyphicon glyphicon - wrench " > </ span
> < br > Outillage
</ button >
</ div >
< div class = " col - sm - 4 " >
< button type = " button " class = " btn btn - info btn - lg
btn - block " >

253

CHAPITRE 6. LES PLUGINS JQUERY


< span class = " glyphicon glyphicon - fire " > </ span > < br
> Incendie
</ button >
</ div >
< div class = " col - sm - 4 " >
< button type = " button " class = " btn btn - info btn - lg
btn - block " >
< span class = " glyphicon glyphicon - home " > </ span > < br
> Habitation
</ button >
</ div >
</ div >
</ div >
</ div >
< hr >
</ div >
</ div >

102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120

121

122

123

124

125

126
127
128
129
130
131
132
133

< div class = " jumbotron " id = " localisation " >
< div class = " container " >
< h1 class = " well " >L ' emplacement de nos boutiques ! </ h1 >
<p >" Sed ut perspiciatis unde omnis iste natus error sit
voluptatem accusantium doloremque laudantium , totam
rem aperiam ,
eaque ipsa quae ab illo inventore veritatis et quasi
architecto beatae vitae dicta sunt explicabo . Nemo enim
ipsam voluptatem
quia voluptas sit aspernatur aut odit aut fugit , sed quia
consequuntur magni dolores eos qui ratione voluptatem sequi
nesciunt .
Neque porro quisquam est , qui dolorem ipsum quia dolor sit
amet , consectetur , adipisci velit , sed quia non numquam
eius modi
tempora incidunt ut labore et dolore magnam aliquam quaerat
voluptatem . Ut enim ad minima veniam , quis nostrum
exercitationem
ullam corporis suscipit laboriosam , nisi ut aliquid ex ea
commodi consequatur ? Quis autem vel eum iure reprehenderit
qui in ea
voluptate velit esse quam nihil molestiae consequatur , vel
illum qui dolorem eum fugiat quo voluptas nulla pariatur ? "
</ p >
< hr >
< div class = " row " >
< div class = " well " >
< div class = " row " >
< div class = " col - sm - 4 " >
< button type = " button " class = " btn btn - warning btn lg btn - block " >

254

LE SCROLLSPY
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152

< span class = " glyphicon glyphicon - wrench " > </ span
> < br > Outillage
</ button >
</ div >
< div class = " col - sm - 4 " >
< button type = " button " class = " btn btn - warning btn lg btn - block " >
< span class = " glyphicon glyphicon - fire " > </ span > < br
> Incendie
</ button >
</ div >
< div class = " col - sm - 4 " >
< button type = " button " class = " btn btn - warning btn lg btn - block " >
< span class = " glyphicon glyphicon - home " > </ span > < br
> Habitation
</ button >
</ div >
</ div >
</ div >
</ div >
< hr >
</ div >
</ div >

153
154
155
156
157
158

</ div >


< script src = " assets / js / jquery . js " > </ script >
< script src = " assets / js / bootstrap . min . js " > </ script >
</ body >
</ html >

Figure 6.67 Mise en page avec le Scrollspy


255

CHAPITRE 6. LES PLUGINS JQUERY


Testez ! http://bootstrap.twit.free.fr/tutov3/scrollspy01.html Le principe est
simple. Il faut mettre en uvre le plugin avec lattribut data-spy="scroll" et on
pointe la navigation avec data-target :
1

< body data - spy = " scroll " data - target = " . navbar " >

Ensuite on cre la navigation qui pointe des zones faire apparatre sans ajout dautres
classes, le fonctionnement est automatique.

Un mouvement fluide
Lexemple fonctionne correctement, mais on peut regretter la brutalit du mouvement.
La zone demande saffiche spontanment et on ne comprend pas vraiment quil se
produit un dfilement. Il serait plus lgant davoir un mouvement fluide pour passer
dune zone une autre. Ce nest pas prvu au niveau du plugin, mais avec quelques
lignes de Javascript on peut raliser cela :
1
2
3
4
5
6

$ ( function () {
$ ( ' li >a ') . click ( function () {
var pos = $ ( $ ( this ) . attr ( ' href ') ) . offset () . top ;
$ ( ' body , html ') . animate ({ scrollTop : pos } , 1000 ) ;
})
}) ;

Testez ! http://bootstrap.twit.free.fr/tutov3/scrollspy02.html

Activation par Javascript


On a vu dans lexemple que le plugin peut tre simplement mis en uvre avec un attribut data . Il est aussi possible de le faire en Javascript. Pour tester cette possibilit,
il faut retirer les attributs de la balise body et ajouter cette ligne de Javascript :
1

$ ( ' body ') . scrollspy ({ target : '. navbar ' }) ;

Testez ! http://bootstrap.twit.free.fr/tutov3/scrollspy03.html Vous disposez


aussi de lvnement activate.bs.scrollspy qui est dclench lorsquune nouvelle
zone est affiche. Lutilit de cet vnement ne saute pas aux yeux, mais si vous en
avez ventuellement besoin la syntaxe est la suivante :
1
2
3

$ ( '# monScrollspy ') . on ( ' activate . bs . scrollspy ' , function () {


// Ici je fais quelque chose ...
})

En rsum
Bootstrap propose un collection de plugins jQuery faciles mettre en uvre.
256

LE SCROLLSPY
Les menus droulants permettent laffichage de liens textuels, auxquels on peut adjoindre des icnes et des en-ttes. Ils peuvent sintgrer une barre de navigation ou
un bouton. On peut raliser des sous-menus en ajoutant quelques styles au framework.
Les fentres modales permettent de faire apparatre des informations. Elles peuvent
comporter un titre, un contenu et un bas de page. On peut mme y injecter une page
HTML.
Les onglets permettent sur un mme espace dafficher au choix plusieurs informations
avec un simple clic. Les onglets sont faciles organiser : horizontaux, empils, droite
ou gauche, simple liens ou boutons. On peut aussi intgrer un menu droulant dans
un onglet.
On peut crer des boutons bascule , ou avec effet radio ou checkbox , ou
pour attente de fin dun processus.
Le carrousel permet de faire dfiler des images avec possibilit dajouter une lgende
par image, des boutons de dfilement et de rgler la vitesse de dfilement.
Les info-bulles permettent de faire apparatre un petit texte informatif en survolant
un lment, les pop-overs galement mais autorisent un contenu plus riche.
Leffet accordon permet de faire apparatre ou disparatre une zone de la page. Il
est possible dajouter des en-ttes et dintgrer des listes groupes. On lutilise en
particulier pour rendre une barre de navigation rtractable.
Le Scrollspy permet de relier automatiquement des lments de navigation avec des
zones HTML en utilisant un dfilement. Il est de plus en plus utilis sur les sites web.

257

CHAPITRE 6. LES PLUGINS JQUERY

258

Chapitre

Configurer Bootstrap
Difficult :
Utiliser directement ce que nous offre Bootstrap cest bien, mais le modifier pour le rendre
exactement adapt nos besoins cest encore mieux. Alors, si vous voulez bidouiller Bootstrap, ce chapitre est fait pour vous !

259

CHAPITRE 7. CONFIGURER BOOTSTRAP

Configuration simplifie
Une page dexemple
Supposons que nous voulions crer un site avec une certaine prsentation. Quelque
chose de simple, parce que je veux juste vous montrer le principe de la configuration.
Voici le code HTML de base :
1
2

<! DOCTYPE HTML >


< html >

3
4
5
6
7

< head >


< meta charset = " utf - 8 " >
< link href = " assets / css / bootstrap . min . css " rel = " stylesheet " >
</ head >

8
9
10
11
12
13
14
15
16
17
18
19

20
21
22
23
24
25
26
27
28
29
30
31

32

260

< body >


< div class = " container " >
< header class = " row col - sm - 12 " >
< div class = " page - header " >
< h1 > Mon beau site < img src = " images / papillon . png " class
= " pull - right " > </ h1 >
</ div >
</ header >
< div class = " row col - sm - 12 " >
< nav class = " col - sm - 2 " >
< ul class = " nav nav - pills nav - stacked " >
< li class = " active " > <a href = " # " > < span class = "
glyphicon glyphicon - home " > </ span > Accueil </ a > <
/ li >
< li > <a href = " # " > < span class = " glyphicon glyphicon book " > </ span > Livres </ a > </ li >
< li > <a href = " # " > < span class = " glyphicon glyphicon facetime - video " > </ span > Films </ a > </ li >
< li > <a href = " # " > < span class = " glyphicon glyphicon headphones " > </ span > Musiques </ a > </ li >
</ ul >
</ nav >
< section class = " col - sm - 10 " >
< div class = " panel panel - default " >
< div class = " panel - heading " >
< h3 class = " panel - title " > Bienvenue sur mon site ! <
/ h3 >
</ div >
< div class = " panel - body " >
<p >" Sed ut perspiciatis unde omnis iste natus
error sit voluptatem accusantium doloremque
laudantium , totam rem aperiam ,
eaque ipsa quae ab illo inventore veritatis et quasi architecto
beatae vitae dicta sunt explicabo . Nemo enim ipsam

CONFIGURATION SIMPLIFIE

33

34

35

36

37
38

39

40

41

42

43

44
45

46

47

48

49

voluptatem quia voluptas


sit aspernatur aut odit aut fugit , sed quia consequuntur magni
dolores eos qui ratione voluptatem sequi nesciunt . Neque
porro quisquam est ,
qui dolorem ipsum quia dolor sit amet , consectetur , adipisci
velit , sed quia non numquam eius modi tempora incidunt ut
labore et dolore
magnam aliquam quaerat voluptatem . Ut enim ad minima veniam ,
quis nostrum exercitationem ullam corporis suscipit
laboriosam , nisi ut
aliquid ex ea commodi consequatur ? Quis autem vel eum iure
reprehenderit qui in ea voluptate velit esse quam nihil
molestiae consequatur ,
vel illum qui dolorem eum fugiat quo voluptas nulla pariatur ? " <
/p>
<p >" Sed ut perspiciatis unde omnis iste natus
error sit voluptatem accusantium doloremque
laudantium , totam rem aperiam ,
eaque ipsa quae ab illo inventore veritatis et quasi architecto
beatae vitae dicta sunt explicabo . Nemo enim ipsam
voluptatem quia
voluptas sit aspernatur aut odit aut fugit , sed quia
consequuntur magni dolores eos qui ratione voluptatem sequi
nesciunt . Neque porro
quisquam est , qui dolorem ipsum quia dolor sit amet ,
consectetur , adipisci velit , sed quia non numquam eius modi
tempora incidunt ut
labore et dolore magnam aliquam quaerat voluptatem . Ut enim ad
minima veniam , quis nostrum exercitationem ullam corporis
suscipit
laboriosam , nisi ut aliquid ex ea commodi consequatur ? Quis
autem vel eum iure reprehenderit qui in ea voluptate velit
esse quam nihil
molestiae consequatur , vel illum qui dolorem eum fugiat quo
voluptas nulla pariatur ? " </ p >
<p >" Sed ut perspiciatis unde omnis iste natus
error sit voluptatem accusantium doloremque
laudantium , totam rem aperiam ,
eaque ipsa quae ab illo inventore veritatis et quasi architecto
beatae vitae dicta sunt explicabo . Nemo enim ipsam
voluptatem quia
voluptas sit aspernatur aut odit aut fugit , sed quia
consequuntur magni dolores eos qui ratione voluptatem sequi
nesciunt . Neque porro
quisquam est , qui dolorem ipsum quia dolor sit amet ,
consectetur , adipisci velit , sed quia non numquam eius modi
tempora incidunt ut
labore et dolore magnam aliquam quaerat voluptatem . Ut enim ad
minima veniam , quis nostrum exercitationem ullam corporis
suscipit

261

CHAPITRE 7. CONFIGURER BOOTSTRAP


laboriosam , nisi ut aliquid ex ea commodi consequatur ? Quis
autem vel eum iure reprehenderit qui in ea voluptate velit
esse quam
nihil molestiae consequatur , vel illum qui dolorem eum fugiat
quo voluptas nulla pariatur ? " </ p >
</ div >
</ div >
</ section >
</ div >
< footer class = " row col - sm - 12 " >
< div class = " panel panel - body " >
<p > Tous droits r serv s par moi ... </ p >
</ div >
</ footer >
</ div >
</ body >

50

51
52
53
54
55
56
57
58
59
60
61
62
63
64

</ html >

La page est organise en 4 parties :


1. bannire suprieure
2. menu gauche
3. contenu droite
4. pied de page en bas
Bootstrap permet de raliser cette mise en page avec facilit. La mise en forme effectue
par Bootstrap donne la figure 7.1.

Figure 7.1 Une page dexemple


Testez ! http://bootstrap.twit.free.fr/tutov3/config01.html
Cest dj pas si mal, mais on va amliorer la prsentation avec du style :
1
2

body {
background - color :# bbb ;

262

CONFIGURATION SIMPLIFIE
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

36
37
38
39

color :# 048 ;
font - size : 12px ;
line - height : 16px ;

}
a {
color : # 028 ;
}
footer {
text - align : center ;
}
nav {
background - color :# bcd ;
border - radius : 8px ;
padding : 0 ! important ;
border : 1px solid # ddd ;
margin - bottom : 20px ;
}
section {
padding - right : 0 ! important ;
}
. panel {
background - color : # bcd ;
border - radius : 8px ;
padding - bottom : 5px ;
}
h1 {
text - shadow : 4px 4px 5px # 777 ;
color : # 449 ;
}
. nav > li > a : hover , . nav > li > a : focus {
background - color : # cde ;
}
. panel - default > . panel - heading , . nav - pills > li . active > a , .
nav - pills > li . active > a : hover , . nav - pills > li . active > a :
focus {
color : # 048 ;
background - color : # abc ;
border - radius : 8px ;
}

Ce qui nous donne la figure 7.10.


Testez ! http://bootstrap.twit.free.fr/tutov3/config02.html
Avec une raction correcte quand on rduit laffichage au-dessous de 768 pixels, comme
le montre la figure 7.3.
Jai profit de loccasion pour montrer comment crer facilement un menu vertical
lgant avec Bootstrap. Mais ce qui va nous intresser concerne les styles. Parce que
toute une partie de la stylisation est en fait une modification des paramtrages de base
de Bootstrap. Jai chang la couleur de fond, la couleur de premier plan, la couleur
263

CHAPITRE 7. CONFIGURER BOOTSTRAP

Figure 7.2 La mme page stylise

Figure 7.3 Effet de la rduction de laffichage


264

CONFIGURATION SIMPLIFIE
des liens, la taille des caractres. . . On peut se demander sil nest pas plus simple de
modifier directement Bootstrap. . .

Configurer en ligne sur le site de Bootstrap


Les composants
Allez sur cette page - http://getbootstrap.com/customize/. Vous trouvez un grand
formulaire qui vous permet de mettre Bootstrap non seulement votre sauce ct prsentation, mais aussi de confectionner un fichier le plus lger possible. Vous slectionnez
les composants que vous utilisez. Pour la page dexemple, cela ressemble la figure 7.4.

Figure 7.4 Composants slectionns pour la page dexemple


Comme on nutilise aucun plugin jQuery, on dcoche tout avec le bouton Toggle all
(voir figure 7.5).
On ne tient pas compte pour le moment des variables LESS. Il ny a plus qu cliquer
sur le bouton pour obtenir un Bootstrap personnalis.
On obtient 2 fichiers : bootstrap.css et bootstrap.min.css. Il psent respectivement
49 Ko et 40 Ko, alors que les versions compltes font 122 Ko et 101 Ko. La diffrence
265

CHAPITRE 7. CONFIGURER BOOTSTRAP

Figure 7.5 Tous les composants jQuery dslectionns


est loin dtre ngligeable ! Il faut quand mme vrifier que la page fonctionne encore
correctement.

Les variables
Il est possible daller plus loin dans la personnalisation. Regardons les variables disponibles. Par exemple dans les variables du scaffolding, sur la mme page de configuration,
on trouve celle qui concerne la couleur de fond de la page @body-bg (voir figure 7.6).

Figure 7.6 La variable @body-bg


Par dfaut, cette valeur est fixe #fff, autrement dit la couleur blanche. Or pour ma
page, il me faut la valeur #bbb. Je peux donc changer la valeur ce niveau, je naurai
ainsi plus besoin de fixer cette proprit dans ma feuille de style personnelle. Quelles
autres variables sont intressantes dans le cas de notre page ? Je trouve par exemple la
variable @text-color (voir figure 7.7).
Je peux la fixer #048. On va en rester l pour cet exemple, et crer un nouveau fichier
Bootstrap avec ce paramtrage. On compile le fichier, on le tlcharge et on lui donne
un nouveau nom :
266

CONFIGURATION SIMPLIFIE

Figure 7.7 La variable @text-color


1

< link href = " assets / css / bootstrap . min . v1_1 . css " rel = " stylesheet "
>

Il faut aussi supprimer les styles devenus redondants :


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

body {
/* background - color :# bbb ;
color :# 048 ; */
font - size : 12px ;
line - height : 16px ;
}
a {
color : # 028 ;
}
footer {
text - align : center ;
}
nav {
background - color :# bcd ;
border - radius : 8px ;
padding : 0 ! important ;
border : 1px solid # ddd ;
margin - bottom : 20px ;
}
section {
padding - right : 0 ! important ;
}
. panel {
background - color : # bcd ;
border - radius : 8px ;
padding - bottom : 5px ;
}
h1 {
text - shadow : 4px 4px 5px # 777 ;
color : # 449 ;
}
. nav > li > a : hover , . nav > li > a : focus {
background - color : # cde ;
}
. panel - default > . panel - heading , . nav - pills > li . active > a , .
nav - pills > li . active > a : hover , . nav - pills > li . active > a :
focus {

267

CHAPITRE 7. CONFIGURER BOOTSTRAP


36
37
38
39

color : # 048 ;
background - color : # abc ;
border - radius : 8px ;

Testez ! http://bootstrap.twit.free.fr/tutov3/config02b.html
On obtient le mme rsultat. On peut videmment se demander lintrt de procder
ainsi pour gagner juste quelques rgles de style. Cest effectivement se donner bien du
mal pour pas grand chose. En revanche, cette dmarche peut devenir intressante dans
le cadre de la cration dun thme spcifique avec beaucoup de rglages de variables.

LESS, un langage de style dynamique


Bootstrap est totalement paramtrable parce quil est bas sur LESS - http://lesscss.
org/. Cest un langage qui permet dtendre les possibilits du CSS avec des variables,
des oprations, des fonctions. La version 3.1 de Bootstrap a vu galement larrive trs
attendue dun portage sur Sass - http://sass-lang.com/, qui est un autre langage
qui permet de grer le CSS. Pour le moment, celui-ci se situe part sur une page
GitHub - https://github.com/twbs/bootstrap-sass.
Faisons prsent un petit passage en revue des possibilits de LESS. . .

Les sources des fichiers LESS de Bootstrap


Vous pouvez trouver les sources LESS de Bootstrap dans le pack que vous tlchargez sur le site - http://getbootstrap.com/getting-started/#download (voir figure
7.8).

Figure 7.8 Le dossier des fichiers LESS de Bootstrap


Nous allons les prendre comme exemple pour illustrer les possibilits de LESS.

Des variables
Une des principales fonctionnalit de LESS est de permettre la cration de variables et
dainsi centraliser les valeurs et faciliter les modifications. Ouvrez le fichier variables.less
268

LESS, UN LANGAGE DE STYLE DYNAMIQUE


qui dfinit la valeur de toutes les variables utilises par Bootstrap. En voici un extrait :
1
2
3

...
// Buttons
// - - - - - - - - - - - - - - - - - - - - - - - - -

4
5

@btn - font - weight :

normal ;

@btn - default - color :


@btn - default - bg :
@btn - default - border :
...

# 333 ;
# fff ;
# ccc ;

6
7
8
9
10

Une variable est dclare avec une syntaxe simple : il suffit dutiliser le caractre @
suivi du nom de la variable, par exemple on a ici la variable @btn-default-color.
Une variable prend une valeur, ici la variable @btn-default-color a la valeur #333.
On peut ensuite utiliser cette variable pour affecter la valeur correspondante. Ouvrez
le fichier buttons.less et trouvez ces lignes :
1
2
3
4
5
6

. btn {
...
& : focus {
color : @btn - default - color ;
text - decoration : none ;
}

On voit quon utilise la variable @btn-default-color pour affecter la valeur de la


proprit color pour le focus des boutons. Remarquez au passage lutilisation du signe
& pour faciliter lcriture du code. Pour la mme classe .btn, on peut regrouper des
slecteurs dans un mme bloc sans tout rcrire. On trouve la mme variable utilise
un peu plus loin dans le code :
1
2
3

. btn - default {
. button - variant ( @btn - default - color ; @btn - default - bg ; @btn default - border ) ;
}

Il suffit donc de modifier la valeur de la variable pour que toutes ces affectations soient
changes avec cette seule action.
Et si on regarde le rsultat, on retrouve bien la couleur #333 affecte la couleur du
bouton pour le focus :
1
2
3
4

. btn : focus {
color : # 333333 ;
text - decoration : none ;
}

Cette factorisation est pratique si elle est bien organise, ce qui est le cas avec Bootstrap
qui centralise toutes les variables dans le mme fichier. Rien nempche aussi daffecter
la valeur dune variable une autre variable comme ici :
269

CHAPITRE 7. CONFIGURER BOOTSTRAP


1
2
3

@brand - primary :
...
@link - color :

# 428bca ;
@brand - primary ;

Inclusion de fichier
Les possibilits de LESS sont loin de sarrter la dfinition de variables. On peut
inclure un fichier avec la commande @import. Par exemple, le fichier bootstrap.less
ne fait que des inclusions :
1
2
3
4

...
// Core variables and mixins
@import " variables . less " ;
@import " mixins . less " ;

5
6
7
8
9

// Reset
@import " normalize . less " ;
@import " print . less " ;
...

On peut importer des fichiers less ou css. Sil sagit dun fichier less, il est videmment trait sil comporte des commandes spciales, alors que dans le cas dun fichier
css, il est pris tel quel sans traitement particulier.

Les mixins
On peut aussi inclure des classes dans dautres classes (ce qui se nomme mixins dans
le langage LESS), comme si elle tait une proprit. On peut le voir ici dans le fichier
grid.less :
1
2
3
4

// Set the container width , and override it for fixed navbars


in media queries
. container {
. container - fixed () ;
}

On voit que la classe .container-fixed est utilise comme une proprit. Examinons
cette classe appele qui se situe dans le fichier mixin.less :
1
2
3
4
5
6
7
8

// Centered container element


. container - fixed () {
margin - right : auto ;
margin - left : auto ;
padding - left : ( @grid - gutter - width / 2 ) ;
padding - right : ( @grid - gutter - width / 2 ) ;
& : extend (. clearfix all ) ;
}

270

LESS, UN LANGAGE DE STYLE DYNAMIQUE


On y trouve un certain nombre de rgles, essentiellement pour centrer llment et mme
un autre appel une classe, ici .clearfix. Vous avez remarqu sans doute la syntaxe
particulire avec lajout de parenthses comme sil sagissait dune fonction. Cette analogie va plus loin, puisquon peut mme transmettre des paramtres (on parle alors de
mixin paramtr) une classe incluse comme ici dans le fichier button-groups.less :
1
2
3

. btn - group . open . dropdown - toggle {


. box - shadow ( inset 0 3px 5px rgba (0 ,0 ,0 ,. 125 ) ) ;
}

Voyons la classe appele qui se situe encore dans le fichier mixin.less :


1
2
3
4
5

// Drop shadows
. box - shadow ( @shadow ) {
- webkit - box - shadow : @shadow ; // iOS <4 . 3 & Android <4 . 1
box - shadow : @shadow ;
}

On voit que cette classe ralise un ombrage selon le paramtre transmis. Si on regarde
le rsultat, on a bien ce qui est demand :
1
2
3
4

. btn - group . open . dropdown - toggle {


- webkit - box - shadow : inset 0 3px 5px rgba (0 , 0 , 0 , 0 . 125 ) ;
box - shadow : inset 0 3px 5px rgba (0 , 0 , 0 , 0 . 125 ) ;
}

Slecteurs embots
On peut inclure des slecteurs dans une dfinition, comme ici dans le fichier dropdowns.less :
1
2
3
4
5
6
7

// Open state for the dropdown


// - - - - - - - - - - - - - - - - - - - - - - - - - - . open {
// Show the menu
> . dropdown - menu {
display : block ;
}

8
9
10
11
12
13

// Remove the outline when : focus is triggered


> a {
outline : 0 ;
}

Cela simplifie lcriture et rend le code plus compact. Voici le rsultat :


1
2
3
4
5
6

. open > . dropdown - menu {


display : block ;
}
. open > a {
outline : 0 ;
}

271

CHAPITRE 7. CONFIGURER BOOTSTRAP


On a vu plus haut que pour les pseudo-classes, on peut utiliser le signe &, comme par
exemple ici dans le fichier pagination.less :
1
2
3
4
5
6
7
8
9
10
11

. pagination {
...
> li > a ,
> li > span {
& : hover ,
& : focus {
color : @pagination - hover - color ;
background - color : @pagination - hover - bg ;
border - color : @pagination - hover - border ;
}
}

On trouve ce rsultat :
1
2
3
4
5
6

. pagination > li > a : hover ,


. pagination > li > span : hover ,
. pagination > li > a : focus ,
. pagination > li > span : focus {
background - color : # eeeeee ;
}

Oprations
On peut aussi effectuer des oprations comme ici dans le fichier forms.less :
1
2
3
4
5
6
7
8
9
10
11

legend {
display : block ;
width : 100 %;
padding : 0 ;
margin - bottom : @line - height - computed ;
font - size : ( @font - size - base * 1 . 5 ) ;
line - height : inherit ;
color : @gray - dark ;
border : 0 ;
border - bottom : 1px solid @legend - border - color ;
}

Avec le rsultat :
1
2
3
4
5
6
7
8
9

272

legend {
display : block ;
width : 100 %;
padding : 0 ;
margin - bottom : 20px ;
font - size : 21px ;
line - height : inherit ;
color : # 333333 ;
border : 0 ;

LESS, UN LANGAGE DE STYLE DYNAMIQUE


10
11

border - bottom : 1px solid # e5e5e5 ;

Comme on a une dimension de base de 14 pixels, le rsultat 14 * 1.5 donne bien 21


pixels.

Fonctions
LESS possde des fonctions bien pratiques, regardez ce code :
1
2
3
4

@brand - primary :
...
@link - color :
@link - hover - color :

# 428bca ;
@brand - primary ;
darken ( @link - color , 15 %) ;

On utilise la fonction intgre darken, qui assombrit la couleur du pourcentage indiqu.


Ici la valeur de la couleur est issue dune variable, dont la valeur est elle-mme issue
dune autre variable ! Au final, on assombrit de 15% la couleur #428bca. On trouve
aussi la fonction oppose lighten :
1

@gray - dark :

lighten (# 000 , 20 %) ;

// # 333

Ici, on claircit le noir #000 de 20%, ce qui donne #333. On trouve dautres fonctions
classiques comme ceil, qui retourne lentier immdiatement suprieur une valeur :
1
2

@font - size - base :


@font - size - large :
18px

14px ;
ceil ( @font - size - base * 1 . 25 ) ; // ~

Le rsultat de 14 * 1.25 est 17.5, larrondi par excs donne bien 18. On trouve la
fonction floor pour larrondi par dfaut, ainsi que bien dautres fonctions que vous
pouvez dcouvrir dans la documentation - http://lesscss.org/#docs.

Un exemple synthtique
Pour illustrer les possibilits et llgance de LESS je vais prendre un exemple qui
regroupe la plupart de ses possibilits en lanalysant. Vous trouvez dans le fichier
jumbotron.less ce code :
1
2
3
4
5

. jumbotron {
padding : @jumbotron - padding ;
margin - bottom : @jumbotron - padding ;
color : @jumbotron - color ;
background - color : @jumbotron - bg ;

6
7
8
9
10

h1 ,
. h1 {
color : @jumbotron - heading - color ;
}

273

CHAPITRE 7. CONFIGURER BOOTSTRAP


p {
margin - bottom : ( @jumbotron - padding / 2 ) ;
font - size : @jumbotron - font - size ;
font - weight : 200 ;
}

11
12
13
14
15
16

. container & {
border - radius : @border - radius - large ; // Only round corners
at higher resolutions if contained in a container
}

17
18
19
20

. container {
max - width : 100 %;
}

21
22
23
24

@media screen and ( min - width : @screen - sm - min ) {


padding - top :
( @jumbotron - padding * 1 . 6 ) ;
padding - bottom : ( @jumbotron - padding * 1 . 6 ) ;

25
26
27
28

. container & {
padding - left : ( @jumbotron - padding * 2 ) ;
padding - right : ( @jumbotron - padding * 2 ) ;
}

29
30
31
32
33
34
35
36
37
38
39

h1 ,
. h1 {
font - size : ( @font - size - base * 4 . 5 ) ;
}

Considrons ces instructions pas pas.


Les proprits directes
Il y a dabord un premier groupe de proprits :
1
2
3
4

padding : @jumbotron - padding ;


margin - bottom : @jumbotron - padding ;
color : @jumbotron - color ;
background - color : @jumbotron - bg ;

Les valeurs sont renseignes au moyen de variables. On peut trouver leurs valeurs dans
le fichier variables.less) :
1
2
3

@jumbotron - padding :
@jumbotron - color :
@jumbotron - bg :

30px ;
inherit ;
@gray - lighter ;

Il faut chercher encore un peu dans le mme fichier pour obtenir la valeur pour la
couleur de fond :
274

LESS, UN LANGAGE DE STYLE DYNAMIQUE


1

@gray - lighter :

lighten (# 000 , 93 . 5 %) ; // # eee

Aprs compilation on trouve les valeurs suivantes :


1
2
3
4
5
6

. jumbotron {
padding : 30px ;
margin - bottom : 30px ;
color : inherit ;
background - color : # eee ;
}

Les slecteurs embots


On trouve ensuite des slecteurs embots :
1
2
3
4
5
6
7
8
9

h1 ,
. h1 {
color : @jumbotron - heading - color ;
}
p {
margin - bottom : ( @jumbotron - padding / 2 ) ;
font - size : @jumbotron - font - size ;
font - weight : 200 ;
}

Dans les blocs de ces slecteurs, on a une proprit directe pour font-weight, et les
autres dont la valeur est issue dune variable et mme dun calcul pour margin-bottom.
Il faut nouveau regarder dans le fichier des variable pour trouver les valeurs :
1
2
3

@jumbotron - padding :
@jumbotron - color :
@jumbotron - font - size :

30px ;
inherit ;
ceil (( @font - size - base * 1 . 5 ) ) ;

On voit que la dimension du texte est dpendante de la dimension de base pour la


page, ce qui est trs logique. Le rsultat aprs compilation :
1
2
3
4
5
6
7
8
9

. jumbotron h1 ,
. jumbotron . h1 {
color : inherit ;
}
. jumbotron p {
margin - bottom : 15px ;
font - size : 21px ;
font - weight : 200 ;
}

Classe embote
On trouve ensuite une classe embote :
275

CHAPITRE 7. CONFIGURER BOOTSTRAP


1
2
3

. container & {
border - radius : @border - radius - large ;
}

Remarquez lutilisation de loprateur de concatnation &. On veut donc associer dans


le slecteur la classe .container et la classe jumbotron. On retrouve donc logiquement
ce rsultat :
1
2
3

. container . jumbotron {
border - radius : 6px ;
}

Medias Queries
On trouve enfin un bloc qui concerne les Medias Queries :
@media screen and ( min - width : @screen - tablet ) {
padding - top :
( @jumbotron - padding * 1 . 6 ) ;
padding - bottom : ( @jumbotron - padding * 1 . 6 ) ;

1
2
3
4

. container & {
padding - left : ( @jumbotron - padding * 2 ) ;
padding - right : ( @jumbotron - padding * 2 ) ;
}

5
6
7
8
9
10
11
12
13

h1 {
font - size : ( @font - size - base * 4 . 5 ) ;
}

lintrieur de ce bloc, on a le mme genre dorganisation que celle nous avons vu


prcdemment avec des proprits directement renseignes, un slecteur et une classe
embots. Le rsultat la compilation donne :
1
2
3
4
5
6
7
8
9
10
11
12
13

@media screen and ( min - width : 768px ) {


. jumbotron {
padding - top : 48px ;
padding - bottom : 48px ;
}
. container . jumbotron {
padding - right : 60px ;
padding - left : 60px ;
}
. jumbotron h1 {
font - size : 63px ;
}
}

Il y aurait encore beaucoup dire sur LESS, je vous laisse le dcouvrir dans la documentation du site - http://lesscss.org/#docs qui est trs bien faite.
276

UTILISATION DE LESS DANS BOOTSTRAP

Utilisation de LESS dans Bootstrap


Un programme pour LESS
Vous pouvez modifier Bootstrap en tripatouillant les variables et en compilant avec les
outils proposs. . . Je vous propose dutiliser un programme trs bien fait : Crunch http://crunchapp.net/. Au moment o jcris ce cours, jai trouv la version 1.8.1.
Le programme est simple et efficace, vous pouvez crer ou modifier des fichiers LESS
et les compiler en CSS. Sur le site de Bootstrap, il est prconis dutiliser RECESS http://twitter.github.io/recess/, qui est une application en ligne de commande
beaucoup moins ergonomique. Mais les essais que jai effectus avec Crunch ne mont
donn aucun souci.

Exemple simple de configuration


Nous allons reprendre la configuration effectue dans un chapitre prcdent partir de
linterface simplifie de Bootstrap, mais cette fois en intervenant directement dans les
fichiers LESS. Voici la procdure avec Crunch :
1. Rapatrier tous les fichiers LESS de la dernire version de Bootstrap - http:
//getbootstrap.com/getting-started/ et les mettre dans un rpertoire local.
2. Lancer Crunch et ouvrir le fichier variables.less
3. Modifier les variables concernes dans le fichier variables.less (voir figure 7.9).
4. Enregistrer la nouvelle version du fichier variables.less
5. Ouvrir le fichier bootstrap.less
6. Pour tre cohrent avec notre prcdente configuration, nous devons supprimer
les lments inutiles
7. Compiler le fichier bootstrap.less
8. Enregistrer le fichier bootstrap.css gnr par Crunch
9. Renommer le fichier bootstrap.css en bootstrap.min.v1_2.css.
10. Modifier le lien des styles dans la page web
11. Supprimer les styles devenus inutiles dans la page web
1
2
3
4
5
6
7
8
9
10
11

body {
/*
background - color :# bbb ;
color :# 048 ; */
font - size : 12px ;
line - height : 16px ;
}
a {
color : # 028 ;
}
footer {
text - align : center ;

277

CHAPITRE 7. CONFIGURER BOOTSTRAP

Figure 7.9 Changement de valeurs dans le fichier variables.less

12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

36
37
38
39

}
nav {
background - color :# bcd ;
border - radius : 8px ;
padding : 0 ! important ;
border : 1px solid # ddd ;
margin - bottom : 20px ;
}
section {
padding - right : 0 ! important ;
}
. panel {
background - color : # bcd ;
border - radius : 8px ;
padding - bottom : 5px ;
}
h1 {
text - shadow : 4px 4px 5px # 777 ;
color : # 449 ;
}
. nav > li > a : hover , . nav > li > a : focus {
background - color : # cde ;
}
. panel - default > . panel - heading , . nav - pills > li . active > a , .
nav - pills > li . active > a : hover , . nav - pills > li . active > a :
focus {
color : # 048 ;
background - color : # abc ;
border - radius : 8px ;
}

On obtient alors la mme prsentation que prcdemment, comme le montre la figure


7.10.
Testez ! http://bootstrap.twit.free.fr/tutov3/config02c.html
278

UTILISATION DE LESS DANS BOOTSTRAP

Figure 7.10 Apparence obtenue

Rflexions sur la configuration de Bootstrap avec LESS


Nous avons vu la procdure employer avec Crunch. Les seuls fichiers qui ont t modifis sont bootstrap.less et variables.less. Ce dernier fichier contient un certain
nombre de variables qui influent sur la prsentation gnrale et sur les composants.
Pour notre exemple, jai pu changer les lments suivants :
Couleur de fond de la page
Couleur du texte de la page
Jaurais pu galement intervenir sur ceux-l :
Dimension des polices (et de faon automatis la hauteur des lignes)
Couleur des liens
Couleur de fond des panneaux
Mais tout le reste correspond des ajustements de la page qui ne rentrent pas dans
le cadre du fichier variable.less. On peut du coup se demander si le jeu en vaut la
chandelle. . . Dans le cadre dun site web ponctuel, la rponse est clairement non .
quoi bon aller bidouiller les fichiers LESS pour conomiser quelques lignes de code ?
On pourrait aller plus loin et intervenir sur les autres fichiers pour effectuer tous les
ajustements ncessaires, par exemple, pour le padding infrieur du panneau, il
faudrait intervenir sur le fichier panels.less :
1
2
3
4
5
6

// Optional heading
. panel - heading {
padding : 10px 15px ;
border - bottom : 1px solid @panel - border ;
. border - top - radius ( @panel - border - radius - 1 ) ;
}

On arriverait de proche en proche ajuster compltement Bootstrap pour notre site et


ainsi navoir plus quun fichier CSS charger. Cette conception se heurte plusieurs
inconvnients, dont le fait de ne pas pouvoir faire de mise jour de Bootstrap sans
279

CHAPITRE 7. CONFIGURER BOOTSTRAP


refaire toutes nos interventions. Envisageons donc une autre approche. . . Puisque nous
disposons de LESS, autant lutiliser aussi pour nos styles complmentaires. Crons un
fichier main.less avec nos styles dans le dossier qui contient tous les fichiers LESS.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

36
37
38
39

body {
background - color :# bbb ;
color :# 048 ;
font - size : 12px ;
line - height : 16px ;
}
a {
color : # 028 ;
}
footer {
text - align : center ;
}
nav {
background - color :# bcd ;
border - radius : 8px ;
padding : 0 ! important ;
border : 1px solid # ddd ;
margin - bottom : 20px ;
}
section {
padding - right : 0 ! important ;
}
. panel {
background - color : # bcd ;
border - radius : 8px ;
padding - bottom : 5px ;
}
h1 {
text - shadow : 4px 4px 5px # 777 ;
color : # 449 ;
}
. nav > li > a : hover , . nav > li > a : focus {
background - color : # cde ;
}
. panel - default > . panel - heading , . nav - pills > li . active > a , .
nav - pills > li . active > a : hover , . nav - pills > li . active > a :
focus {
color : # 048 ;
background - color : # abc ;
border - radius : 8px ;
}

Une fois ce fichier cr, il faut informer le fichier bootstrap.less quil doit en tenir
compte (voir figure 7.11).
Il suffit ensuite de compiler tout a ; on obtient un fichier minifi de Bootstrap qui
contient toutes les rgles. On se retrouve donc avec un seul appel de fichier CSS (on
280

UTILISATION DE LESS DANS BOOTSTRAP

Figure 7.11 Importation des styles de la page


peut supprimer le style inclus dans la page) pour un rsultat identique pour notre page
dexemple :
Tester ! - http://bootstrap.twit.free.fr/tutov3/config02d.html
Le rsultat est trs propre , avec un seul fichier CSS charger et aucune rgle de
style dans la page. Dautre part, sil y a une mise jour faire, il suffit de recompiler.

Les mixins
La grille avec les mixins
Il existe un fichier trs intressant, cest mixins.less, qui ne contient que des mixins
(jai parl dans un chapitre prcdent de ces entits). Pour comprendre son utilit il
faut se poser une petite question. On place les classes de Bootstrap directement dans le
code HTML. En agissant ainsi, on rend le code trs dpendant de Bootstrap. Dautre
part, cette faon de procder sloigne du principe de base qui consiste bien sparer
le contenu de la forme. Lorsque jcris ce code dans mon exemple :
1
2
3
4

< div class = " row col - sm - 12 " >


< nav class = " col - sm - 2 " >
...
< section class = " col - sm - 10 " >
</ div >

</ nav >


... </ section >

Je dis clairement que je veux une range avec deux colonnes en indiquant la proportion
de chacune delles. Si je nutilisais pas Bootstrap, ce serait uniquement mes styles qui
dcideraient de cela. Dautre part, si je veux changer de framework un jour, je dois
intervenir au niveau de mon code HTML. Nous allons voir comment crer une grille en
utilisant uniquement LESS. Regardez ces parties du fichier mixins.less :
1
2
3
4
5
6
7
8
9
10

// Creates a wrapper for a series of columns


. make - row ( @gutter : @grid - gutter - width ) {
margin - left : ( @gutter / -2 ) ;
margin - right : ( @gutter / -2 ) ;
& : extend (. clearfix all ) ;
}
...
// Generate the small columns
. make - sm - column ( @columns ; @gutter : @grid - gutter - width ) {
position : relative ;

281

CHAPITRE 7. CONFIGURER BOOTSTRAP


min - height : 1px ;
padding - left : ( @gutter / 2 ) ;
padding - right : ( @gutter / 2 ) ;

11
12
13
14
15
16
17
18
19

@media ( min - width : @screen - sm ) {


float : left ;
width : percentage (( @columns / @grid - columns ) ) ;
}

On trouve deux mixins paramtrs intressants pour notre exemple : make-row() et


make-sm-column(). On va utiliser ces mixins dans notre exemple en modifiant le code
HTML :
1
2

<! DOCTYPE HTML >


< html >

3
4
5
6
7

< head >


< meta charset = " utf - 8 " >
< link href = " assets / css / bootstrap . min . v1_4 . css " rel = "
stylesheet " >
</ head >

8
9
10
11
12
13
14
15
16
17
18
19

20
21
22
23
24
25
26
27
28
29

282

< body >


< div class = " container " >
< header >
< div class = " page - header " >
< h1 > Mon beau site < img src = " images / papillon . png " class
= " pull - right " > </ h1 >
</ div >
</ header >
< div class = " contenu " >
< nav >
< ul class = " nav nav - pills nav - stacked " >
< li class = " active " > <a href = " # " > < span class = "
glyphicon glyphicon - home " > </ span >& nbsp ; Accueil
</ a > </ li >
< li > <a href = " # " > < span class = " glyphicon glyphicon book " > </ span >& nbsp ; Livres </ a > </ li >
< li > <a href = " # " > < span class = " glyphicon glyphicon facetime - video " > </ span >& nbsp ; Films </ a > </ li >
< li > <a href = " # " > < span class = " glyphicon glyphicon headphones " > </ span >& nbsp ; Musiques </ a > </ li >
</ ul >
</ nav >
<! -- < div class = " clearfix visible - xs " > </ div > -- >
< section >
< div class = " panel panel - default " >
< div class = " panel - heading " >
< h3 class = " panel - title " > Bienvenue sur mon site ! <
/ h3 >

UTILISATION DE LESS DANS BOOTSTRAP


30
31
32

33

34

35

36

37

38
39

40

41

42

43

44

45
46

47

48

</ div >


< div class = " panel - body " >
<p >" Sed ut perspiciatis unde omnis iste natus
error sit voluptatem accusantium doloremque
laudantium , totam rem aperiam ,
eaque ipsa quae ab illo inventore veritatis et quasi architecto
beatae vitae dicta sunt explicabo . Nemo enim ipsam
voluptatem quia voluptas
sit aspernatur aut odit aut fugit , sed quia consequuntur magni
dolores eos qui ratione voluptatem sequi nesciunt . Neque
porro quisquam est ,
qui dolorem ipsum quia dolor sit amet , consectetur , adipisci
velit , sed quia non numquam eius modi tempora incidunt ut
labore et dolore
magnam aliquam quaerat voluptatem . Ut enim ad minima veniam ,
quis nostrum exercitationem ullam corporis suscipit
laboriosam , nisi ut
aliquid ex ea commodi consequatur ? Quis autem vel eum iure
reprehenderit qui in ea voluptate velit esse quam nihil
molestiae consequatur ,
vel illum qui dolorem eum fugiat quo voluptas nulla pariatur ? " <
/p>
<p >" Sed ut perspiciatis unde omnis iste natus
error sit voluptatem accusantium doloremque
laudantium , totam rem aperiam ,
eaque ipsa quae ab illo inventore veritatis et quasi architecto
beatae vitae dicta sunt explicabo . Nemo enim ipsam
voluptatem quia
voluptas sit aspernatur aut odit aut fugit , sed quia
consequuntur magni dolores eos qui ratione voluptatem sequi
nesciunt . Neque porro
quisquam est , qui dolorem ipsum quia dolor sit amet ,
consectetur , adipisci velit , sed quia non numquam eius modi
tempora incidunt ut
labore et dolore magnam aliquam quaerat voluptatem . Ut enim ad
minima veniam , quis nostrum exercitationem ullam corporis
suscipit
laboriosam , nisi ut aliquid ex ea commodi consequatur ? Quis
autem vel eum iure reprehenderit qui in ea voluptate velit
esse quam
nihil molestiae consequatur , vel illum qui dolorem eum fugiat
quo voluptas nulla pariatur ? " </ p >
<p >" Sed ut perspiciatis unde omnis iste natus
error sit voluptatem accusantium doloremque
laudantium , totam rem aperiam ,
eaque ipsa quae ab illo inventore veritatis et quasi architecto
beatae vitae dicta sunt explicabo . Nemo enim ipsam
voluptatem quia
voluptas sit aspernatur aut odit aut fugit , sed quia
consequuntur magni dolores eos qui ratione voluptatem sequi

283

CHAPITRE 7. CONFIGURER BOOTSTRAP


nesciunt . Neque porro
quisquam est , qui dolorem ipsum quia dolor sit amet ,
consectetur , adipisci velit , sed quia non numquam eius modi
tempora incidunt ut
labore et dolore magnam aliquam quaerat voluptatem . Ut enim ad
minima veniam , quis nostrum exercitationem ullam corporis
suscipit
laboriosam , nisi ut aliquid ex ea commodi consequatur ? Quis
autem vel eum iure reprehenderit qui in ea voluptate velit
esse quam
nihil molestiae consequatur , vel illum qui dolorem eum fugiat
quo voluptas nulla pariatur ? " </ p >
</ div >
</ div >
</ section >
</ div >
< footer >
< div class = " panel panel - body " >
<p > Tous droits r serv s par moi ... </ p >
</ div >
</ footer >
</ div >
</ body >

49

50

51

52
53
54
55
56
57
58
59
60
61
62
63
64
65

</ html >

Jai supprim les classes row, col-sm-2, col-sm-10 et col-sm-12 et juste ajout la
classe contenu. Mon code est maintenant plus propre , mais je dois mettre jour
mon fichier main.less :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

. contenu , header , footer {


. make - row () ;
. make - sm - column ( 12 ) ;
}
body {
background - color :# bbb ;
color :# 048 ;
font - size : 12px ;
line - height : 16px ;
}
a {
color : # 028 ;
}
footer {
text - align : center ;
}
nav {
. make - sm - column ( 2 ) ;
background - color :# bcd ;
border - radius : 8px ;
padding : 0 ! important ;

284

UTILISATION DE LESS DANS BOOTSTRAP


22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

42
43
44
45

border : 1px solid # ddd ;


margin - bottom : 20px ;

}
section {
. make - sm - column ( 10 ) ;
padding - right : 0 ! important ;
}
. panel {
background - color : # bcd ;
border - radius : 8px ;
padding - bottom : 5px ;
}
h1 {
text - shadow : 4px 4px 5px # 777 ;
color : # 449 ;
}
. nav > li > a : hover , . nav > li > a : focus {
background - color : # cde ;
}
. panel - default > . panel - heading , . nav - pills > li . active > a , .
nav - pills > li . active > a : hover , . nav - pills > li . active > a :
focus {
color : # 048 ;
background - color : # abc ;
border - radius : 8px ;
}

Tester ! - http://bootstrap.twit.free.fr/tutov3/config03.html
Je vous conseille dexplorer les possibilits du fichier mixins.less. Et rien ne vous
empche videmment de crer vos propres classes pour rendre votre code HTML compltement indpendant de Bootstrap.

Les images Retina


Prenons un autre exemple de lutilit des mixins avec le problme des images dites
Retina . Ce terme a t cr par Apple pour dsigner les crans ayant une rsolution
trs leve (320 dpi pour les IPhone 4 et 5). Sous Android, on parle de HDPI. Quel que
soit le terme utilis, le problme est le mme. Mais quel est-il ? Si vous avez par exemple
une image de 100 x 100 px, celle-ci va bien safficher sur un cran avec une rsolution
standard. En revanche, avec un cran haute rsolution, limage va tre tire et ne va
plus tre aussi jolie. Est-ce cause de la rsolution de lcran ? Pas compltement. Cest
surtout parce que lappareil ne semble pas au courant de la rsolution dont il dispose.
Par exemple, un iPhone 4 avec une rsolution de 320 dpi et une largeur dcran de
640 px pense disposer seulement de 320 px. Du coup notre image de 100 px de ct va
apparatre floue. La solution est donc de rgler le pixel-ratio (le rapport entre les pixels
physiques et les pixels dclars). Voici le mixin propos par Bootstrap pour rgler ce
problme :
285

CHAPITRE 7. CONFIGURER BOOTSTRAP


1
2

. img - retina ( @file - 1x ; @file - 2x ; @width - 1x ; @height - 1x ) {


background - image : url ( " @ { file - 1x } " ) ;

3
4
5
6
7
8
9
10
11
12
13
14

@media
only screen and ( - webkit - min - device - pixel - ratio :
only screen and (
min - - moz - device - pixel - ratio :
only screen and (
-o - min - device - pixel - ratio :
only screen and (
min - device - pixel - ratio :
only screen and (
min - resolution :
only screen and (
min - resolution :
background - image : url ( " @ { file - 2x } " ) ;
background - size : @width - 1x @height - 1x ;
}

2),
2),
2/1),
2),
192dpi ) ,
2dppx ) {

On constate quon joue effectivement sur le pixel-ratio. Pour utiliser ce mixin, il faut
renseigner les paramtres :

Image de dimension de base (par exemple 100px * 100px)


Image de double dimension de base (200px * 200px)
Largeur de base en pixels
Hauteur de base en pixels

Concrtement, on va crire cette rgle :


1

. img - retina ( " image_de_base . jpg " , " image_double . jpg " , 100px ,
100px ) ;

Et les rgles de styles seront automatiquement gnres pour nous !

Utilisation dynamique de LESS


Dans lexemple prcdent, nous avons compil un fichier CSS avec Crunch pour ensuite
le mettre dans le site. Il existe une faon dynamique dutiliser LESS qui consiste
rfrencer directement le fichier source, et de prvoir galement un fichier Javascript
pour linterprter larrive. Cest une mthode plus lourde ct client qui ne me parat
pas vraiment adapte en mode production, mais cest celle qui est prconise sur le site
de rfrence. Elle peut toutefois trouver sa justification en phase de dveloppement
pour tester rapidement des nouveaux rglages. Reprenons notre exemple de page cette
fois avec cette procdure. Voici la diffrence au niveau de len-tte :
1
2

< link rel = " stylesheet / less " type = " text / css " href = " assets / less /
bootstrap . less " >
< script src = " assets / js / less - 1 . 4 . 1 . min . js " > </ script >

Tester ! - http://bootstrap.twit.free.fr/tutov3/config04.html
videmment, cela ne marche que si vous mettez bien tous les fichiers LESS ncessaires
sur le serveur. Vous constaterez un temps de chargement relativement long. Mais ensuite, il suffit de changer un lment dans un fichier LESS pour obtenir le rsultat.
286

UN THME POUR BOOTSTRAP


Par exemple si je change la couleur de fond dans le fichier variables.less, il suffit de
recharger la page pour voir le rsultat immdiatement.
Si on regarde le code gnr par le navigateur, on constate que le CSS a bien t
construit (voir figure 7.12).

Figure 7.12 Code gnr

Un thme pour Bootstrap


Le thme optionnel
La version 3 de Bootstrap est livre avec un thme optionnel. Voyons ce que nous
propose ce thme dcrit comme devant amliorer notre exprience visuelle . Pour
cela, on va le tester sur notre page dexemple, il suffit de rfrencer le fichier :
1
2

< link href = " assets / css / bootstrap . css " rel = " stylesheet " >
< link href = " assets / css / bootstrap - theme . min . css " rel = " stylesheet
">

Testez ! http://bootstrap.twit.free.fr/tutov3/base14.html
Pour se rendre compte des diffrences, la figure 7.13 reprsente les 2 versions de la
barre de navigation :
On se rend facilement compte que la barre originelle est plate , alors que la nouvelle
a du relief. Leffet est obtenu grce un dgrad. Si on regarde dans le code, on trouve
effectivement une dclaration de dgrad :
287

CHAPITRE 7. CONFIGURER BOOTSTRAP

Figure 7.13 Barre sans effet et barre avec thme de Bootstrap


1
2
3
4

5
6
7

. navbar - inverse {
background - image : - webkit - linear - gradient ( top , # 3c3c3c 0 % , #
222 100 %) ;
background - image :
linear - gradient ( to bottom , # 3c3c3c
0 % , # 222 100 %) ;
filter : progid : DXImageTransform . Microsoft . gradient (
startColorstr = '# ff3c3c3c ' , endColorstr = '# ff222222 ' ,
GradientType = 0 ) ;
filter : progid : DXImageTransform . Microsoft . gradient ( enabled =
false ) ;
background - repeat : repeat - x ;
}

Il en est de mme pour le bouton :


1
2
3
4

5
6
7
8

. btn - primary {
background - image : - webkit - linear - gradient ( top , # 428bca 0 % , #
2d6ca2 100 %) ;
background - image :
linear - gradient ( to bottom , # 428bca
0 % , # 2d6ca2 100 %) ;
filter : progid : DXImageTransform . Microsoft . gradient (
startColorstr = '# ff428bca ' , endColorstr = '# ff2d6ca2 ' ,
GradientType = 0 ) ;
filter : progid : DXImageTransform . Microsoft . gradient ( enabled =
false ) ;
background - repeat : repeat - x ;
border - color : # 2b669a ;
}

On retrouve cet effet de dgrad dans les alertes, les barres de progression, les panneaux. . . Il est prvu galement des ombrages. Vous pouvez voir tous ces effets sur la
page dexemple - http://getbootstrap.com/examples/theme/ du site de Bootstrap.
On peut se demander pourquoi ces effets ne font pas partie de fichier de base de Bootstrap. La rponse se situe au niveau des performances. Il a t choisi dviter les effets
trop gourmands en ressources.

Dautres thmes
On peut trouver des thmes intressants et gratuits sur le site Bootswatch - http:
//bootswatch.com/. Voyons la figure 7.14 ce que donne le thme Amelia sur notre
page dexemple.
288

UN THME POUR BOOTSTRAP

Figure 7.14 Effet du thme Amelia sur la page dexemple

289

CHAPITRE 7. CONFIGURER BOOTSTRAP


Testez ! http://bootstrap.twit.free.fr/tutov3/base15.html
Ce nest pas mal, mais trop contrast mon got. Mon prfr est Slate, visible la
figure 7.15.

Figure 7.15 Effet du thme Slate sur la page dexemple


Testez ! http://bootstrap.twit.free.fr/tutov3/base16.html

Composer son thme


Vous pouvez videmment composer votre thme personnalis. Ce nest pas facile, il faut
bien comprendre lorganisation des variables LESS, il faut aussi trouver un bon quilibre de couleurs. Jai trouv un site - http://pikock.github.io/bootstrap-magic/
index.html qui facilite ce paramtrage. Les variables y sont mieux organises que dans
la page de personnalisation - http://getbootstrap.com/customize/ de Bootstrap.
Vous pouvez aussi aller directement jouer sur les valeurs dans le fichier variables.less.
Nous allons voir un exemple simple de ce quil est possible dobtenir. Admettons que je
dsire un site de tonalit verte. Je vais donc changer les gris pour les teinter lgrement
en vert :
290

UN THME POUR BOOTSTRAP


1
2
3
4
5

@gray - darker :
@gray - dark :
@gray :
@gray - light :
@gray - lighter :

lighten (# 232 ,
lighten (# 232 ,
lighten (# 232 ,
lighten (# 232 ,
lighten (# 232 ,

13 . 5 %) ;
20 %) ;
33 . 5 %) ;
60 %) ;
93 . 5 %) ;

Je vais aussi modifier les 5 couleurs de base (Brand) pour les rendre plus adaptes
une tonalit verte :
1
2
3
4
5

@brand - primary :
@brand - success :
@brand - warning :
@brand - danger :
@brand - info :

# 51c1d1 ;
# 5cb85c ;
# f0ad4e ;
# d9534f ;
# 5bc0de ;

Je vais ensuite choisir une nouvelle couleur de fond de page :


1

@body - bg :

# E0E4CC ;

Je vais enfin modifier la couleur de bordure des thumbnails pour les rendre visibles :
1

@thumbnail - border :

# aca ;

Pour tester tout a je prends une version un peu adapte de lexemple de thme de
Bootstrap :
1
2
3
4
5

<! DOCTYPE html >


< html lang = " en " >
< head >
< meta charset = " utf - 8 " >
< meta name = " viewport " content = " width = device - width , initial scale = 1 . 0 " >

6
7

< title > Theme Template for Bootstrap </ title >

8
9
10

<! -- Bootstrap core CSS -- >


< link href = " assets / css / bootstrap . min . t03 . css " rel = "
stylesheet " >

11
12
13

<! -- Bootstrap theme -- >


< link href = " assets / css / bootstrap - theme . min . css " rel = "
stylesheet " >

14
15
16

<! -- Custom styles for this template -- >


< link href = " assets / css / theme . css " rel = " stylesheet " >

17
18
19
20
21
22

<! -- HTML5 shim and Respond . js IE8 support of HTML5


elements and media queries -- >
<! --[ if lt IE 9 ] >
< script src = " ../../ assets / js / html5shiv . js " > </ script >
< script src = " ../../ assets / js / respond . min . js " > </ script >
< ![ endif ] -- >

291

CHAPITRE 7. CONFIGURER BOOTSTRAP


23

</ head >

24
25

< body >

26
27

< div class = " container theme - showcase " >

28
29
30
31
32

33
34
35

<! -- Main jumbotron for a primary marketing message or


call to action -- >
< div class = " jumbotron " >
< h1 > Hello , world ! </ h1 >
<p > This is a template for a simple marketing or
informational website . It includes a large callout
called the hero unit and three
supporting pieces of content . Use it as a starting point to
create something more unique . </ p >
<p > <a class = " btn btn - primary btn - lg " > Learn more & raquo ;
</ a > </ p >
</ div >

36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54

292

< div class = " page - header " >


< h1 > Buttons </ h1 >
</ div >
<p >
< button type = " button " class = " btn
Default </ button >
< button type = " button " class = " btn
Primary </ button >
< button type = " button " class = " btn
Success </ button >
< button type = " button " class = " btn
/ button >
< button type = " button " class = " btn
Warning </ button >
< button type = " button " class = " btn
Danger </ button >
< button type = " button " class = " btn
/ button >
</ p >
<p >
< button type = " button " class = " btn
button >
< button type = " button " class = " btn
button >
< button type = " button " class = " btn
button >
< button type = " button " class = " btn
>
< button type = " button " class = " btn
button >

btn - lg btn - default " >


btn - lg btn - primary " >
btn - lg btn - success " >
btn - lg btn - info " > Info <
btn - lg btn - warning " >
btn - lg btn - danger " >
btn - lg btn - link " > Link <

btn - default " > Default </


btn - primary " > Primary </
btn - success " > Success </
btn - info " > Info </ button
btn - warning " > Warning </

UN THME POUR BOOTSTRAP


55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75

< button type = " button "


button >
< button type = " button "
>
</ p >
<p >
< button type = " button "
Default </ button >
< button type = " button "
Primary </ button >
< button type = " button "
Success </ button >
< button type = " button "
/ button >
< button type = " button "
Warning </ button >
< button type = " button "
Danger </ button >
< button type = " button "
/ button >
</ p >
<p >
< button type = " button "
Default </ button >
< button type = " button "
Primary </ button >
< button type = " button "
Success </ button >
< button type = " button "
/ button >
< button type = " button "
Warning </ button >
< button type = " button "
Danger </ button >
< button type = " button "
/ button >
</ p >

class = " btn btn - danger " > Danger </


class = " btn btn - link " > Link </ button

class = " btn btn - sm btn - default " >


class = " btn btn - sm btn - primary " >
class = " btn btn - sm btn - success " >
class = " btn btn - sm btn - info " > Info <
class = " btn btn - sm btn - warning " >
class = " btn btn - sm btn - danger " >
class = " btn btn - sm btn - link " > Link <

class = " btn btn - xs btn - default " >


class = " btn btn - xs btn - primary " >
class = " btn btn - xs btn - success " >
class = " btn btn - xs btn - info " > Info <
class = " btn btn - xs btn - warning " >
class = " btn btn - xs btn - danger " >
class = " btn btn - xs btn - link " > Link <

76
77
78
79
80

< div class = " page - header " >


< h1 > Thumbnails </ h1 >
</ div >
< img src = " images / t1 . jpg " class = " img - thumbnail " alt = " Tigre
">

81
82
83
84
85
86

< div class = " page - header " >


< h1 > Dropdown menus </ h1 >
</ div >
< div class = " dropdown theme - dropdown clearfix " >
<a id = " dropdownMenu1 " href = " # " role = " button " class = " sr only dropdown - toggle " data - toggle = " dropdown " >

293

CHAPITRE 7. CONFIGURER BOOTSTRAP

87
88
89
90
91
92
93
94

Dropdown <b class = " caret " > </ b > </ a >
< ul class = " dropdown - menu " role = " menu " aria - labelledby = "
dropdownMenu1 " >
< li role = " presentation " > <a role = " menuitem " tabindex = "
-1 " href = " # " > Action </ a > </ li >
< li role = " presentation " > <a role = " menuitem " tabindex = "
-1 " href = " # " > Another action </ a > </ li >
< li role = " presentation " > <a role = " menuitem " tabindex = "
-1 " href = " # " > Something else here </ a > </ li >
< li role = " presentation " class = " divider " > </ li >
< li role = " presentation " > <a role = " menuitem " tabindex = "
-1 " href = " # " > Separated link </ a > </ li >
</ ul >
</ div >

95
96
97
98

< div class = " page - header " >


< h1 > Navbars </ h1 >
</ div >

99
100
101
102
103

104
105
106
107
108
109
110
111
112
113
114
115
116

117
118
119
120
121
122
123
124
125

294

< div class = " navbar navbar - default " >


< div class = " container " >
< div class = " navbar - header " >
< button type = " button " class = " navbar - toggle " data toggle = " collapse " data - target = " . navbar - collapse "
>
< span class = " icon - bar " > </ span >
< span class = " icon - bar " > </ span >
< span class = " icon - bar " > </ span >
</ button >
<a class = " navbar - brand " href = " # " > Project name </ a >
</ div >
< div class = " navbar - collapse collapse " >
< ul class = " nav navbar - nav " >
< li class = " active " > <a href = " # " > Home </ a > </ li >
< li > <a href = " # about " > About </ a > </ li >
< li > <a href = " # contact " > Contact </ a > </ li >
< li class = " dropdown " >
<a href = " # " class = " dropdown - toggle " data - toggle
= " dropdown " > Dropdown <b class = " caret " > </ b > </
a>
< ul class = " dropdown - menu " >
< li > <a href = " # " > Action </ a > </ li >
< li > <a href = " # " > Another action </ a > </ li >
< li > <a href = " # " > Something else here </ a > </ li >
< li class = " divider " > </ li >
< li class = " dropdown - header " > Nav header </ li >
< li > <a href = " # " > Separated link </ a > </ li >
< li > <a href = " # " > One more separated link </ a > </
li >
</ ul >

UN THME POUR BOOTSTRAP


126
127
128
129
130
131
132
133
134
135

</ li >
</ ul >
< ul class = " nav navbar - nav navbar - right " >
< li > <a href = " ../ navbar / " > Default </ a > </ li >
< li > <a href = " ../ navbar - static - top / " > Static top </ a
> </ li >
< li class = " active " > <a href = " ./ " > Fixed top </ a > </ li
>
</ ul >
</ div > <! -- /. nav - collapse -- >
</ div >
</ div >

136
137
138
139
140

141
142
143
144
145
146
147
148
149
150
151
152
153

154
155
156
157
158
159
160
161
162
163
164
165
166
167

< div class = " navbar navbar - inverse " >


< div class = " container " >
< div class = " navbar - header " >
< button type = " button " class = " navbar - toggle " data toggle = " collapse " data - target = " . navbar - collapse "
>
< span class = " icon - bar " > </ span >
< span class = " icon - bar " > </ span >
< span class = " icon - bar " > </ span >
</ button >
<a class = " navbar - brand " href = " # " > Project name </ a >
</ div >
< div class = " navbar - collapse collapse " >
< ul class = " nav navbar - nav " >
< li class = " active " > <a href = " # " > Home </ a > </ li >
< li > <a href = " # about " > About </ a > </ li >
< li > <a href = " # contact " > Contact </ a > </ li >
< li class = " dropdown " >
<a href = " # " class = " dropdown - toggle " data - toggle
= " dropdown " > Dropdown <b class = " caret " > </ b > </
a>
< ul class = " dropdown - menu " >
< li > <a href = " # " > Action </ a > </ li >
< li > <a href = " # " > Another action </ a > </ li >
< li > <a href = " # " > Something else here </ a > </ li >
< li class = " divider " > </ li >
< li class = " dropdown - header " > Nav header </ li >
< li > <a href = " # " > Separated link </ a > </ li >
< li > <a href = " # " > One more separated link </ a > </
li >
</ ul >
</ li >
</ ul >
< ul class = " nav navbar - nav navbar - right " >
< li > <a href = " ../ navbar / " > Default </ a > </ li >
< li > <a href = " ../ navbar - static - top / " > Static top </ a
> </ li >

295

CHAPITRE 7. CONFIGURER BOOTSTRAP


< li class = " active " > <a href = " ./ " > Fixed top </ a > </ li
>
</ ul >
</ div > <! -- /. nav - collapse -- >
</ div >
</ div >

168
169
170
171
172
173

< div class = " page - header " >


< h1 > Alerts </ h1 >
</ div >
< div class = " alert alert - success " >
< strong > Well done ! </ strong > You successfully read this
important alert message .
</ div >
< div class = " alert alert - info " >
< strong > Heads up ! </ strong > This alert needs your
attention , but it ' s not super important .
</ div >
< div class = " alert alert - warning " >
< strong > Warning ! </ strong > Best check yo self , you ' re
not looking too good .
</ div >
< div class = " alert alert - danger " >
< strong > Oh snap ! </ strong > Change a few things up and
try submitting again .
</ div >

174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194

195
196
197
198

199
200
201
202

203
204
205

< div class = " page - header " >


< h1 > Progress bars </ h1 >
</ div >
< div class = " progress " >
< div class = " progress - bar " role = " progressbar " aria valuenow = " 60 " aria - valuemin = " 0 " aria - valuemax = " 100 "
style = " width : 60 %; " >
< span class = " sr - only " > 60 % Complete </ span > </ div >
</ div >
< div class = " progress " >
< div class = " progress - bar progress - bar - success " role = "
progressbar " aria - valuenow = " 40 " aria - valuemin = " 0 "
aria - valuemax = " 100 " style = " width : 40 % " >
< span class = " sr - only " > 40 % Complete ( success ) </ span > </ div >
</ div >
< div class = " progress " >
< div class = " progress - bar progress - bar - info " role = "
progressbar " aria - valuenow = " 20 " aria - valuemin = " 0 "
aria - valuemax = " 100 " style = " width : 20 % " >
< span class = " sr - only " > 20 % Complete </ span > </ div >
</ div >
< div class = " progress " >

296

UN THME POUR BOOTSTRAP


206

207
208
209
210

211
212
213
214

215

216

217

< div class = " progress - bar progress - bar - warning " role = "
progressbar " aria - valuenow = " 60 " aria - valuemin = " 0 "
aria - valuemax = " 100 " style = " width : 60 % " >
< span class = " sr - only " > 60 % Complete ( warning ) </ span > </ div >
</ div >
< div class = " progress " >
< div class = " progress - bar progress - bar - danger " role = "
progressbar " aria - valuenow = " 80 " aria - valuemin = " 0 "
aria - valuemax = " 100 " style = " width : 80 % " >
< span class = " sr - only " > 80 % Complete ( danger ) </ span > </ div >
</ div >
< div class = " progress " >
< div class = " progress - bar progress - bar - success " style = "
width : 35 % " > < span class = " sr - only " > 35 % Complete (
success ) </ span > </ div >
< div class = " progress - bar progress - bar - warning " style = "
width : 20 % " > < span class = " sr - only " > 20 % Complete (
warning ) </ span > </ div >
< div class = " progress - bar progress - bar - danger " style = "
width : 10 % " > < span class = ' sr - only ' > 10 % Complete (
danger ) </ span > </ div >
</ div >

218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239

< div class = " page - header " >


< h1 > List groups </ h1 >
</ div >
< div class = " row " >
< div class = " col - sm - 4 " >
< ul class = " list - group " >
< li class = " list - group - item " > Cras justo odio </ li >
< li class = " list - group - item " > Dapibus ac facilisis in
</ li >
< li class = " list - group - item " > Morbi leo risus </ li >
< li class = " list - group - item " > Porta ac consectetur ac
</ li >
< li class = " list - group - item " > Vestibulum at eros </ li >
</ ul >
</ div > <! -- /. col - sm - 4 -- >
< div class = " col - sm - 4 " >
< div class = " list - group " >
<a href = " # " class = " list - group - item active " >
Cras justo odio
</ a >
<a href = " # " class = " list - group - item " > Dapibus ac
facilisis in </ a >
<a href = " # " class = " list - group - item " > Morbi leo risus
</ a >
<a href = " # " class = " list - group - item " > Porta ac
consectetur ac </ a >

297

CHAPITRE 7. CONFIGURER BOOTSTRAP


240
241
242
243
244
245
246
247

248
249
250
251

252
253
254
255

256
257
258
259

<a href = " # " class = " list - group - item " > Vestibulum at
eros </ a >
</ div >
</ div > <! -- /. col - sm - 4 -- >
< div class = " col - sm - 4 " >
< div class = " list - group " >
<a href = " # " class = " list - group - item active " >
< h4 class = " list - group - item - heading " > List group
item heading </ h4 >
<p class = " list - group - item - text " > Donec id elit non
mi porta gravida at eget metus . Maecenas sed
diam eget risus varius blandit . </ p >
</ a >
<a href = " # " class = " list - group - item " >
< h4 class = " list - group - item - heading " > List group
item heading </ h4 >
<p class = " list - group - item - text " > Donec id elit non
mi porta gravida at eget metus . Maecenas sed
diam eget risus varius blandit . </ p >
</ a >
<a href = " # " class = " list - group - item " >
< h4 class = " list - group - item - heading " > List group
item heading </ h4 >
<p class = " list - group - item - text " > Donec id elit non
mi porta gravida at eget metus . Maecenas sed
diam eget risus varius blandit . </ p >
</ a >
</ div >
</ div > <! -- /. col - sm - 4 -- >
</ div >

260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279

298

< div class = " page - header " >


< h1 > Panels </ h1 >
</ div >
< div class = " row " >
< div class = " col - sm - 4 " >
< div class = " panel panel - default " >
< div class = " panel - heading " >
< h3 class = " panel - title " > Panel title </ h3 >
</ div >
< div class = " panel - body " >
Panel content
</ div >
</ div >
< div class = " panel panel - primary " >
< div class = " panel - heading " >
< h3 class = " panel - title " > Panel title </ h3 >
</ div >
< div class = " panel - body " >
Panel content

UN THME POUR BOOTSTRAP


280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319

</ div >


</ div >
</ div > <! -- /. col - sm - 4 -- >
< div class = " col - sm - 4 " >
< div class = " panel panel - success " >
< div class = " panel - heading " >
< h3 class = " panel - title " > Panel
</ div >
< div class = " panel - body " >
Panel content
</ div >
</ div >
< div class = " panel panel - info " >
< div class = " panel - heading " >
< h3 class = " panel - title " > Panel
</ div >
< div class = " panel - body " >
Panel content
</ div >
</ div >
</ div > <! -- /. col - sm - 4 -- >
< div class = " col - sm - 4 " >
< div class = " panel panel - warning " >
< div class = " panel - heading " >
< h3 class = " panel - title " > Panel
</ div >
< div class = " panel - body " >
Panel content
</ div >
</ div >
< div class = " panel panel - danger " >
< div class = " panel - heading " >
< h3 class = " panel - title " > Panel
</ div >
< div class = " panel - body " >
Panel content
</ div >
</ div >
</ div > <! -- /. col - sm - 4 -- >
</ div >

title </ h3 >

title </ h3 >

title </ h3 >

title </ h3 >

320
321
322
323
324
325

326

< div class = " page - header " >


< h1 > Wells </ h1 >
</ div >
< div class = " well " >
<p > Lorem ipsum dolor sit amet , consectetur adipiscing
elit . Maecenas sed diam eget risus varius blandit
sit amet non magna .
Lorem ipsum dolor sit amet , consectetur adipiscing elit .
Praesent commodo cursus magna , vel scelerisque nisl

299

CHAPITRE 7. CONFIGURER BOOTSTRAP

327

328
329

consectetur et . Cras
mattis consectetur purus sit amet fermentum . Duis mollis , est
non commodo luctus , nisi erat porttitor ligula , eget lacinia
odio sem
nec elit . Aenean lacinia bibendum nulla sed consectetur . </ p >
</ div >

330

</ div > <! -- / container -- >

331
332
333
334
335
336
337
338
339

<! -- Bootstrap core JavaScript


= = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = -- >
<! -- Placed at the end of the document so the pages load
faster -- >
< script src = " assets / js / jquery . js " > </ script >
< script src = " assets / js / bootstrap . min . js " > </ script >
</ body >
</ html >

Et jobtiens la figure 7.16.

Figure 7.16 Thme personnalis


Testez ! http://bootstrap.twit.free.fr/tutov3/theme01.html Il ne sagit videmment ici que dune modification sommaire de Bootstrap mais elle vous montre la
dmarche adopter. Si vous avez du mal composer une palette colore pour vos
pages, vous pouvez trouver des inspirations sur le site communautaire Colour Lover 300

UN THME POUR BOOTSTRAP


http://colourlovers.com/.

En rsum
On peut gnrer une version personnalise de Bootstrap partir de linterface propose en ligne en modifiant des paramtres.
Bootstrap utilise LESS, un langage qui simplifie et organise lcriture des fichiers
CSS. On peut crer une version adapte de Bootstrap en modifiant directement les
fichiers LESS.
Bootstrap propose un thme optionnel. Il est aussi possible de crer son propre thme.

301

CHAPITRE 7. CONFIGURER BOOTSTRAP

302