Latest web development tutorials

Système de grille Bootstrap

Cette section explique le système de grille (Bootstrap Grid System).

Bootstrap fournit un système de grille d'écoulement mobile préféré sensible, avec l'augmentation de l'écran ou viewport (viewport) la taille, le système sera automatiquement divisé en un maximum de 12.

Qu'est-ce qu'une grille (Grid)?

De Wikipedia:

Dans la conception graphique, la grille est une série de lignes droites utilisées pour organiser le contenu par l'intersection (horizontal vertical) structure constituée de (habituellement en deux dimensions). Il est largement utilisé dans la mise en page de conception conception d'impression et de la structure du contenu. Dans la conception web, il est utilisé pour créer rapidement une mise en page cohérente et efficace en utilisant le HTML et l'approche de CSS.

Autrement dit, la grille de conception web pour organiser le contenu afin que le site est facile à naviguer, et de réduire la charge du client.

Quel est le système de grille (Bootstrap Grid System)?

Bootstrap documentation officielle sur le système de grille Description:

Bootstrap comprend un, en réponse à la priorité dispositif mobile, le système de grille non fixé, avec l'augmentation de la taille du dispositif ou de fenêtre étendue de manière appropriée à 12. Il comprend des classes prédéfinies pour les options de mise en page facile, comprend aussi puissant pour générer plus de mises en page sémantiques des classes mixtes.

Laissez-nous comprendre comment l'énoncé ci-dessus. Bootstrap 3 est une priorité de l'appareil mobile, en ce sens, le code Bootstrap pour les écrans de petite taille (tels que mobile, tablette), puis étendu aux grands dispositifs d'écran (tels que les ordinateurs portables, les ordinateurs de bureau) sur les composants et la grille.

Mobile-première stratégie

  • teneur
    • Décider ce qui est le plus important.
  • disposition
    • Priorité conçue plus petite largeur.
    • les appareils mobiles à base de CSS est une priorité, les demandes des médias sont dirigés vers les ordinateurs tablettes, les ordinateurs de bureau.
  • Amélioration progressive
    • Avec l'augmentation de la taille de l'écran et ajouter des éléments.

système de grille Responsive avec l'augmentation de l'écran ou viewport (viewport) la taille, le système sera automatiquement divisé en un maximum de 12.

1 1 1 1 1 1 1 1 1 1 1 1
4 4 4
4 8
6 6
12

système de grille Bootstrap (système Grid) oeuvres

Le système de grille à travers une série de rangées et de colonnes avec le contenu pour créer une mise en page. Les listes suivantes du système de grille Bootstrap est comment cela fonctionne:

  • Row doit être placé dans.container classe, afin d'obtenir un bon alignement (alignement) et le rembourrage (padding).
  • Utilisez les lignes pour créer un ensemble horizontal de colonnes.
  • Le contenu devrait être placé dans la colonne, et la colonne peut être que les lignes directes de l'enfant.
  • classes de grille prédéfinis, tels.row et .col-xs-4,peuvent être utilisés pour créer rapidement une mise en page de la grille. MOINS classe mixte peut être utilisé dispositions plus sémantiques.
  • Colonne pour créer un espace entre le contenu de la colonne par foulardage (padding). Le rembourrage est de.Rows extérieur à travers le (marge) la négation, et la dernière ligne, la première colonne indique un décalage.
  • Le système de grille est disponible en spécifiant les douze colonnes que vous souhaitez créer une croix. Par exemple, pour créer trois colonnes égales, utiliser trois.col-xs-4.

requêtes des médias

requêtes des médias sont très chic "règles CSS conditionnelles." Elle ne concerne que certains sont basés sur certains critères CSS prédéterminé. Si ces conditions sont remplies, puis appliquer le style approprié.

Bootstrap médias requêtes permettent de se déplacer en fonction de la taille de la fenêtre, spectacle et contenu masquer. Les requêtes des médias suivants en utilisant les fichiers les moins utilisés pour créer le système de grille Bootstrap démarcation seuil critique du point.

/ * Dispositifs ultra-petits (téléphones mobiles, moins de 768px) * /
/ * Par défaut, le Bootstrap aucun requêtes média * /

/ * Les petits appareils (tablette, 768px et suivantes) * /
@media (min-width: @ écran-sm-min) {...}

/ * Dispositifs de taille (de bureau, 992px partir) * /
@media (min-width: @ écran-md-min) {...}

