Voici la troisième version de notre page consacrée aux tigres : 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 { background - color :# DDD ; }
9 [ class *=" col "] { margin - bottom : 20px ; } 10 img { width : 100 %; }
11 . well {
12 background - color :# CCC ; 13 padding : 20px ;
14 } 15 </style> 16 </head> 17
18 <body>
19 <div class=" container ">
20 <header class="page - header ">
21 <h1>Mon amour pour les tigres </h1> 22 </ header >
23 <section class=" row "> 24 <div class="col -lg -12"> 25 <p>
26 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>
27 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 .
28 </p>
29 <p>Voici ce qu 'en dit le wikipedia :</p> 30 <blockquote>
31 Le Tigre ( Panthera tigris ) est un mammif ère
carnivore de la famille des fé lid és ( Felidae ) du genre Panthera .
32 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 .
33 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 ,
34 il chasse principalement les cerfs et les sangliers , bien qu 'il
puisse s' attaquer à des proies de taille plus importante comme les buffles .
35 Jusqu 'au XIXe siècle , le Tigre é tait ré put é mangeur d' homme . La
structure sociale des tigres en fait un animal solitaire ;
36 le mâle poss ède un territoire qui englobe les domaines de
plusieurs femelles et ne participe pas à l'é ducation des petits .<br>
37 <small class="pull - right ">Wikipedia </small><br> 38 </blockquote>
39 </div> 40 </ section >
41 <section class=" row ">
42 <div class="col -xs -4 col -sm -3 col -md -2"><img src="
images /t1. jpg " alt=" Tigre "></div>
43 <div class="col -xs -4 col -sm -3 col -md -2"><img src="
images /t2. jpg " alt=" Tigre "></div>
44 <div class="col -xs -4 col -sm -3 col -md -2"><img src="
images /t6. jpg " alt=" Tigre "></div>
48 <div class="col -xs -4 col -sm -3 col -md -2"><img src="
images /t7. jpg " alt=" Tigre "></div>
49 <div class="col -xs -4 col -sm -3 col -md -2"><img src="
images /t8. jpg " alt=" Tigre "></div>
50 <div class="col -xs -4 col -sm -3 col -md -2"><img src="
images /t9. jpg " alt=" Tigre "></div>
51 <div class="col -xs -4 col -sm -3 col -md -2"><img src="
images / t10 . jpg " alt=" Tigre "></div>
52 <div class="col -xs -4 col -sm -3 col -md -2"><img src="
images / t11 . jpg " alt=" Tigre "></div>
53 <div class="col -xs -4 col -sm -3 col -md -2"><img src="
images / t12 . jpg " alt=" Tigre "></div>
54 </ section >
55 <div class=" row ">
56 <section class="col -sm -4">
57 <h5>Voici les sous - esp è ces des tigres :</h5> 58 <br>
59 <ul>
60 <li>Tigre de Sib é rie </li>
61 <li>Tigre de Chine mé ridionale </li> 62 <li>Tigre de Bali </li> 63 <li>Tigre de d' Indochine </li> 64 <li>Tigre de Malaisie </li> 65 <li>Tigre de Java </li> 66 <li>Tigre de Sumatra </li> 67 <li>Tigre du Bengale </li> 68 <li>Tigre de la Caspienne </li> 69 </ul> 70 </ section >
71 <section class="col -sm -8">
72 <img src=" images /photo - tigre . jpg " alt=" Tigre "> 73 </ section >
74 </div>
75 <div class=" row ">
76 <section class="col -sm -12">
77 <table class=" table table - bordered table - striped
table - condensed ">
78 <caption>
79 <h4>Les menaces pour les tigres </h4> 80 </caption>
81 <thead>
82 <tr>
83 <th>Lieu </th> 84 <th>Menace </th>
85 </tr> 86 </thead> 87 <tbody>
88 <tr>
89 <td>Grand Mekong </td>
90 <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>
91 </tr>
92 <tr>
93 <td>Île de Sumatra </td>
94 <td>Production d' huile de palme et de pâ tes à
papiers </td>
95 </tr>
96 <tr>
97 <td>Indon é sie et Malaisie </td>
98 <td>Pâte à papier , l' huile de palme et le
caoutchouc </td>
99 </tr>
100 <tr>
101 <td>États - Unis </td>
102 <td>Les tigres captifs repr é sentent un danger
pour les tigres sauvages </td>
103 </tr>
104 <tr>
105 <td>Europe </td>
106 <td>Gros app é tit pour l' huile de palme </td> 107 </tr>
108 <tr>
109 <td>Né pal </td>
110 <td>Commerce ill é gal de produits dé riv és de
tigres </td> 111 </tr> 112 </tbody> 113 </table> 114 </ section > 115 </div>
116 <div class=" row ">
117 <section class="col -sm -8"> 118 <form class=" well ">
119 <legend>Si vous voulez me laisser un message </
legend>
120 <h4>Comment m'avez - vous trouv é ?</h4> 121 <fieldset>
122 <label for=" ami " class=" radio ">
123 <input type=" radio " name=" origine " value=" ami "
id=" ami ">
129 </label>
130 <label for=" hasard " class=" radio ">
131 <input type=" radio " name=" origine " value="
hasard " id=" hasard ">
132 Par hasard 133 </label>
134 <label for=" autre " class=" radio ">
135 <input type=" radio " name=" origine " value=" autre
" id=" autre ">
136 Autre ... 137 </label>
138 <label for=" textarea ">Votre message :</label> 139 <textarea id=" textarea " rows="4" class="form -
control "></textarea>
140 <p class="help - block ">Vous pouvez agrandir la
fen ê tre </p>
141 <button class=" btn btn - primary " type=" submit ">
Envoyer </button>
142 </fieldset> 143 </form>
144 </ section >
145 <section class="col -sm -4"> 146 <address>
147 <p>Vous pouvez me contacter à cette adresse :</p> 148 <strong>Tigrou Alfred </strong><br>
149 All ée des fauves <br>
150 28645 Félins -sur - Loire <br> 151 </address> 152 </ section > 153 </div> 154 </div> 155 </body> 156 </html>
Pour cette troisième version, j’ai 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 body { background - color :# DDD ; }
2 [ class *=" col "] { margin - bottom : 20px ; } 3 img { width : 100 %; }
4 . well {
5 background - color :# CCC ; 6 padding : 20px ;
7 }
Le fond d’un léger gris met bien en valeur le texte et les photos. Quant au formulaire (concerné par la classe well), c’est l’objet de ce chapitre. . .
Les classes « radio » et « checkbox »
Bootstrap propose l’utilisation d’une classe particulière pour les cases à cocher (check- box) et les zones d’option (radio). Nous l’avons utilisée dans le formulaire de la page : 1 <form class=" well ">
2 <legend>Si vous voulez me laisser un message </legend> 3 <h4>Comment m'avez - vous trouv é ?</h4>
4 <fieldset>
5 <label for=" ami " class=" radio ">
6 <input type=" radio " name=" origine " value=" ami " id=" ami "> 7 Par un ami
8 </label>
9 <label for=" web " class=" radio ">
10 <input type=" radio " name=" origine " value=" web " id=" web "> 11 Sur le web
12 </label>
13 <label for=" hasard " class=" radio ">
14 <input type=" radio " name=" origine " value=" hasard " id="
hasard ">
15 Par hasard 16 </label>
17 <label for=" autre " class=" radio ">
18 <input type=" radio " name=" origine " value=" autre " id="
autre ">
19 Autre ... 20 </label>
21 <label for=" textarea ">Votre message :</label>
22 <textarea id=" textarea " class="form - control " rows="4"></
textarea>
23 <p class="help - block ">Vous pouvez agrandir la fen ê tre </p> 24 <button class=" btn btn - primary " type=" submit ">Envoyer </
button>
25 </fieldset> 26 </form>
La classe « well », un peu de style, un joli bouton et un texte d’aide Voilà une classe que j’aime bien, elle provoque une jolie stylisation. J’ai apporté ce petit complément au formulaire de la page :
3 [ class *=" col "] { margin - bottom : 20px ; } 4 img { width : 100 %; } 5 . well { 6 background - color :# CCC ; 7 padding : 20px ; 8 } 9 </style>
La dernière touche a consisté à améliorer l’aspect 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 d’aide situé au-dessous de la zone de texte, ce que nous accomplissons avec la classe help-block (voir figure 4.21) : 1 <p class="help - block ">Vous pouvez agrandir la fen ê tre </p>
Figure 4.21 – Effet de la classe help-block