Système de grille Bootstrap

Qu'est-ce que Grid ?

Extrait de Wikipédia :

En graphisme, une grille est une structure composée d'une série de lignes droites qui se croisent (verticales, horizontales) utilisées pour organiser un contenu (généralement bidimensionnel). Il est largement utilisé pour la mise en page et la structure du contenu dans la conception imprimée. Dans la conception Web, il s’agit d’une méthode permettant de créer rapidement des mises en page cohérentes et d’utiliser efficacement HTML et CSS.

En termes simples, les grilles dans la conception Web sont utilisées pour organiser le contenu, rendre le site Web facile à naviguer et réduire la charge de l'utilisateur.

Qu'est-ce que le système Bootstrap Grid ?

Description du système de grille dans la documentation officielle de Bootstrap :

Bootstrap comprend un système de grille fluide, réactif et axé sur les mobiles, qui peut changer avec l'appareil ou la fenêtre d'affichage. La taille augmente de manière appropriée et s'étend jusqu'à 12 colonnes. Il contient des classes prédéfinies pour des options de mise en page simples, ainsi que de puissantes classes mixin pour générer des mises en page plus sémantiques.

Comprenons la déclaration ci-dessus. Bootstrap 3 est d'abord mobile, dans le sens où le code Bootstrap commence par des composants et des grilles sur des appareils à petit écran (par exemple, un mobile, une tablette), puis s'étend aux composants et à des grilles sur des appareils à grand écran (par exemple, un ordinateur portable, un ordinateur de bureau).

Stratégie axée sur le mobile

• Contenu

• Déterminez ce qui est le plus important.

• Mise en page

• Donner la priorité aux largeurs plus petites.

• Le CSS de base est avant tout mobile, et les requêtes multimédias sont destinées aux tablettes et aux ordinateurs de bureau.

• Amélioration progressive

• Ajoutez des éléments à mesure que la taille de l'écran augmente.

Système de grille réactif À mesure que la taille de l'écran ou de la fenêtre d'affichage augmente, le système le divise automatiquement en 12 colonnes maximum.

Fonctionnement du système de grille Bootstrap

Le système de grille crée des mises en page à travers une série de lignes et de colonnes contenant du contenu. Voici comment fonctionne le système de grille Bootstrap : La ligne

• doit être placée à l'intérieur de la classe .container afin d'obtenir un alignement et des marges de contenu (rembourrage) appropriés.

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

• Le contenu doit être placé à l'intérieur des colonnes, et seules les colonnes peuvent être des éléments enfants directs des lignes.

• Classes de grille prédéfinies, telles que .row et .col-xs-4, peuvent être utilisées pour créer rapidement des dispositions de grille. Les classes LESS mixin peuvent être utilisées pour des mises en page plus sémantiques.

• Les colonnes utilisent un remplissage pour créer des espaces entre le contenu des colonnes. Le remplissage est négatif par la marge sur .rows, qui représente le décalage de ligne de la première et de la dernière colonne.

• Le système de grille est créé en spécifiant les douze colonnes disponibles que vous souhaitez étendre. Par exemple, pour créer trois colonnes égales, utilisez trois .col-xs-4.

Requêtes multimédias

Les requêtes multimédias sont des "règles CSS conditionnelles" très sophistiquées. Cela ne fonctionne qu'avec certains CSS en fonction de certaines conditions spécifiées. Si ces conditions sont remplies, le style correspondant est appliqué.

Les requêtes multimédias dans Bootstrap vous permettent de déplacer, afficher et masquer le contenu en fonction de la taille de la fenêtre d'affichage. La requête multimédia suivante est utilisée dans le fichier LESS pour créer des seuils de points d'arrêt clés dans le système de grille Bootstrap.

/* 超小设备（手机，小于 768px） */
/* Bootstrap 中默认情况下没有媒体查询 */

/* 小型设备（平板电脑，768px 起） */
@media (min-width: @screen-sm-min) { ... }

