Système de grille Bootstrap
Brève introduction
Dans ce tutoriel, vous apprendrez comment créer système de grille (Bootstrap Grid System).
Comme vous le savez, dans la conception graphique, le système de grille est une structure à deux dimensions, par les axes horizontaux et verticaux se coupent les composantes régionales pour la création de contenus. Il est largement appliqué à la mise en page de la conception et la structure du contenu de la conception graphique. Dans la conception web, il est un moyen rapide et efficace pour créer une mise en page cohérente très efficace façon en utilisant HTML et CSS. Ainsi, le système de grille est devenu un important composant / cadre de module ou de conception de sites Web workflow.
Autrement dit, la conception web, nous utilisons HTML et CSS pour créer des lignes et des colonnes pour obtenir une grille. Et la colonne contient le contenu réel.
Depuis la version 2.3.2 avant, Bootstrap offre deux types de maillage. Le système de réseau par défaut est 940px de large et 12. Vous pouvez ajouter stylesheet Responsive comme il a présenté la fenêtre pour ajuster la largeur de 724px et 1170px.
Il y a également un système de grille d'écoulement, qui est basé sur un pourcentage plutôt que sur la base de pixels. Et il peut être étendu à la même chose que la grille en réponse par défaut fixe. Dans ce tutoriel, nous allons discuter de la grille par défaut à travers quelques exemples, le système de grille d'écoulement sera expliqué dans un tutoriel séparé.
S'il vous plaît télécharger la dernière version des fichiers Bootstrap de "http://twitter.github.io/bootstrap/assets/bootstrap.zip" sur. Vous pouvez dans notre tutoriel d' introduction pour comprendre la structure du fichier concerné.
Obtenir de la grille par défaut
Commençons par un HTML de base commencent à voir comment la grille application par défaut ci-dessus.
<! DOCTYPE html>
<Html>
<Head>
<Titre> en utilisant des exemples de mise en page Bootstrap fixes </ title>
<Meta name = "viewport" content = "width = dispositif de largeur, initiale échelle = 1.0">
<! - Bootstrap ->
<link href = "bootstrap / css / bootstrap.min.css" rel = "stylesheet" media = "screen">
<Script src = "http://code.jquery.com/jquery.js"> </ script>
<Script src = "bootstrap / js / bootstrap.min.js"> </ script>
</ Head>
<Body>
</ Body>
</ Html>
Bootstrap en utilisant la "ligne" de classe CSS pour créer des lignes horizontales de classe CSS "spanx" (la valeur de x est de 1 à 12) pour créer une colonne verticale. Grâce à ces deux peuvent créer une grille de trois colonnes (chaque colonne contient du texte), HTML comme suit
<! DOCTYPE html> <Html> <Head> <Titre> en utilisant des exemples de mise en page Bootstrap fixes </ title> <Meta name = "viewport" content = "width = dispositif de largeur, initiale échelle = 1.0"> <! - Bootstrap -> <link href = "bootstrap / css / bootstrap.min.css" rel = "stylesheet" media = "screen"> <Script src = "http://code.jquery.com/jquery.js"> </ script> <Script src = "bootstrap / js / bootstrap.min.js"> </ script> </ Head> <Body> <Class Div = "container"> <Class Div = "ligne"> <Class Div = "span4"> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam Cursus. Morbi ut mi. Nullam enim leo, egestas id, condimentum à, laoreet mattis, massa. Sed eleifend nonummy diam. Praesent mauris ante, elementum et, bibendum à, posuere sit amet, nibh. Duis tincidunt lectus quis dui viverra vestibulum. Suspendisse vulputate aliquam dui. Nulla elementum dui ut augue. aliquam vehicula mi à mauris. Mécène placerat, nisl à consequat rhoncus, MEB de gravida justo, quis eleifend arcu velit quis lacus. Morbi magna magna, tincidunt a, Mattis non, vitae imperdiet, tellus. Sed odio est, auctor ac, sollicitudin dans, consequat vitae, orci. Fusce id felis. Vivamus sollicitudin metus eget eros. < / p> </ div> <Class Div = "span4"> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam Cursus. Morbi ut mi. Nullam enim leo, egestas id, condimentum à, laoreet mattis, massa. Sed eleifend nonummy diam. Praesent mauris ante, elementum et, bibendum à, posuere sit amet, nibh. Duis tincidunt lectus quis dui viverra vestibulum. Suspendisse vulputate aliquam dui. Nulla elementum dui ut augue. aliquam vehicula mi à mauris. Mécène placerat, nisl à consequat rhoncus, MEB de gravida justo, quis eleifend arcu velit quis lacus. Morbi magna magna, tincidunt a, Mattis non, vitae imperdiet, tellus. Sed odio est, auctor ac, sollicitudin dans, consequat vitae, orci. Fusce id felis. Vivamus sollicitudin metus eget eros. < / p> </ div> <Class Div = "span4"> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam Cursus. Morbi ut mi. Nullam enim leo, egestas id, condimentum à, laoreet mattis, massa. Sed eleifend nonummy diam. Praesent mauris ante, elementum et, bibendum à, posuere sit amet, nibh. Duis tincidunt lectus quis dui viverra vestibulum. Suspendisse vulputate aliquam dui. Nulla elementum dui ut augue. aliquam vehicula mi à mauris. Mécène placerat, nisl à consequat rhoncus, MEB de gravida justo, quis eleifend arcu velit quis lacus. Morbi magna magna, tincidunt a, Mattis non, vitae imperdiet, tellus. Sed odio est, auctor ac, sollicitudin dans, consequat vitae, orci. Fusce id felis. Vivamus sollicitudin metus eget eros. < / p> </ div> </ Div> </ Div> </ Body> </ Html>
Ci-dessous est une représentation graphique du système de grille
De cette manière, on peut à l'aide de la classe "span4" pour chaque colonne, crée une grille à trois colonnes. classe "Container" est utilisé pour maintenir l'ensemble de la structure. Ici , vous pouvez voir l'instance en ligne . De là, on peut déduire la classe CSS donnée utilisée pour créer le numéro de colonne de la syntaxe générale.
Créer syntaxe générale de la grille:
<Class Div = & quot; rangée & quot;> <Class Div = & quot; spanx & quot;> éléments en ligne tels que la durée, des éléments de niveau bloc comme p, div. </ Div> répétition <div class = & quot; spanx & quot;> y fois.
Où y est le nombre de colonnes que vous voulez créer, et x est égal à 12 (ce qui est le nombre maximum de colonnes que vous pouvez créer) combinés. x doit être un entier positif, et la valeur doit être 1-12.
Par exemple, si vous avez trois colonnes de largeur égale, chaque colonne est une class = "span4", mais si vous voulez la première colonne plus grande que les deux autres, la première colonne peut utiliser class = "span6" Les deux autres colonnes en utilisant class = "span3".
Comment créer une ligne dans une grille fixe
Puis, avant de passer à d'autres exemples, nous allons jeter un oeil à une grille fixe pour créer des lignes et des colonnes de règles CSS.
classe de rang suivant
.row {
margin-left: -20px;
* Zoom: 1;
}
Réglage de la marge de gauche à un 20px négatif, et réglez "* zoom: 1;". Ici, "*" indique le zoom attribut tous les éléments sont mis à 1, pour fixer IE6 / 7 du bug. Définissez la propriété de zoom à 1, ce qui a mis en place une propriété interne appelé hasLayout pour la réparation IE6 / 7 Beaucoup zoom / problèmes de rendu.
.row: avant,
.row: après {
display: table;
line-height: 0;
contenu: "";
}
Bootstrap en utilisant le code CSS précédent pour créer la ligne. Il utilise ": avant" et ": après" propriété CSS. Ces deux pseudo-éléments. "Avant" est utilisé avant l'élément cible en quelque chose, ": après" est utilisé pour insérer du contenu après l'élément cible. "Affichage: table;" de sorte que les éléments présentés sous forme de tableau. En réglant le "line-height: 0;" pour veiller à ce que chaque ligne ne possèdent pas la hauteur de ligne en utilisant le 'contenu: "" "pour faire en sorte que le contenu ne soit pas inséré dans les éléments avant et arrière.
Ensuite, utilisez les règles suivantes pour assurer aux côtés gauche et droit d'un élément donné est pas élément flottant.
.row: après {
clear: both;
}
La création d'une colonne dans une grille fixe
[Classe * = "span"] {
float: left;
min-height: 1px;
margin-left: 20px;
}
Ceci est une règle CSS à utiliser. '[Classe * = "span"]' sélectionner les valeurs d'attribut de classe pour tous les éléments dans la «portée» a commencé. Maintenant, utilisez "float: left;" pour localiser chaque colonne adjacente à l'autre. Utilisez "min-height: 1px" pour faire toutes les colonnes ont une hauteur minimale de 1px, utilisez la "margin-left: 20px;" fixer la marge de gauche à 20px.
Utilisez une règle CSS séparée pour définir la largeur de colonne. Plus précisément, comme indiqué dans le tableau ci-dessous
| CSS 代码 | 解释 |
|---|---|
.span12 {
width: 940px;
}
|
如果该行有一个单一的列，列宽为 940px。 |
.span11 {
width: 860px;
}
|
如果该行有一个由 11 列合并的列，列宽为 860px。 |
.span10 {
width: 780px;
}
|
如果该行有一个由 10 列合并的列，列宽为 780px。 |
.span9 {
width: 700px;
}
|
如果该行有一个由 9 列合并的列，列宽为 700px。 |
.span8 {
width: 620px;
}
|
如果该行有一个由 8 列合并的列，列宽为 620px。 |
.span7 {
width: 540px;
}
|
如果该行有一个由 7 列合并的列，列宽为 540px。 |
.span6 {
width: 460px;
}
|
如果该行有一个由 6 列合并的列，列宽为 460px。 |
.span5 {
width: 380px;
}
|
如果该行有一个由 5 列合并的列，列宽为 380px。 |
.span4 {
width: 300px;
}
|
如果该行有一个由 4 列合并的列，列宽为 300px。 |
.span3 {
width: 220px;
}
|
如果该行有一个由 3 列合并的列，列宽为 220px。 |
.span2 {
width: 140px;
}
|
如果该行有一个由 2 列合并的列，列宽为 140px。 |
.span1 {
width: 60px;
}
|
单个列宽为 60px。 |
Bootstrap instance de grille par défaut
Cet exemple montre comment créer une colonne, deux colonnes, six colonnes, 12 colonnes et quatre colonnes (dans cet ordre).
A noter également que toutes les colonnes qui sont créés sont entourés par classe "conteneur", "container" est de créer une mise en page fixe utilisant Bootstrap.
Exemples
<Html lang = "fr">
<Head>
<Meta charset = "utf-8">
<Titre> Bootstrap exemple de système de grille - w3cschool Tutorial Bootstrap </ title>
<Meta name = "description" content = "Création d'un 16 colonnes de la grille avec Bootstrap. Apprendre avec des exemples pour créer un système de grille dans Bootstrap.">
<link href = "bootstrap / css / bootstrap.min.css" rel = "stylesheet" media = "screen">
<Script src = "http://code.jquery.com/jquery.js"> </ script>
<Script src = "bootstrap / js / bootstrap.min.js"> </ script>
<Style>
.span12 h1 {color: # FE6E4C; font-weight: bold; padding: 5px;}
h3 {margin: 10px 0 10px 0;}
</ Style>
</ Head>
<Body>
<Class Div = "container">
<Class Div = "ligne">
<div class = "span12">
<H1> w3cschool.cc est un tutoriel de conception et de développement web. </ H1>
</ Div>
</ Div>
<Class Div = "ligne">
<div class = "span12">
<P> w3cschool propose des tutoriels de développement web. Nous croyons en Open Source. Normes d'amour. Et la priorité la simplicité et la lisibilité tout en servant le contenu. Avec 3000+ pages de contenu uniques et des milliers d'exemples, nous sommes complets. Nous avons des éditeurs de pratique en ligne pour jouer autour avec les codes d'exemple. </ p>
</ Div>
</ Div>
<Class Div = "ligne">
<div class = "span12">
<H3> Certains des sujets et plus ...: </ h3>
</ Div>
<Class Div = "de span2">
<P> <img src = "images / html5_logo.png" width = "140" height = "86" alt = "logo html5" /> </ p>
</ Div>
<Class Div = "de span2">
<P> <img src = "images / javascript-logo.png" width = "140" height = alt "86" = "javascript logo" /> </ p>
</ Div>
<Class Div = "de span2">
<P> <img src = "images / json.gif" width = "140" height = "86" alt = "logo JSON" /> </ p>
</ Div>
<Class Div = "de span2">
<P> <img src = "images / php.png" width = "140" height = "86" alt = "logo PHP" /> </ p>
</ Div>
<Class Div = "de span2">
<P> <img src = "images / mysql-logo.png" width = "140" height = "86" alt = "logo MySQL" /> </ p>
</ Div>
<Class Div = "de span2">
<P> <img src = "images / navigateur statistics.png" width = "140" height = "86" alt = "Statistiques navigateurs logo" /> </ p>
</ Div>
</ Div>
<Class Div = "ligne">
<div class = "span12">
<H3> sites de réseautage social à partager: </ h3>
</ Div>
</ Div>
<Class Div = "ligne">
<Class Div = "de span1">
<P> <img src = "images / gplus.png" width = hauteur "50" = "49" alt = "GPlus logo" /> </ p>
</ Div>
<Class Div = "de span1">
<P> <img src = "images / twitter.png" width = "50" height = alt "38" = "logo Twitter" /> </ p>
</ Div>
<Class Div = "de span1">
<P> <img src = "images / orkut.png" width = hauteur "50" = "55" alt = "logo Orkut" /> </ p>
</ Div>
<Class Div = "de span1">
<P> <img src = "images / ipad.png" width = hauteur "50" = "53" alt = "logo iPad" /> </ p>
</ Div>
<Class Div = "de span1">
<P> <img src = "images / digo.png" width = "50" height = alt "54" = "logo Digo" /> </ p>
</ Div>
<Class Div = "de span1">
<P> <img src = "images / zapface.png" width = hauteur "51" = "53" alt = "logo Zapface" /> </ p>
</ Div>
<Class Div = "de span1">
<P> <img src = "images / facebook.png" width = hauteur "48" = "53" alt = "logo facebook" /> </ p>
</ Div>
<Class Div = "de span1">
<P> <img src = "images / netvibes.png" width = "51" height = alt "53" = "logo Netvibes" /> </ p>
</ Div>
<Class Div = "de span1">
<P> <img src = "images / linkedin.png" width = "49" height = alt "54" = "logo LinkedIn" /> </ p>
</ Div>
<Class Div = "de span1">
<P> <img src = "images / newsvine.png" width = "48" height = alt "53" = "logo Newsvine" /> </ p>
</ Div>
<Class Div = "de span1">
<P> <img src = "images / blogger.png" width = hauteur "51" = "53" alt = "logo Blogger" /> </ p>
</ Div>
<Class Div = "de span1">
<P> <img src = "images / reditt.png" width = "48" height = alt "57" = "logo Reddit" /> </ p>
</ Div>
</ Div>
<Class Div = "ligne">
<Class Div = "de span3">
<H3> Fontend développement: </ h3>
<P> HTML4.0, XHTML1.0, CSS2.1, HTML5, CSS3, JavaScript </ p>
</ Div>
<Class Div = "de span3">
<H3> Backend Developemt: </ h3>
<P> PHP, Ruby, Python, Java, ASP.NET, SCALA </ p>
</ Div>
<Class Div = "de span3">
<H3> Gestion de base de données: </ h3>
<P> SQL, MySQL PostGreSQL, NoSQL, MongoDB </ p>
</ Div>
<Class Div = "de span3">
<H3> API, Outils et conseils: </ h3>
<P> API Google Plus, Twitter Bootstrap, JSON, Firebug, WebPNG </ p>
</ Div>
</ Div>
</ Div>
</ Body>
</ Html>
Voici ce que vous allez créer
Voir en ligne
Voir l' exemple ci - dessus dans une fenêtre de navigateur.
S'il vous plaît cliquer ici pour télécharger tous les exemples ci - dessus de HTML, CSS, fichiers image JS et.
Ajouter réagissant au réseau par défaut
Si vous souhaitez ajouter à la performance de réponse Bootstrap de grille par défaut, seulement après que le fichier natif CSS HTML pour ajouter
<meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="bootstrap/css/bootstrap-responsive.min.css" rel="stylesheet">
Pour afficher la grille par défaut avec réactif, cliquez ici pour voir la démo en ligne . Cliquez ici pour télécharger le code .
Système de réseau par défaut joue la réponse, il existe deux conditions. Lorsque la fenêtre (maillage rendu d'espace libre) est supérieure à 1200px [via @media (min-width: 1200px) obtenue] lorsque la fenêtre est plus grande que 768px, mais inférieure à 979px [via @media (min-width: 768px) et ( max-width: 979px) paramètres].
colonnes Offset: grille par défaut
En utilisant le décalage, vous pouvez déplacer le côté droit de la colonne à sa position initiale. Cela se fait par l'ajout d'une colonne à la marge de gauche à réaliser. Par Bootstrap, vous pouvez utiliser le "offsetx" (où la valeur de x est un entier positif) classe et classe "spany" (où la valeur de y est un entier positif). Dépend 'offestx' 'x' est la valeur de la colonne mobile associé 'x' de largeur de colonne à droite.
La largeur de décalage est définie dans la Bootstrap CSS. Offset12 marge supérieure gauche est 980px, la distance minimale est laissé offset1 100px.
Étant donné que le système de grille par défaut est basée sur le pixel, lorsque l'application est décalée, vous devez savoir que vous souhaitez utiliser un pixel offset et colonnes de pixels à utiliser. Tant le nombre de pixels ajoutés ensemble ne doit pas dépasser votre fenêtre de niveau.
Dans l'exemple suivant, nous allons créer une grille à deux colonnes. Parmi eux, nous nous dirigeons vers la droite de sorte que la colonne de gauche quatre colonnes. code HTML comme suit:
Exemples
<Class Div = "ligne">
<Class Div = "de offset4 de span4">
<P> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam Cursus. Morbi ut mi. Nullam enim leo, id egestas, condimentum à, laoreet mattis, massa. Sed eleifend nonummy diam. Praesent mauris ante, elementum et, bibendum à, posuere sit amet, nibh. Duis tincidunt lectus quis dui viverra vestibulum. Suspendisse vulputate aliquam dui. Nulla elementum dui ut augue. aliquam vehicula mi à mauris. Mécène placerat, nisl à consequat rhoncus, MEB 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 dans, consequat vitae, orci. Fusce id felis. Vivamus sollicitudin metus eget eros. </ p>
</ Div>
<Class Div = "de span3">
<P> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam Cursus. Morbi ut mi. Nullam enim leo, id egestas, condimentum à, laoreet mattis, massa. Sed eleifend nonummy diam. Praesent mauris ante, elementum et, bibendum à, posuere sit amet, nibh. Duis tincidunt lectus quis dui viverra vestibulum. Suspendisse vulputate aliquam dui. Nulla elementum dui ut augue. aliquam vehicula mi à mauris. Mécène placerat, nisl à consequat rhoncus, MEB 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 dans, consequat vitae, orci. Fusce id felis. Vivamus sollicitudin metus eget eros. </ p>
</ Div>
</ Div>
</ Div>
Cliquez ici pour voir la démo en ligne Cliquez ici pour télécharger le code .
Vous pouvez ajouter dans le CSS réactif CSS d'origine, vous pouvez également être compensée par l'utilisation d'une colonne pour ajouter à la grille de réponse par défaut.
colonnes imbriquées: grille par défaut
Bootstrap en utilisant la grille par défaut, la colonne peut être imbriqué. Il vous suffit de créer une ligne dans la colonne, et le nombre de colonnes que vous souhaitez créer rangée imbriquée. Dans le même temps, vous devez vous rappeler que le nombre total de colonnes pour la colonne imbriquée autres colonnes, pour veiller à ce que pas plus que le nombre de colonnes lorsque vous créez une colonne de parent mentionné.
L'exemple suivant montre comment nid dans les colonnes par défaut dans la grille Bootstrap.
Exemples
<Class Div = "ligne">
<Class Div = "de span7">
<Class Div = "ligne">
<Class Div = "de span4">
<P> Mécène aliquet velit vel turpis. Mauris neque metus, Malesuada nca, ultricies sit amet, porttitor mattis, enim. En massa libero, interdum nca, interdum vel, blandit sed, nulla. En ullamcorper, is eget tempor Cursus, neque mi consectetuer mi, un ultricies massa is sed nisl. classe aptent Taciti sociosqu ad Litora torquent par conubia nostra, par inceptos hymenaeos. Proin nulla arcu, luctus nonummy, dictum eget, fermentum et, lorem. Nunc porta convallis pede. </ p>
</ Div>
<Class Div = "de span3">
<P> Mécène aliquet velit vel turpis. Mauris neque metus, Malesuada nca, ultricies sit amet, porttitor mattis, enim. En massa libero, interdum nca, interdum vel, blandit sed, nulla. En ullamcorper, is eget tempor Cursus, neque mi consectetuer mi, un ultricies massa is sed nisl. classe aptent Taciti sociosqu ad Litora torquent par conubia nostra, par inceptos hymenaeos. Proin nulla arcu, luctus nonummy, dictum eget, fermentum et, lorem. Nunc porta convallis pede. </ p>
</ Div>
</ Div>
</ Div>
<Class Div = "de span5">
<P> Mécène aliquet velit vel turpis. Mauris neque metus, Malesuada nca, ultricies sit amet, porttitor mattis, enim. En massa libero, interdum nca, interdum vel, blandit sed, nulla. En ullamcorper, is eget tempor Cursus, neque mi consectetuer mi, un ultricies massa is sed nisl. classe aptent Taciti sociosqu ad Litora torquent par conubia nostra, par inceptos hymenaeos. Proin nulla arcu, luctus nonummy, dictum eget, fermentum et, lorem. Nunc porta convallis pede. </ p>
</ Div>
</ Div>
</ Div>
Cliquez ici pour voir la démo en ligne Cliquez ici pour télécharger le code .
Dans l'exemple ci-dessus, la ligne dans le conteneur comporte deux colonnes ont été définies comme "class =" span7 "" et "class =" span5 ". Soit un total de 12 colonnes. Maintenant, nous ajoutons une ligne dans la colonne de gauche, puis créer deux colonnes, qui sont définies comme "class =" span4 "" et "class =" span3 ". Par conséquent, le nombre total de colonnes pour se conformer à la colonne parent dispositions (3 + 4 = 7).
Vous pouvez également ajouter ici les performances de réponse.
conclusion
Dans ce tutoriel, nous avons discuté du système de grille par défaut Bootstrap. Ce tutoriel est basé sur Bootstrap v2.3.2. Ce qui suit est un résumé des principaux points liés à ce tutoriel:
- Bootstrap par défaut du système de grille est 940px de large, et avec 12 colonnes.
- Dans la grille, ligne par "class =" ligne " 'Créer une colonne par" class = "spanx"' Créer, où x est un entier positif. X somme de toutes les colonnes ne doit pas dépasser 12.
- En ajoutant le Bootstrap Responsive CSS, vous pouvez ajouter une réponse à la grille par défaut.
- Utilisez Décalage pour créer de l'espace supplémentaire pour les colonnes. En utilisant le "class =" offsetx " ', où x est un entier positif. Si vous utilisez un nombre total décalage de colonnes, le nombre comprend un décalage pour une utilisation plus 11.
- Les colonnes peuvent être imbriquées. Si vous utilisez une colonne imbriquée, lorsque le nombre total de grille de calcul (ligne de conteneur) dans une colonne, la colonne imbriquée devrait être inclus.
- Vous pouvez également utiliser la colonne de décalage imbriqué.