Référencement
Bootstrap propose un certain nombre de plugins pour améliorer les pages web, ils sont tous fondés sur jQuery. Il y a deux façons de faire appel à ces plugins :
– soit vous référencez juste ce qui vous est utile en prenant la librairie correspondante dans le pack de Bootstrap (que vous récupérez en cliquant sur « Download source » sur la page "Getting Started" - http://getbootstrap.com/getting-started/ comme à la figure 6.3).
– soit vous référencez la bibliothèque complète (que vous récupérez en cliquant sur « Download Bootstrap » sur la page "Getting Started" - http://getbootstrap. com/getting-started/).
Figure 6.3 – Les librairies Javascript de Bootstrap
Dans la première hypothèse, il faut faire attention aux dépendances. Elles ne sont pas nombreuses mais il faut les connaître :
– popover doit être utilisé avec tooltip – collapse doit être utilisé avec transition
Pour référencer les plugins dans l’hypothèse de l’utilisation individuelle, par exemple pour tab :
1 <script src="js/ jquery .js"></script> 2 <script src="js/ tab .js "></script>
On déclare d’abord jQuery, puis ensuite le plugin. Dans l’hypothèse de la librairie globale :
1 <script src="js/ jquery .js"></script>
2 <script src="js/ bootstrap . min .js "></script>
Vous pouvez utiliser la version commentée pendant la phase de développement : 1 <script src="js/ jquery .js"></script>
2 <script src="js/ bootstrap .js "></script>
Mise en œuvre
Il y a 2 façons d’utiliser un plugin de Bootstrap : – à partir des attributs data
– à partir d’objets jQuery
Prenons un exemple avec l’effet accordéon que nous verrons en détail ultérieurement : 1 <a href="# item " data- toggle =" collapse ">Changer </a>
3 Contenu 4 </div>
5 <script src=" assets /js/ jquery .js"></script>
6 <script src=" assets /js/ bootstrap . min .js"></script>
Ne vous inquiétez pas pour la syntaxe globale que nous verrons plus tard. Ce plugin est destiné à faire apparaître ou disparaître un contenu lors d’une action de l’utilisateur, ici un simple clic. Le contenu concerné dans cet exemple est le mot Contenu. Le plugin est déclenché par l’attribut data-toggle="collapse". Dans cette hypothèse d’utilisation, vous n’avez pas à manipuler de Javascript.
On peut obtenir exactement le même résultat en utilisant jQuery : 1 <a>Changer </a>
2 <div id=" item " class=" collapse "> 3 Contenu
4 </div>
5 <script src=" assets /js/ jquery .js"></script>
6 <script src=" assets /js/ bootstrap . min .js"></script> 7 <script>
8 $( function () {
9 $('a '). click ( function () {
10 $('# item '). collapse (' toggle ');
11 });
12 });
13 </script>
Cette fois je n’ai pas utilisé l’attribut mais un objet jQuery avec le sélecteur ’a’ pour pointer le lien et la méthode collapse avec le paramètre toggle. Nous verrons plusieurs cas d’utilisation de cette façon de procéder qui est plus laborieuse que la précédente, mais qui s’avère incontournable selon les actions que nous voulons effectuer.
Les événements
La plupart des plugins exposent des événements. En poursuivant l’exemple précédent, on peut faire apparaître un message lorsque le contenu est visible :
1 <a>Changer </a>
2 <div id=" item " class=" collapse "> 3 Contenu
4 </div>
5 <script src=" assets /js/ jquery .js"></script>
6 <script src=" assets /js/ bootstrap . min .js"></script> 7 <script>
8 $( function () {
9 $('a '). click ( function () {
10 $('# item '). collapse (' toggle ');
11 });
12 $('# item ').on(' shown .bs. collapse ', function () { 13 alert ('On me voit !');
La page d’exemple
Pour éviter de surcharger de code les chapitres sur les plugins, voici la page d’exemple complétée avec des cas d’utilisation des plugins concernés :
1 <!DOCTYPE HTML> 2 <html>
3
4 <head>
5 <meta charset="utf -8">
6 <link href=" assets / css / bootstrap . css " rel=" stylesheet "> 7 <style type=" text / css ">
8 body {
9 background - color :# DDD ; 10 padding - top : 10px ;
11 }
12 [ class *="col -"] { margin - bottom : 20px ; } 13 img { width : 100 %; }
14 . well {
15 background - color :# CCC ; 16 padding : 20px ;
17 }
18 a: active , a: focus { outline : none ; } 19 </style>
20 </head> 21
22 <body>
23 <div class=" container ">
24 <nav class=" navbar navbar - inverse " role =" navigation "> 25 <div class=" navbar - header ">
26 <button type=" button " class=" navbar - toggle " data-
toggle =" collapse " data- target =". navbar - collapse ">
27 <span class="icon - bar "></span> 28 <span class="icon - bar "></span> 29 <span class="icon - bar "></span> 30 </button>
31 <a class=" navbar - brand " href="#">Les Tigres </a> 32 </div>
33 <div class=" collapse navbar - collapse "> 34 <ul class=" nav navbar - nav ">
35 <li> <a href="#">Accueil </a> </li> 36 <li class=" dropdown ">
37 <a class=" dropdown - toggle " data- toggle =" dropdown "
>
38 <ul class=" dropdown - menu ">
39 <li><a href="#">Dompteurs </a></li> 40 <li><a href="#">Zoos </a></li> 41 <li><a href="#">Chasseurs </a></li> 42 <li class=" divider "></li>
43 <li><a href="#">Autres té moignages </a></li> 44 </ul>
45 </li>
46 <li> <a href="#">Liens </a> </li> 47 <li> <a href="#">Réfé rences </a> </li> 48 </ul>
49 <form class=" navbar - form navbar - right "> 50 <div class="input - group ">
51 <input type=" text " style=" width : 150px " class="
input -sm form - control " placeholder =" Recherche "
>
52 <span class="input -group - btn ">
53 <button type=" submit " class=" btn btn - primary
btn -sm"><span class=" glyphicon glyphicon - eye - open "></span> Chercher </button>
54 </span> 55 </div> 56 </form> 57 </div> 58 </ nav >
59 <header class=" row "> 60 <div class="col -lg -12">
61 <h1>Mon amour pour les tigres </h1> 62 </div>
63 </ header >
64 <section class=" row "> 65 <div class="col -lg -12"> 66 <p>
67 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>
68 <br>
69 Je fais partie de la <abbr title=" Soci été des
Amoureux des Tigres ">SAT </abbr> qui a pour but de faire conna î tre ces splendides animaux .
70 </p>
71 <p>Voici ce qu 'en dit le wikipedia :</p> 72 <blockquote>
73 Le Tigre ( Panthera tigris ) est un <a data- toggle ="
tooltip " href="#" title=" Classe de vert ébrés"> mammif ère </a> carnivore de la famille
74 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
chasse principalement les cerfs et les sangliers , bien qu ' il puisse s' attaquer à des
78 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
79 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>
80 <small class="pull - right ">Wikipedia </small><br> 81 </blockquote>
82 </div> 83 </ section >
84 <section class=" row ">
85 <div class=" media col -lg -12"> 86 <div class="pull - right ">
87 <iframe width=" 420 " height=" 320 " src=" http :// www .
youtube . com / embed / VmnIeLmjuHA " frameborder="0"
allowfullscreen ></iframe>
88 </div>
89 <div class="media - body pull - right ">
90 <div class="btn - group " data- toggle =" buttons "> 91 <label class=" btn btn - primary ">
92 <input type=" radio ">Vid éo 1 93 </label>
94 <label class=" btn btn - primary "> 95 <input type=" radio ">Vid éo 2 96 </label>
97 <label class=" btn btn - primary "> 98 <input type=" radio ">Vid éo 3 99 </label>
100 </div> 101 </div> 102 </div> 103 </ section >
104 <section class=" row ">
105 <div class="col -xs -4 col -sm -3 col -md -2 "> 106 <a href="#" class=" thumbnail ">
107 <img src=" images /t1. jpg " alt=" Tigre " class="img -
rounded ">
108 </a> 109 </div>
110 <div class="col -xs -4 col -sm -3 col -md -2 "> 111 <a href="#" class=" thumbnail ">
112 <img src=" images /t2. jpg " alt=" Tigre " class="img -
113 </a> 114 </div>
115 <div class="col -xs -4 col -sm -3 col -md -2 "> 116 <a href="#" class=" thumbnail ">
117 <img src=" images /t3. jpg " alt=" Tigre " class="img -
rounded ">
118 </a> 119 </div>
120 <div class="col -xs -4 col -sm -3 col -md -2 "> 121 <a href="#" class=" thumbnail ">
122 <img src=" images /t4. jpg " alt=" Tigre " class="img -
rounded ">
123 </a> 124 </div>
125 <div class="col -xs -4 col -sm -3 col -md -2 "> 126 <a href="#" class=" thumbnail ">
127 <img src=" images /t5. jpg " alt=" Tigre " class="img -
rounded ">
128 </a> 129 </div>
130 <div class="col -xs -4 col -sm -3 col -md -2 "> 131 <a href="#" class=" thumbnail ">
132 <img src=" images /t6. jpg " alt=" Tigre " class="img -
rounded ">
133 </a> 134 </div>
135 <div class="col -xs -4 col -sm -3 col -md -2 "> 136 <a href="#" class=" thumbnail ">
137 <img src=" images /t7. jpg " alt=" Tigre " class="img -
rounded ">
138 </a> 139 </div>
140 <div class="col -xs -4 col -sm -3 col -md -2 "> 141 <a href="#" class=" thumbnail ">
142 <img src=" images /t8. jpg " alt=" Tigre " class="img -
rounded ">
143 </a> 144 </div>
145 <div class="col -xs -4 col -sm -3 col -md -2 "> 146 <a href="#" class=" thumbnail ">
147 <img src=" images /t9. jpg " alt=" Tigre " class="img -
rounded ">
148 </a> 149 </div>
150 <div class="col -xs -4 col -sm -3 col -md -2 "> 151 <a href="#" class=" thumbnail ">
152 <img src=" images / t10 . jpg " alt=" Tigre " class="img -
rounded ">
153 </a> 154 </div>
159 </div>
160 <div class="col -xs -4 col -sm -3 col -md -2 "> 161 <a href="#" class=" thumbnail ">
162 <img src=" images / t12 . jpg " alt=" Tigre " class="img -
rounded ">
163 </a> 164 </div> 165 </ section >
166 <div class=" row ">
167 <section class="col -sm -4">
168 <div class=" panel panel - info "> 169 <div class="panel - heading ">
170 <h3 class="panel - title ">Les sous - esp è ces des
tigres :</h3>
171 </div>
172 <div class="list - group ">
173 <a href="# infos " class="list -group - item " data-
toggle =" modal ">
174 Tigre de Sib é rie
175 <span class=" badge ">120 </span> 176 </a>
177 <div class=" modal fade " id=" infos " role =" dialog "
aria - labelledby =" modalTitre " aria - hidden =" true ">
178 <div class="modal - dialog "> 179 <div class="modal - content "> 180 <div class="modal - header ">
181 <button type=" button " class=" close " data-
dismiss =" modal " aria - hidden =" true ">x</
button>
182 <h4 id=" modalTitre " class="modal - title ">
Plus d' informations sur le tigre de Sib é rie </h4>
183 </div>
184 <div class="modal - body "> 185 <blockquote>
186 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 ,
187 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 .
188 La longueur totale du corps avec la queue est comprise entre 2,