Système de grille Bootstrap

What is Grid (Grid)?

Excerpted from Wikipedia:

In flat design, a grid is a structure (usually two-dimensional) composed of a series of intersecting lines (vertical, horizontal) used to organize content. It is widely used in design layouts and content structures in print design. In web design, it is a method used to quickly create consistent layouts and effectively use HTML and CSS.

In simple terms, the grid in web design is used to organize content, making the website easy to navigate and reducing the load on the user's end.

What is the Bootstrap grid system (Grid System)?

The description of the grid system in the official Bootstrap documentation:

Bootstrap includes a responsive, mobile-first, fluid grid system that can appropriately expand to 12 Columns. It includes predefined classes for simple layout options, as well as powerful mixed classes for generating more semantic layouts.

Let's understand the above statement. Bootstrap 3 is mobile-first in the sense that Bootstrap code starts from small screen devices (such as mobile devices, tablets) and then expands to components and grids on large screen devices (such as laptops, desktop computers).

Mobile First Strategy

• Content

• decides what is most important.

• Layout

• Prioritize designing for smaller widths.

• The basic CSS is mobile-first, and media queries are for tablets and desktop computers.

• Progressive Enhancement

• elements as the screen size increases.

A responsive grid system automatically divides into a maximum of12Columns.

The working principle of Bootstrap grid system (Grid System)

The grid system creates page layout through a series of rows and columns containing content. The following lists how the Bootstrap grid system works:

• Rows must be placed in .container within the class, in order to obtain appropriate alignment (alignment) and inner padding (padding).

• Use rows to create horizontal groups of columns.

• Content should be placed within columns, and only columns can be direct children of rows.

• Predefined grid classes, such as .row et .col-xs-4and can be used to quickly create a grid layout. LESS mixed classes can be used for more semantic layouts.

• Columns are created by the inner padding (padding) between column content. This inner padding is through .rows The outer margin (margin) is negative, indicating the line offset of the first column and the last column.

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

Requêtes média

Les requêtes média sont des "règles CSS conditionnelles" très élégantes. Elles ne s'appliquent qu'à certains CSS basés sur des conditions spécifiées. Si ces conditions sont satisfaites, les styles correspondants sont appliqués.

Les requêtes média dans Bootstrap vous permettent de déplacer, afficher et masquer du contenu en fonction de la taille de la vue. Les requêtes média suivantes sont utilisées dans les fichiers LESS pour créer les seuils de division clés du système de grille Bootstrap.

