Detaillierte Erläuterung der Bootstrap-Grid-System_Javascript-Fähigkeiten-js-Tutorial-php.cn

Das Rastersystem im Bootstrap-Framework unterteilt den Container in 12 gleiche Teile. Wenn Sie es verwenden, können Sie den LESS/SASS-Quellcode entsprechend der tatsächlichen Situation neu kompilieren, um den Wert von 12 zu ändern. So funktioniert das Grid-System des Bootstrap-Frameworks:

1. Die Datenzeile (.row) muss im Container (.container) enthalten sein, damit sie entsprechend ausgerichtet und aufgefüllt werden kann

<div class="container">
<div class="row"></div>
</div>

Nach dem Login kopieren

2. Spalten (.column) können zu Zeilen (.row) hinzugefügt werden, aber die Summe der Anzahl der Spalten darf die Gesamtzahl der gleichmäßig geteilten Spalten nicht überschreiten (z. B.: 12)

<div class="container">
<div class="row">
<div class="col-md-4"></div>
<div class="col-md-8"></div>
</div>
</div>

Nach dem Login kopieren

3. Der spezifische Inhalt sollte im Spaltencontainer (.column) platziert werden und nur die Spalte (.column) kann als direktes untergeordnetes Element des Zeilencontainers (.row) verwendet werden

4. Erstellen Sie einen Abstand zwischen den Spalten, indem Sie den Abstand festlegen, und gleichen Sie dann den Effekt des Abstands aus, indem Sie negative Ränder für die erste Spalte und den letzten Stapel festlegen

Mit reaktionsfähigen Effekten im Bootstrap-Grid-System verfügt es über vier Browsertypen (extra kleiner Bildschirm, kleiner Bildschirm, mittlerer Bildschirm und großer Bildschirm) und seine Haltepunkte sind 768px, 992px, 1220px

Container (.container) hat unterschiedliche Breiten für verschiedene Browserauflösungen: automatisch, 760px, 970px, 1170px

