Académique Documents
Professionnel Documents
Culture Documents
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.
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
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
Avant-propos
Bootstrap . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
iii
iii
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
11
11
Un template de dmarrage . . . . . . . . . . . . . . . . . . . . . . . . . .
12
15
2 Une grille ?
Prsentation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
20
20
Terminologie . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
20
La grille de Bootstrap . . . . . . . . . . . . . . . . . . . . . . . . . . . .
21
Organisation de la grille . . . . . . . . . . . . . . . . . . . . . . . . . . .
21
La grille en pratique . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
27
Le conteneur . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
27
28
Plusieurs ranges . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
28
29
Imbrication dlments . . . . . . . . . . . . . . . . . . . . . . . . . . . .
31
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
46
46
Page dexemple . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
49
56
Exercice 1 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
56
Exercice 2 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
64
4 Elments de base
vi
19
71
73
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
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
III
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
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 212
. . . . . . . . . . . . . . . . . . . . 249
Le Scrollspy . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 250
Mise en page avec le Scrollspy . . . . . . . . . . . . . . . . . . . . . . . . 250
Un mouvement fluide . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 256
ix
259
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 288
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.
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
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.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 ?
INSTALLATION
...
< 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
< script src = " bootstrap / js / jquery . js " > </ script >
< script src = " bootstrap / js / bootstrap . min . js " > </ script >
Et le fichier de thme ?
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 :
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
< 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 >
11
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
< 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
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
< 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
49
13
53
54
55
56
57
58
59
60
61
62
63
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 >
Le contenu de la page est ensuite insr dans une DIV comportant la classe container :
1
2
3
4
5
6
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. . .
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
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 " >
@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
Oui parce quon veut prendre en compte tous les mdias existants ! Voici une syntaxe
quivalente :
1
On en profite pour voir quon peut combiner des lments avec des oprateurs logiques.
Voici une autre expression avec le mme oprateur logique :
1
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
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
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
3
4
5
6
7
8
9
10
11
17
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
Prsentation
Le principe dune grille
Une grille est tout simplement un dcoupage en cellules de mmes dimensions (voir
figure 2.1).
Terminologie
Une grille est dcoupe en ranges (appeles row, parce que tout est en anglais) et
colonnes (col ), comme la figure 2.3.
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).
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 :
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
PRSENTATION
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
24
PRSENTATION
Un petit exemple ?
La figure 2.9 illustre ce code avec leffet quand on passe sur un cran plus grand.
La figure 2.10 illustre ce code avec leffet quand on passe sur un cran plus petit ou
plus grand.
La figure 2.11 illustre ce code avec leffet quand on passe sur un cran de plus en plus
petit.
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.
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
27
}
...
@media ( min - width : 992px ) {
. container {
max - width : 970px ;
}
...
@media ( min - width : 1200px ) {
. container {
max - width : 1170px ;
}
...
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
. col - lg - offset - 6 {
margin - left : 50 %;
}
Dans ce cas, 6 colonnes reprsentent la moiti de la fentre donc 50%. Voici un exemple :
29
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
31
< 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 >
32
LA GRILLE EN PRATIQUE
20
Un petit TP
Pour vous entraner, je vous propose dobtenir le rsultat visible la figure 2.20.
33
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
MISE EN PAGE
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
35
MISE EN PAGE
Troisime cas
Enrichissons encore la mise en page :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
37
MISE EN PAGE
39
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
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 >
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
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
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
46
< 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
Le rendu sur grand cran est parfait avec 6 photos sur la largeur (voir figure 3.1).
47
48
< 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 >
Page dexemple
Construisons maintenant une page complte qui intgre la partie que nous venons de
traiter :
49
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
50
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
51
. 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
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 >
53
54
</ p >
Observez la figure 3.8 la qualit du popup lorsque lon passe le curseur au-dessus de
labrviation SAT.
Une citation
Le chapitre suivant comporte une citation avec utilisation de la balise blockquote :
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
55
<p > < strong > Tigrou Alfred </ strong > < br >
All e des fauves < br >
28645 F lins - sur - Loire < br >
</ address >
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
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
57
Aside
</ aside >
< aside class = " col - lg - 12 " >
Aside
</ aside >
</ div >
</ div >
48
49
50
51
52
53
54
55
56
57
58
59
14
15
16
17
18
19
20
21
22
23
24
58
59
33
34
35
36
37
38
< div class = " clearfix visible - sm " > </ div >
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
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 ;
}
61
62
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
< div class = " clearfix visible - sm " > </ div >
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
63
Exercice 2
Voyons maintenant un autre cas. Je veux obtenir le rsultat visible la figure 3.16.
14
15
16
17
18
19
20
21
22
23
64
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
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
14
15
16
17
18
19
65
66
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
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
14
15
16
17
67
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
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
69
70
Deuxime partie
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
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
74
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
75
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
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 >
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
78
79
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 >
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
</ 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 >
82
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 " >
84
< table class = " table table - bordered table - striped table condensed " >
< caption >
< h4 > Les menaces pour les tigres </ h4 >
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
85
< td > Commerce ill gal de produits d riv s de tigres </ td >
</ tr >
</ tbody >
</ table >
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
FORMULAIRES
87
< 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 >
88
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 >
La page dexemple
Voici la troisime version de notre page consacre aux tigres :
1
2
3
4
5
6
7
8
9
10
11
12
13
89
}
</ 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
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
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
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
93
94
FORMULAIRES
95
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
96
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
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 >
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
97
FORMULAIRES
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
FORMULAIRES
FORMULAIRES
103
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 >
FORMULAIRES
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
107
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
108
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
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
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
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).
< 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
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 >
115
<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 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
117
< 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
119
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 >
120
< button class = " btn btn - primary " type = " submit " > < span class = "
glyphicon glyphicon - ok - sign " style = " color :# 4f4 ; " > </ span >
Envoyer </ button >
< 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
. 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 >
< link href = " http :// netdna . bootstrapcdn . com / font - awesome / 4 . 0 . 3 /
css / font - awesome . css " rel = " stylesheet " >
122
Il faut d verrouiller <i class = " fa fa - unlock " > </ i > pour sortir
<i class = " fa fa - arrow - right " > </ i >
class = " fa
class = " fa
class = " fa
class = " fa
class = " fa
fa - print
fa - print
fa - print
fa - print
fa - print
Taille
Taille
Taille
Taille
Taille
fa
fa
fa
fa
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
Effet
Image coins arrondis
Image circulaire
Image avec liser blanc
. img - responsive {
display : block ;
max - width : 100 %;
124
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
126
Chapitre
127
La navigation
La page dexemple
Voici le code ajout la page dexemple pour lquiper dune barre de navigation :
1
2
4
5
...
en - t te
...
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
...
26
contenu
...
27
28
29
LA NAVIGATION
129
. 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
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
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 >
< link href = " assets / css / bootstrap . css " rel = " stylesheet " >
< style type = " text / css " >
body { padding - top : 70px ; }
</ style >
< div class = " navbar navbar - default navbar - static - top " >
11
12
LA NAVIGATION
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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
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
11
12
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
< 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
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
60
61
62
63
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
LA NAVIGATION
77
set_display (0 , show_per_page ) ;
78
79
}) ;
80
81
82
83
84
85
139
</ ul >
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
141
Jumbotron
Jumbotron contenu
La classe jumbotron permet de rendre le texte trs visible. Prenons un exemple :
1
2
3
4
5
6
. jumbotron {
padding : 30px ;
margin - bottom : 30px ;
color : inherit ;
background - color : # eee ;
}
6
7
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 >
< 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
< 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 >
< h4 > < span class = " label " > Si vous voulez me laisser un message </
span > </ h4 >
< h4 > Comment m ' avez - vous trouv ? </ h4 >
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 >
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 >
< 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 >
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
Ce qui donne une organisation bien rgulire, comme le montre la figure 5.27.
146
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
147
148
150
151
1 </ li >
2 </ li >
3 </ li >
4 </ li >
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 >
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
154
155
< 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 >
156
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
157
158
</ a >
<a href = " # " class = " list - group - item " >
...
</ a >
12
13
...
14
15
16
159
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
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
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
162
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 >
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 >
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 >
< div class = " alert alert - info col - lg - 3 " >
Un <a href = " # " class = " alert - link " > joli lien </ a > dans une
alerte ...
</ div >
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
< button type = " button " class = " close " data - dismiss = " alert " >&
times ; </ button >
< strong > Attention ! </ strong > Vous allez vraiment trop loin !
</ div >
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
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
167
22
168
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. . .
169
170
}
$ ( function () {
$ ( " # animer " ) . click ( function () {
timer ( 0 ) ;
}) ;
}) ;
</ script >
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
172
Troisime partie
173
Chapitre
175
Gnralits
La librairie jQuery
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 :
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.
Placer jQuery
Il est bon dorganiser un peu les fichiers dun site en rpertoires du genre (voir figure
6.2).
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
$ ( 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
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
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 ') ;
GNRALITS
< script src = " js / jquery . js " > </ script >
< script src = " js / tab . js " > </ script >
< script src = " js / jquery . js " > </ script >
< script src = " js / bootstrap . min . js " > </ script >
< 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
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
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
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
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
181
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 >
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
183
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
185
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
188
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
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 >
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
190
MENU DROULANT
27
28
29
30
< script src = " assets / js / jquery . js " > </ script >
< script src = " assets / js / bootstrap . min . js " > </ script >
</ body >
</ html >
< 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.
Oui cest bien, mais parfois jai besoin que le menu saffiche vers le haut
MENU DROULANT
193
< 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 >
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
194
MENU DROULANT
12
13
</ ul >
</ div >
195
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
196
MENU DROULANT
6
7
8
9
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
197
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
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
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
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.
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 >
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
< button data - toggle = " modal " data - backdrop = " false " href = " # infos "
class = " btn btn - primary " > Informations </ button >
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
203
Il faut prvoir les classes pour faire bien apparatre la fentre modale. Vous verrez le
rsultat la figure 6.19.
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
206
FENTRE MODALE
<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
< 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. . .
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
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
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
209
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
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
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
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
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
Dsactiver un lien
Vous pouvez marquer un lien comme inactif avec la classe disabled, comme la figure
6.28 :
1
2
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 >
< li class = " disabled " > <a href = " # livres " > Livres </ a > </ li >
213
< 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 >
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 >
ONGLETS
1
< ul class = " nav nav - pills nav - stacked pull - right " >
La page dexemple
Notre page dexemple est maintenant enrichie donglets dans la partie infrieure, comme
la figure 6.32.
215
32
33
34
35
36
37
38
39
40
41
42
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
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
217
< 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 >
$ ( 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 () ) ;
}) ;
}) ;
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>
< 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 >
< 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
< 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 ) ;
}
})
}) ;
<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 " ;
}
}
})
}) ;
La page dexemple
La page dexemple a t agrmente de boutons groups de type radio pour choisir
une vido (voir la figure 6.38).
< div class = " btn - group " data - toggle = " buttons " >
221
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.
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
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) :
224
CARROUSEL
< 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 >
225
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
$ ( function () {
$ ( '. carousel ') . carousel ({ interval : 2000 }) ;
227
}) ;
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
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
229
< 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
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
231
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
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).
Info-bulle
Un exemple simple
Le but est dobtenir de jolies info-bulles, comme la figure 6.50.
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).
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.
$ ( 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
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.
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
236
INFO-BULLES ET POPOVER
$ ( " # 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
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 >
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 >
21
22
23
24
25
26
27
28
29
30
31
32
33
34
EFFET ACCORDON
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
27
28
29
30
31
32
33
34
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 >
243
6
7
8
9
10
11
12
13
14
15
16
17
18
19
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
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
8
9
10
11
12
13
14
15
16
17
18
19
20
21
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
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
247
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
248
EFFET ACCORDON
30
31
32
33
34
35
249
31
32
33
34
35
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
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 = " 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
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
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
< 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
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
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
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
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
260
CONFIGURATION SIMPLIFIE
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
261
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
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 ;
}
CONFIGURATION SIMPLIFIE
des liens, la taille des caractres. . . On peut se demander sil nest pas plus simple de
modifier directement Bootstrap. . .
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).
CONFIGURATION SIMPLIFIE
< link href = " assets / css / bootstrap . min . v1_1 . css " rel = " stylesheet "
>
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
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.
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
...
// Buttons
// - - - - - - - - - - - - - - - - - - - - - - - - -
4
5
normal ;
# 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 ;
}
. 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
@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
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
270
// 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
Slecteurs embots
On peut inclure des slecteurs dans une dfinition, comme ici dans le fichier dropdowns.less :
1
2
3
4
5
6
7
8
9
10
11
12
13
271
. 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
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 ;
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 %) ;
@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
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
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
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 ) ;
}
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
@gray - lighter :
. jumbotron {
padding : 30px ;
margin - bottom : 30px ;
color : inherit ;
background - color : # eee ;
}
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 ) ) ;
. 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
. container & {
border - radius : @border - radius - large ;
}
. 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 ) ;
}
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
body {
/*
background - color :# bbb ;
color :# 048 ; */
font - size : 12px ;
line - height : 16px ;
}
a {
color : # 028 ;
}
footer {
text - align : center ;
277
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 ;
}
// Optional heading
. panel - heading {
padding : 10px 15px ;
border - bottom : 1px solid @panel - border ;
. border - top - radius ( @panel - border - radius - 1 ) ;
}
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
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
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
281
11
12
13
14
15
16
17
18
19
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
282
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
283
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
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
284
42
43
44
45
}
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.
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 :
. img - retina ( " image_de_base . jpg " , " image_double . jpg " , 100px ,
100px ) ;
< 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
< 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
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 ;
}
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
289
@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 ;
@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
6
7
< title > Theme Template for Bootstrap </ title >
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
291
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
54
292
76
77
78
79
80
81
82
83
84
85
86
293
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
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
</ 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
295
168
169
170
171
172
173
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
296
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
297
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
320
321
322
323
324
325
326
299
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
331
332
333
334
335
336
337
338
339
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
302