Bootstrap bietet ein reaktionsschnelles, mobiles Streaming-Gittersystem. Mit zunehmender Bildschirm- oder Ansichtsfenstergröße wird das System automatisch in bis zu 12 Spalten unterteilt.
Das Netzsystem ähnelt einer Tabelle mit Zeilen und Spalten. Es muss in einen Container mit dem auf Container festgelegten Typ platziert werden. Es kann ein Div sein und der Inhalt wird in der Spalte platziert. Das Netz im Webdesign wird zum Layout der Inhalte verwendet, wodurch die Website einfach zu durchsuchen kann. Das Folgende ist ein Beispiel für die Verwendung von Bootstrap -Rasterlayout.
<div> <div> col2 </div> <div> col10 </div> </div>
Der Anzeigeeffekt ist wie folgt:
Der Stil von class = "row" wird hinzugefügt, um die Zeile darzustellen, und der Stil von class = "col-sm-2" wird hinzugefügt, um die Spalte darzustellen. Das System unterteilt den gesamten Bildschirm in 12 Teile, COL-SM-2 bedeutet, dass die Säule 2 Teile und das Col-SM-10-Verhältnis bedeutet, dass die Säule 10 Teile umfasst. Der angezeigte Effekt wird wie in der obigen Abbildung angezeigt, was angibt, dass zwei Spalten in einer Zeile enthalten sind, die erste Spalte für 2 Teile und die zweite Spalte für 10 Teile kontaktieren.
Bootstrap ist ein reaktionsschnelles Front-End-Framework, das sich im Gittersystem widerspiegelt. Dies ist ein Gerät, das unterschiedlichen Anzeigegrößen entspricht, und kann unterschiedliche Display-Effekte aufweisen. Wie unten gezeigt:
<div> <div> .col-xs-12 .col-md-8 </div> <div> .col-xs-6 .col-md-e4 </div> </div>
Col-MD-8 bedeutet, dass diese Liste 8 Teile unter mittelgroßen Bildschirmen wie gewöhnlichen Desktops und Laptops ausmacht. Col-XS-12 bedeutet, dass diese Spalte 12 Exemplare unter kleinen Bildschirmen wie Tablets berücksichtigt. Der obige Code zeigt, dass es in der Zeile zwei Spalten und die nächste Zeile von gewöhnlichen Desktops und Laptops gibt. Die erste Spalte berücksichtigt 8 Teile, die zweite Spalte bildet 4 Teile und die nächste Zeile und die nächste Spalte für 2 Spalten, die erste Spalte für 12 Teile und die zweite Spalte für 6 Teile. Auf diese Weise werden unterschiedliche Effekte auf verschiedene Anzeigegeräte erzielt. Sie können diese beiden Situationen simulieren, indem Sie den Browser ändern.
Die folgende Abbildung zeigt, wie das Grid -System von Bootstrap auf mehreren Bildschirmgeräten funktioniert
Das obige ist die vollständige Beschreibung der vom Herausgeber eingeführten dritten Bootstrap -Grid -Grundlagen. Ich hoffe, es wird für alle hilfreich sein. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und der Editor wird allen rechtzeitig antworten. Vielen Dank für Ihre Unterstützung auf der Wulin.com -Website!