Bootstrap 3 est mobile d'abord, en ce sens, le code bootstrap commence par de petits appareils d'écran (tels que des appareils mobiles, des tablettes), puis se développe en composants et grilles sur des appareils à grand écran (tels que les ordinateurs portables, les ordinateurs de bureau).
1. Stratégie de priorité de l'appareil mobile
1. Contenu: décider quelle est la chose la plus importante.
2. Disposition
Conception préférentielle de largeurs plus petites.
Le CSS de base est préféré pour les appareils mobiles, et les requêtes multimédias sont ciblées sur les tablettes et les ordinateurs de bureau.
3. Progressivement amélioré
Ajoutez des éléments à mesure que la taille de l'écran augmente.
À mesure que l'écran ou la taille de la fenêtre augmente, le système sera automatiquement divisé en jusqu'à 12 colonnes. Comme indiqué dans la figure ci-dessous:
2. Principe de travail du système de grille bootstrap (système de grille)
Le système de grille crée des dispositions de page via une série de lignes et de colonnes contenant du contenu. Voici une liste du fonctionnement du système de maillage bootstrap:
1. Les lignes doivent être placées dans la classe .Container pour obtenir un alignement et un rembourrage appropriés.
2. Utilisez des lignes pour créer des groupes horizontaux de colonnes.
3. Le contenu doit être placé dans la colonne, et seule la colonne peut être un élément enfant direct de la ligne.
4. Les classes de grille prédéfinies, telles que .Row et .COL-XS-4, peuvent être utilisées pour créer rapidement des dispositions de grille. Moins de classes hybrides peuvent être utilisées pour des dispositions plus sémantiques.
5. Les colonnes créent des lacunes entre le contenu des colonnes via le rembourrage. Cette marge intérieure est négative par la marge sur .Rows, indiquant le décalage de la ligne de la 6e, première colonne et dernière colonne.
7. Le système de grille est créé en spécifiant les douze colonnes disponibles que vous souhaitez courir. Par exemple, pour créer trois colonnes égales, utilisez trois .COL-XS-4.
3. Enquête sur les médias
Les requêtes avec les médias sont des "règles CSS conditionnelles" très chics. Il ne s'applique qu'à certains CSS en fonction de certaines conditions prescrites. Si ces conditions sont remplies, le style correspondant est appliqué.
Les requêtes multimédias dans bootstrap vous permettent de déplacer, d'afficher et de masquer le contenu en fonction de la taille de la fenêtre. La requête multimédia suivante est utilisée dans le fichier moins pour créer des seuils de point d'arrêt critiques dans le système de grille bootstrap.
/ * Appareil ultra-petit (téléphone mobile, moins de 768px) * // * Aucune requête multimédia par défaut dans Bootstrap * / / * petit appareil (tablette, à partir de 768px) * / @ média (Min-Width: @ Screen-SM-Min) {...} / * Device Medium (Deker-MD, à partir de 992px) * / @ media (Min-width: @ screen-MD-midi) (Grand bureau, à partir de 1200px) * / @ média (Min-Width: @ Screen-LG-Min) {...}Nous incluons parfois la largeur maximale dans notre code de requête multimédia, limitant l'impact du CSS à une plus petite gamme de tailles d'écran.
@media (max-width: @screen-xs-max) { ... }@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... }@media (min-width: @screen-lg-min) { ... }Il y a deux parties pour la requête multimédia, d'abord une spécification de périphérique, puis une règle de taille. Dans le cas ci-dessus, les règles suivantes sont définies:
Regardons la ligne de code suivante:
@media (min-large: @ screen-sm-min) et (max-width: @ screen-sm-max) {...}
Pour tous les appareils avec une largeur min: @ screen-sm-min, un traitement sera effectué si la largeur de l'écran est plus petite que @ screen-sm-max.
4. Options de grille
Le tableau suivant résume comment le système de maillage bootstrap fonctionne sur plusieurs appareils:
5. Structure de la grille de base
Voici la structure de base de la grille bootstrap:
<div> <div> <div> </div> <div> </div> </div> <div> ... </div> </div> <div> ....
Voici un exemple de code spécifique:
<div> <h1>Hello, world!</h1> <div> <!--Small device mobile phone (<768px) --> <div style="background: #f00">1</div> <div style="background: #b2b0b0">2</div> <div style="background: #ff6a00">3</div> <div style="background: #ffd800">4</div> <div style="background: #4cff00">5</div> <div style="background: #0ff">6</div> <div style="background: #0094ff">7</div> <div style="background: #0094ff">7</div> <div style="background: #b200ff">8</div> <div style="background: #ff00dc">9</div> <div style = "Background: # ff006e"> 10 </div> <div style = "background: # ac5050"> 11 </div> <div style = "background: # 54bd4f"> 12 </v> </div> <v> <! - petite tablette de périphérique (≥768px) -> <div style = "fond: # b2b0b0"> 1 </v> # ffd800 "> 1 </div> <div style =" background: # ac5050 "> 1 </div> </div> <div> <! - ordinateur de bureau de taille moyenne (≥992px) -> <div style =" background: # ac5050 "> 1 </div> <div style =" background: # 54bd4f "> 1 </v> </v> </v> </v> <! (≥1200px) -> <div style = "background: # ac5050"> 1 </div> <div style = "background: # 54bd4f"> 1 </div> </div> </div> </div>
6. Colonne de décalage
Le décalage est une fonctionnalité utile pour des dispositions plus professionnelles. Ils peuvent être utilisés pour faire plus d'espace pour la colonne. Par exemple, les classes .col-xs = * ne prennent pas en charge les décalages, mais ils peuvent simplement y parvenir en utilisant une cellule vide.
Pour utiliser des décalages sur des moniteurs à grand écran, utilisez la classe .Col-MD-Offset- *. Ces classes augmenteront la marge gauche d'une colonne de * colonne, où * la plage est de 1 à 11.
Dans l'exemple ci-dessous, nous avons <div> .. </div>, et nous utiliserons la classe .Col-MD-Offset-3 pour centrer ce div.
<div> <div> <div style="background-color: #dedef8;"> <p> Test offset column---3 columns are offset to the right here</p> </div> </div> <div> <div style="background: #f00">1</div> <div style="background: #b2b0b0">2</div> <div style="background: #ff6a00">3</div> <div style="background: #ffd800">4</div> <div style="background: #4cff00">5</div> <div style="background: #0ff">6</div> <div style="background: #0094ff">7</div> <div style="background: #b200ff">8</div> <div style="background: #ff00dc">9</div> <div style = "Background: # ff006e"> 10 </div> <div style = "background: # ac5050"> 11 </div> <div style = "background: # 54bd4f"> 12 </div> </div> </div> </div>
Effet d'affichage:
7. Colonnes imbriquées
Pour nid la grille par défaut dans le contenu, ajoutez un nouveau .Row et ajoutez un ensemble de colonnes .col-md- * dans une colonne .col-md- * existante. Les lignes imbriquées doivent contenir un ensemble de colonnes, et le nombre de colonnes dans cet ensemble de colonnes ne peut pas dépasser 12 (en fait, il n'y a aucune exigence que vous deviez occuper 12 colonnes).
Dans l'exemple suivant, la disposition a deux colonnes et la deuxième colonne est divisée en deux lignes et quatre cases.
<div> <div> <div style = "background: # b2b0b0"> première colonne </ div> <div style = "background: # def8"> La deuxième colonne - il y a quatre divs imbriqués <div> <div style = "background: # 0094ff"> Je suis contenu un <br / Br / Br / Br / Brure </div> <div> <div style = "background: # ff00dc"> je suis contenu trois <br /> <br /> <br /> </ div> <div style = "background: # ff006e"> je suis content quatre </div> </div> </div> </div> </v>
Effet d'affichage:
8. Tri de colonne
Une autre caractéristique parfaite du système de maillage bootstrap est que vous pouvez facilement écrire des colonnes dans un ordre, puis les afficher dans un autre.
Vous pouvez facilement modifier l'ordre des colonnes de grille intégrées avec .col-md-push- * et .col-md-pull- * classes, où * varie de 1 à 11.
Dans l'exemple ci-dessous, nous avons deux dispositions de colonnes, la colonne gauche est étroite, comme barre latérale. Nous utiliserons les classes .col-md-push- * et .col-md-pull- * pour échanger l'ordre des deux colonnes.
<div> <div> <div style = "background: # ff00dc"> gauche </div> <div style = "background: # ff006e"> droit </div> </div> </div>
Effet d'affichage:
Si vous souhaitez toujours étudier en profondeur, vous pouvez cliquer ici pour étudier et vous attacher 3 sujets passionnants:
Tutoriel d'apprentissage bootstrap
Tutoriel pratique de bootstrap
Tutoriel d'utilisation du plug-in bootstrap
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.