Bootstrap Système de grille

Introduction

Dans ce tutoriel, vous apprendrez à utiliser Bootstrap pour créer un système de grille.

Comme vous le savez peut-être, en design graphique, un système de grille est une structure bidimensionnelle composée d'axes horizontaux et verticaux qui se croisent, utilisée pour construire du contenu. Il est largement utilisé dans la conception de mise en page et la structuration du contenu en design graphique. En conception web, il s'agit d'une méthode très efficace pour créer rapidement et efficacement des mises en page cohérentes à l'aide de HTML et CSS. Par conséquent, le système de grille est devenu un composant/module important du cadre ou du flux de travail de la conception web.

En termes simples, en conception web, nous utilisons HTML et CSS pour créer des lignes et des colonnes afin de mettre en œuvre une grille, et les colonnes contiennent le contenu réel.

Depuis la version 2.3.2, Bootstrap propose deux types de grilles. Le système de grille par défaut a une largeur de 940px avec 12 colonnes. Vous pouvez ajouter une feuille de style responsive pour lui permettre d'ajuster sa largeur à 724px et 1170px selon la fenêtre d'affichage.

Il existe également un système de grille fluide, qui est basé sur des pourcentages plutôt que sur des pixels. Il peut aussi être étendu pour être responsive comme la grille fixe par défaut. Dans ce tutoriel, nous aborderons la grille par défaut à travers quelques exemples. Le système de grille fluide sera traité dans un tutoriel séparé.

Veuillez télécharger la dernière version des fichiers Bootstrap depuis "http://twitter.github.io/bootstrap/assets/bootstrap.zip". Vous pouvez trouver la structure de fichiers pertinente dans notreTutoriel de démarragepour en savoir plus sur la structure de fichiers pertinente.

Prise en main de la grille par défaut

Commençons par un HTML de base et voyons comment y appliquer la grille par défaut.

<!DOCTYPE html>
<html>
<head>
    <title>使用Bootstrap固定布局的实例</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Bootstrap -->
    <link href="bootstrap/css/bootstrap.min.css.html" rel="stylesheet" media="screen">
    <script src="http://code.jquery.com/jquery.js"></script>
        <script src="bootstrap/js/bootstrap.min.js.html"></script>
</head>
<body>

</body>
</html>

Bootstrap utilise la classe CSS "row" pour créer des lignes horizontales, et la classe CSS "spanx" (où x va de 1 à 12) pour créer des colonnes verticales. En utilisant ces deux éléments, vous pouvez créer une grille à trois colonnes (chaque colonne contient du contenu textuel), avec le HTML comme indiqué ci-dessous.

<!DOCTYPE html>
<html>
<head>
<title>使用Bootstrap固定布局的实例</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href="bootstrap/css/bootstrap.min.css.html" rel="stylesheet" media="screen">
<script src="http://code.jquery.com/jquery.js"></script>
<script src="bootstrap/js/bootstrap.min.js.html"></script>
</head>
<body>
<div class="container">
<div class="row">
    <div class="span4"><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam cursus. Morbi ut mi. Nullam enim leo, egestas id, condimentum at, laoreet mattis, massa. Sed eleifend nonummy diam. Praesent mauris ante, elementum et, bibendum at, posuere sit amet, nibh. Duis tincidunt lectus quis dui viverra vestibulum. Suspendisse vulputate aliquam dui. Nulla elementum dui ut augue. Aliquam vehicula mi at mauris. Maecenas placerat, nisl at consequat rhoncus, sem nunc gravida justo, quis eleifend arcu velit quis lacus. Morbi magna magna, tincidunt a, mattis non, imperdiet vitae, tellus. Sed odio est, auctor ac, sollicitudin in, consequat vitae, orci. Fusce id felis. Vivamus sollicitudin metus eget eros.</p></div>
    <div class="span4"><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam cursus. Morbi ut mi. Nullam enim leo, egestas id, condimentum at, laoreet mattis, massa. Sed eleifend nonummy diam. Praesent mauris ante, elementum et, bibendum at, posuere sit amet, nibh. Duis tincidunt lectus quis dui viverra vestibulum. Suspendisse vulputate aliquam dui. Nulla elementum dui ut augue. Aliquam vehicula mi at mauris. Maecenas placerat, nisl at consequat rhoncus, sem nunc gravida justo, quis eleifend arcu velit quis lacus. Morbi magna magna, tincidunt a, mattis non, imperdiet vitae, tellus. Sed odio est, auctor ac, sollicitudin in, consequat vitae, orci. Fusce id felis. Vivamus sollicitudin metus eget eros.</p></div>
    <div class="span4"><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam cursus. Morbi ut mi. Nullam enim leo, egestas id, condimentum at, laoreet mattis, massa. Sed eleifend nonummy diam. Praesent mauris ante, elementum et, bibendum at, posuere sit amet, nibh. Duis tincidunt lectus quis dui viverra vestibulum. Suspendisse vulputate aliquam dui. Nulla elementum dui ut augue. Aliquam vehicula mi at mauris. Maecenas placerat, nisl at consequat rhoncus, sem nunc gravida justo, quis eleifend arcu velit quis lacus. Morbi magna magna, tincidunt a, mattis non, imperdiet vitae, tellus. Sed odio est, auctor ac, sollicitudin in, consequat vitae, orci. Fusce id felis. Vivamus sollicitudin metus eget eros.</p></div>