/* 中型设备（台式电脑，992px 起） */
@media (min-width: @screen-md-min) { ... }

/* 大型设备（大台式电脑，1200px 起） */
@media (min-width: @screen-lg-min) { ... }

Nous incluons également parfois max-width dans le code de requête multimédia pour limiter l'impact du CSS à une plus petite plage de tailles d'écran.

@media (max-width: @screen-xs-max) { ... }
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... }
@media (min-width: @screen-lg-min) { ... }

Une requête multimédia comporte deux parties, d'abord une spécification de périphérique, puis une règle de taille. Dans le cas ci-dessus, les règles suivantes sont définies :

Regardons la ligne de code suivante :

@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }

Pour toutes les règles avec min-width : @screen-sm- Pour appareils avec min, si la largeur de l'écran est inférieure à @screen-sm-max, un certain traitement sera effectué.

Options de grille

Le tableau suivant résume le fonctionnement du système de grille Bootstrap sur plusieurs appareils :

Structure de base de la grille

Voici la structure de base de la grille Bootstrap :

<div class="container">
   <div class="row">
      <div class="col-*-*"></div>
      <div class="col-*-*"></div>      
   </div>
   <div class="row">...</div>
</div>
<div class="container">....

Regardons quelques exemples de grille simples :

• Instances : niveaux empilés

• Instances : appareils moyens et grands

• Exemples : téléphones mobiles, tablettes, ordinateurs de bureau

Réinitialisation des colonnes réactives

L'exemple suivant contient 4 grilles, mais nous ne pouvons pas déterminer la position de la grille s'affiche lors de la navigation sur de petits appareils.

Afin de résoudre ce problème, vous pouvez utiliser la classe .clearfix et des utilitaires réactifs, comme le montre l'exemple suivant :

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8"> 
   <title>Bootstrap 实例 - 响应式的列重置</title>
   <link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">  
   <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
   <script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
   <div class="row" >
      <div class="col-xs-6 col-sm-3" 
         style="background-color: #dedef8;
         box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
      </div>
      <div class="col-xs-6 col-sm-3" 
         style="background-color: #dedef8;box-shadow: 
         inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do 
            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut 
            enim ad minim veniam, quis nostrud exercitation ullamco laboris 
            nisi ut aliquip ex ea commodo consequat.
         </p>
         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do 
            eiusmod tempor incididunt ut. 
         </p>
      </div>

      <div class="clearfix visible-xs"></div>

      <div class="col-xs-6 col-sm-3" 
         style="background-color: #dedef8;
         box-shadow:inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco 
            laboris nisi ut aliquip ex ea commodo consequat. 
         </p>
      </div>
      <div class="col-xs-6 col-sm-3" 
         style="background-color: #dedef8;box-shadow: 
         inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do 
            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut 
            enim ad minim 
         </p>
      </div>
   </div>
</div>

</body>
</html>

Redimensionnez la fenêtre du navigateur pour voir les changements, ou Voir les résultats sur votre téléphone.

Colonnes décalées

Le décalage est une fonctionnalité utile pour les mises en page plus professionnelles. Ils peuvent être utilisés pour libérer plus d’espace pour les colonnes. Par exemple, les classes .col-xs=* ne prennent pas en charge les décalages, mais elles peuvent obtenir l'effet simplement en utilisant une cellule vide.

Pour utiliser les décalages sur les grands écrans, utilisez les classes .col-md-offset-*. Ces classes augmentent la marge gauche d'une colonne de * colonnes, où * va de 1 à 11.

Dans l'exemple ci-dessous, nous avons <div class="col-md-6">..</div>, nous utiliserons .col-md-offset-3 classe pour centrer ce div.

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8"> 
   <title>Bootstrap 实例 - 偏移列</title>
   <link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">  
   <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
   <script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">

   <h1>Hello, world!</h1>

   <div class="row" >
      <div class="col-xs-6 col-md-offset-3" 
         style="background-color: #dedef8;box-shadow: 
         inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         <p>Lorem ipsum dolor sit amet, consectetur adipisicing 
            elit.
         </p>
      </div>

   </div>
