Construisons maintenant une page complète qui intègre la partie que nous venons de traiter :
Figure 3.4 – Affichage sur petit écran
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 [ class *=" col "] { margin - bottom : 20px ; } 9 img { width : 100 %; }
10 </style> 11 </head> 12
13 <body>
14 <div class=" container ">
15 <header class="page - header ">
16 <h1>Mon amour pour les tigres </h1> 17 </ header >
18 <section class=" row "> 19 <div class="col -lg -12"> 20 <p>
21 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>
22 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 .
23 </p>
est le plus grand fé lin sauvage et l'un des plus grands carnivores du monde .
28 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 ,
29 il chasse principalement les cerfs et les sangliers , bien qu 'il
puisse s' attaquer à des proies de taille plus importante comme les buffles .
30 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
31 un territoire qui englobe les domaines de plusieurs femelles et
ne participe pas à l'é ducation des petits .<br>
32 <small class="pull - right ">Wikipedia </small><br> 33 </blockquote>
34 </div> 35 </ section >
36 <section class=" row ">
37 <div class="col -xs -4 col -sm -3 col -md -2"><img src="
images /t1. jpg " alt=" Tigre "></div>
38 <div class="col -xs -4 col -sm -3 col -md -2"><img src="
images /t2. jpg " alt=" Tigre "></div>
39 <div class="col -xs -4 col -sm -3 col -md -2"><img src="
images /t3. jpg " alt=" Tigre "></div>
40 <div class="col -xs -4 col -sm -3 col -md -2"><img src="
images /t4. jpg " alt=" Tigre "></div>
41 <div class="col -xs -4 col -sm -3 col -md -2"><img src="
images /t5. jpg " alt=" Tigre "></div>
42 <div class="col -xs -4 col -sm -3 col -md -2"><img src="
images /t6. jpg " alt=" Tigre "></div>
43 <div class="col -xs -4 col -sm -3 col -md -2"><img src="
images /t7. jpg " alt=" Tigre "></div>
44 <div class="col -xs -4 col -sm -3 col -md -2"><img src="
images /t8. jpg " alt=" Tigre "></div>
45 <div class="col -xs -4 col -sm -3 col -md -2"><img src="
images /t9. jpg " alt=" Tigre "></div>
46 <div class="col -xs -4 col -sm -3 col -md -2"><img src="
images / t10 . jpg " alt=" Tigre "></div>
47 <div class="col -xs -4 col -sm -3 col -md -2"><img src="
images / t11 . jpg " alt=" Tigre "></div>
48 <div class="col -xs -4 col -sm -3 col -md -2"><img src="
images / t12 . jpg " alt=" Tigre "></div>
49 </ section >
50 <section class=" row "> 51 <aside class="col -sm -4">
52 <address>
53 <p>Vous pouvez me contacter à cette adresse :</p> 54 <strong>Tigrou Alfred </strong><br>
55 All ée des fauves <br>
56 28645 Félins -sur - Loire <br> 57 </address>
58 </ aside >
59 <div class="col -sm -8">
60 <img src=" images /photo - tigre . jpg " alt=" Tigre "> 61 </div>
62 </ section > 63 </div> 64 </body> 65 </html>
Voici à la figure 3.5 le résultat obtenu.
Une simple composition avec un en-tête et 3 rangées. L’en-tête ne comporte que le titre avec une classe un peu particulière que nous allons voir plus loin. La première rangée comporte un seul élément. La deuxième en revanche en comporte 12 et correspond à ce que nous avons vu précédemment. Voici à la figure 3.6 une visualisation du découpage.
La classe page-header
Cette classe fixe quelques valeurs : 1 .page - header {
2 padding - bottom : 9px ; 3 margin : 40px 0 20px ;
4 border - bottom : 1px solid # eee ; 5 }
Une marge haute de 40 pixels et basse de 20 pixels. Une ligne inférieure 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-tête de page. Il suffit d’y placer un titre comme je l’ai fait ici :
1 <header class="page - header ">
2 <h1>Mon amour pour les tigres </h1> 3 </ header >
Voici le résultat à la figure 3.7.
Quelques mises en valeur
Dans le premier paragraphe, j’ai utilisé quelques mises en valeur :
1 <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>
Figure 3.6 – La page d’exemple décryptée
Observez à la figure 3.8 la qualité du popup lorsque l’on passe le curseur au-dessus de l’abréviation SAT.
Figure 3.8 – Apparence d’une abréviation
Une citation
Le chapitre suivant comporte une citation avec utilisation de la balise blockquote : 1 <blockquote>Le Tigre ( Panthera tigris ) est un mammif ère
carnivore ... <br>
2 <small class="pull - right ">Wikipedia </small><br> 3 </blockquote>
Le résultat est sobre et élégant (voir figure 3.9).
Figure 3.9 – Apparence d’une citation
La référence inférieure « Wikipedia » a été renvoyée à droite avec la classe pull-right qui se contente de rendre flottant à droite :
1 .pull - right {
2 float : right ! important ; 3 }
Une adresse
Dans la partie inférieure gauche figure une adresse. J’ai simplement utilisé la balise <address> :
1 <address>
3 <p><strong>Tigrou Alfred </strong><br> 4 All ée des fauves <br>
5 28645 Félins -sur - Loire <br> 6 </address>
Pour un résultat satisfaisant, visible à la figure 3.10.
Figure 3.10 – Apparence d’une adresse
Juste un peu de style ajouté
Pour donner plus d’harmonie à cette page, j’ai été obligé d’ajouter une marge basse de 20px à tous les col et j’ai obligé les images à occuper tout l’espace disponible : 1 [ class *=" col "] { 2 margin - bottom : 20px ; 3 } 4 img { 5 width : 100 %; 6 }
C’est le seul élément de style ajouté à cette page.