Was bedeutet das Bootstrap-Grid-System?-Bootstrap-Tutorial-php.cn

Was bedeutet das Bootstrap-Grid-System?

尚

Freigeben： 2019-07-19 14:06:10

Original

4312 Leute haben es durchsucht

Was bedeutet das Bootstrap-Grid-System?

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 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 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-Rastersystem

Sie 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-Tutorial

Das 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!