Easy-Micro


LOGICIEL Bootstrap
Grille Bootstrap

Présentation des grilles Bootstrap pour la mise en page

Grille Bootstrap

Les 12 colonnes de la grille de Bootstrap sont une division en pourcentage de la largeur de la fenêtre. En revanche, les lignes ont la hauteur de leur contenu. Il conviendra donc d'y associer une règle CSS de type : line-height: 40px; pour obtenir un rendu homogène.

Bootstrap est essentiellement un fichier CSS. Il comporte de nombreuses classes que l'on peut utiliser directement dans les balises HTML. Bootstrap permet une organisation spatiale des pages web à l'aide d'une grille. La première classe à connaître est row, qui représente une ligne.

Classe CSS Bootstrap pour les lignes

.row {
...
}
Source : OpenClassrooms

Il faut ensuite définir le nombre de colonnes pour chaque élément en sachant qu'il y en a au maximum 12. Pour définir le nombre de colonnes utilisées pour chaque élément, on dispose de cinq batteries de 12 classes de col-1 à col-12 (ou bien de col-sm-1 à col-sm-12 ou bien de col-md-1 à col-md-12 ou bien de col-lg-1 à col-lg-12 ou bien de col-xl-1 à col-xl-12)

Lorsque la fenêtre diminue ou s'élargit, on peut envisager deux hypothèses : les éléments se redimensionnent en restant positionnés (le total doit donc faire 12), ou alors ils s'empilent quand la fenêtre devient plus étroite et se positionnent côte à côte quand elle s'élargit (le total de la ligne est supérieur à 12). C'est ici qu'interviennent les 5 classes pour les colonnes :

Cinq classes CSS Bootstrap pour les colonnes

col-* / col-sm-* / col-md-* / col-lg-* / col-xl-*

  • col-* pour les écrans inférieurs à 576px (petit smartphone)
  • col-sm-* pour les écrans supérieurs ou égal à 576px (SMall tablette)
  • col-md-* pour les écrans supérieurs à 768px (MeDium desktop)
  • col-lg-* pour les écrans supérieurs ou égal à 992px (LarGe desktop)
  • col-xl-* pour les écrans supérieurs ou égal à 1200px (Extra Large desktop)

Toute ces classes ont par défaut un comportement de redimensionnement
Notez que la classe col-xs-* (extraSmall smarthphone) est définitivement remplacée par la classe col-* et qu'une nouvelle classe, col-xl-*, permet de faire une mise en page pour les très grand écrans.
Source : OpenClassrooms

Exemple de grille Bootstrap : 12 colonnes sur une ligne

Version smartphone :
<div class="row">
<div class="col-4">Largeur 4</div>
<div class="col-8">Largeur 8</div>
</div>

Version tablette :
<div class="row">
<div class="col-sm-4">Largeur 4</div>
<div class="col-sm-8">Largeur 8</div>
</div>
Source : OpenClassrooms

La largeur des éléments de la grille est calculée en pourcentage selon la fenêtre de visualisation.

La grille de Bootstrap doit être placée dans un conteneur avec les classes container (qui centre la grille sur une largeur fixe, qui s'adapte en fonction de la largeur de l'écran) et container-fluid qui permet à la grille d'occuper toute la largeur de l'écran.

Exemple simple

Exercice 1 : Créons un style CSS afin de faire ressortir notre grille
<!DOCTYPE html>
<html lang="fr">
<meta charset="utf-8"/>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"/>
<style>
[class*="col-"] { border: 1px solid black; }
</style>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-lg-4">4 colonnes</div>
<div class="col-lg-8">8 colonnes</div>
</div>
</div>
</body>
</html>

Les crochets CSS [] permettent de "cibler" un sélecteur sur un élément doté d'un attribut donné, ou même plus précisément selon la valeur de cet attribut.

Voir un exemple Bootstrap Easy-Micro et le même exemple mais avec la grille Bootstrap visible

Exemple avec balises de strucure

Autre exemple de mise en page avec Bootstrap en utilisant les balises HTML5 de structure (header, nav, section et footer) :
<!DOCTYPE html>
<html lang="fr">
<meta charset="utf-8"/>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"/>
<style>
[class*="col-"] { border: 1px solid black; }
</style>
</head>
<body>
<div class="container">

<header class="row">
<div class="col-lg-12">Mon Entête</div>
</header>

<div class="row">
<nav class="col-lg-2">Mon Menu</nav>
<section class="col-lg-10">Ma Section</section>
</div>

<footer class="row">
Le Pied de page
</footer>

</div>
</body>
</html>
Source : OpenClassrooms

