Comment sont définies les sections de contenu d'une page web avec bootstrap ?
Toute page web est composée de cette façon :
<html>
<head>
Cette partie n'est pas visible à l'écran, elle contient tous les "réglages" de notre page...
chargements des scripts js et feuilles de style css, titre de la page et mots clés...
</head>
<body>
<!-- Ici l'affichage à l'écran de notre page débute -->
<header>
<nav>Notre menu ...</nav>
</header>
<main>
<section>
<div class="container">
<div class="row">
<div class="col-12 col-md-6">
<h1>Titre principal de la page</h1>
</div>
</div>
</div>
</section>
</main>
<footer>
</footer>
</body>
</html>
Les balises de colonnes :
col-12 : Affichage sur 12 sur 12 colonnes disponibles (mobile first)
col-n : Affichage sur n/12 colonnes
col-1 : Affichage sur 1/12 colonnes
Gérer la largeur des blocs selon les tailles d'écrans :
Avec bootstrap, quelque soit votre affichage (Mobile/tablette/PC...), nous disposons de 12 colonnes et les conditions d'affichage peuvent être définies selon les différentes tailles d'écrans :
Il est donc disponible les conditions d'affichage ci-dessous :
xs : x-small : Mobile
sm : small : Tablette
md : Pc classique (13" à 15" ...)
lg : Ecrans larges (23" etc ...)
Nous pouvons composer nos réglages d'affichage en mélangeant les col avec xs/s/m/lg de cette sorte :
col-12 : Affichage par défaut (plus petit écran) sur 12 colonnes
col-xs-12 : (Correspond à col-12)
col-sm-6 : Affichage sur la moitié de l'écran (6 colonnes) dès la taille tablette
col-md-4 : Affichage sur un tier de l'écran (4 colonnes/12) dès la taille pc portable
col-lg-3 : Affichage sur quart de l'écran (3/12 colonnes) dès la taille PC Fixe ou télé...
Nous pouvons donc décider de la proportion qu'un bloc de contenu va prendre sur nos différents affichages (Smartphone, tablettes, pc portables ou écrans larges) en définissant dans les classes de notre div de cette façon :
<div class="col-12 col-sm-6 col-md-4 col-lg-3">
<h1>Mon titre de niveau 1</h1>
<p>Mon paragraphe de texte</p>
</div>
De cette façon, notre bloc va occuper l'espace selon les conditions définies dans la classe :
tout l'écran par défaut, la moitié en en tablette, un tier en pc portable et un quart en écran large.
Définir des espacements
Vous pouvez également ajouter des colonnes vides entre vos blocs en utilisant la condition "offset" de cette façon :
offset-lg-4
offset-md-2
offset-1