简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Maison> interface Web> Tutoriel d'amorçage> le corps du texte

Une analyse approfondie du système de grille dans Bootstrap

青灯夜游
Libérer： 2021-09-13 18:46:22
avant
2548 Les gens l'ont consulté

Cet article vous présentera le système de grille de mise en page Web dansBootstrapet comprendra le principe de fonctionnement, le paramètre de largeur de cellule et la méthode de mise en page réactive du système de grille Bootstrap. J'espère qu'il vous sera utile !

Une analyse approfondie du système de grille dans Bootstrap

1. Le principe de fonctionnement du système de grille Bootstrap

1.1 Système à douze grilles

La grille est une grille, English Grid, la raison pour laquelle certains endroits sont des grilles, certains L'endroit est une grille, mais les habitudes de traduction sont différentes. Le système de douze grilles signifie que l'écran entier est divisé en douze parties égales en fonction de la largeur, et une partie égale représente un douzième de la largeur de l'écran. Pourquoi est-il divisé en douze parties égales, plutôt qu'en dix parties égales ou autres parties égales. les parties ? Quant aux parties, c'est parce que 12 est le plus petit commun multiple de 1, 2, 3, 4 et 6. D'après l'expérience, cette division est la plus belle et la plus pratique. Bien sûr, j'ai également vu des systèmes à 36 et 10 grilles, du point de vue de l'utilisation, ils ne sont en effet pas aussi pratiques que les systèmes à 12 grilles. [Recommandation associée : "Tutoriel bootstrap"]

Dans le système à douze grilles, si je souhaite diviser l'écran en côtés gauche et droit, la gauche occupant un tiers et la droite occupant les deux tiers, Je peux changer la largeur gauche définie sur 4 grilles et le côté droit sur 8 grilles. Si j'ai besoin de la moitié des côtés gauche et droit, il me suffit de définir chacun 6 grilles. Si je n'ai besoin de définir qu'une seule page pour remplir l'écran, je peux la définir directement sur 12 grilles. Écoutez, n'est-ce pas très pratique ?

1.2 Balises du système de grille Bootstrap

Le système de grille Bootstrap conçoit trois balises, à savoir conteneur, ligne, col :

  • container est un conteneur, qui a été présenté en détail dans la section précédente .
  • row signifie rangée, représentant une ligne horizontale
  • col est une cellule, représentant chaque cellule spécifique. Il existe trois façons de l'écrire : col, numéro de grille de col (comme col-3), taille d'écran de col - nombre. de rasters (par exemple col-md-3).

Ce qui suit est un exemple de code qui divise l'écran en trois unités de largeur égale. Il n'est pas nécessaire de se plonger dans la méthode d'écriture de code spécifique. Il vous suffit de comprendre brièvement la structure du système de grille. en détail plus tard.

 
 
 第一个单元 
 
 第二个单元 
 
 第三个单元
Copier après la connexion

1.3 Règles du système de grille d'amorçage

  • Utilisez des lignes pour créer des groupes horizontaux de colonnes.

  • Il peut y avoir plusieurs lignes sur une seule page.

  • Les rangées doivent être placées à l’intérieur d’un conteneur pour obtenir un alignement et un rembourrage appropriés.

  • Le contenu doit être placé dans une colonne (col), et seules les colonnes peuvent être des éléments enfants directs des lignes.

  • Les lignes peuvent également être imbriquées dans une colonne. Les lignes d'une colonne n'ont pas besoin de conteneur car la colonne elle-même est un conteneur.

  • Vous pouvez utiliser directement des classes de grille prédéfinies, telles que la taille de l'écran-nombre de grilles, pour créer rapidement des dispositions de grille.

  • Dans la classe prédéfinie, la taille de l'écran a 5 valeurs, principalement utilisées pour le responsive design, voir 3.1. Le nombre de grilles est un nombre de 1 à 12, représentant la largeur de l'écran.

2. Paramètre de largeur de cellule dans le système de grille Bootstrap

2.1 Disposition par défaut à largeur égale

Si nous ne définissons pas la largeur de chaque colonne, le nombre de colonnes par défaut sera réparti uniformément . La largeur des colonnes, mais s'il y a plus de 12 colonnes d'affilée, des phénomènes imprévisibles se produiront (j'ai fait quelques tests pour la recherche, vous n'avez pas besoin de tester cela, si vous souhaitez en disposer plus de 12, vous peut utiliser une feuille). Je vais donner ci-dessous un morceau de code, qui sera utilisé désormais, avec quelques modifications mineures, donc je ne le donnerai plus.

Lorsque vous utilisez col, col-grid number pour définir la largeur, veuillez définir la largeur de la fenêtre au maximum pour l'effet d'aperçu, sinon cela pourrait entraîner une déviation de l'effet. De plus, nous ne recommandons pas ce paramètre dans les applications réelles. disposition de grille réactive, même si vous ne souhaitez pas répondre.

        网格系统演示 

  
 
 
 
