Bootstrap4 Système de grille

Le système de grille Bootstrap est la méthode la plus rapide et la plus simple pour créer des conceptions de page web réactives.

Bootstrap fournit un système de grille fluide, réactif et prioritaire pour les appareils mobiles, qui se divise automatiquement en fonction de la taille de l'écran ou de la vue (viewport) en augmentant, jusqu'à un maximum de 12 colonnes.

Nous pouvons également définir le nombre de colonnes selon nos besoins :

Bootstrap 4 Le système de grille est réactif, les colonnes se réorganisent automatiquement en fonction de la taille de l'écran.

Les classes de grille

Bootstrap 4Contient des classes de grille prédéfinies, permettant de créer rapidement des conceptions de grille pour différents types d'appareils (par exemple, téléphones, tablettes, ordinateurs portables et ordinateurs de bureau, etc.). Par exemple, vous pouvez utiliser ces .col-*Les classes pour les appareils de très petit écran en mode portrait créent des colonnes de grille, de même, vous pouvez utiliser ces .col-sm-*Les classes pour les appareils de petit écran (comme les téléphones en mode paysage), .col-md-*Les appareils de grand écran (comme les tablettes), .col-lg-*Les appareils grand format (comme les ordinateurs de bureau) et .col-xl-*Les classes pour les écrans d'ordinateurs de bureau ultra-grands créent des colonnes de grille.

Bootstrap 4 Le système de grille a les 5 Les classes:

• .col- Pour tous les appareils

• .col-sm- Tablette 　- La largeur de l'écran est égale ou supérieure à 576px

• .col-md- Écran de bureau 　- La largeur de l'écran est égale ou supérieure à 768px)

• .col-lg- Écran de bureau grand 　- La largeur de l'écran est égale ou supérieure à 992px)

• .col-xl- Écran de bureau ultra-grand - La largeur de l'écran est égale ou supérieure à 1200px)

Règles du système de grille

Bootstrap4 Règles du système de grille:

