Ich habe vor ein paar Tagen Bootstrap gelernt und das Netzsystem aussortiert. Wenn es Fehler gibt, können Sie sie gerne korrigieren.
Zusammenfassung: Das Netzsystem hat reaktionsschnelle Webseiten für PC-, PAD- und Mobilgeräte entwickelt, und es gibt verschiedene Lösungen, die auf verschiedenen Bildschirmauflösungen basieren.
(0.1, Bildschirmvorrichtungsgröße ist größer als 1200px Wählen Sie Col-LG aus
(0.2. Die Größe der Bildschirmvorrichtung liegt zwischen 970px und 1200px Wählen Sie Col-MD aus
(0.3. Die Größe der Bildschirmvorrichtung liegt zwischen 768px und 970px aus, COL-SM Wählen Sie
(0.4. Die Größe der Bildschirmvorrichtung beträgt weniger als 768px
1. Das Netzsystem unterteilt die Seite in 12 Spalten (bis zu 12 Spalten) wie folgt :
<!DOCTYPE html><html lang="zh-cn"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1,maxinum-scale,user-scalable=no"> <title>Raster system</title> <link rel="stylesheet" href = "Bibliothek/Bootstrap.min.css"> <style> .a {Höhe: 50px; Grenze: 1px rote Feststoff; Hintergrund: Pink; } </style></head><body> <div> <div> <div>1</div> <div>1</div> <div>1</div> <div>1</div> <div>1</div> <div>1</div> <div>1</div> <div>1</div> <div>1</div> <div>1</div> <div>1</div> <div>1</div> <div>1</div> <div>1</div> <div>1</div> <div>1</div> <div>1</div> <div>1</div> <div>1</div> <div>1</div> <div>1</div> <div>1</div> <div>1</div> <div>3</div> <div>9</div> </div> </div> </div> </div> </div> <script src = "bibliothek/jq.js"> </script> <script src = "bibliothek/bootstrap.min.js"> </script> </body> </html>(2.1, Col-MD-1 ist eine Spalte mit insgesamt 12 Spalten mit einer "horizontalen Reihe". Die Anzahl der nach MD zurückhaltenden Anzahl ist die Anzahl der zugewiesenen Spalten (col-lg, col-sm, col-XS ist gleich)
3.. Unter Geräten mit unterschiedlichen Bildschirmauflösungen ist die vorgestellte Seite die entsprechende "Raster Format -Balkenseite", wodurch ein reaktionsschnelles Layout wie folgt erkannt wird :
<!DOCTYPE html><html lang="zh-cn"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1,maxinum-scale,user-scalable=no"> <title>Raster system</title> <link rel="stylesheet" href = "Bibliothek/Bootstrap.min.css"> <style> .a {Höhe: 50px; Grenze: 1px rote Feststoff; Hintergrund: Pink; } </style></head><body> <div> <div> <div>1</div> <div>1</div> <div>1</div> <div>1</div> <div>1</div> <div>1</div> <div>1</div> <div>1</div> <div>1</div> <div>1</div> <div>1</div> <div>1</div> <div> 1 </div> <div> 1 </div> <div> 1 </div> <div> 1 </div> <div> 1 </div> <div> 1 </div> </div> </div> </div> <script src = "bibliothek/jq.js"> </script> <script Src = "bibliothek/bibliothek/bibliothek/bibliothek/bibliothek/bibliothek/bibliothek/bibliothek/bibliothek/bootstrap.min(3.1. Der obige Code zeigt, dass eine horizontale Zeile, wenn die Größe der Bildschirmvorrichtung größer als 1200px ist, vier Spalten aufweist, eine große Spalte drei kleine Spalten und die kleine Spalte insgesamt 12 Spalten enthält.
(3.2, was darauf hinweist, dass bei der Größe der Bildschirmvorrichtung zwischen 970px und 1200px liegt (Sie können zuerst den Browser betrachten, der auf diese Stufe schrumpft), befinden sich drei Spalten in einer horizontalen Zeile und vier Spalten in einer großen Spalte mit insgesamt 12 Spalten.
(3.2, was darauf hinweist, dass bei der Größe der Bildschirmvorrichtung zwischen 768px und 970px liegt (Sie können sich zunächst den Browser ansehen, der auf diese Stufe schrumpft), befinden sich zwei große Spalten in einer horizontalen Zeile und sechs kleine Spalten in einer großen Spalte mit insgesamt 12 Spalten.
(3.2, was darauf hinweist, dass bei der Größe der Bildschirmvorrichtung weniger als 768px beträgt (Sie können zuerst den Browser auf diese Stufe schauen), befindet sich eine große Säule in einer horizontalen Zeile, und eine große Säule hat zwölf kleine Spalten mit insgesamt 12 Spalten.
4. Säulenversatz, Verschachtelungs- und Tauschpositionen im Rastersystem
(4.1, Spaltenversatz
<div> <div> 8 </div> <div> 3 </div> <!-Spaltenversetze nacheinander nach rechts-> </div>
(4.2, Verschachtelung
<div> <!-Nesting-> <div style = "padding: 0;"> <div> </div> </div> <div> </div> </div> <div> 3 </div> </div>
(4.3, Swap -Position
<div> <!-Swap-Position-> <div> 9 </div> <!-drücken, nach rechts gehen-> <div> 3 </div> <!-Ziehen Sie, bewegen Sie sich nach links-> </div>
Wenn Sie weiterhin ausführlich studieren möchten, können Sie hier klicken, um Ihnen zu studieren und 3 aufregende Themen anzuhängen:
Bootstrap -Lern -Tutorial
Bootstrap Practical Tutorial
Bootstrap-Plug-in-Nutzungs-Tutorial
In diesem Artikel werden die einfachsten Fälle verwendet, um die wichtigsten Layoutpunkte in den Fall zu analysieren, in der Hoffnung, für das Lernen aller hilfreich zu sein.