Bootstrap, de Twitter, est actuellement le cadre frontal le plus populaire. Bootstrap est basé sur HTML, CSS et JavaScript. Il est simple et flexible, ce qui rend le développement Web plus rapide.
Points clés pour l'apprentissage:
1. Les appareils mobiles sont préférés
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 et fournirons un système de grille de streaming réactif et axé sur le mobile.
un. Les appareils mobiles sont préférés
Dans le projet HTML5, nous avons réalisé le projet mobile. Il a une méta très importante pour définir l'écran et la largeur quadruple de l'appareil et s'il faut exécuter la mise à l'échelle des utilisateurs et la mise à l'échelle.
// La largeur de l'écran est cohérente avec l'appareil, l'évolution initiale, le maximum évolutif et l'interdiction de l'échelle de l'utilisateur.
deux. Récipient de mise en page
Bootstrap nécessite un conteneur .Container pour le contenu de la page et le système raster. En raison d'attributs tels que le rembourrage, ces deux classes de conteneurs ne peuvent pas être imbriquées les unes avec les autres.
// Largeur fixe <div> ... </div> // 100% largeur <v> ... </div>
Dans un système raster, le navigateur allouera automatiquement jusqu'à 12 colonnes à mesure que la taille de l'écran augmente ou diminue. Créez une disposition de page en combinant une série de lignes et de colonnes. Le principe de travail est le suivant:
1. "Row" doit être inclus dans .Container (largeur fixe) ou .Container-fluid (100% largeur) pour lui donner un alignement et un rembourrage appropriés.
2. Créez un ensemble de "colonnes" horizontalement via "Row".
3. Votre contenu doit être placé dans "colonne", et seule "colonne" peut être utilisée comme élément enfant direct de la ligne.
4. Des classes prédéfinies comme .Row et .COL-XS-4 peuvent être utilisées pour créer rapidement des dispositions raster.
Le mixin défini dans le code source bootstrap peut également être utilisé pour créer des dispositions sémantiques.
5. Créez une gouttière entre les colonnes en définissant la propriété de rembourrage pour "colonne". En définissant des valeurs négatives pour les éléments.
La marge compense ainsi l'ensemble de rembourrage pour l'élément .Container, qui compense indirectement le rembourrage pour la "colonne" contenue dans "Row".
6. La marge négative est la raison pour laquelle l'exemple suivant se met en évidence. Le contenu de la colonne raster est disposé dans une ligne.
7. Une colonne dans un système raster représente la plage qu'il couvre en spécifiant des valeurs de 1 à 12. Par exemple, trois colonnes de largeur égale peuvent être créées en utilisant trois .COL-XS-4.
8. Si la "colonne" contenue dans une "ligne" est supérieure à 12, les éléments dans lesquels la "colonne" supplémentaire sont situées seront organisées dans une autre ligne dans son ensemble.
9. La classe de grille convient aux appareils avec une largeur d'écran supérieure ou égale à la taille du point de division, et couvre la classe de grille pour les petits appareils d'écran. Par conséquent, l'application de n'importe quelle classe raster .col-md- * sur l'élément convient aux appareils avec des largeurs d'écran supérieurs ou égaux à la taille du point de division et écrase la classe raster pour les petits appareils d'écran. Par conséquent, l'application de tout .col-lg- * sur l'élément n'existe pas, ce qui affecte également le dispositif grand écran.
// Créez une ligne réactive <div> <v> ... </div> </div> // Créez une ligne réactive avec jusqu'à 12 colonnes <div> <div> <div> 1 </div> <div> 2 </div> <div> 3 </div> <div> 4 </div> <div> 5 </div> <div> 6 </div> <div> 10 </v> <v> 11 </div> <v> 12 </div> </div> </v> </v> <v> 12 </vish Css.a {hauteur: 100px; background-color: #eee; border: 1px solide #ccc;} // Le nombre total de colonnes est de 12, et chaque colonne se voient attribuer plusieurs colonnes <div> <div> <div> 1-4 </div> <div> 5-8 </div> <div> 9-12 </div> </div> <div> <div> 1-8 </div> <div> 9-12 </div> </div> </div> 9-12 </div> </div>> </div>> 9-12 </div> </div>>Table de paramètres raster
Comme le montre la figure ci-dessus, la couche la plus externe du système de grille distingue quatre largeurs de navigateurs: écran ultra-petit (<768px), petit écran (> = 768px), écran moyen (> = 992px) et grand écran (> = 1200px). Les largeurs adaptatives du conteneur de container intérieur sont: automatique, 750px, 970px et 1170px. Automatique signifie que si vous êtes sur l'écran du téléphone mobile, vous afficherez entièrement exclusivement une ligne.
// Activer les quatre écran categories<div><div><div>4</div><div>4</div><div>4</div><div>4</div><div>4</div><div>4</div><div>4</div><div>4</div><div>4</div><div>4</div><div>4</div><div>4</div><div>4</div></div> // Parfois, nous pouvons définir des décalages de colonnes pour maintenir une lacune au milieu <div> <div> <div> 8 </div> <div> 3 </div> </div> </div> // peut également être imbriqué, et l'intégration est également 12. Column </v> <v> <v> 1-8 </div> <v> </v> </div> </div> <v> // Vous pouvez échanger deux colonnes, pousser vers la gauche et tirer vers la droite <v> <div> <div> 9 </div> <div> 3 </div> </div> </div>
Ce qui précède est des informations connexes pour le système de grille bootstrap, j'espère que ce sera utile à tout le monde!