Was ist das 12-Grid-System von Bootstrap?

Im Bootstrap bezieht sich das 12-Raster-System auf die Aufteilung des Seitenlayouts in 1 bis 12 Spalten gleicher Breite, die Definition der Spaltenbreite durch Proportionsberechnung und die Definition der modularen Seitenlayoutmethode durch die Anzahl der Spalten Stil, Mobile-First-Grid-System.

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

Was ist das 12-Grid-System von Bootstrap?

Bootstrap bietet eine Reihe reaktionsfähiger, mobiler Streaming-Grids Mit zunehmender Bildschirm- oder Ansichtsfenstergröße wird das System automatisch in bis zu 12 Spalten unterteilt.

Was ist Grid?

Im Grafikdesign ist ein Raster eine Struktur (normalerweise zweidimensional), die aus einer Reihe sich schneidender gerader Linien (vertikal, horizontal) besteht und zur Organisation von Inhalten verwendet wird. Es wird häufig für Design-Layout und Inhaltsstruktur im Druckdesign verwendet. Im Webdesign handelt es sich um eine Methode zur schnellen Erstellung konsistenter Layouts und zur effektiven Nutzung von HTML und CSS.

Einfach ausgedrückt werden Raster im Webdesign verwendet, um Inhalte zu organisieren, die Navigation auf der Website zu vereinfachen und die Belastung für den Benutzer zu verringern.

Was ist das Bootstrap Grid System?

Bootstrap umfasst ein reaktionsfähiges, auf Mobilgeräte ausgerichtetes, flüssiges Rastersystem, das mit zunehmender Geräte- oder Ansichtsfenstergröße entsprechend auf bis zu 12 Spalten skaliert. Es enthält vordefinierte Klassen für einfache Layoutoptionen sowie leistungsstarke Mixin-Klassen zum Generieren semantischerer Layouts.

Das Rastersystem bezieht sich auf die Unterteilung des Seitenlayouts in gleich breite Spalten und die anschließende Modularisierung des Seitenlayouts durch Definition der Anzahl der Spalten. Das Rastersystem von Bootstrap verwendet ein 1-12-Spalten-Muster und verwendet proportionale Berechnungen, um die von Ihnen definierten Spaltenbreiten festzulegen.

Wenn Sie beispielsweise einen zweispaltigen Layoutmodus für diese Zeile verwenden möchten, beträgt die Breite jeder Spalte 50 % des äußeren Containers. Unabhängig davon, welches Gerät Sie zum Durchsuchen verwenden, wird sie in diesem Verhältnis angezeigt . Wenn die Gerätebreite jedoch kleiner als die von Ihnen festgelegte Mindestbreite ist, werden die beiden Spalten zu einer Spalte nebeneinander.

Das Rastersystem von Bootstrap

Die Verwendung des Rastersystems in Bootstrap ist sehr einfach und bequem. Führen Sie einfach die bereits definierten Klassen in Ihre Divs ein.

Werfen wir zunächst einen Blick auf die verschiedenen Rasterklassen, die Bootstrap verwenden kann:

1. Dies ist eine Klasse für ultrakleine Bildschirme (

2. .col-sm-* Dies ist eine Geräteklasse mit kleinem Bildschirm (≥768px und

3. .col-md-* Dies ist die mittlere Geräteklasse (≥992px und

4. .col-lg-* Dies ist eine große Geräteklasse (≥1200px).

Verwandte Empfehlungen: Bootstrap-Tutorial

Das obige ist der detaillierte Inhalt vonWas ist das 12-Grid-System von Bootstrap?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!