Nous allons maintenant utiliser ce que nous avons vu dans les chapitres précédents pour construire une page pratique.
Combinaison de classes « col-* »
Nous avons vu des mises en page utilisant sélectivement les classes pour les colonnes prévues pour les différents formats de supports. Nous allons à présent envisager leur combinaison pour gérer certains cas. Dans la page à réaliser, je veux avoir des petites photos côte à côte. Supposons que je parte de cette structure pour cette partie de la page :
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<link href="assets/css/bootstrap.css" rel="stylesheet">
<style type="text/css">
[class*="col"] { margin-bottom: 20px; }
img { width: 100%; } body { margin-top: 10px; }
</style>
</head>
<body>
<div class="container">
<section class="row">
<div class="col-lg-2"><img src="images/t1.jpg" alt="Tigre"></div>
<div class="col-lg-2"><img src="images/t2.jpg" alt="Tigre"></div>
<div class="col-lg-2"><img src="images/t3.jpg" alt="Tigre"></div>
<div class="col-lg-2"><img src="images/t4.jpg" alt="Tigre"></div>
<div class="col-lg-2"><img src="images/t5.jpg" alt="Tigre"></div>
<div class="col-lg-2"><img src="images/t6.jpg" alt="Tigre"></div>
<div class="col-lg-2"><img src="images/t7.jpg" alt="Tigre"></div>
<div class="col-lg-2"><img src="images/t8.jpg" alt="Tigre"></div>
<div class="col-lg-2"><img src="images/t9.jpg" alt="Tigre"></div>
<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>
</body> </html>
Affichage sur grand écran
Mais ça se gâte quand je rétrécis la fenêtre, puisque je sais qu'en dessous de 1200 pixels les éléments s'empilent. Du coup je me retrouve avec une image sur la largeur, et comme je les ai prévues en basse résolution, elle pixellise, comme à la figure suivante.
Affichage au-dessous de 1200 pixels
Sur moyen et grand écran : 6 images sur la largeur. Sur tablette : 4 images sur la largeur.
Sur smartphone : 3 images sur la largeur.
Comment réaliser cela ? Tout simplement en combinant les classescol-* :
<div class="container">
<section class="row">
<div class="col-xs-4 col-sm-3 col-md-2"><img src="images/t1.jpg" alt="Tigre"></div>
<div class="col-xs-4 col-sm-3 col-md-2"><img src="images/t2.jpg" alt="Tigre"></div>
<div class="col-xs-4 col-sm-3 col-md-2"><img src="images/t3.jpg" alt="Tigre"></div>
<div class="col-xs-4 col-sm-3 col-md-2"><img src="images/t4.jpg" alt="Tigre"></div>
<div class="col-xs-4 col-sm-3 col-md-2"><img src="images/t5.jpg" alt="Tigre"></div>
<div class="col-xs-4 col-sm-3 col-md-2"><img src="images/t6.jpg" alt="Tigre"></div>
<div class="col-xs-4 col-sm-3 col-md-2"><img src="images/t7.jpg" alt="Tigre"></div>
<div class="col-xs-4 col-sm-3 col-md-2"><img src="images/t8.jpg" alt="Tigre"></div>
<div class="col-xs-4 col-sm-3 col-md-2"><img src="images/t9.jpg" alt="Tigre"></div>
<div class="col-xs-4 col-sm-3 col-md-2"><img src="images/t10.jpg" alt="Tigre"></div>
<div class="col-xs-4 col-sm-3 col-md-2"><img src="images/t11.jpg" alt="Tigre"></div>
<div class="col-xs-4 col-sm-3 col-md-2"><img src="images/t12.jpg" alt="Tigre"></div>
</section> </div>
Je vais avoir ainsi :
Sur un écran de plus de 992 pixels de large : classescol-md-2 actives. Sur un écran entre 768 et 992 pixels de large : classescol-sm-3 actives. Sur un écran de moins de 768 pixels de large : classescol-xs-4 actives. Et voici à la figure suivante le résultat sur écran moyen (classescol-sm-3 actives).
Affichage sur écran moyen
Et à la figure suivante, le résultat sur petit écran (classescol-xs-4 actives).
Affichage sur petit écran
J'ai donc obtenu facilement une adaptation de la présentation de mes photos en fonction du support utilisé pour les visualiser.
Page d'exemple
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<link href="assets/css/bootstrap.css" rel="stylesheet">
<style type="text/css">
[class*="col"] { margin-bottom: 20px; } img { width: 100%; }
</style>
</head>
<body>
<div class="container">
<header class="page-header">
<h1>Mon amour pour les tigres</h1>
</header>
<section class="row">
<div class="col-lg-12">
<p>
Je suis passionné par les <strong>tigres</strong> depuis très longtemps. Ce site a été construit en <em>hommage à ces merveilleux félins...</em><br>
Je fais partie de la <abbr title="Société des Amoureux des Tigres">SAT</abbr>
qui a pour but de faire connaître ces splendides animaux. </p>
<p>Voici ce qu'en dit le wikipedia :</p>
<blockquote>
Le Tigre (Panthera tigris) est un mammifère carnivore de la famille des félidés (Felidae) du genre Panthera.
Aisément reconnaissable à sa fourrure rousse rayée de noir, il est le plus grand félin sauvage et l'un des plus grands carnivores du monde.
L'espèce est divisée en neuf sous-espèces possédant des différences mineures en termes de taille ou de comportement. Superprédateur,
il chasse principalement les cerfs et les sangliers, bien qu'il puisse s'attaquer à des proies de taille plus importante comme les buffles.
Jusqu'au XIXe siècle, le Tigre était réputé mangeur d'homme. La structure sociale des tigres en fait un animal solitaire ; le mâle possède
un territoire qui englobe les domaines de plusieurs femelles et ne participe pas à l'éducation des petits.<br>
<small class="pull-right">Wikipedia</small><br>
</blockquote>
</div>
</section>
<section class="row">
<div class="col-xs-4 col-sm-3 col-md-2"><img src="images/t1.jpg" alt="Tigre"></div>
<div class="col-xs-4 col-sm-3 col-md-2"><img src="images/t2.jpg" alt="Tigre"></div>
<div class="col-xs-4 col-sm-3 col-md-2"><img src="images/t3.jpg" alt="Tigre"></div>
<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/t10.jpg"
alt="Tigre"></div>
<div class="col-xs-4 col-sm-3 col-md-2"><img src="images/t11.jpg"
alt="Tigre"></div>
<div class="col-xs-4 col-sm-3 col-md-2"><img src="images/t12.jpg"
alt="Tigre"></div>
</section>
<section class="row">
<aside class="col-sm-4">
<address>
<p>Vous pouvez me contacter à cette adresse :</p>
<strong>Tigrou Alfred</strong><br>
Allée des fauves<br>
28645 Félins-sur-Loire<br>
</address>
</aside>
<div class="col-sm-8">
<img src="images/photo-tigre.jpg" alt="Tigre">
</div>
</section>
</div>
</body> </html>
La page d'exemple
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 suivante une visualisation du découpage.
La page d'exemple décryptée
La classe page-header
Cette classe fixe quelques valeurs :
.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 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 :
<header class="page-header">
<h1>Mon amour pour les tigres</h1> </header>
La classe « page-header »
Quelques mises en valeur
Dans le premier paragraphe, j'ai utilisé quelques mises en valeur :
<p>Je suis passionné par les <strong>tigres</strong> depuis très longtemps. Ce site a été construit en <em>hommage à ces merveilleux félins...</em><br>
Je fais partie de la <abbr title="Société des Amoureux des Tigres">SAT</abbr> qui a pour but de faire connaître ces splendides animaux.
</p>
Observez à la figure suivante la qualité du popup lorsque l'on passe le curseur au-dessus de l'abréviation SAT.
Apparence d'une abréviation
Une citation
Le chapitre suivant comporte une citation avec utilisation de la baliseblockquote:
<blockquote>Le Tigre (Panthera tigris) est un mammifère carnivore...<br> <small class="pull-right">Wikipedia</small><br>
</blockquote>
Le résultat est sobre et élégant (voir figure suivante).
Apparence d'une citation
La référence inférieure « Wikipedia » a été renvoyée à droite avec la classepull-right qui se contente de rendre flottant à droite :
.pull-right {
}
Une adresse
Dans la partie inférieure gauche figure une adresse. J'ai simplement utilisé la balise<address> :
<address>
<p>Vous pouvez me contacter à cette adresse :</p>
<p><strong>Tigrou Alfred</strong><br>
Allée des fauves<br>
28645 Félins-sur-Loire<br> </address>
Pour un résultat satisfaisant, visible à la figure suivante.
Apparence d'une adresse
Juste un peu de style ajouté
Pour donner plus d'harmonie à cette page, j'ai dû ajouter une marge basse de 20px à tous lescol et j'ai obligé les images à occuper tout l'espace disponible :
[class*="col"] { margin-bottom: 20px; } img { width: 100%; }
C'est le seul élément de style ajouté à cette page.