Est utilisé ci-dessus la classe col-lg pour grand écran, ce qui fait que lorsque on passe en dessous des 1200 pixels, les lignes s'empilent à l'écran. Pour un rendu plus intéressant, il faut combiner les classes col-, col-sm et col-md et col-lg.

Cas concret

Exercice 2 : Affichage de vignette
<!DOCTYPE html>
<html lang="fr">
<meta charset="utf-8"/>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"/>
</head>
<body>
<div class="container">

<section class="row">
<div class="col-lg-2"><img src="images/t1.jpg" alt="MonImage"/></div>
<div class="col-lg-2"><img src="images/t2.jpg" alt="MonImage"/></div>
<div class="col-lg-2"><img src="images/t3.jpg" alt="MonImage"/></div>
<div class="col-lg-2"><img src="images/t4.jpg" alt="MonImage"/></div>
<div class="col-lg-2"><img src="images/t5.jpg" alt="MonImage"/></div>
<div class="col-lg-2"><img src="images/t6.jpg" alt="MonImage"/></div>
</section>
<section class="row">
<div class="col-lg-2"><img src="images/t7.jpg" alt="MonImage"/></div>
<div class="col-lg-2"><img src="images/t8.jpg" alt="MonImage"/></div>
<div class="col-lg-2"><img src="images/t9.jpg" alt="MonImage"/></div>
<div class="col-lg-2"><img src="images/t10.jpg" alt="MonImage"/></div>
<div class="col-lg-2"><img src="images/t11.jpg" alt="MonImage"/></div>
<div class="col-lg-2"><img src="images/t12.jpg" alt="MonImage"/></div>
</section>

</div>
</body>
</html>
Source : OpenClassrooms

Le rendu sur grand écran est parfait avec 6 photos sur la largeur mais ça se gâte quand je rétrécis la fenêtre (en dessous de 1200 pixels tous s'empilent). Du coup je me retrouve avec une image sur la largeur, et comme je les ai prévues en basse résolution, elles pixelises.

Comment régler cela ? Tout simplement en combinant les classes col-* comme ceci :
...

<section class="row">
<div class="col-4 col-sm-3 col-md-2"><img src="images/t1.jpg" alt="MonImage"/></div>
<div class="col-4 col-sm-3 col-md-2"><img src="images/t2.jpg" alt="MonImage"/></div>
<div class="col-4 col-sm-3 col-md-2"><img src="images/t3.jpg" alt="MonImage"/></div>
<div class="col-4 col-sm-3 col-md-2"><img src="images/t4.jpg" alt="MonImage"/></div>
<div class="col-4 col-sm-3 col-md-2"><img src="images/t5.jpg" alt="MonImage"/></div>
<div class="col-4 col-sm-3 col-md-2"><img src="images/t6.jpg" alt="MonImage"/></div>
</section>
<section class="row">
<div class="col-4 col-sm-3 col-md-2"><img src="images/t7.jpg" alt="MonImage"/></div>
<div class="col-4 col-sm-3 col-md-2"><img src="images/t8.jpg" alt="MonImage"/></div>
<div class="col-4 col-sm-3 col-md-2"><img src="images/t9.jpg" alt="MonImage"/></div>
<div class="col-4 col-sm-3 col-md-2"><img src="images/t10.jpg" alt="MonImage"/></div>
<div class="col-4 col-sm-3 col-md-2"><img src="images/t11.jpg" alt="MonImage"/></div>
<div class="col-4 col-sm-3 col-md-2"><img src="images/t12.jpg" alt="MonImage"/></div>
</section>

...

Je vais avoir ainsi :
  • Sur un écran d'ordinateur, les classes col-md-2 actives
  • Sur un écran de tablette, les classes col-sm-3 actives
  • Sur un écran de smartphone, les classes col-4 actives

Essayez maintenant de réaliser une page Bootstrap plus complète comme celle-ci

 

Pour aller plus loin...



Suivez les aventures des skippers aquitains sur EasyVoile.com
Flux RSS Easy-Micro - Abonnez-vous Easy-Micro [ François Bisch ]
Jeudi 24 janvier 2019 - Semaine 04 - Saint François de Sales (Demain: Saint Manuel)
Aujourd'hui, c'est l'anniversaire de Daniel Auteuil (1950-69 ans), acteur français, de Nastassja Kinski (1961), actrice et mannequin allemande et de Muriel Moreno (1963), chanteuse française (du groupe Niagara). Autre 24 janvier: 2009 - Tempête Klaus sur le sud-ouest de la France (60% des forêts sont dévastées).
Haut de page Easy-Micro