Was ist das Rastersystem?
Das Rastersystem bezieht sich auf die Aufteilung des Seitenlayouts in Spalten gleicher Breite und die anschließende Weitergabe Die Anzahl der Spalten wird definiert, um das Seitenlayout zu modularisieren. Das Rastersystem von Bootstrap verwendet ein 1-12-Spalten-Muster und verwendet proportionale Berechnungen, um die von Ihnen definierten Spaltenbreiten festzulegen. Wenn Sie für diese Zeile beispielsweise einen zweispaltigen Layoutmodus 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 angezeigt Anteil. Wenn die Gerätebreite jedoch kleiner als die von Ihnen festgelegte Mindestbreite ist, werden die beiden Spalten zu einer Spalte nebeneinander.
Das Rastersystem von BootstrapDie 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 mehrere Rasterklassen, die in Bootstrap verwendet werden können:
1 .col-xs-* Dies ist eine ultrakleine Bildschirmklasse (
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).
So verwenden Sie das Bootstrap-RastersystemSie können den Layoutstil, den Sie auf verschiedenen Geräten anwenden möchten, mithilfe der diesen Geräten entsprechenden Rasterklassen festlegen. Zum Beispiel:
Weitere Informationen
Zusätzlich zu den oben genannten Verwendungsmethoden können Sie auch die „Spaltenoffset-Klasse“ verwenden, um Ihr eigenes Raster schnell zu positionieren. Die Verwendungsmethode ähnelt
Gemäß dieser Schreibmethode wird dieses Div auf der PC-Seite um 3 Spalten nach rechts versetzt.Weitere technische Artikel zu Bootstrap finden Sie in der Spalte
Bootstrap-TutorialDas obige ist der detaillierte Inhalt vonWas bedeutet das Bootstrap-Grid-System?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!