1. Construisez un environnement de développement bootstrap
1. Téléchargez Bootstrap, http://www.bootcss.com/
2. Téléchargez jQuery et accès http://code.jquery.com/jquery-2.0.3.min.js directement via IE
3. Importez Bootstrap et JQuery, les fichiers JS, CSS et les balises <Meta> de .Viewport dans la page HTML. Cette balise peut être modifiée pour s'afficher sur la plupart des appareils mobiles, comme si LT IE 9 ..., pour la compatibilité ci-dessous IE9.
Le modèle est le suivant
<! Doctype html> <html> <ead> <meta charset = "utf-8"> <meta tental = "width = device-width, initial-scale = 1.0" name = "Viewport" /> <Title> Insérez le titre </ title> <lien href = "CSSS / BOOTSTRAP.MIN.CSSS" REL = "StyleSheet" MediaSheet " Ie 9]> <script src = "https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"> </ script> <script src = "https://oss.maxcdn.com/libs/respond.js/13.0/respond.min. <! [endif] -> <script src = "js / jQuery-2.0.3.min.js"> </ script> <script src = "js / bootstrap.min.js"> </ script> </ head> <pody> <div> </div> </ body> </html>
Ii Système de grille
1. Boostrap sépare le bureau en une table avec 12 lignes * n colonnes pour la mise en page, qui est le cœur de Boostrap.
2. .Row est utilisé pour diviser le niveau des lignes et doit être inclus sous .Contaileur.
3. Col-xx- * Effectuer la division au niveau de la colonne, comme indiqué dans la figure ci-dessous
<div> <div> <div> 1 </div> <div> 2 </div> <div> 3 </div> <div> 4 </div> </div> <div> <div> 5 </div> <v> 6 </div> <v> 7 </v> </v> </v> </div> </div> </v> </div> </div> </div> </div>
4. décalage de la colonne, implémenté via Col-Xx-Offset- *
<div> <div> <div>1</div> <div>2</div> <div>3</div> <div>4</div> </div> <div>5</div> <div>6</div> <div>7</div> </div> </div> </div> </div> </div> </div>
5. Le tri des colonnes peut être réalisé par .col-xx-push- * et .col-xx-pull- * pour implémenter le tri gauche ou droit des colonnes.
<div> <div> <div> 1 </div> <div> 2 </div> <div> 3 </div> </div> <div> <div> 5 </div> <div> 6 </div> <div> 7 </div> </div> </div> </div> </div> </div> </div>
6. Colonnes de nidification et ligne de nid en col.
<div> <div>1</div> <div>2</div> <div>3</div> <div> <div> <div> <div>5</div> <div>6</div> <div>7</div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div>
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
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.