• Chaque rangée de grille doit être placée dans un .container (largeur fixe) ou .container-Dans les conteneurs de classes fluid (largeur d'écran complète), de sorte que certains marges extérieures et intérieures puissent être définies automatiquement.

• Utilisez des lignes pour créer des groupes de colonnes horizontales.

• Le contenu doit être placé dans les colonnes, et seules les colonnes peuvent être des descendants directs de la ligne.

• Les classes prédéfinies telles que .row et .col-sm-4 Il peut être utilisé pour créer rapidement des conceptions de grille.

• Les colonnes sont créées par le remplissage pour créer des espaces entre le contenu des colonnes. Cet espace est défini par les marges négatives sur la classe .rows pour le premier et le dernier rang.

• Les colonnes de grille sont créées en traversant les colonnes spécifiées 12 colonnes pour créer. Par exemple, pour définir trois colonnes égales, il faut utiliser trois .col-sm-4 pour définir.

• Bootstrap 3 et Bootstrap 4 La plus grande différence réside dans Bootstrap 4 Maintenant, utilisez flexbox (boîte flexible) au lieu de flotter. 　 L'un des principaux avantages de Flexbox est que les colonnes de grille sans largeur spécifiée sont automatiquement définies commeColonnes égales en largeur et en hauteur 。 Si vous souhaitez en savoir plus sur Flexbox, vous pouvez lire notre tutoriel CSS Flexbox.

Le tableau suivant résume comment le système de grille Bootstrap fonctionne sur différents appareils :

Les classes suivantes peuvent être utilisées ensemble pour créer des mises en page de page plus flexibles.

Bootstrap 4 Structure de base de la grille :

Le code suivant est la structure de base de Bootstrap 4 Structure de base de la grille :

Bootstrap4 　Structure de la grille

<!--　Premier exemple : Contrôlez la largeur des colonnes et la manière dont elles s'affichent sur différents appareils　-->
<div　class="row">
　　<div　class="col-*-*></div>
</div>
<div　class="row">
　　<div　class="col-*-*></div>
　　<div　class="col-*-*></div>
　　<div　class="col-*-*></div>
</div>
　
<!--　Deuxième exemple : Laissez Bootstrap gérer automatiquement le layout　-->
<div　class="row">
　　<div　class="col"></div>
　　<div　class="col"></div>
　　<div　class="col"></div>
</div>

Premier exemple : Contrôlez la largeur des colonnes et la manière dont elles s'affichent sur différents appareilsPremier exemple : Créez une ligne ( <divclass="row">.col-*-* ) dans la classe). Ensuite, ajoutez les colonnes nécessaires (*) ) représente l'appareil de réponse : sm, md, lg ou xl, le deuxième astérisque (*) représente un nombre, la somme des nombres de la même ligne doit être 12。

Deuxième exemple: Ne pas mettre de nombre sur le dessus col Ajoutez des nombres sur le dessus, bootstrap gère automatiquement le layout, chaque colonne de la même ligne a une largeur égale : Deux "col" Chaque une représente 50% de largeur. Trois 　"col"Chaque une représente 33.33% de largeur, quatre 　"col"Chaque une représente 25% de largeur, etc. De même, vous pouvez utiliser .col-sm|md|lg|xl Pour définir les règles de réponse des colonnes.

Nous allons maintenant voir un exemple.

Créez des colonnes de largeur égale, Bootstrap gère automatiquement le layout

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap 示例</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div　class="container-fluid">
　　<h1>Bonjour le monde !</h1>
　　<p>Créez trois colonnes de largeur égale ! Essayez d'ajouter un nouveau div avec la classe "col" dans un div avec la classe "row", cela affichera quatre colonnes de largeur égale.</p>
　　<div　class="row">
　　　　<div　class="col"　style="background-color:lavender;">.col</div>
　　　　<div　class="col"　style="background-color:orange;">.col</div>
　　　　<div　class="col"　style="background-color:lavender;">.col</div>
　　</div>
</div>
</body>
</html>

Colonnes réactives de largeur égale

Les exemples suivants montrent comment créer des colonnes réactives de largeur égale sur des tablettes et des écrans plus grands. Sur les appareils mobiles, c'est-à-dire lorsque la largeur de l'écran est inférieure à 576px, les quatre colonnes seront empilées verticalement.:

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap 示例</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div　class="container-fluid">
　　<h1>Bonjour le monde !</h1>
　　<p>调整浏览器大小查看效果。</p>
　　<p>Sur les appareils mobiles, c'est-à-dire lorsque la largeur de l'écran est inférieure à　576px 时，四个列将会上下堆叠排版。</p>
　　<div　class="row">
　　　　<div　class="col-sm-3" style="background-color:lavender;">.col-sm-3</div>
　　　　<div　class="col-sm-3" style="background-color:lavenderblush;">.col-sm-3</div>
　　　　<div　class="col-sm-3" style="background-color:lavender;">.col-sm-3</div>
　　　　<div　class="col-sm-3" style="background-color:lavenderblush;">.col-sm-3</div>
　　</div>
</div>
</body>
</html>

Colonnes réactives de largeur inégale

Les exemples suivants montrent comment créer des colonnes réactives de largeur inégale sur des tablettes et des écrans plus grands. Sur les appareils mobiles, c'est-à-dire lorsque la largeur de l'écran est inférieure à 576Lorsque la valeur de px est atteinte, les deux colonnes seront empilées verticalement.:

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap 示例</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div　class="container-fluid">
　　<h1>Bonjour le monde !</h1>
　　<p>调整浏览器大小查看效果。</p>
　　<p>在移动设备上，即屏幕宽度小于　576px 时，四个列将会上下堆叠排版。</p>
　　<div　class="row">
　　　　<div　class="col-sm-4" style="background-color:lavender;">.col-sm-4</div>
　　　　<div　class="col-sm-8" style="background-color:lavenderblush;">.col-sm-8</div>
　　</div>
</div>
</body>
</html>

平板和桌面端

以下示例演示了在桌面设备的显示器上两个列的宽度各占 50%，如果在平板端则左边的宽度为 25%，右边的宽度为 75%，在移动手机等小型设备上会堆叠显示。

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap 示例</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div　class="container-fluid">
　　<h1>平板与桌面的网格布局</h1>
　　<p>以下示例演示了在桌面设备的显示器上两个列的宽度各占　50%，如果在平板端则左边的宽度为　25%，右边的宽度为　75%，在移动手机等小型设备上会堆叠显示。
</p>
　　<p>调整浏览器窗口大小，查看效果。</p>
　　<div　class="container-fluid">
　　　　<div　class="row">
　　　　　　<div　class="col-sm-3　col-md-6　bg-success">
　　　　　　　　w3codebox
　　　　　　</div>
　　　　　　<div　class="col-sm-9　col-md-6　bg-warning">
　　　　　　　　基础教程网
　　　　　　</div>
　　　　</div>
　　</div>
</div>
</body>
</html>

平板、桌面、大桌面显示器、超大桌面显示器

以下示例在平板、桌面、大桌面显示器、超大桌面显示器的宽度比例为分别为：25%/75%、50%/50%、33.33%/66.67%、16.67/83.33%，在移动手机等小型设备上会堆叠显示。

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap 示例</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div　class="container-fluid">
　　<h1>平板、桌面、大桌面显示器、超大桌面显示器</h1>
　　<p>以下示例在平板、桌面、大桌面显示器、超大桌面显示器的宽度比例为分别为：25%/75%、50%/50%、33.33%/66.67%、16.67/83.33%，在移动手机等小型设备上会堆叠显示。</p>
　　<p>调整浏览器窗口大小，查看效果。</p>
　　<div　class="container-fluid">
　　　　<div　class="row">
　　　　　　<div　class="col-sm-3　col-md-6　col-lg-4　col-xl-2　bg-success">
　　　　　　　　w3codebox
　　　　　　</div>
　　　　　　<div　class="col-sm-9　col-md-6　col-lg-8　col-xl-10　bg-warning">
　　　　　　　　基础教程网
　　　　　　</div>
　　　　</div>
　　</div>
</div>
</body>
</html>

偏移列

偏移列通过 offset-*-* 类来设置。第一个星号( * )可以是 sm、md、lg、xl，表示屏幕设备类型，第二个星号( * )可以是 1 到 11 的数字。

为了在大屏幕显示器上使用偏移，请使用 .offset-md-* 类。这些类会把一个列的左外边距(margin)增加 * 列，其中 * 范围是从 1 到 11。

例如：.offset-md-4 C'est .col-md-4 向右移动了四列。

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap 示例</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div　class="container-fluid">
　　<h1>Décalage de colonnes</h1>
　　<p>.offset-md-4　C'est .col-md-4　a été déplacé à droite de quatre colonnes.</p>
　　<div　class="container-fluid">
　　　　<div　class="row">
　　　　　　<div　class="col-md-4　bg-success">.col-md-4</div>
　　　　　　<div　class="col-md-4　offset-md-4　bg-warning">.col-md-4　.offset-md-4</div>
　　　　</div>
　　　　<div　class="row">
　　　　　　<div　class="col-md-3　offset-md-3　bg-success">.col-md-3　.offset-md-3</div>
　　　　　　<div　class="col-md-3　offset-md-3　bg-warning">.col-md-3　.offset-md-3</div>
　　　　</div>
　　　　<div　class="row">
　　　　　　<div　class="col-md-6　offset-md-3　bg-success">.col-md-6　.offset-md-3</div>
　　　　</div>
　　</div>
</div>
</body>
</html>

Nous espérons que vous avez déjà compris le nouveau Bootstrap 4Les bases du système de grille Flexbox. Dans les prochaines quelques chapitres, vous apprendrez à créer des conceptions de page web de base en utilisant ce système de grille Flexbox.