bootstrap reagiert. Bootstrap bietet ein reaktionsfähiges, mobilgeräteorientiertes Fluid-Grid-System, das verschiedene Klassenattribute für verschiedene Bildschirme verwendet. Während der Entwicklung können Sie nur einen Codesatz schreiben, der auf Mobiltelefonen, Tablets und PCs verwendet werden kann, ohne sich darum kümmern zu müssen . Verwenden Sie Medienabfragen.
Die Betriebsumgebung dieses Artikels: Windows 7-System, Bootstrapv4.4.1-Version, Dell G3-Computer.
Was ist Reaktionsfähigkeit?
Responsive Webdesign ist eine Methode, die es Benutzern ermöglicht, beim Surfen auf der Website über Geräte unterschiedlicher Größe gute visuelle Effekte zu erzielen. Beispielsweise durchsuchen Sie eine Website zuerst auf einem Computermonitor und dann auf einem Smartphone. Die Bildschirmgröße des Smartphones ist viel kleiner als die des Computermonitors, aber Sie spüren keinen Unterschied. Das Benutzererlebnis ist bei beiden nahezu gleich . Dies zeigt, dass die Website beim Responsive Design hervorragende Arbeit geleistet hat.
Reagiert Bootstrap?
bootstrap reagiert.
Bootstrap bietet ein reaktionsfähiges, mobiles, flüssiges Rastersystem. Mit zunehmender Bildschirm- oder Ansichtsfenstergröße wird das System automatisch in 12 Spalten unterteilt. Das Rastersystem wird verwendet, um Seitenlayouts durch eine Reihe von Zeilen und Spalten zu erstellen.
Das responsive Layout von Bootstrap nutzt sein Rastersystem und verwendet verschiedene Klassenattribute für verschiedene Bildschirme. Während der Entwicklung können Sie nur einen Codesatz schreiben, der auf Mobiltelefonen, Tablets und PCs verwendet werden kann, ohne die Verwendung von Medienabfragen (Schreiben verschiedener Codes für verschiedene Geräte) in Betracht ziehen zu müssen.
Das Implementierungsprinzip des Rastersystems besteht darin, die Größe des Behälters zu definieren, ihn in 12 gleiche Teile zu teilen (es kann auch in 24 oder 32 Teile geteilt werden, aber 12 Teile sind am häufigsten), dann die Innen- und Anpassung anzupassen Außenränder und kombinieren Sie es schließlich mit Medienabfragen, um ein leistungsstarkes, reaktionsfähiges Rastersystem zu erstellen. Das Rastersystem im Bootstrap-Framework unterteilt den Container in 12 gleiche Teile.
So funktioniert das Bootstrap-Rastersystem:
„row“ muss in .container (feste Breite) oder .container-fluid (100 % Breite) enthalten sein, um eine ordnungsgemäße Ausrichtung und Polsterung zu gewährleisten.
Erstellen Sie eine Reihe von „Spalten“ in horizontaler Richtung durch „Zeilen“.
Ihr Inhalt sollte in „Spalte“ platziert werden und nur „Spalte“ kann ein direktes untergeordnetes Element von Zeile sein.
Ähnlich wie .row und .col-xs-4. Eine vordefinierte Klasse, die zum schnellen Erstellen eines Rasters verwendet werden kann Die im Bootstrap-Quellcode definierten Mixins können auch zum Erstellen semantischer Layouts verwendet werden, indem das Padding-Attribut für „column“ festgelegt wird, um die Lücke zwischen ihnen zu erstellen (Gutter). Wenn Sie den Auffüllsatz für das .container-Element verschieben, wird dadurch auch die in der „Zeile“ enthaltene „Spalte“ versetzt dargestellt durch die Angabe von Werten von 1 bis 12. Der überspannte Bereich kann beispielsweise mit drei .col-xs-4 erstellt werden.
Wenn eine „Zeile“ mehr als 12 „Spalten“ enthält. , der Überschuss. Das Element, in dem sich die „Spalte“ befindet, wird als Ganzes in einer neuen Zeile angeordnet.
Die Rasterklasse eignet sich für Geräte mit einer Bildschirmbreite größer oder gleich der Teilungspunktgröße und dem Raster Die Anwendung aller .col-md-*-Rasterklassen auf ein Element funktioniert für Geräte mit Bildschirmbreiten, die größer oder gleich der Haltepunktgröße sind, und das Überschreiben der Rasterklassen für Geräte mit kleinem Bildschirm bedeutet die Anwendung beliebiger .col-md-*-Rasterklassen. col-lg- auf einem Element * Existiert nicht, betrifft auch Geräte mit großem Bildschirm
Empfohlen:Bootstrap-Video-Tutorial
.Das obige ist der detaillierte Inhalt vonReagiert Bootstrap?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