/*　Appareils de très petite taille (téléphones, inférieur à　768(px)　*/
/*　Il n'y a pas de requêtes média par défaut dans Bootstrap　*/
/*　Appareils de petite taille (tablettes,768px à partir de)　*/
@media (min-width: @screen-sm-@media (min
/*　Appareils de taille moyenne (ordinateurs de bureau,992px à partir de)　*/
@media (min-width: @screen-md-@media (min
/*　Appareils de grande taille (grands ordinateurs de bureau,1200px à partir de)　*/
@media (min-width: @screen-lg-@media (min

Nous incluons parfois des spécifications de taille dans les requêtes média. max-widthCela limite l'effet du CSS à une taille d'écran plus petite.

@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-@media (min

Les requêtes média ont deux parties, d'abord une spécification d'appareil, puis une règle de taille.

Laissons voir cette ligne de code ci-dessous :

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

Pour tous les éléments avec min-width: @screen-sm-min de l'écran, si la largeur de l'écran est inférieure à @screen-sm-maxDes traitements sont effectués.

Options de grille

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

Structure de grille de base

Voici la structure de base du grille Bootstrap :

<div>
　　　<div>
　　　　　　<div></div>
　　　　　　<div></div>　　　　　　
　　　</div>
　　　<div>.../div>
</div>
<div>....

Laissons voir quelques exemples de grilles simples :

• Exemples : horizontaux empilés

• Exemples : appareils de taille moyenne et grande

• Exemples : téléphone portable, tablette, ordinateur de bureau

une réinitialisation de colonnes responsive

Les exemples suivants incluent4une grille, mais lors de la navigation sur des appareils mobiles, nous ne pouvons pas déterminer l'emplacement de l'affichage de la grille.

Pour résoudre ce problème, on peut utiliser .clearfix et Outils pratiques réactifscomme montré dans l'exemple suivant :

Exemple en ligne

<!DOCTYPE　html>
<html>
<head>
　　　<meta charset="utf-8">　
　　　<title>Exemple Bootstrap　-　Réglage des colonnes réactifs pour/title>
　　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">　　
　　　<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
　　　<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　　<div class="row">
　　　　　　<div　class="col-xs-6　col-sm-3"　
　　　　　　　　　style="background-couleur:　#dedef8;
　　　　　　　　　boîte-ombre:　inset　1px　-1px　1px　#444, encadré　-1px　1px　1px　#444;">
　　　　　　　　　<p>Revenons ensemble ici, bénissons nos amants.</p>
　　　　　　</div>
　　　　　　<div　class="col-xs-6　col-sm-3"　
　　　　　　　　　style="background-couleur:　#dedef8;boîte-ombre:　
　　　　　　　　　inset　1px　-1px　1px　#444, encadré　-1px　1px　1px　#444;">
　　　　　　　　　<p>J'espère pour toi, que tu sois toujours heureux. Mon travail et mon travail sont accidentels. J'ai très peu de courage, je vais faire un stage dans le laboratoire, c'est une conséquence.
　　　　　　　　　</p>
　　　　　　　　　<p>Revenons ensemble, bénissons nos amis, bénissons-les.
　　　　　　　　　</p>
　　　　　　</div>
　　　　　　<div class="clearfix visible-xs"></div>
　　　　　　<div　class="col-xs-6　col-sm-3"　
　　　　　　　　　style="background-couleur:　#dedef8;
　　　　　　　　　boîte-ombre:inset　1px　-1px　1px　#444, encadré　-1px　1px　1px　#444;">
　　　　　　　　　<p>Il suffit d'un peu de temps pour terminer l'internat.
　　　　　　　　　</p>
　　　　　　</div>
　　　　　　<div　class="col-xs-6　col-sm-3"　
　　　　　　　　　style="background-couleur:　#dedef8;boîte-ombre:　
　　　　　　　　　inset　1px　-1px　1px　#444, encadré　-1px　1px　1px　#444;">
　　　　　　　　　<p>Travail et souffrance, énergique, donc, certains modèles de longue vie. Au fil des ans.
　　　　　　　　　</p>
　　　　　　</div>
　　　</div>
</div>
</body>
</html>

modifiez la taille de la fenêtre de navigation sur le navigateur, ou consultez l'effet sur votre téléphone portable.

décalage de colonne

Le décalage est une fonction utile pour un agencement plus professionnel. Ils peuvent être utilisés pour donner plus d'espace aux colonnes. Par exemple,.col-xs-* Les classes ne prennent pas en charge le décalage, mais elles peuvent simplement être réalisées en utilisant une cellule vide.

Pour utiliser le décalage sur les grands écrans, utilisez .col-md-décalage-* les classes. Ces classes augmentent la marge extérieure gauche (marge) d'une colonne * colonnes, où * La plage est 1 à 11.

Dans l'exemple suivant, nous avons <div>..</div>，nous allons utiliser .col-md-décalage-3 class pour centrer ce div.

Exemple en ligne

<!DOCTYPE　html>
<html>
<head>
　　　<meta charset="utf-8">　
　　　<title>Exemple Bootstrap　-　décalage de colonne</title>
　　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">　　
　　　<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
　　　<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　　<h1>Hello, world!</h1>
　　　<div class="row">
　　　　　　<div　class="col-md-6　col-md-décalage-3"　
　　　　　　　　　style="background-couleur:　#dedef8;boîte-ombre:　
　　　　　　　　　inset　1px　-1px　1px　#444, encadré　-1px　1px　1px　#444;">
　　　　　　　　　<p>Lorem ipsum dolor sit amet, consectetur adipisicing　
　　　　　　　　　　　　elit.
　　　　　　　　　</p>
　　　　　　</div>
　　　</div>
</div>
</body>
</html>

Les résultats sont affichés comme suit :

colonne imbriquée

Pour imbriquer le grille par défaut dans le contenu, ajoutez une nouvelle .row, dans une .col-md-* colonnes. Ajoutez un ensemble .col-md-* colonnes. Les lignes imbriquées doivent contenir un ensemble de colonnes, le nombre de colonnes de cet ensemble ne doit pas dépasser12(En réalité, il n'y a pas de obligation de remplir12colonnes).

Dans l'exemple suivant, la mise en page comporte deux colonnes, la deuxième colonne est divisée en deux lignes et quatre boîtes.

Exemple en ligne

<!DOCTYPE　html>
<html>
<head>
　　　<meta charset="utf-8">　
　　　<title>Exemple Bootstrap　-　colonne imbriquée</title>
　　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">　　
　　　<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
　　　<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　　<h1>Hello, world!</h1>
　　　<div class="row">
　　　　　　<div　class="col-md-3" style="background-couleur:　#dedef8;boîte-ombre:　
　　　　　　　　　inset　1px　-1px　1px　#444, encadré　-1px　1px　1px　#444;">
　　　　　　　　　<h4>première colonne</h4>
　　　　　　　　　<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
　　　　　　</div>
　　　　　　<div　class="col-md-9" style="background-couleur:　#dedef8;boîte-ombre:　
　　　　　　　　　inset　1px　-1px　1px　#444, encadré　-1px　1px　1px　#444;">
　　　　　　　　　<h4>deuxième colonne　-　divisé en quatre boîtes</h4>
　　　　　　　　　<div class="row">
　　　　　　　　　　　　<div　class="col-md-6" style="background-color: #B18904;
　　　　　　　　　　　　　　　boîte-ombre:　inset　1px　-1px　1px　#444, encadré　-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;
　　　　　　　　　　　　　　　boîte-ombre:　inset　1px　-1px　1px　#444, encadré　-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;
　　　　　　　　　　　　　　　boîte-ombre:　inset　1px　-1px　1px　#444, encadré　-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;
　　　　　　　　　　　　　　　boîte-ombre:　inset　1px　-1px　1px　#444, encadré　-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>

Les résultats sont affichés comme suit :

Trierer les colonnes

Une autre parfait caractéristique du système de grille Bootstrap, c'est que vous pouvez écrire les colonnes dans un ordre et les afficher dans un autre.

Vous pouvez changé facilement les colonnes avec .col-md-push-* et .col-md-tirer-* L'ordre de l'implémentation de la grille internes de la classe, où * La plage est 1 à 11.

Dans l'exemple ci-dessous, nous avons deux colonnes de mise en page, la colonne gauche est très étroite, en tant que bannière. Nous allons utiliser .col-md-push-* et .col-md-tirer-* Échanger l'ordre des deux colonnes en utilisant des classes.

Exemple en ligne

<!DOCTYPE　html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Exemple Bootstrap　-　Trierer les colonnes /title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">　　
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　　<h1>Hello, world!</h1>
　　　<div class="row">
　　　　　　<p>Trieré avant /p>
　　　　　　<div　class="col-md-4" style="background-couleur:　#dedef8;
　　　　　　　　　boîte-ombre:　inset　1px　-1px　1px　#444, encadré　-1px　1px　1px　#444;">
　　　　　　　　　Je suis à gauche
　　　　　　</div>
　　　　　　<div　class="col-md-8" style="background-couleur:　#dedef8;
　　　　　　　　　boîte-ombre:　inset　1px　-1px　1px　#444, encadré　-1px　1px　1px　#444;">
　　　　　　　　　Je suis à droite
　　　　　　</div>
　　　</div><br>
　　　<div class="row">
　　　　　　<p>Trieré aprs /p>
　　　　　　<div　class="col-md-4　col-md-push-8"　
　　　　　　　　　style="background-couleur:　#dedef8;
　　　　　　　　　boîte-ombre:　inset　1px　-1px　1px　#444,　
　　　　　　　　　inset　-1px　1px　1px　#444;">
　　　　　　　　　Je suis à gauche
　　　　　　</div>
　　　　　　<div　class="col-md-8　col-md-tirer-4"　
　　　　　　　　　style="background-couleur:　#dedef8;
　　　　　　　　　boîte-ombre:　inset　1px　-1px　1px　#444,　
　　　　　　　　　inset　-1px　1px　1px　#444;">
　　　　　　　　　Je suis à droite
　　　　　　</div>
　　　</div>
</div>
</body>
</html>

Les résultats sont affichés comme suit :