.container {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
@media (min-width: 768px) {
.container {
width: 750px;
}
@media (min-width: 992px) {
.container {
width: 970px;
}
@media (min-width: 1200px) {
.container {
width: 1170px;
}

Nach dem Login kopieren

Zeilencontainer (.row) unterteilt die Zeile des Containers in 12 gleiche Teile, also Spalten. Jede Spalte hat padding-left:15px und padding-right:15px; dies führt auch dazu, dass padding-left der ersten Spalte und padding-right der letzten Spalte 30px der mittleren Breite einnehmen

.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
position: relative;
min-height: 1px;
padding-right: 15px;
padding-left: 15px;
}

Nach dem Login kopieren

Der Zeilencontainer (.row) definiert die Werte margin-left und margin-right von -15px, die verwendet werden, um den linken Abstand der ersten Spalte und den rechten Abstand der letzten Spalte zu versetzen, sodass der erste und die letzten Spalten stimmen mit dem Container (.container) überein. Zwischen ihnen ist kein Leerzeichen

.row {
margin-right: -15px;
margin-left: -15px;
}

Nach dem Login kopieren

Grundlegende Verwendung

Da das Bootstrap-Framework unterschiedliche Rasterstile für unterschiedliche Bildschirmgrößen verwendet, wird im Folgenden der mittlere Bildschirm (970 Pixel) als Beispiel genommen.

1. Spaltenkombination

Bei der Spaltenkombination wird die Anzahl der zu kombinierenden Spalten geändert (die Gesamtzahl der Spalten darf 12 nicht überschreiten). Dies ähnelt in gewisser Weise dem colspan-Attribut der Tabelle und umfasst nur zwei Merkmale: Floating im Breitenprozentsatz

<div class="container">
<div class="row">
<div class="col-md-4">col-md-4</div>
<div class="col-md-8">col-md-8</div>
</div>
<div class="row">
<div class="col-md-4">col-md-4</div>
<div class="col-md-4">col-md-4</div>
<div class="col-md-4">col-md-4</div>
</div>
<div class="row">
<div class="col-md-3">col-md-3</div>
<div class="col-md-6">col-md-6</div>
<div class="col-md-3">col-md-3</div>
</div>
</div>

Nach dem Login kopieren

Der Effekt ist wie folgt:

Stellen Sie sicher, dass alle Spalten nach 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, .col-md-11, .col-md-12 {
float: left;
}

Nach dem Login kopieren

Definieren Sie die Breite jeder Spaltenkombination

.col-md-12 {
width: 100%;
}
.col-md-11 {
width: 91.66666667%;
}
.col-md-10 {
width: 83.33333333%;
}
.col-md-9 {
width: 75%;
}
.col-md-8 {
width: 66.66666667%;
}
.col-md-7 {
width: 58.33333333%;
}
.col-md-6 {
width: 50%;
}
.col-md-5 {
width: 41.66666667%;
}
.col-md-4 {
width: 33.33333333%;
}
.col-md-3 {
width: 25%;
}
.col-md-2 {
width: 16.66666667%;
}
.col-md-1 {
width: 8.33333333%;
}

Nach dem Login kopieren

Spaltenversatz

Manchmal möchten wir nicht, dass zwei benachbarte Spalten nahe beieinander liegen, aber wir möchten keinen Rand oder andere technische Mittel verwenden. Dies kann durch die Verwendung eines Spaltenversatzes (Offset) erreicht werden. Um den Spaltenversatz zu verwenden, fügen Sie einfach den Klassennamen .col-md-offset-* (das Sternchen stellt die Anzahl der zu versetzenden Spaltenkombinationen dar) zum Spaltenelement hinzu, und die Spalte mit diesem Klassennamen wird versetzt, z. B.: Fügen Sie im Spaltenelement .col-md-offset-4 hinzu, um anzugeben, dass die Spalte um die Breite von 4 Spalten nach rechts versetzt ist

<div class="container">
<div class="row">
<div class="col-md-4">1111</div>
<div class="col-md-4 col-md-offset-2">111</div>
<div class="col-md-2">333</div>
</div>
<div class="row">
<div class="col-md-4 col-md-offset-4">列偏移</div>
<div class="col-md-2">col-md-2</div>
<div class="col-md-2">col-md-2</div>
</div>
</div>

Nach dem Login kopieren

Der Effekt ist wie folgt:

Umsetzungsprinzip:

Bei Verwendung eines Zwölftels des linken Rands gibt es so viele linke Ränder wie Versätze vorhanden sind

.col-md-offset-12 {
margin-left: 100%;
}
.col-md-offset-11 {
margin-left: 91.66666667%;
}
.col-md-offset-10 {
margin-left: 83.33333333%;
}
.col-md-offset-9 {
margin-left: 75%;
}
.col-md-offset-8 {
margin-left: 66.66666667%;
}
.col-md-offset-7 {
margin-left: 58.33333333%;
}
.col-md-offset-6 {
margin-left: 50%;
}
.col-md-offset-5 {
margin-left: 41.66666667%;
}
.col-md-offset-4 {
margin-left: 33.33333333%;
}
.col-md-offset-3 {
margin-left: 25%;
}
.col-md-offset-2 {
margin-left: 16.66666667%;
}
.col-md-offset-1 {
margin-left: 8.33333333%;
}
.col-md-offset-0 {
margin-left: 0;
}

Nach dem Login kopieren

Es ist zu beachten, dass bei der Verwendung von col-md-offset-* zum Rechtsversatz einer Spalte darauf geachtet werden muss, dass die Gesamtzahl der Spalten und versetzten Spalten 12 nicht überschreitet, da die Spalten sonst mit gestrichelten Linien angezeigt werden

Spaltensortierung

Bei der Spaltensortierung wird die Richtung der Spalte geändert und der Gleitabstand festgelegt. Im Bootstrap-Grid-System erfolgt dies durch Hinzufügen des Klassennamens. col-md-push-* und col-md-pull-*

<div class="container">
<div class="row">
<div class="col-md-4">col-md-4</div>
<div class="col-md-8">col-md-8</div>
</div>
</div>

Nach dem Login kopieren

Der Effekt ist wie folgt:

col-md-4 ist links und col-md-8 ist rechts. Wenn Sie die Positionen tauschen möchten, müssen Sie col-md-4 um 8 Spalten nach rechts verschieben, also hinzufügen die Klasse name.col-md -push-8; Gleichzeitig müssen Sie col-md-8 um 4 Spalten nach links verschieben, also die Klasse name.col-md-pull-4 hinzufügen

Bootstrap erzielt Positionierungseffekte nur durch die Einstellung links und rechts.

.col-md-pull-12 {
right: 100%;
}
.col-md-pull-11 {
right: 91.66666667%;
}
.col-md-pull-10 {
right: 83.33333333%;
}
.col-md-pull-9 {
right: 75%;
}
.col-md-pull-8 {
right: 66.66666667%;
}
.col-md-pull-7 {
right: 58.33333333%;
}
.col-md-pull-6 {
right: 50%;
}
.col-md-pull-5 {
right: 41.66666667%;
}
.col-md-pull-4 {
right: 33.33333333%;
}
.col-md-pull-3 {
right: 25%;
}
.col-md-pull-2 {
right: 16.66666667%;
}
.col-md-pull-1 {
right: 8.33333333%;
}
.col-md-pull-0 {
right: 0;
}
.col-md-push-12 {
left: 100%;
}
.col-md-push-11 {
left: 91.66666667%;
}
.col-md-push-10 {
left: 83.33333333%;
}
.col-md-push-9 {
left: 75%;
}
.col-md-push-8 {
left: 66.66666667%;
}
.col-md-push-7 {
left: 58.33333333%;
}
.col-md-push-6 {
left: 50%;
}
.col-md-push-5 {
left: 41.66666667%;
}
.col-md-push-4 {
left: 33.33333333%;
}
.col-md-push-3 {
left: 25%;
}
.col-md-push-2 {
left: 16.66666667%;
}
.col-md-push-1 {
left: 8.33333333%;
}
.col-md-push-0 {
left: 0;
}

Nach dem Login kopieren

Spaltenverschachtelung

Spaltenverschachtelung kann einen Zeilencontainer in einer Spalte hinzufügen oder erstellen und dann Spalten in diesen Zeilencontainer einfügen. Wenn die Breite des Zeilencontainers (Zeile) im Spaltencontainer 100 % beträgt, ist dies die aktuelle Breite der äußeren Spalte

<div class="container">
<div class="row">
<div class="col-md-8">

Nach dem Login kopieren

我在里面嵌套了一个网格

<div class="row">
<div class="col-md-6">col-md-6</div>
<div class="col-md-6">col-md-6</div>
</div>
</div>
<div class="col-md-4">col-md-4</div>
</div>
<div class="row">
<div class="col-md-4">col-md-4</div>
<div class="col-md-8">

Nach dem Login kopieren

我在里面嵌套了一个网格

<div class="row">
<div class="col-md-4">col-md-4</div>
<div class="col-md-4">col-md-4</div>
<div class="col-md-4">col-md-4</div>
</div>
</div>
</div>
</div>

Nach dem Login kopieren