So implementieren Sie adaptives Bootstrap

Adaptiv: Egal wie groß der Bildschirm ist, versuchen Sie, die Zeilen nicht umzubrechen, sondern nur horizontal zu skalieren.

Boostraps „Zaun“-Modus (empfohlenes Lernen: Bootstrap-Video-Tutorial)

Boostrap adaptiv Die Basis Eine der Funktionen ist der „Zaun“-Modus, der den Browser in Zeilen und Spalten unterteilt: insgesamt 12 Spalten, und die Anzahl der Zeilen wird entsprechend den anzuzeigenden Elementen angepasst. Bestimmen Sie die Anzeigegröße jedes Elements. Dies ist die Anzahl der erforderlichen Spalten. Wenn der Bereich überschritten wird, erfolgt automatisch ein Berufswechsel. Die Größe jeder Spalte wird von Boostrap basierend auf der Größe des aktuellen Browsers automatisch gleichmäßig verteilt.

Adaptive Funktion von Boosttrap

Nach dem Verständnis des Fence-Modus ist die adaptive Funktion tatsächlich viel einfacher. Je nach Größe des Browsers verfügt Boosttrap über vier Fence-Klassen Namen Zur Verwendung bereitgestellt, die Verwendung ist die gleiche wie beim Aufruf des CSS-Stylesheet-Klassennamenselektors:

xs: col-xs-1 ~ col-xs-12, mehrere Spalten befinden sich immer in einer Zeile.

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 der Browser im 4:4:4-Modus angezeigt wird, wenn die Breite zwischen 768 und 992 liegt. Wenn die Gerätebreite größer als 992 ist, wird es im 1:1:10-Modus dargestellt.

Natürlich können Sie auch alle vier verwenden. Seien Sie vorsichtig bei der Aufteilung. In jedem Fall ordnet Boostrap die Spaltenbreiten automatisch entsprechend der Breite des Browsers zu, um sie an den gewünschten Präsentationsmodus anzupassen.

Was die Vorgehensweise angeht, müssen Sie sich keine Gedanken darüber machen, wie der Präsentationsstil Ihrer Webseite auf dem Mobiltelefon oder dem Präsentationsstil auf dem PC aussieht. Überlassen Sie es Boostrap.

Weitere technische Artikel zu Bootstrap finden Sie in der Spalte Bootstrap-Tutorial.

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