Das Netzsystem im Bootstrap -Framework unterteilt den Behälter in 12 Teile. Wenn Sie es verwenden, können Sie den Quellcode "Lesser/SASS" entsprechend der tatsächlichen Situation zum Ändern des Wertes 12 neu kompilieren. Wie funktioniert das Mesh -System im Bootstrap -Framework:
1. Datenreihen (.Rows) müssen in den Container enthalten sein, damit sie eine angemessene Ausrichtung und Polsterung geben können
<div> <div> </div> </div>
2. Sie können Spalten (.Column) in Zeilen (.Row) hinzufügen, aber die Summe der Spalten darf die Gesamtzahl der halbierten Spalten nicht überschreiten (z. B.: 12)
<div> <div> <div> </div> <div> </div> </div>
3. Der spezifische Inhalt sollte in den Spaltenbehälter (.
4. Erstellen Sie den Abstand zwischen den Spalten, indem Sie den inneren Abstand (Polsterung) festlegen, und dann den Einfluss der Polsterung ausgleichen, indem Sie negative Werte für die erste Spalte und den letzten Stapel festlegen.
Das Bootstrap-Gittersystem mit vier Arten von Browsern (Ultra-kleiner Bildschirm, kleiner Bildschirm, mittlerer Bildschirm und großer Bildschirm) und der Haltepunkt beträgt 768px, 992px, 1220px
Container (.Container) hat für verschiedene Browserauflösungen unterschiedliche Breiten: Automatisch, 760px, 970px, 1170px;
.Container {Padding-Right: 15px; Padding-Links: 15px; Margin-Right: Auto; Margin-Links: auto; @media (min-width: 768px) {.Container {width: 750px;}@media (min-width: 992px) {. (Min-Width: 1200px) {.Container {Breite: 1170px;}Zeilenbehälter (.Row), teilt die Zeilen des Behälters in 12 gleiche Teile, dh Spalten. Jede Spalte hat Padding-Links: 15px und Polsterrechte: 15px; Dies führt auch dazu, dass Padding-Links in der ersten Spalte und das Polsterrecht in der letzten Spalte 30px der mittleren Breite besetzt.
.col-xs-1, .col-md-1, .col-lg-1, .col-xs-2, .col-md-2, .col-md-2, .col-2, .col-xs-3, .col-3, .col-md-3, .col-md-3, .col-sm-3,. .col-md-4, .col-lg-4, .col-xs-5, .col-md-5, .col-md-5, .col-lg-5, .col-xs-6, .col-md-6, .col-lg-6, .col-6, .col-lg-6,. .col-xs-8, .col-md-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-9, .col-lg-9, .col-XS-10, .col-md-10,. .col-xs-11, .col-md-11, .col-md-11, .col-md-11, .col-lg-11, .col-xs-12, .col-md-12, .col-md-12, .col-12 {Position: Relativ; min-hohe 1px; padding-right: 15px; padding: 15px: 15px: 15px: 15px: 15px: 15px: 15px: 15px: 15px: 15px: 15px;Der Zeilencontainer (.Row) definiert Rand-Links- und Rand-Rechts-Werte von -15px, mit denen der linke innere Abstand der ersten Spalte und den rechten inneren Abstand der letzten Spalte ausgeglichen wird, so dass zwischen der ersten Spalte und der letzten Spalte und des Containers (kontainer) kein Abstand besteht.
.Row {Margin -Right: -15px; Margin -Links: -15px;}Grundnutzung
Da das Bootstrap-Framework unterschiedliche Rasterstile für verschiedene Bildschirmgrößen verwendet, nehmen wir als Beispiel den Mittelbildschirm (970px).
1. Säulenkombination
Die Spaltenkombination soll die Zahl in Zusammenführungsspalten ändern (die Gesamtzahl der Spalten darf 12 nicht überschreiten), was dem Colspan -Attribut einer Tabelle etwas ähnlich ist. Die Säulenkombinationsmethode beinhaltet nur zwei Merkmale: schwebend in breiten Prozentsatz
<div> <div> <div> col-md-4 </div> <div> col-md-8 </div> </div> <div> col-md-4 </div> <div> col-md-4 </div> <div> col-md-4 </div> <di v> col-md-4 </div> </div> <div> col-md-4 </div> </div> <div> col-md-3 </div> <div> col-md-6 </div> <div> col-md-3 </div> </div>
Die Effekte sind wie folgt:
Stellen Sie sicher, dass alle Spalten links schweben
.Col-MD-1, .Col-MD-2, .Col-MD-3, .Col-MD-4, .Col-MD-5, .Col-MD-6, .Col-MD-7, .Col-MD-8, .col-Md-9, .col-Md-10,.
Definieren Sie die Breite jeder Spaltenkombination
.Col-md-12 {width: 100%;}. col-md-11 {width: 91.666666667%;}. 66.66666667%;}. Col-Md-7 {Breite: 58.333333333%;}. {Breite: 25%;}. col-md-2 {width: 16.666666667%;}.Spaltenversatz
Manchmal möchten wir nicht, dass zwei benachbarte Spalten nahe beieinander liegen, aber wir möchten keine Marge oder andere technische Mittel verwenden. Dies kann mit dem Spaltenversatz erreicht werden. Fügen Sie mit dem Spaltenversatz einfach den Klassennamen hinzu. Die Spalte mit diesem Klassennamen ist versatzlich, z. B.: Col-MD-Offset-4 hinzufügen im Spaltenelement, was angibt, dass die Spalte nach rechts nach 4 Spalten in der Breite versetzt ist.
<div> <div> <div> 1111 </div> <div> 1111 </div> <div> 333 </div> </div> <div> <div> Spaltenversatz </div> <div> col-md-2 </div> </div> </div> col-md-2 </div> </div> </div> </div> </div> </div> </div> </div> </div> </div>
Die Effekte sind wie folgt:
Implementierungsprinzip:
Mit einem Twelve-Margen-Links, so viele Margen-Links-Links, wie es Offsets gibt, können Sie so viele Margin-Links wie vorhanden erhalten.
.Col-md-offset-12 {Margin-Links: 100%;}. {Margin-Links: 66.66666667%;}. {Margin-Links: 33,333333333%;}. 0;}Es ist zu beachten, dass bei der Verwendung von Col-MD-Offset-* bis rechts die Spalte ausgleichen muss, dass die Gesamtzahl der Spalten und Offset-Spalten 12 nicht überschreitet, andernfalls wird die Spalte aus der Reihe angezeigt.
Säulensortierung
Die Sortierung der Säulen sortiert die Richtung der Spalte und den schwimmenden Abstand. Im Bootstrap Grid -System ist es durch Hinzufügen von Klassennamen. col-md-push-* und col-md-pull-*
<div> <div> <div> col-md-4 </div> <div> col-md-8 </div> </div> </div>
Die Effekte sind wie folgt:
Col-MD-4 ist links und Col-MD-8 ist rechts. Wenn Sie Positionen austauschen möchten, müssen Sie COL-MD-4 nach rechts um 8 Spalten verschieben, dh den Klassennamen fügen Sie Col-MD-Push-8 hinzu. Gleichzeitig müssen Sie Col-MD-8 nach 4 Spalten links verschieben, dh den Klassennamen.col-Md-Pull-4 hinzufügen.
Bootstrap erreicht nur die Positionierungseffekte, indem sie nach links und rechts eingestellt werden.
.Col-md-pull-12 {rechts: 100%;}. col-md-pull-11 {rechts: 91.66666667%;}. 66.66666667%;}. Col-md-pull-7 {rechts: 58.33333333%;}. 33,333333333%;}. Col-md-pull-3 {rechts: 25%;}. 100%;}. Col-Md-push-11 {links: 91,6666666667%; 58.333333333%;}. Col-md-push-6 {links: 50%;}. 16.6666666667%;}. Col-md-push-1 {links: 8.333333333%;}.Nisten
Die Spaltennistung kann einen hinzufügen oder einen Zeilenbehälter in einer Spalte erstellen und dann eine Spalte in diesen Zeilenbehälter einfügen. Wenn die Breite des Zeilenbehälters (Zeile) im Spaltenbehälter 100%beträgt, ist es die Breite der aktuellen externen Spalte.
<Div> <div> <div>
Ich habe ein Raster im Inneren verschachtelt
<div> <div> col-md-6 </div> <div> col-md-6 </div> </div> </div> <div> col-md-4 </div> </div> <div> col-md-4 </div> </div> <div> col-md-4 </div> <div> <Viv>
Ich habe ein Raster im Inneren verschachtelt
<div> <div> col-md-4 </div> <div> col-md-4 </div> <div> col-md-4 </div> </div> </div> </div> </div>
Der obige Inhalt ist das Bootstrap Grid -System, das Ihnen vom Editor vorgestellt wurde. Ich hoffe, es wird für alle hilfreich sein!