Was sind die Einheiten des Bootstrap-Grid-Systems?

1. Was ist Bootstrap?

Bootstrap bietet eine Reihe reaktionsfähiger, mobilgeräteorientierter Fluidbarrieren-Grid-Systeme Wenn die Bildschirm- oder Ansichtsfenstergröße zunimmt, teilt das System automatisch in bis zu 12 Spalten auf. 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 startet standardmäßig auf Geräten mit kleinem Bildschirm (z. B. Mobilgeräten, Tablets) und verwendet dann Medienabfragen, um auf Komponenten und Raster auf Geräten mit großem Bildschirm (z. B. Laptops, Desktop-Computer) zu erweitern.

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.

Verwandte Empfehlungen: „Bootstrap Erste Schritte Tutorial“

2. Funktionsprinzip

Das Rastersystem wird zum Bestehen verwendet Verwenden Sie Kombinationen aus Zeilen und Spalten, um Seitenlayouts zu erstellen. Ihre Inhalte können in diesen erstellten Layouts platziert werden.

funktioniert so:

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

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

Erstellt eine Reihe von „Spalten“ in horizontaler Richtung durch „Zeilen“. Die Summe der Anzahl der Spalten darf jedoch die Gesamtzahl der gleichmäßig geteilten Spalten nicht überschreiten (bei Überschreitung wird der Überschuss in einer neuen Zeile angezeigt), und der Standardwert ist 12. (Benutzerdefinierte Einstellungen können mit Less oder Sass vorgenommen werden), wie folgt:

<div class="container">
 <div class="row">
  <div class="col-md-2"></div>
  <div class="col-md-6"></div>
  <div class="col-md-4"></div>
 </div>
</div>

Ihr Inhalt sollte in der „Spalte“ platziert werden und nur die „Spalte“ kann als „direktes untergeordnetes Element“ verwendet werden .

Vordefinierte Klassen wie .row und .col-xs-4 können zum schnellen Erstellen von im Bootstrap-Quellcode definierten Mixins verwendet werden.

Erstellen Sie ein Sie können die Lücke zwischen den Spalten verringern, indem Sie das Padding-Attribut für das Element „column“ festlegen und es kompensieren, indem Sie einen negativen Rand für das Element „.row“ festlegen. Der vom Element festgelegte Abstand gleicht indirekt den Abstand für die in der „Zeile“ enthaltene „Spalte“ aus. Der negative Wert von margin ist der Grund dafür, dass der Inhalt in der Rasterspalte in einer Zeile angeordnet ist. Die Spalten im Rastersystem werden durch den Bereich dargestellt, den sie umfassen. Beispielsweise können drei Spalten gleicher Breite verwendet werden .col. -xs-4 zum Erstellen

Wenn eine „Zeile“ mehr als 12 „Spalten“ enthält, werden die Elemente der zusätzlichen „Spalten“ als Ganzes behandelt

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. Wenden Sie daher eine beliebige .col-md- auf das Element an Die *Grid-Klasse gilt für Geräte mit einer Bildschirmbreite, die größer oder gleich der Haltepunktgröße ist, und die Grid-Klasse wird für Geräte mit kleinem Bildschirm überschrieben. Daher hat die Anwendung von .col-lg-* auf ein Element keine Auswirkungen auf Geräte mit großem Bildschirm Naja.

Das obige ist der detaillierte Inhalt vonWas sind die Einheiten des Bootstrap-Grid-Systems?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!