</div>  
</div>
</body>
</html>

Ci-dessous se trouve une représentation graphique du système de grille.

De cette manière, nous avons créé une grille à trois colonnes en utilisant la classe "span4" pour chaque colonne. La classe "container" est utilisée pour contenir toute la structure.. À partir de ce point, nous pouvons déduire la syntaxe générale de la classe CSS utilisée pour créer un nombre donné de colonnes.

Syntaxe générale pour créer une grille :

<div class=&quot;row&quot;>
<div class=&quot;spanx&quot;>
inline elements like span, block level elements like p, div.
</div>
repeat <div class=&quot;spanx&quot;> y times.

Où y est le nombre de colonnes que vous souhaitez créer, et la somme de x est égale à 12 (c'est le nombre maximum de colonnes que vous pouvez créer). x doit être un entier positif, et sa valeur doit être comprise entre 1 et 12.

Par exemple, si vous avez trois colonnes de largeur égale, chaque colonne est class="span4", mais si vous voulez que la première colonne soit plus grande que les deux autres, vous pouvez utiliser class="span6" pour la première colonne et class="span3" pour les deux autres.

Comment créer des lignes dans une grille fixe

Ensuite, avant de poursuivre avec d'autres exemples, examinons les règles CSS utilisées pour créer des lignes et des colonnes dans la grille fixe.

La classe row est la suivante

.row {
    margin-left: -20px;
    *zoom: 1;
}

Définissez la marge gauche sur -20px et définissez "*zoom: 1;". Le "*" ici indique que la propriété zoom de tous les éléments est définie sur 1, ce qui est utilisé pour corriger les bugs d'IE6/7. Définir la propriété zoom sur 1 définit une propriété interne nommée hasLayout, qui est utilisée pour corriger de nombreux problèmes de mise à l'échelle/rendu dans IE6/7.

.row:before,
.row:after {
    display: table;
    line-height: 0;
    content: "";
}

Bootstrap utilise le code CSS précédent pour créer des lignes. Il utilise les propriétés CSS ":before" et ":after". Ces deux sont des pseudo-éléments. ":before" est utilisé pour insérer du contenu avant l'élément cible, et ":after" est utilisé pour insérer du contenu après l'élément cible. "display:table;" fait que l'élément s'affiche sous forme de tableau. En définissant "line-height: 0;" cela garantit que chaque ligne n'a pas sa propre hauteur de ligne, et en utilisant 'content: ""' cela garantit qu'aucun contenu n'est inséré avant ou après l'élément.

Ensuite, la règle suivante est utilisée pour garantir qu'il n'y a pas d'éléments flottants à gauche ou à droite d'un élément donné.

.row:after {
    clear: both;
}

Comment créer des colonnes dans une grille fixe

[class*="span"] {
    float: left;
    min-height: 1px;
    margin-left: 20px;
}

Voici les règles CSS à utiliser. '[class*="span"]' sélectionne tous les éléments dont la valeur de l'attribut class commence par 'span'. Utilisez maintenant "float: left;" pour positionner chaque colonne de manière adjacente aux autres. Utilisez "min-height: 1px" pour donner à toutes les colonnes une hauteur minimale de 1px, et utilisez "margin-left: 20px;" pour définir la marge gauche à 20px.

Des règles CSS distinctes sont utilisées pour définir les largeurs de colonne. Plus précisément, comme indiqué dans le tableau ci-dessous.

.span12 {
    width: 940px;
}

.span11 {
    width: 860px;
}

.span10 {
    width: 780px;
}

.span9 {
    width: 700px;
}

.span8 {
    width: 620px;
}

.span7 {
    width: 540px;
}

.span6 {
    width: 460px;
}

.span5 {
    width: 380px;
}

.span4 {
    width: 300px;
}

.span3 {
    width: 220px;
}

.span2 {
    width: 140px;
}

.span1 {
    width: 60px;
}

Exemple de grille par défaut Bootstrap

Cet exemple montre comment créer 1 colonne, 2 colonnes, 6 colonnes, 12 colonnes et 4 colonnes (dans cet ordre).

Notez également que toutes les colonnes créées sont enveloppées par la classe "container", et "container" est utilisé pour créer une mise en page fixe avec Bootstrap.

Voici ce que vous allez créer

Voir en ligne

Affichez l'exemple ci-dessus dans différentes fenêtres de navigateur.

Veuillez cliquer ici pour télécharger tous les fichiers HTML, CSS, JS et les images de l'exemple ci-dessus.

Ajout de la responsivité à la grille par défaut

Si vous souhaitez ajouter la responsivité à la grille par défaut de Bootstrap, ajoutez simplement ce qui suit après le CSS d'origine dans le fichier HTML :

<meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="bootstrap/css/bootstrap-responsive.min.css.html" rel="stylesheet">

Pour afficher la grille par défaut responsive,Cliquez ici pour voir la démo en ligne.。Cliquez ici pour télécharger le code associé.。

Le système de grille par défaut devient responsive dans deux conditions. Lorsque la fenêtre d'affichage (l'espace disponible pour le rendu de la grille) est supérieure à 1200px [obtenu via @media (min-width: 1200px)], et lorsque la fenêtre d'affichage est supérieure à 768px mais inférieure à 979px [défini via @media (min-width: 768px) and (max-width: 979px)].

