Chapitre 5 : Compétences BootStrap Grid System_javascript

Bootstrap, de Twitter, est actuellement le framework front-end le plus populaire. Bootstrap est basé sur HTML, CSS et JAVASCRIPT. Il est simple et flexible, ce qui accélère le développement Web.

Points d'apprentissage :

1. Les appareils mobiles d'abord
2. Conteneur de mise en page
3. Système de grille

Dans cette leçon, nous découvrirons principalement le système de grille de Bootstrap, qui fournit un système de grille fluide réactif et mobile.

1. Le mobile avant tout

Dans le projet HTML5, nous avons réalisé un projet mobile. Il possède une méta très importante, qui est utilisée pour définir la même largeur que l'écran et l'appareil, si la mise à l'échelle de l'utilisateur doit être exécutée et le rapport de mise à l'échelle.

//分别为：屏幕宽度和设备一致、初始缩放比例、最大缩放比例和禁止用户缩放
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no"> 

2. Conteneur de mise en page

Bootstrap nécessite un conteneur .container pour envelopper le contenu de la page et le système de grille. En raison d'attributs tels que le remplissage, ces deux classes de conteneurs ne peuvent pas être imbriquées l'une dans l'autre.

//固定宽度
<div class="container">
...
</div> 
//100%宽度
<div class="container-fluid">
...
</div>

Dans le système de grille, le navigateur allouera automatiquement jusqu'à 12 colonnes à mesure que la taille de l'écran augmente ou diminue. Créez une mise en page à travers une série de lignes et de colonnes. Voici comment cela fonctionne :

1. "Row" doit être contenu dans .container (largeur fixe) ou .container-fluid (100 % de largeur) afin de lui donner un alignement et un remplissage appropriés.

2. Créez un groupe de "colonnes" dans le sens horizontal à travers des "lignes".

3. Votre contenu doit être placé dans « colonne », et seule « colonne » peut être un élément enfant direct de la ligne
.

4. Des classes prédéfinies telles que .row et .col-xs-4 peuvent être utilisées pour créer rapidement des dispositions de grille.
Les mixins définis dans le code source Bootstrap peuvent également être utilisés pour créer des dispositions sémantiques.

5. Créez une gouttière entre les colonnes en définissant l'attribut padding pour "column". En définissant une valeur négative pour l'élément .row

la marge compense ainsi le remplissage défini pour l'élément .container, et compense indirectement le remplissage de la "colonne" contenue dans la "ligne".

6. La valeur négative de la marge est la raison pour laquelle l'exemple ci-dessous dépasse vers l'extérieur. Le contenu des colonnes de la grille s'aligne.

7. Les colonnes du système de grille représentent la plage qu'elles couvrent en spécifiant des valeurs de 1 à 12. Par exemple, trois colonnes de largeur égale peuvent être créées à l'aide de trois .col-xs-4 s.

8. Si une "ligne" contient plus de 12 "colonnes", les éléments des "colonnes" supplémentaires seront disposés dans leur ensemble dans une autre ligne.

9. La classe de grille convient aux appareils dont la largeur d'écran est supérieure ou égale à la taille du point de division, et la classe de grille est remplacée pour les appareils à petit écran. Par conséquent, l'application de classes raster .col-md-* sur un élément fonctionne pour les appareils dont la largeur d'écran est supérieure ou égale à la taille du point d'arrêt et remplace la classe raster pour les appareils à petit écran. Par conséquent, l’application de .col-lg-* sur l’élément n’existe pas et affecte également les appareils à grand écran.

//创建一个响应式行
<div class="container">
<div class="row">
...
</div>
</div> 
//创建最多 12 列的响应式行
<div class="container">
<div class="row">
<div class="col-md-1 a">1</div>
<div class="col-md-1 a">2</div>
<div class="col-md-1 a">3</div>
<div class="col-md-1 a">4</div>
<div class="col-md-1 a">5</div>
<div class="col-md-1 a">6</div>
<div class="col-md-1 a">7</div>
<div class="col-md-1 a">8</div>
<div class="col-md-1 a">9</div>
<div class="col-md-1 a">10</div>
<div class="col-md-1 a">11</div>
<div class="col-md-1 a">12</div>
</div>
</div> 
//为了显示明显的 CSS
.a {
height: 100px;
background-color: #eee;
border: 1px solid #ccc;
} 
//总列数都是 12，每列分配多列
<div class="container">
<div class="row">
<div class="col-md-4 a">1-4</div>
<div class="col-md-4 a">5-8</div>
<div class="col-md-4 a">9-12</div>
</div>
<div class="row">
<div class="col-md-8 a">1-8</div>
<div class="col-md-4 a">9-12</div>
</div>
</div> 

Tableau des paramètres raster

Comme le montre l'image ci-dessus, la couche la plus externe du système de grille distingue quatre largeurs de navigateur : écran ultra-petit (<768px), petit écran (>=768px), écran moyen (>=992px) et Grand écran (>=1200px). Les largeurs adaptatives du conteneur interne .container sont : automatique, 750px, 970px et 1170px. Automatique signifie que si vous êtes sur l’écran d’un téléphone mobile, celui-ci occupera une ligne d’affichage.

//四种屏幕分类全部激活
<div class="container">
<div class="row">
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 a">4</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 a">4</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 a">4</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 a">4</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 a">4</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 a">4</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 a">4</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 a">4</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 a">4</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 a">4</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 a">4</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 a">4</div>
</div>
</div> 
//有时我们可以设置列偏移，让中间保持空隙
<div class="container">
<div class="row">
<div class="col-md-8 a">8</div>
<div class="col-md-3 col-md-offset-1 a">3</div>
</div>
</div> 
//也可以嵌套，嵌满也是 12 列
<div class="container">
<div class="row">
<div class="col-md-9 a">
<div class="col-md-8 a">1-8</div>
<div class="col-md-4 a">9-12</div>
</div>
<div class="col-md-3 a">
11-12
</div>
</div>
</div> 
//可以把两个列交换位置，push 向左移动，pull 向右移动
<div class="container">
<div class="row">
<div class="col-md-9 col-md-push-3 a">9</div>
<div class="col-md-3 col-md-pull-9 a">3</div>
</div>
</div>

Ce qui précède contient les informations pertinentes pour le système de grille BootStrap. J'espère qu'elles seront utiles à tout le monde !