/ * Les grands équipements (grand ordinateur de bureau, 1200px et suivantes) * /
@media (min-width: @ écran-lg-min) {...}

Nous contenons parfoismax-width requête des médias dans le code, ce qui affectera la CSS confinée dans une plus petite gamme de tailles d'écran.

@media (max-width: @ écran-xs-max) {...}
@media (min-width: @ écran-sm-min) et (max-width: @ écran-sm-max) {...}
@media (min-width: @ écran-md-min) et (max-width: @ écran-md-max) {...}
@media (min-width: @ écran-lg-min) {...}

requête de médias comporte deux parties, la première spécification de l'appareil, puis une règle de taille. Dans le cas ci-dessus, définir les règles suivantes:

Regardons cette ligne de code:

@media (min-width: @ écran-sm-min) et (max-width: @ écran-sm-max) {...}

Pour tous avec unmin-width: @dispositifsécran-sm-min,si la largeur de l'écran est inférieure à@ écran-sm-max,il fera un peu de traitement.

Options de grille

Le tableau suivant résume la façon dont le système de grille Bootstrap sur plusieurs appareils fonctionnent:

超小设备手机(<768px)小型设备平板电脑(≥768px)中型设备台式电脑(≥992px)大型设备台式电脑(≥1200px)
网格行为一直是水平的以折叠开始,断点以上是水平的以折叠开始,断点以上是水平的以折叠开始,断点以上是水平的
最大容器宽度None (auto)750px970px1170px
Class 前缀.col-xs-.col-sm-.col-md-.col-lg-
列?数量和12121212
最大列宽Auto60px78px95px
间隙宽度30px
(一个列的每边分别 15px)
30px
(一个列的每边分别 15px)
30px
(一个列的每边分别 15px)
30px
(一个列的每边分别 15px)
可嵌套YesYesYesYes
偏移量YesYesYesYes
列排序YesYesYesYes

La structure de base de la grille

Voici la structure de base de la grille Bootstrap:

<Class Div = "container">
   <Class Div = "ligne">
      <Class Div = "col - * - *"> </ div>
      <Class Div = "col - * - *"> </ div>      
   </ Div>
   <Class Div = "ligne"> ... </ div>
</ Div>
<Div class = "container"> ....

Laissez quelques exemples simples, nous examinons la grille:

colonnes Responsive réinitialisés

L'exemple suivant comprend quatre grille, mais nous ne pouvons pas déterminer la position de la grille est affichée dans une petite navigation de l'appareil.

Pour résoudre ce problème, vous pouvez utiliser l' utilisation.clearfix classe et utilitaire répondant à résoudre, comme le montrent les exemples suivants:

Exemples

<Div class = "container"> <Div class = "ligne" > <Div class = "col-xs-6 col-sm-3" style = "background-color: # dedef8; box-shadow: encart 1px -1px 1px # 444, encart -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: encart 1px -1px 1px # 444, encart -1px 1px 1px # 444;"> <P> Lorem ipsum dolor sit amet , consectetur adipisicing elit, sed ne TEMPOR eiusmod ut labore et dolore incididunt 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 ne TEMPOR eiusmod ut incididunt. </ P> </ Div> <Div class = "clearfix visibles-xs" > </ div> <Div class = "col-xs-6 col-sm-3" style = "background-color: # dedef8; box-shadow: encart 1px -1px 1px # 444, encart -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: encart 1px -1px 1px # 444, encart -1px 1px 1px # 444;"> <P> Lorem ipsum dolor sit amet , consectetur adipisicing elit, sed ne TEMPOR eiusmod ut labore et dolore incididunt magna aliqua. Ut enim ad minim </ p> </ Div> </ Div> </ Div>

Essayez »

Navigateur redimensionner la fenêtre pour voir les changements, ou pour visualiser l'effet sur votre téléphone.

colonne Offset

Le décalage est une fonction utile pour plus mise en page professionnelle. Ils peuvent être utilisés pour faire de la place pour la colonne. Parexemple, .col-xs = * classe ne prennent pas en charge les compensations, mais ils peuvent être simplement en utilisant une cellule vide pour obtenir l'effet.

Pour utiliser le décalage sur un grand écran, utilisez.col-md-offset * catégorie.Gauche en dehors de ces classes serait une colonne de la (marge) a augmenté* colonne, où gamme *est1-11.

Dans l'exemple suivant, nous avons <div class = "col-md -6"> .. </ div>, nous allons utiliser.col-md-offset-3 classe pour centrer cette div.

Exemples