Colonnes décalées : grille par défaut

En utilisant les décalages, vous pouvez déplacer une colonne vers la droite par rapport à sa position d'origine. Cela est réalisé en ajoutant une marge gauche à la colonne. Avec Bootstrap, vous pouvez utiliser la classe "offsetx" (où x est un entier positif) et la classe "spany" (où y est un entier positif). Selon la valeur de 'x' dans 'offestx', la colonne concernée se déplace vers la droite de la largeur de 'x' colonnes.

Les largeurs de décalage sont définies dans le CSS Bootstrap. La marge gauche maximale pour offset12 est de 980px, et la marge gauche minimale pour offset1 est de 100px.

Comme le système de grille par défaut est basé sur les pixels, lorsque vous appliquez des décalages, vous devez connaître les pixels que vous utiliserez pour le décalage et les pixels à utiliser pour les colonnes. La somme de ces deux valeurs ne doit pas dépasser le nombre de pixels de votre fenêtre d'affichage horizontale.

Dans l'exemple suivant, nous allons créer une grille à deux colonnes. Nous allons déplacer la colonne de gauche de 4 colonnes vers la droite. Le code HTML est le suivant :

Vous pouvez ajouter de la réactivité à la grille par défaut en ajoutant du CSS responsive après le CSS natif, ou en utilisant des colonnes décalées.

Colonnes imbriquées : Grille par défaut

En utilisant la grille par défaut de Bootstrap, les colonnes peuvent être imbriquées. Vous devez simplement créer une ligne à l'intérieur d'une colonne et créer le nombre de colonnes que vous souhaitez imbriquer dans cette ligne. En même temps, vous devez vous rappeler que le nombre total de colonnes utilisées pour imbriquer d'autres colonnes ne doit pas dépasser le nombre de colonnes spécifié pour la colonne parente.

L'exemple suivant montre comment imbriquer des colonnes dans la grille par défaut de Bootstrap.

Dans l'exemple ci-dessus, la ligne sous le conteneur comporte deux colonnes, définies comme 'class="span7"' et 'class="span5"'. Cela porte le nombre total de colonnes à 12. Maintenant, nous ajoutons une ligne à l'intérieur de la colonne de gauche, puis créons deux colonnes, définies comme 'class="span4"' et 'class="span3"'. Par conséquent, cela respecte le nombre total de colonnes spécifié par sa colonne parente (7=4+3).

Vous pouvez également ajouter du responsive ici.

Conclusion

Dans ce tutoriel, nous avons abordé le système de grille par défaut de Bootstrap. Ce tutoriel est basé sur Bootstrap V2.3.2. Voici un résumé des points clés de ce tutoriel :

• Le système de grille par défaut de Bootstrap a une largeur de 940px et comporte 12 colonnes.
• Dans la grille, les lignes sont créées avec 'class="row"', et les colonnes sont créées avec 'class="spanx"', où x est un entier positif. La somme de toutes les valeurs x des colonnes ne doit pas dépasser 12.
• Vous pouvez ajouter du responsive à la grille par défaut en ajoutant le CSS responsive de Bootstrap.
• Utilisez des décalages pour créer un espace supplémentaire pour les colonnes. En utilisant 'class="offsetx"', où x est un entier positif. Si vous utilisez des décalages, le nombre total de colonnes, y compris le nombre utilisé pour les décalages, ne doit pas dépasser 11.
• Les colonnes peuvent être imbriquées. Si des colonnes imbriquées sont utilisées, elles sont également comptées lors du calcul du nombre total de colonnes dans la grille (une ligne à l'intérieur du conteneur).
• Les décalages peuvent également être utilisés dans des colonnes imbriquées.