Bootstrap是什么？
 
 我们在开发前端页面的时候，如果每一个按钮、样式、处理浏览器兼容性的代码都要自己从零 开始去写，那就太浪费时间了。所以我们需要一个框架，帮我们实现一个页面的基础部分和解 决一些繁琐的细节，只要在它的基础上进行个性化定制就可以了。Bootstrap 就是这样一个简 洁、直观、强悍的前端开发框架，只要学习并遵守它的标准，即使是没有学过网页设计的开发 者，也能做出很专业、美观的页面，极大地提高了工作效率。 
 
 
 
Bootstrap是什么？
 
 我们在开发前端页面的时候，如果每一个按钮、样式、处理浏览器兼容性的代码都要自己从零 开始去写，那就太浪费时间了。所以我们需要一个框架，帮我们实现一个页面的基础部分和解 决一些繁琐的细节，只要在它的基础上进行个性化定制就可以了。Bootstrap 就是这样一个简 洁、直观、强悍的前端开发框架，只要学习并遵守它的标准，即使是没有学过网页设计的开发 者，也能做出很专业、美观的页面，极大地提高了工作效率。 
 
 
 
Bootstrap是什么？
 
 我们在开发前端页面的时候，如果每一个按钮、样式、处理浏览器兼容性的代码都要自己从零 开始去写，那就太浪费时间了。所以我们需要一个框架，帮我们实现一个页面的基础部分和解 决一些繁琐的细节，只要在它的基础上进行个性化定制就可以了。Bootstrap 就是这样一个简 洁、直观、强悍的前端开发框架，只要学习并遵守它的标准，即使是没有学过网页设计的开发 者，也能做出很专业、美观的页面，极大地提高了工作效率。 
 
 
 
Bootstrap是什么？
 
 我们在开发前端页面的时候，如果每一个按钮、样式、处理浏览器兼容性的代码都要自己从零 开始去写，那就太浪费时间了。所以我们需要一个框架，帮我们实现一个页面的基础部分和解 决一些繁琐的细节，只要在它的基础上进行个性化定制就可以了。Bootstrap 就是这样一个简 洁、直观、强悍的前端开发框架，只要学习并遵守它的标准，即使是没有学过网页设计的开发 者，也能做出很专业、美观的页面，极大地提高了工作效率。
Copier après la connexion

Une analyse approfondie du système de grille dans Bootstrap

L'effet de ce code est montré dans l'image ci-dessus. Vous pouvez copier quelques cellules supplémentaires ci-dessous pour voir l'effet.

 
Bootstrap是什么？
 
 我们在开发前端页面的时候，如果每一个按钮、样式、处理浏览器兼容性的代码都要自己从零 开始去写，那就太浪费时间了。所以我们需要一个框架，帮我们实现一个页面的基础部分和解 决一些繁琐的细节，只要在它的基础上进行个性化定制就可以了。Bootstrap 就是这样一个简 洁、直观、强悍的前端开发框架，只要学习并遵守它的标准，即使是没有学过网页设计的开发 者，也能做出很专业、美观的页面，极大地提高了工作效率。
Copier après la connexion

Une analyse approfondie du système de grille dans Bootstrap

2.2 Réglez la largeur de chaque colonne

Essayez de remplacer le col dans les trois

par col-3, col-6, col-3 ou d'autres valeurs, bref, trois nombres Le la somme totale est de 12. Bien entendu, vous pouvez également supprimer ou ajouter une ou plusieurs cellules, à condition que la somme d’une ligne soit de 12. Grâce à un réglage aussi simple, la largeur de la cellule peut être modifiée de manière très pratique. L'image ci-dessous montre l'effet d'affichage après avoir réglé la col sur col-2, col-2, col-4, col-4 respectivement

Une analyse approfondie du système de grille dans Bootstrap

2.3 Colonnes à largeur variable

Si vous définissez la valeur de la cellule, s'il y a trois cellules et qu'une seule est définie, les deux cellules restantes diviseront également l'espace restant, vous pouvez donc facilement définir des colonnes à largeur variable . Pour rappel, la cellule où est définie la valeur fixe n'a pas besoin d'être devant. Par exemple, dans le code 2.1, vous pouvez définir la deuxième cellule pour qu'elle occupe tout l'écran (col-6), et les autres cellules le sont. uniformément réparti.

Une analyse approfondie du système de grille dans Bootstrap

2.4 Envelopper automatiquement les colonnes

Lorsque chaque cellule a une valeur de largeur définie, lorsque l'espace restant dans une rangée ne peut plus accueillir une certaine cellule, elle s'enroule automatiquement.