</div>

</body>
</html>

Colonnes imbriquées

Pour imbriquer la grille par défaut dans le contenu, ajoutez un nouveau .row et imbriquez-le dans un existant. * ajoute un ensemble de colonnes .col-md-* dans la colonne. La ligne imbriquée doit contenir un ensemble de colonnes qui ne peuvent pas dépasser 12 (en fait, il n’est pas obligatoire que vous deviez occuper les 12 colonnes).

Dans l'exemple ci-dessous, la mise en page comporte deux colonnes et la deuxième colonne est divisée en deux rangées de quatre cases.

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8"> 
   <title>Bootstrap 实例 - 嵌套列</title>
   <link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">  
   <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
   <script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">

   <h1>Hello, world!</h1>

   <div class="row">

      <div class="col-md-3" style="background-color: #dedef8;box-shadow: 
         inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         <h4>第一列</h4>
         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
      </div>

      <div class="col-md-9" style="background-color: #dedef8;box-shadow: 
         inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         <h4>第二列 - 分为四个盒子</h4>
         <div class="row">
            <div class="col-md-6" style="background-color: #B18904;
               box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
               <p>Consectetur art party Tonx culpa semiotics. Pinterest 
                  assumenda minim organic quis.
               </p>
            </div>
            <div class="col-md-6" style="background-color: #B18904;
               box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
               <p> sed do eiusmod tempor incididunt ut labore et dolore magna 
                  aliqua. Ut enim ad minim veniam, quis nostrud exercitation 
                  ullamco laboris nisi ut aliquip ex ea commodo consequat.
               </p>
            </div>
         </div>

         <div class="row">
            <div class="col-md-6" style="background-color: #B18904;
               box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
               <p>quis nostrud exercitation ullamco laboris nisi ut 
                  aliquip ex ea commodo consequat.
               </p>
            </div>   
            <div class="col-md-6" style="background-color: #B18904;
               box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
               <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
                  sed do eiusmod tempor incididunt ut labore et dolore magna 
                  aliqua. Ut enim ad minim.</p>
            </div>
         </div>

      </div>

   </div>

</div>

</body>
</html>

Ordre des colonnes

Une autre fonctionnalité intéressante du système de grille Bootstrap est que vous pouvez facilement écrire des colonnes dans un ordre, puis les afficher dans une autre liste d'ordre.

Vous pouvez facilement modifier les colonnes de la grille intégrée avec l'ordre des classes .col-md-push-* et .col-md-pull-*, où * va de 1 à 11.

Dans l'exemple ci-dessous, nous avons une disposition à deux colonnes, la colonne étroite de gauche faisant office de barre latérale. Nous utiliserons les classes .col-md-push-* et .col-md-pull-* pour échanger l'ordre de ces deux colonnes.

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Bootstrap 实例 - 列排序</title>
	<link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">  
	<script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
	<script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">

   <h1>Hello, world!</h1>

   <div class="row">
      <p>排序前</p>
      <div class="col-md-4" style="background-color: #dedef8;
         box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         我在左边
      </div>
      <div class="col-md-8" style="background-color: #dedef8;
         box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         我在右边
      </div>
   </div><br>
   <div class="row">
      <p>排序后</p>
      <div class="col-md-4 col-md-push-8" 
         style="background-color: #dedef8;
         box-shadow: inset 1px -1px 1px #444, 
         inset -1px 1px 1px #444;">
         我在左边
      </div>
      <div class="col-md-8 col-md-pull-4" 
         style="background-color: #dedef8;
         box-shadow: inset 1px -1px 1px #444, 
         inset -1px 1px 1px #444;">
         我在右边
      </div>
   </div>

</div>

</body>
</html>