In diesem Artikel wird das Grid -System von Bootstrap hauptsächlich vorgestellt.
Die Implementierung des Gittersystems besteht darin, die Behältergröße zu definieren, 12 Teile (oder 24 Teile oder 32 Teile, 12 Teile am häufigsten) zu teilen, dann die inneren und äußeren Ränder anzupassen und schließlich Medienfragen zu kombinieren, um ein leistungsstarkes reaktionsschnelles Gittersystem zu erstellen.
Das Gittersystem in Bootstrap besteht darin, den Behälter in 12 Teile zu unterteilen.
Das Grid -System von Bootstrap wird für das Layout verwendet, was eigentlich eine Kombination von Spalten ist. Es gibt vier grundlegende Verwendungen:
1. Säulenkombination
Ändern Sie die Anzahl in Zusammenführungsspalten (Prinzip: Die Summe der Spalten darf 12 nicht überschreiten), z. B.:
<!DOCTYPE HTML><html><head><meta charset="utf-8"><title>Basic usage of column combination</title><link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"><!--css style-> <style> [class *= col-] {Hintergrundfarbe: #eee; Grenze: 1PX Solid #CCC; } </style> </head> <body> <br> <div> <div> <!-Das Gittersystem in Bootstrap unterteilt den Behälter in 12 Teile-> <!-Diese Zeile wird gleichmäßig durch 1: 1: 1-> <div> .col-md-4 </div> .col-md-4 </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div>. <div> .col-md-4 </div> </div> <div> <!-Diese Zeile wird gleichmäßig durch 1: 2: 1-> <div> .col-md-3 </div> <div> .col-md-6 </div> </div> .col-md-3 </div> </div> </div> </body> </brodhtml> </div> </body> </html> </div> aufgeteilt.Die Renderings sind wie folgt:
2. Spaltenversatz
Fügen Sie den Klassennamen "col-md-offset-*" in das Spaltenelement hinzu (wobei das Stern das Stern das zu vergrößerte Spaltenkombinationen darstellt), und die Spalte mit diesem Klassennamen wird nach rechts ausgeglichen.
<div> <!-Der Abstand von vier Säulen, die sich rechts bewegen-<div> <div> .col-md-4 </div> <div> Der Abstand von vier Säulen, die sich nach rechts bewegen. --><div> <div> <div>.col-md-4</div> <div> The spacing of four columns moving to the right</div> <div>.col-md-3</div> </div> <div> <div>.col-md-3</div> <div> <div>.col-md-3</div> <div> <div>col-md-offset-3</div> <div> col-md-4 </div> </div> </div>
Die Renderings sind wie folgt:
3. Säulensortierung
Die Sortierung der Säulen sortiert die Richtung der Spalte, die schwebende linke und rechts und den schwimmenden Abstand einstellen. Bootstrap wird erreicht, indem die Klassennamen "col-md-push-" und "col-md-pull-" hinzugefügt werden (wobei das Stern das Stern das bewegliche Spaltenkombinationen darstellt).
<! DocType html> <html> <Head> <meta charset = "utf-8"> <title> Grundlegende Verwendung </title> <link rel = "styleSheet" href = "http://netDNA.bootstrapcdn.com/bootstrap/3.1.1/CSS/Bootstrap.Min.Min.Min.Min.Min.CSSS"> <- [Klasse *= col-] {Hintergrundfarbe: #eee; Grenze: 1PX Solid #CCC; } </style> </head> <body> <div> <div> <div> .col-md-3 </div> <div> .col-md-6 </div> </div> </div> </body> </html>4. Säulen nisten
<! DocType html> <html> <Head> <meta charset = "utf-8"> <title> Grundlegende Verwendung </title> <link rel = "styleSheet" href = "http://netDNA.bootstrapcdn.com/bootstrap/3.1.1/CSS/Bootstrap.Min.Min.Min.Min.Min.CSSS"> <- [Klasse *= col-] {Hintergrundfarbe: #eee; Grenze: 1PX Solid #CCC; } [class *= col-] [class *= col-] {Hintergrundfarbe: #f36; Grenze: 1PX gestrichelt #ffff; Farbe: #ffff; } </style></head><body> <div> <div> <div> <div> I have a grid nested in it<div> <div> <div> Col-md-6</div> <div>col-md-6</div> </div> </div> <div>col-md-4</div> </div> </div> </div> </div></body></html>Die Renderings sind wie folgt:
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
Artikelserie:
Das erste Mal, als ich mit dem magischen Bootstrap -Grundlayout in Kontakt kam //www.vevb.com/article/89278.htm
Das erste Mal, dass ich mit dem magischen Bootstrap -Formular in Kontakt kam //www.vevb.com/article/89330.htm
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.