Bootstrap von Twitter ist derzeit das beliebteste Front-End-Frontwork. Bootstrap basiert auf HTML, CSS und JavaScript. Es ist einfach und flexibel und macht die Webentwicklung schneller.
Schlüsselpunkte für das Lernen:
1. Mobile Geräte werden bevorzugt
2. Layoutbehälter
3. Grid -System
In dieser Lektion erfahren wir hauptsächlich das Grid-System von Bootstrap und bieten ein reaktionsschnelles, mobiles Streaming-Gittersystem.
eins. Mobile Geräte werden bevorzugt
Im HTML5 -Projekt haben wir das mobile Projekt durchgeführt. Es verfügt über ein sehr wichtiges Meta, um die Quadth der Bildschirm und die Geräte -Quad -Breite festzulegen und die Skalierung von Benutzern und Skalieren auszuführen.
// Die Bildschirmbreite steht im Einklang mit dem Gerät, dem anfänglichen Skalierbar, der maximalen Skalierbar und dem Verbot der Benutzerskalierung.
zwei. Layoutbehälter
Bootstrap benötigt einen .container -Container für Seiteninhalte und Rastersystem. Aufgrund von Attributen wie Polsterung können diese beiden Containerklassen nicht miteinander verschachtelt werden.
// Festbreite <div> ... </div> // 100% Breite <div> ... </div>
In einem Rastersystem weist der Browser automatisch bis zu 12 Spalten zu, wenn die Bildschirmgröße zunimmt oder abnimmt. Erstellen Sie ein Seitenlayout, indem Sie eine Reihe von Zeilen und Spalten kombinieren. Das Arbeitsprinzip ist wie folgt:
1. "Row" muss in .Container (feste Breite) oder .Container-Fluid (100% Breite) enthalten sein, um ihm eine geeignete Ausrichtung und Polsterung zu verleihen.
2. Erstellen Sie einen Satz von "Spalten" horizontal durch "Zeile".
3. Ihr Inhalt sollte in "Spalte" platziert werden, und nur "Spalte" kann als direktes untergeordnetes Element der Zeile verwendet werden.
4. Vordefinierte Klassen wie .Row und .Col-XS-4 können verwendet werden, um schnell Rasterlayouts zu erstellen.
Der im Bootstrap -Quellcode definierte Mixin kann auch zum Erstellen semantischer Layouts verwendet werden.
5. Erstellen Sie eine Rinne zwischen den Spalten, indem Sie die Padding -Eigenschaft für "Spalte" einstellen. Durch Festlegen negativer Werte für .row -Elemente
Der Margin setzt somit den für das .container -Element eingestellten Polster ein, das indirekt die Polsterung für die in "Row" enthaltene "Spalte" ausgeht.
6. Negative Marge ist der Grund, warum das folgende Beispiel nach außen hervorhebt. Der Inhalt in der Raster -Spalte ist in einer Reihe angeordnet.
7. Eine Spalte in einem Rastersystem repräsentiert den Bereich, den sie erstreckt, indem Werte von 1 bis 12 angeben. Beispielsweise können drei Spalten mit gleicher Breite mit drei .col-XS-4 erstellt werden.
8. Wenn die in einer "Reihe" enthaltene "Spalte" größer als 12 ist, werden die Elemente, in denen sich die zusätzliche "Spalte" befindet, in einer anderen Reihe als Ganzes angeordnet.
9. Die Gitterklasse ist für Geräte mit einer Bildschirmbreite über die Größe des Trennpunkts geeignet und deckt die Gitterklasse für kleine Bildschirmgeräte ab. Daher ist die Anwendung einer .col-MD-* Raster-Klasse auf das Element für Geräte mit Bildschirmbreiten geeignet, die größer oder gleich der Größe des Trennpunkts sind und die Rasterklasse für kleine Bildschirmgeräte überschreiben. Daher gibt es nicht vorhanden.
// Erstellen Sie eine ansprechende Zeile <Div> <Viv> ... </div> </div> // Erstellen Sie eine ansprechende Zeile mit bis zu 12 Spalten <div><div><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div><div>7</div><div>8</div><div>9</div><div>10</div><div>11</div><div>12</div></div></div> //To show obvious CSS.A {Höhe: 100px; Hintergrundfarbe: #eee; Rand: 1PX Solid #CCC;} // Die Gesamtzahl der Spalten beträgt 12, und jede Spalte ist mehrere Spalten zugewiesen <div><div><div>1-4</div><div>5-8</div><div>9-12</div></div><div><div>1-8</div><div>9-12</div></div></div>9-12</div></div>></div>>9-12</div></div>>Rasterparametertabelle
Wie in der obigen Abbildung gezeigt, unterscheidet die äußerste Schicht des Gittersystems vier Breiten von Browsern: Ultra-Small-Bildschirm (<768px), kleiner Bildschirm (> = 768px), mittlerer Bildschirm (> = 992px) und großer Bildschirm (> = 1200px). Die adaptiven Breiten des inneren .container -Containers sind: Automatisch, 750px, 970px und 1170px. Automatisch bedeutet, dass Sie, wenn Sie sich auf dem Bildschirm des Mobiltelefons befinden, vollständig ausschließlich eine Zeile anzeigen.
// Alle vier Bildschirm aktivieren categories<div><div><div>4</div><div>4</div><div>4</div><div>4</div><div>4</div><div>4</div><div>4</div><div>4</div><div>4</div><div>4</div><div>4</div><div>4</div><div>4</div></div> //Sometimes we can set column offsets to keep a gap in the middle<div><div><div>8</div><div>3</div></div></div> //It can also be nested, and the embedding is also 12. Column <div><div><div>1-8</div><div>9-12</div></div><div>11-12</div></div></div> //You can Tauschen Sie zwei Säulen aus, drücken Sie nach links und ziehen Sie nach rechts </div> <div> <div> 9 </div> <div> 3 </div> </div> </div>
Die oben genannten sind verwandte Informationen für das Bootstrap Grid -System, ich hoffe, es wird für alle hilfreich sein!