So erstellen Sie ein Grid-System mit Bootstrap

Was ich Ihnen dieses Mal vorbringe, ist BootstrapWie man ein Grid-System erstellt Wir wissen, dass es sehr wichtig ist, ein Grid-System in Bootstrap zu erstellen.

Bootstrap basiert auf HTML, CSS und JAVASCRIPT. Es ist einfach und flexibel und beschleunigt die Webentwicklung.

Das Grid-System ist der Kern von Bootstrap. Gerade aufgrund der Existenz des Grid-Systems kann Bootstrap über eine so leistungsstarke responsive Layout-Lösung verfügen.

Die offizielle Dokumentation sagt Folgendes:

Bootstrap Bietet ein reaktionsfähiges, mobiles, flüssiges Rastersystem, das sich automatisch in bis zu 12 Spalten aufteilt, wenn die Bildschirm- oder Ansichtsfenstergröße zunimmt. Enthält vordefinierte Klassen für einfache Layoutoptionen sowie leistungsstarke Mixin-Klassen zum Generieren semantischerer Layouts.

Lassen Sie uns diesen Absatz verstehen und feststellen, dass der wichtigste Teil die Priorität mobiler Geräte ist. Was ist also die Priorität mobiler Geräte?

Der grundlegende CSS-Code von Bootstrap beginnt standardmäßig auf Geräten mit kleinem Bildschirm (z. B. Mobilgeräten, Tablets) und verwendet dann Medienabfragen, um auf Geräte mit großem Bildschirm (z. B. Laptops, Desktop-Computer) zu erweitern ) Komponenten und Gitter.

hat folgende Strategie:

Inhalt: Entscheiden Sie, was am wichtigsten ist.
Layout: Priorisieren Sie Designs mit geringerer Breite.
Progressive Verbesserung: Fügen Sie Elemente hinzu, wenn die Bildschirmgröße zunimmt.

Das Rastersystem wird verwendet, um Seitenlayouts durch eine Reihe von Kombinationen von Zeilen und Spalten zu erstellen. Ihre Inhalte können in diesen erstellten Layouts platziert werden.

Funktioniert so:

„row“ muss in .container (feste Breite) oder .container-fluid (100 %) enthalten sein. Breite), um eine ordnungsgemäße Ausrichtung und Polsterung zu gewährleisten.

<div class="container"><!-- 水平居中，两边有margin，最小屏幕时，充满父元素 -->
 <div class="row"></div>
</div>
<!-- 或者 -->
<div class="container-fluid"><!-- 默认一直充满整个父元素 -->
 <div class="row"></div>
</div>

Ihr Inhalt sollte in „column“ platziert werden und nur „column“ kann ein direktes untergeordnetes Element von row sein

Vordefinierte Klassen wie .row und .col-xs-. 4 kann verwendet werden, um schnell Mixins zu erstellen, die im Bootstrap-Quellcode definiert sind. Kann auch zur Erstellung semantischer Layouts verwendet werden.

Erstellen Sie einen Zwischenraum zwischen den Spalten, indem Sie das Füllattribut für „Spalte“ festlegen. Durch Festlegen eines negativen Rands für das .row-Element Dadurch wird der Füllsatz für das .container-Element versetzt und indirekt auch der Füllsatz für die in der „Zeile“ enthaltene „Spalte“.
Negativ Der Rand ist der Grund, warum das folgende Beispiel nach außen ragt. Inhalte in Rasterspalten werden ausgerichtet.

Spalten in einem Rastersystem stellen den Bereich dar, den sie umfassen, indem sie einen Wert von 1 bis 12 angeben. Beispielsweise können drei Spalten gleicher Breite mit drei .col-xs-4 s erstellt werden.

Wenn die in einer „Zeile“ enthaltene „Spalte“ größer als 12 ist, werden die Elemente der zusätzlichen „Spalte“ als Ganzes in einer anderen Zeile angeordnet.

Die Rasterklasse eignet sich für Geräte mit einer Bildschirmbreite, die größer oder gleich der Haltepunktgröße ist, und die Rasterklasse wird für Geräte mit kleinem Bildschirm überschrieben. Daher gilt keine Die Rasterklassen .col-md-* eignen sich für Geräte mit Bildschirmbreiten größer oder gleich der Haltepunktgröße und überschreiben die Rasterklassen für Geräte mit kleinem Bildschirm. Daher ist die Anwendung von .col-lg-* auf das Element nicht vorhanden. Betrifft auch Geräte mit großem Bildschirm.

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie die obige Einführung gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Verwandte Lektüre:

So verwenden Sie die benutzerdefinierten Anweisungen von Vue, um ein Dropdown-Menü auszufüllen

Über HTTP/2 Server Push

Wie NVM verschiedene Versionen von Knoten verwaltet

Das obige ist der detaillierte Inhalt vonSo erstellen Sie ein Grid-System mit Bootstrap. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!