Easy-Micro

LOGICIEL Bootstrap
Conteneur

Présentation des trois classes de conteneurs Bootstrap pour la mise en page

Conteneur Bootstrap

Toutes les pages Bootstrap doivent être placées dans un des trois conteneurs Bootstrap. Les deux premier conteneurs sont la classe container qui centre la grille sur une largeur fixe, qui s'adapte en fonction de la largeur de l'écran ou la classe container-fluid qui permet à la grille d'occuper toute la largeur de l'écran.

<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container-fluid">
<h1>Hello</h1>
</div>
</body>
</html>
La balise meta viewport permet de contrôler la mise en page des navigateurs mobile. Le paramètre width=device-width correspond à la largeur de l'écran en pixels CSS à l'échelle 100%. La propriété initial-scale contrôle le niveau de zoom lorsque la page est chargée pour la première fois. Les propriétés maximum-scale, minimum-scale, et user-scalable contrôlent la manière dont les utilisateurs sont autorisés à zoomer ou dé-zoomer une page.

Modifier le conteneur Bootstrap

Si vous voulez modifier votre conteneur Bootstrap, rajoutez ce code dans votre propre feuille de style en prenant le soin de l'appeler APRES la feuille de style Bootstrap

si vous utilisez la classe container-fluid
.container-fuid {
background-color: brown;
}

Ou si vous utilisez la classe container
.container {
width: 940px;
margin-right: auto;
margin-left: auto;
}


Conteneurs Bootstrap réactifs

Les conteneurs réactifs vous permettent de spécifier une classe qui a une largeur de 100% jusqu'à ce que le point d'arrêt spécifié soit atteint, après quoi s'applique max-width pour chacun des points d'arrêt supérieurs. Par exemple, .container-sm est de 100% large pour commencer jusqu'à ce que le sm point de rupture est atteint, où elle s'intensifiera avec md, lg, xl et xxl.
<div class="container-sm">100% large jusqu'au small breakpoint</div>
<div class="container-md">100% large jusqu'au medium breakpoint</div>
<div class="container-lg">100% large jusqu'au large breakpoint</div>
<div class="container-xl">100% large jusqu'au extra large breakpoint</div>
<div class="container-xxl">100% large jusqu'au extra extra large breakpoint</div>
 > Voir exemple Easy-Micro

Pour aller plus loin...


Flux RSS Easy-Micro - Abonnez-vous Easy-Micro [ François Bisch ]