1. Einführung
Bootstrap hat ein reaktionsschnelles, mobiles Streaming-Netzsystem integriert. Mit zunehmendem Bildschirmgerät oder Ansichtsfenster wird das System automatisch in bis zu 12 Spalten unterteilt . Es enthält einfach zu verwendende vordefinierte Klassen und leistungsstarke Mixins, um mehr semantische Layouts zu erzeugen.
2. Rasteroptionen
Bootstrap3.x verwendet vier Gitteroptionen, um ein Netzsystem zu bilden. Die Einführung dieser vier Optionen auf der offiziellen Website ist wie folgt. Viele Menschen verstehen es nicht. Hier werde ich die Unterschiede zwischen den vier Gitteroptionen im Detail erläutern. Tatsächlich ist nur einer der Unterschiede, dass sie für Bildschirmgeräte unterschiedlicher Größen geeignet sind . Schauen wir uns das Klassenpräfix -Element an. Nennen wir diese vier Gitteroptionen für das Präfix. Sie sind Col-XS, Col-SM, Col-MD und Col-LG. Diejenigen, die Englisch verstehen, werden wissen, dass LG die Abkürzung von großem, MD ist, die Abkürzung von Mid, SM die Abkürzung von Small und XS die Abkürzung von ***. Diese Benennung spiegelt die verschiedenen Bildschirmbreiten wider, an die sich diese Klassen anpassen. Im Folgenden stellen wir die Eigenschaften dieser Klassen ein.
Mit der folgenden Tabelle können Sie ausführlich angezeigt werden, wie das Rastersystem von Bootstrap auf mehreren Bildschirmgeräten funktioniert.
3. Spaltenversatz
Verwenden Sie .col-md-offset-*, um die Spalte nach rechts auszugleichen. Diese Klassen fügen alle Spalten am linken Rand der Spalte mithilfe des * Selektors hinzu. Zum Beispiel hat sich .col-md-offset-4 .col-MD-4 nach rechts um 4 Spalten in Breite verschoben.
4. Verschachtelte Säulen
Um Inhalte mit integrierten Raster zu nisten, kann dies durch Hinzufügen eines neuen .row und einer Reihe von .col-MD-* -Säulen in die bereits vorhandenen .Col-MD-* -Spalten erfolgen. Die in verschachtelten Zeilen enthaltenen Säulen sollten bis zu 12 hinzufügen .
5. Säulensortierung
Die Reihenfolge der Spalten kann leicht durch Verwendung von .col-md-push-* und .col-md-pull-* geändert werden.
Fall
<%@ page Language = "java" pageCoding = "utf-8"%> <%String path = request.getContextPath ();%> <! docType html> <html Lang = "zh-cn"> <head> <title> raster </title> <meta-content = "ie = edge" http-äquiv http-äquiv = "content-type" content = "text /html; charset = utf-8" /> <meta http-äquiv = "contentsprachige" content = "zh-cn" /> <meta name = "Author" content = "[email protected]" /> <meta name = "copyight" capyight "content = content = content = content =" content = content = content = "content = content =" contains Ltd. " /><meta http-equiv="pragma" content="no-cache"><meta http-equiv="cache-control" content="no-cache"><meta http-equiv="expires" content="0"><meta http-equiv="keywords" content="keyword1,keyword2,keyword3"><meta http-äquiv = "Beschreibung" content = "Dies ist meine Seite"> <jsp: include page = "/Demo/base/js_bootstrap.jsp"/> <style type = "text/csS">. show-Grid [Klasse ^= "Col-"] {padding-top: 10px; padding-bottom: 10px; birschfach: # # # # # # # # # # # # # # # # # # # # #: # # # # # #: 1PX; RGBA (86, 61, 124, .15); Grenze: 1PX Solid Rgba (86, 61, 124, .2);} </style> <script type = "text/javascript"> $ (function () {}); <div> <div> .col-lg-8 </div> <div> .col-lg-4 </div> </div> <br/> <b> col-md-*use 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> </> <br/> <b> col-md-8 </div> <div> .col-md-4 </div> </div> <br/> <b> col-sm-*useage </b> <div> .col-sm-8 </div> <div> .col-sm-4 </div> </div> <br/> <b> col-xs-*Verwendung </b> <div> <div> .col-xs-8 </div> <div> .col-xs-4 </div> </div> <br/> <b> Spaltenversetzt: 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-m 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> Säulenversatz: col-md-offset-*</b> <div> <div> .col-md-4 </div> <div> .col-md-4 </div> <div> .col-md .col-md-offset-4 </div> <div> <divs> <divs> .col-md-3. .Col-md-offset-3 </div> </div> <div> <div> .col-md-6 .col-md-offset-3 </div> </div> <br/> verschachtelte Säulen: Die in einer verschachtelten Zeile enthaltenen Spalten sollten gleich 12 </b> <div> <div> <Viv> -Vivel 1: .Col-Md-9 <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <Viv> 2: .col-md-6</div></div></div><br/> <b>Column sorting: .col-md-push-* and .col-md-pull-*</b> <div><div>.col-md-9 .col-md-push-3</div><div>.col-md-3 .col-md-pull-9</div></div> </body> </html>
Demo -Effekt
Das obige ist das relevante Wissen über das vom Editor vorgelegte Bootstrap -Gittersystem. Ich hoffe, es wird für Sie hilfreich sein!