<Div class = "container"> <H1> Bonjour, monde! < / H1> <Div class = "ligne" > <Div class = "col-xs-6 col-md-contrebalancées-3" style = "background-color: # dedef8; box-shadow: encart 1px -1px 1px # 444, encart -1px 1px 1px # 444;"> <P> Lorem ipsum dolor sit amet , consectetur adipisicing elit. </ P> </ Div> </ Div> </ Div>

Essayez »

Les résultats sont les suivants:

Décalage système de grille de colonne

Colonne imbriquée

La valeur par défaut pour les grilles imbriquées dans le contenu, ajouter un nouveau.row, et dans une colonne .col-MD-existante*Ajouter un groupe.col-MD- *colonnes. ligne Nichée doit contenir un ensemble de colonnes, qui fixe le nombre de colonnes ne peut pas être plus de 12 (en fait, il n'y a pas d'exigence que vous devez remplir 12).

Dans l'exemple suivant, l'agencement comporte deux colonnes, la deuxième colonne est divisée en deux rangées de quatre boîtes.

Exemples

<Div class = "container"> <H1> Bonjour, monde! < / H1> <Div class = "ligne"> <Div class = "col-md-3 " style = "background-color: # dedef8; box-shadow: encart 1px -1px 1px # 444, encart -1px 1px 1px # 444;"> <H4> La première colonne </ h4> <P> Lorem ipsum dolor sit amet , consectetur adipisicing elit. </ P> </ Div> <Div class = "col-md-9 " style = "background-color: # dedef8; box-shadow: encart 1px -1px 1px # 444, encart -1px 1px 1px # 444;"> <H4> La deuxième colonne - est divisé en quatre cases </ h4> <Div class = "ligne"> <Div class = "col-md-6 " style = "background-color: # B18904; box-shadow: encart 1px -1px 1px # 444, encart -1px 1px 1px # 444;"> <P> consectetur art parti Tonx culpa sémiologie. Pinterest assumenda minim de quis organique. </ P> </ Div> <Div class = "col-md-6 " style = "background-color: # B18904; box-shadow: encart 1px -1px 1px # 444, encart -1px 1px 1px # 444;"> <P> sed ne TEMPOR eiusmod 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 = "ligne"> <Div class = "col-md-6 " style = "background-color: # B18904; box-shadow: encart 1px -1px 1px # 444, encart -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: encart 1px -1px 1px # 444, encart -1px 1px 1px # 444;"> <P> Lorem ipsum dolor sit amet , consectetur adipisicing elit, sed ne TEMPOR eiusmod ut labore et dolore incididunt magna aliqua. Ut enim ad minim. </ P> </ Div> </ Div> </ Div> </ Div> </ Div>

Essayez »

Les résultats sont les suivants:

système de grille de colonne Nesting

Colonne tri

système de grille Bootstrap une autre caractéristique idéale est que vous pouvez facilement écrire une colonne dans un ordre, l'ordre est affiché dans une autre colonne.

Vous pouvez facilement modifier l'ordre avec.col-md-poussoirs intégré grille colonnes *et.col-md-pull- *classe, où*gamme est1-11.

Dans l'exemple suivant, nous avons une disposition en deux colonnes, la colonne de gauche est très étroite, comme une barre latérale. Nous allons utiliser.col-md-poussoir * et .col-md-pull- *classe pour échanger l'ordre de deux colonnes.

Exemples

<Div class = "container"> <H1> Bonjour, monde! < / H1> <Div class = "ligne"> <P> avant le tri </ p> <Div class = "col-md-4 " style = "background-color: # dedef8; box-shadow: encart 1px -1px 1px # 444, encart -1px 1px 1px # 444;"> Je suis parti </ div> <Div class = "col-md-8 " style = "background-color: # dedef8; box-shadow: encart 1px -1px 1px # 444, encart -1px 1px 1px # 444;"> Je suis sur la droite </ div> </ Div> <Br> <Div class = "ligne"> <P> triés </ p> <Div class = "col-md-4 col-md-push-8" style = "background-color: # dedef8; box-shadow: encart 1px -1px 1px # 444, encart -1px 1px 1px # 444;"> Je suis parti </ div> <Div class = "col-md-8 col-md-pull-4" style = "background-color: # dedef8; box-shadow: encart 1px -1px 1px # 444, encart -1px 1px 1px # 444;"> Je suis sur la droite </ div> </ Div> </ Div>

Essayez »

Les résultats sont les suivants:

Système de tri colonne de la grille