In wie viele Spalten kann Bootstrap unterteilt werden?

In Bootstrap kann die Seite in bis zu 12 Spalten unterteilt werden; das Rastersystem in Bootstrap ist relativ flexibel und kann die Seite auch in 1, 2, 3, 4, 6 und 12 Spalten unterteilen Standardmäßig ist die Liste auf 12 Spalten begrenzt.

Die Betriebsumgebung dieses Tutorials: Windows 10-System, Bootstrap-Version 3.3.7, DELL G3-Computer

In wie viele Spalten kann Bootstrap maximal unterteilt werden?

Dieses Rasterlayoutsystem gehört zum Scaffolding ( Rahmen, Layout) Teil. Im Gerüstbau gibt es ein (festes) Rasterlayout (Grid System) und ein fließendes Rasterlayout (Fluid Grid System). In diesem Artikel wird das erste feste Rasterlayout erläutert.

Bootstrap verwendet ein 12-Spalten-Layoutformat, d. h. bis zu 12 Spalten können in einer Zeile der Seite angeordnet werden.

Bootstrap kann standardmäßig nur 12 Spalten verwenden, da 12 das kleinste gemeinsame Vielfache der Zahlen „1, 2, 3, 4, 6“ ist. Daher ist das 12-Spalten-Rastersystem relativ flexibel und unterstützt die Aufteilung einer Zeile in eine Spalte. 2 Spalten, 3 Spalten, 4 Spalten, 6 Spalten.

Bootstrap legt fest, dass die Gesamtbreite der Seite 940 Pixel beträgt, was sich von anderen CSS-Frameworks unterscheidet (einige andere sind 960 Pixel (960 Raster usw.) und andere 950 Pixel (Blaupause usw.)). Diese 940 Pixel werden in einer Klasse namens Container angegeben. Die Details lauten wie folgt:

.container,
{
  width: 940px;
}

Außerdem wird angegeben, dass die Seite dieses Containers zentriert ist

.container {
  margin-left: auto;
  margin-right: auto;
  *zoom: 1;
}

(Hier ist ein Trick, damit das Div in verschiedenen Browsern gleich aussieht Für den Zentrierungseffekt ist es am einfachsten, die Werte von margin-left und margin-right auf auto zu setzen. *Der Zoom-CSS-Hack dient der Kompatibilität mit ie6 und 7, der genaue Grund für die Verwendung von zoom=1 ist jedoch unbekannt )

Gleichzeitig wurde auch der CSS-Pseudoelementselektor verwendet. Der Inhalt davor und danach wurde gelöscht, und der schwebende Inhalt wurde auch hinten gelöscht.

.container:before,
.container:after {
  display: table;
  content: "";
}
.container:after {
  clear: both;
}

Mehrspaltiges Layout Zu diesem Zeitpunkt muss die Zeile als sekundärer Container verwendet werden. Der Stil des Zeilencontainers ist sehr interessant

.row {
  margin-left: -20px;
  *zoom: 1;
}

Der Rand auf der linken Seite beträgt -20 Pixel. Beachten Sie, dass er negativ 20 ist. Dies bedeutet, dass die Breite der Zeile den externen Container um 20 Pixel überschreitet. Warum? Das erfahren Sie später. Natürlich gibt es auch Einstellungen zum Leeren und Schweben von Inhalten sowie schwebende Stile in Zeilen, die Containern ähneln, daher gehe ich hier nicht auf Details ein.

Row enthält die Span-Klasse für das spezifische mehrspaltige Layout, das wir ausführen möchten. Wenn Sie das Layout speziell verwenden, sieht der Code so aus:

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

Warum kann span nicht direkt im Container platziert werden? Warum benötigt die Zeile margin-left=-20px? Lassen Sie uns ausführlich über Spanne sprechen. Dies ist auch der Grund, warum der Autor von „ausgeklügeltem Rasterlayout“ spricht.

Tatsächlich verfügt Bootstrap über insgesamt 12 Span-Klassen, nämlich span1, span2, ... span12. Ihre Definitionen sind sehr einfach

.span12 {
  width: 940px;
}
.span11 {
  width: 860px;
}
。。。
.span4 {
  width: 300px;
}
.span3 {
  width: 220px;
}
.span2 {
  width: 140px;
}
.span1 {
  width: 60px;
}

Natürlich können Sie auch Pseudoklassenselektoren verwenden, um sie einheitlich auf Floating-Stile festzulegen

[class*="span"] {
  float: left;
}

Floating ist eine andere Theorie, wir drücken sie nicht aus. Wir haben sorgfältig von span1 bis span12 geschaut und ein Muster gefunden, das heißt, jedes Mal, wenn die Spanne erhöht wird, erhöht sie sich um 80 Pixel. Es ist nur so, dass span1 bei 60 beginnt zu zählen. Warum lässt man span1 nicht bei 80 anfangen zu zählen, und dann ist jede Spanne ein Vielfaches von 80. Das ist auch leichter zu merken? Tatsächlich beginnt die Spanne erst ab 80 zu zählen. Es ist nur so, dass der sichtbare Teil 60 ist und die anderen 20 mit margin-left=20 im Stil wie folgt festgelegt sind:

[class*="span"] {
  margin-left: 20px;
}

Diese 20 hat eine andere Bedeutung, das heißt, sie kann das Intervall zwischen zwei Bereichen auf der Seite darstellen Das heißt, zwischen allen Bereichen besteht eine Lücke von 20 Pixeln, damit sie nicht zusammenkleben und es für Endbenutzer schwierig wird, sie zu trennen.

Verwandte Empfehlungen: Bootstrap-Tutorial

Das obige ist der detaillierte Inhalt vonIn wie viele Spalten kann Bootstrap unterteilt werden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!