Ist Bootstrap adaptiv?

Bootstrap ist adaptiv; unabhängig von der Größe des Bildschirms sollten Sie versuchen, die Zeilen nicht umzubrechen, sondern ihn nur horizontal zu skalieren, indem das Rastersystem die Größe des Containers definiert. Für 12 gleiche Teile ist der Browser in Zeilen und Spalten unterteilt, um eine Selbstanpassung zu erreichen.

Die Betriebsumgebung dieses Tutorials: Windows 10-System, Bootstrap-Version 5, DELL G3-Computer

Ist Bootstrap adaptiv?

Bootstrap ist adaptiv

Adaptiv bedeutet, dass, egal wie groß der Bildschirm ist, Versuchen Sie, die Zeilen nicht umzubrechen und nur horizontal zu skalieren. Boostrap ist durch das „Zaunsystem“ anpassungsfähig.

Das Zaunsystem wird erstellt, indem die Größe des Containers definiert und durch eine Reihe von Zeilen und Spalten in 12 gleiche Teile unterteilt und mit Medienabfragen kombiniert wird, um ein leistungsstarkes, reaktionsfähiges Rastersystem zu erstellen.

Die Grundlage der adaptiven Funktion von Boosttrap ist der „Zaun“-Modus, der den Browser in Zeilen und Spalten unterteilt: insgesamt 12 Spalten, und die Anzahl der Zeilen wird entsprechend den Elementen, die Sie anzeigen möchten, angepasst Wenn die Anzahl der Spalten den Bereich überschreitet, werden die Zeilen automatisch geändert. Die Größe jeder Spalte wird von Boostrap automatisch gleichmäßig basierend auf der Größe des aktuellen Browsers zugewiesen.

Wie es funktioniert:

Datenzeilen (Zeilen) müssen in .container (feste Breite) oder .container-fluid (100 % Breite) enthalten sein. Um ihm eine entsprechende Ausrichtung und Polsterung zu verleihen.

Erstellen Sie eine Reihe von Spalten in horizontaler Richtung durch Zeilen. Wenn die Bildschirm- oder Ansichtsfenstergröße zunimmt, unterteilt das System diese automatisch in bis zu 12 Spalten. .

Legen Sie das Auffüllattribut pro Spalte (Zeile) fest, um den Abstand zwischen den Spalten zu schaffen. Legen Sie einen negativen Rand für .row fest, um die durch das .container-Element festgelegte Auffüllung auszugleichen (Einführung ist, dass die in der Zeile (Zeile) enthaltenen Spalten (Spalten) die Auffüllung versetzen, was in den folgenden Beispielen der Grund für den nach außen gerichteten Vorsprung ist.) .

Wenn mehr als 12 Spalten vorhanden sind, werden die zusätzlichen Spalten in einer neuen Zeile platziert

Die adaptive Funktion von Boostrap

Tatsächlich wird die adaptive Funktion je nach Größe viel einfacher sein Im Browser verfügt Boosttrap über vier Fence-Klassennamen, die zur Verwendung bereitgestellt werden. Die Verwendung entspricht dem Aufruf des CSS-Stylesheet-Klassennamenselektors:

xs: col-xs-1 ~ col-xs-12, es sind immer mehrere Spalten vorhanden in einer Reihe.

sm: col-sm-1 ~ col-sm-12, mehrere Spalten können nur in einer Zeile stehen, wenn die Pixelbreite des Browsers größer oder gleich 768 Pixel ist.

md: col-md-1 ~ col-md-12, mehrere Spalten können nur in einer Zeile stehen, wenn die Pixelbreite des Browsers größer oder gleich 992 Pixel ist.

lg: col-lg-1 ~ col-lg-12, mehrere Spalten können nur in einer Zeile stehen, wenn die Pixelbreite des Browsers größer oder gleich 1200 Pixel ist.

Ich poste einen Pseudocode:

<div class="row">
   <div class="col-sm-4  col-md-1"></div>
   <div class="col-sm-4  col-md-1"></div>
    <div class="col-sm-4  col-md-10"></div>
</div>

Das bedeutet, dass die Browserbreite im 4:4:4-Modus angezeigt wird, wenn sie größer als 992 ist Präsentation im 1:1:10-Modus.

Natürlich können Sie auch alle vier verwenden. Achten Sie auf die Unterteilung. Boostrap ordnet die Spaltenbreiten in jedem Fall automatisch entsprechend der Breite des Browsers zu.

Verwandte Empfehlungen: Bootstrap-Tutorial

Das obige ist der detaillierte Inhalt vonIst Bootstrap adaptiv?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!