1. Introduction
Bootstrap possède un système de grille de streaming réactif et axé sur le mobile. À mesure que le périphérique d'écran ou la taille de la fenêtre augmente, le système sera automatiquement divisé en jusqu'à 12 colonnes . Il comprend des classes prédéfinies faciles à utiliser et des mélanges puissants pour générer plus de dispositions sémantiques.
2. Options raster
Bootstrap3.x utilise quatre options de grille pour former un système de grille. L'introduction de ces quatre options sur le site officiel est la suivante. Beaucoup de gens ne le comprennent pas. Ici, je vais expliquer les différences entre les quatre options de grille en détail. En fait, une seule des différences est qu'elles conviennent aux dispositifs d'écran de différentes tailles . Regardons l'élément de préfixe de classe. Nommez ces quatre options de grille pour le préfixe. Ce sont Col-X, Col-SM, Col-MD et Col-LG. Ceux qui comprennent l'anglais sauront que LG est l'abréviation du grand MD est l'abréviation du milieu, SM est l'abréviation de petits, et XS est l'abréviation de ***. Cette dénomination reflète les différentes largeurs d'écran auxquelles ces classes s'adaptent. Ci-dessous, nous introduisons les caractéristiques de ces classes.
Le tableau suivant vous permet de voir en détail comment le système raster de Bootstrap fonctionne sur plusieurs appareils d'écran.
3. décalage de la colonne
Utilisez .Col-MD-Offset- * Pour compenser la colonne à droite. Ces classes ajoutent toutes les colonnes à la marge gauche de la colonne en utilisant le sélecteur *. Par exemple, .Col-MD-Offset-4 a décalé .COL-MD-4 à droite par 4 colonnes en largeur.
4. Colonnes imbriquées
Pour nicher le contenu à l'aide de rasters intégrés, cela peut être fait en ajoutant une nouvelle .Row et une série de colonnes .col-md- * dans les colonnes .col-md- * déjà existantes. Les colonnes contenues dans les lignes imbriquées devraient s'ajouter jusqu'à 12 .
5. Tri de colonne
L'ordre des colonnes peut être facilement modifié en utilisant .col-md-push- * et .col-md-pull- *.
Cas
<% @ Page Language = "Java" Pageencoding = "UTF-8"%> <% String path = request.getContextPath ();%> <! Doctype Html> <html Lang = "Zh-Cn"> <A-Head> <Title> Raster </ Title> <Meta Contenty = "ie = Edge" http-equiv = " http-equiv = "contenu-type" content = "text / html; charset = utf-8" /> <meta http-equiv = "content-liage" contenu = "zh-cn" /> <meta name = "auteur" contenu = "[email protected]" / meta name = "COPYRIGH Ltd. " /> <meta http-equiv = "pragma" contenu = "no-cache"> <meta http-equiv = "cache-control" contenu = "non-cache"> <meta http-equiv = "expires" contenu = "0"> <meta http-equiv = "keywords" contenu = "keyword1, keyword2, keyword3"> <méta " http-equiv = "Description" content = "Ceci est ma page"> <jsp: inclure page = "/ démo / base / js_bootstrap.jsp" /> <style type = "text / css">. show-grid [class ^ = "Col-"] {padding-top: 10px; padding-bottom: 10px; background-color: #eee; border: 1px solide: 1px solide: border: 1px solide: 10px; arrière-plan-color: #EEE; #ddd; background-Color: rgba (86, 61, 124, .15); bordure: 1px rgba solide (86, 61, 124, .2);} </ style> <script type = "text / javascrip <div> <div> .col-lg-8 </div> <div> .col-lg-4 </div> </div> <br/> <b> Col-md- * Usage </b> <div> <div> .col-md-1 </div> <div> .col-md-1 </div> <div> .col-md-1 </div> <div> .col-md-1 </div> <div> .col-md-1 </div> <div> .col-md---md--md--md--md--md--md--md--md--md-1 1 </div> <div> .col-md-1 </div> <div> .col-md-1 </div> <div> .col-md-1 </div> <div> .col-md-1 </div> <div> .col-md-1 </div> <div> .col-md-1 </div> </div> <br/> <b> col-md-8 </div> <v> .col-md-4 </div> </div> <br/> <b> col-sm- * USAGE </b> <div> <v> .col-sm-8 </div> <div> .col-sm-4 </div> </div> <br/> <b> col-xs- * Utilisation </b> <div> <div> .col-xs-8 </div> <div> .col-xs-4 </div> </div> <br/> <b> décalage de la colonne: Col-md-Offset - * </b> <div> <div> .col-md-4 </div> <div> .col-md-4 </div> <div> .col-md-4 </div> <div> .col-md-4 </div> <di v> .col-md-4 </div> <div> .col-md-4 </div> <div> .col-md-4 </div> <div> .col-md-4 </div> <div> .col-md-4 </div> <div> .col-ming D-4 </div> <div> .col-md-4 </div> <div> .col-md-4 </div> <div> .col-md-4 </div> <div> .col-md-4 </div> <div> .col-md-4 </di v> <div> .col-md-4 </div> <div> .col-md-4 </div> <div> .col-md-4 </div> <div> .col-md-4 </div> <div> .col-md-4 </div> </div> <br/> <b> Colonne Offset: Col-Md-Offset - * </b> <div> <div> .col-md-4 </div> <div> .col-md-4 </div> <div> .col-md .col-md-offset-4 </div> </div> <v> <div> .col-MD-3 .Col-Md-Offset-3 </v>. .Col-md-Offset-3 </div> </div> <div> <div> .col-md-6 .col-md-offset-3 </div> </div> <br/> <b> colonnes imbriquées: les colonnes contenues dans une ligne imbriquée devraient être égales à 12 </b> le niveau 2: div> le niveau 1: .col-md-9 <v> <v> le niveau 2: .col-md-6 </div> <div> Niveau 2: .Col-MD-6 </div> </div> </div> <br/> <b> Tri de colonne: .col-md-push- * et .col-md-push-3 </v> <v> .col-md-3. .col-md-pull-9 </div> </div> </ody> </html>
Effet de démonstration
Ce qui précède est les connaissances pertinentes sur le système de grille bootstrap qui vous est présentée par l'éditeur. J'espère que cela vous sera utile!