1. Erstellen Sie eine Bootstrap -Entwicklungsumgebung
1. Download Bootstrap, http://www.bootcss.com/
2. Download Jquery und Zugriff http://code.jquery.com/jquery-2.0.3.min.js direkt über den IE
3.. Importieren Sie Bootstrap und Jquerys JS-, CSS -Dateien und .Viewports <Meta> -Tags auf der HTML -Seite. Dieses Tag kann so geändert werden, dass die meisten mobilen Geräte angezeigt werden, z. B. wenn LT IE 9 ... für die Kompatibilität unter IE9.
Die Vorlage lautet wie folgt
<! DocType html> <html> <head> <meta charset = "utf-8"> <meta content = "width = Gerätebreite, initial-scale = 1,0" name = "viewPort"/> <title> citle hier </title> <link href = "css/bootstrap.min IE 9]> <script src = "https <! [endif]-> <script src = "js/jQuery-2.0.3.min.js"> </script> <script src = "js/bootstrap.min.js"> </script> </head> <body> <div> </div> </body> </html> </head> <body> </div> </body> </html> </head> <body> </div> </body> </html>
Ii. Netzsystem
1. Boostrap trennt den Desktop in eine Tabelle mit 12 Zeilen * N -Spalten für das Layout, der Kern des Boostraps ist.
2.Row wird verwendet, um die Zeilenebene zu teilen und muss unter .Container enthalten sein.
3..
<div> <div> <div>1</div> <div>2</div> <div>3</div> <div>4</div> </div> <div> <div>5</div> <div>6</div> <div>7</div> <div>8</div> </div> </div> </div> </div> </div> </div> </div>
4. Spaltenversatz, implementiert über 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. Säulensortierung kann durch .col-xx-push-* und .col-xx-pull-* erreicht werden, um die linke oder rechte Sortierung von Spalten zu implementieren.
<div> <div> <div> 1 </div> <div> 2 </div> <div> 3 </div> </div> <div> 5 </div> <div> 6 </div> <div>
6. Spalten und Nistzeile in 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>
Wenn Sie weiterhin ausführlich lernen möchten, können Sie hier klicken, um Ihnen zu lernen und Ihnen zwei aufregende Themen anzuhängen: Bootstrap -Lern -Tutorial Bootstrap Practical Tutorial
Das obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, es wird für das Lernen aller hilfreich sein und ich hoffe, jeder wird Wulin.com mehr unterstützen.