Cet article présentera principalement le système de grille de bootstrap.
La mise en œuvre du système de grille consiste à définir la taille du conteneur, à diviser 12 parties (ou 24 parties ou 32 parties, mais 12 parties sont les plus courantes), puis ajustez les marges intérieures et extérieures, et enfin combiner les requêtes multimédias pour créer un puissant système de grille réactif.
Le système de grille en bootstrap doit diviser le récipient en 12 parties.
Le système de grille de bootstrap est utilisé pour la mise en page, qui est en fait une combinaison de colonnes. Il y a quatre usages de base:
1. combinaison de colonnes
Modifier le nombre en colonnes fusionner (principe: la somme des colonnes ne peut pas dépasser 12), par exemple:
<! Doctype html> <html> <éadf> <meta charset = "utf-8"> <tight> Utilisation de base de la combinaison de colonnes </netdna.bootstrapcdn.com/bootstrap/3.1/css/bootstrap.min.crss "> <! Style -> <style> [class * = col -] {background-Color: #eee; Border: 1px solide #ccc; } </ style> </ head> <body> <br> <div> <div> <! - Le système de grille en bootstrap divise le conteneur en 12 pièces -> <! - Cette ligne est divisée uniformément séparée par 1: 1: 1 -> <v> .Col-md-4 </div> <v> .col-md-4 </div> <div> .col-md-4 </ div> <div> .col-md-4 </div> </div> <div> <! - Cette ligne est divisée uniformément séparée par 1: 2: 1 -> <div> .col-md-3 </div> <v> .col-md-6 </div> <div> .col-md-3 </div> </div> </v> </div> </gody> </html>Les rendus sont les suivants:
2. décalage de la colonne
Ajoutez le nom de classe "Col-Md-Offset- *" sur l'élément de colonne (où l'astérisque représente le nombre de combinaisons de colonnes à compenser), et la colonne avec ce nom de classe sera compensée à droite.
<div> <! - L'espacement de quatre colonnes se déplaçant vers la droite -> <div> <div> .col-md-4 </div> <div> l'espacement de quatre colonnes se déplaçant vers la droite </div> <v> .col-md-3 </div> </div> <! - l'espacement de quatre colonnes se déplaçant vers la droite </v> <v> .col-md-3 </ div> <! - Row>. s'est produit -> <div> <div> <div> .col-md-4 </div> <div> l'espacement de quatre colonnes se déplaçant vers la droite </v> <v> .col-md-3 </v> </div> <div> <div> .col-md-3 </div> <v> <v> .Col-md-3 </v> <v> <v> <v> <div> Col-md-4 </div> </div> </div>
Les rendus sont les suivants:
3. Tri de colonne
Le tri des colonnes consiste à changer la direction de la colonne, à changer la gauche et à droite flottantes et à régler la distance flottante. Bootstrap est réalisé en ajoutant les noms de classe "Col-md-push-" et "Col-MD-Pull-" (où l'astérisque représente le nombre de combinaisons de colonnes en mouvement).
<! Doctype html> <html> <éadf> <meta charset = "utf-8"> <tight> usage de base </netdna.bootsstrapcdn.com/bootstrap/3.1.1/css/bootsstrap.min..com/bootstrap/3.1.1/css/bootsstrap.min.css "> <! [class * = col -] {background-Color: #eee; Border: 1px solide #ccc; } </ style> </ head> <body> <div> <div> <div> .col-md-3 </div> <div> .col-md-6 </div> </div> </div> </ body> </html>4. nidification des colonnes
<! Doctype html> <html> <éadf> <meta charset = "utf-8"> <tight> usage de base </netdna.bootsstrapcdn.com/bootstrap/3.1.1/css/bootsstrap.min..com/bootstrap/3.1.1/css/bootsstrap.min.css "> <! [class * = col -] {background-Color: #eee; Border: 1px solide #ccc; } [class * = col-] [class * = col-] {background-Color: # f36; Border: 1px en pointillé #ffff; Couleur: #ffff; } </ style> </ head> <body> <div> <div> <div> <div> J'ai une grille imbriquée <div> <v> <v> Col-md-6 </div> <div> Col-md-6 </div> </div> </div> </div> </div> </div> </div> </div> </vingLes rendus sont les suivants:
Si vous souhaitez toujours apprendre en profondeur, vous pouvez cliquer ici pour apprendre et vous attacher deux sujets passionnants: Tutoriel d'apprentissage bootstrap Tutoriel Bootstrap
Série d'articles:
La première fois que je suis entré en contact avec la disposition de base magique Bootstrap //www.vevb.com/article/89278.htm
La première fois que je suis entré en contact avec le formulaire magique de bootstrap //www.vevb.com/article/89330.htm
Ce qui précède est tout le contenu de cet article. J'espère que cela sera utile à l'apprentissage de tous et j'espère que tout le monde soutiendra davantage Wulin.com.