Le meilleur didacticiel Système de grille Bootstrap en 2024, dans ce didacticiel, vous pouvez apprendre Qu'est-ce qu'une grille (Grid)?,Quel est le système de grille (Bootstrap Grid System)?,système de grille Bootstrap (système Grid) oeuvres,requêtes des médias,Options de grille,colonnes Responsive réinitialisés,Exemples,colonne Offset,Exemples,Colonne imbriquée,Exemples,Colonne tri,Exemples,
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.
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.
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.
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 |
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:
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) {fr.} / * Dispositifs de taille (de bureau, 992px partir) * / @media (min-width: @ écran-md-min) {fr.} / * Les grands équipements (grand ordinateur de bureau, 1200px et suivantes) * / @media (min-width: @ écran-lg-min) {fr.}
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) {fr.} @media (min-width: @ écran-sm-min) et (max-width: @ écran-sm-max) {fr.} @media (min-width: @ écran-md-min) et (max-width: @ écran-md-max) {fr.} @media (min-width: @ écran-lg-min) {fr.}
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) {fr.}
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.
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) | 750px | 970px | 1170px |
Class 前缀 | .col-xs- | .col-sm- | .col-md- | .col-lg- |
列?数量和 | 12 | 12 | 12 | 12 |
最大列宽 | Auto | 60px | 78px | 95px |
间隙宽度 | 30px (一个列的每边分别 15px) | 30px (一个列的每边分别 15px) | 30px (一个列的每边分别 15px) | 30px (一个列的每边分别 15px) |
可嵌套 | Yes | Yes | Yes | Yes |
偏移量 | Yes | Yes | Yes | Yes |
列排序 | Yes | Yes | Yes | Yes |
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"> fr. </ div> </ Div> <Div class = "container"> frfr
Laissez quelques exemples simples, nous examinons la grille:
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:
Navigateur redimensionner la fenêtre pour voir les changements, ou pour visualiser l'effet sur votre téléphone.
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"> fr </ div>, nous allons utiliser.col-md-offset-3 classe pour centrer cette div.
Les résultats sont les suivants:
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.
Les résultats sont les suivants:
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.
Les résultats sont les suivants: