Was ist Bootstrap-Rasterisierung?

Beim Bootstrap bezieht sich die Rasterisierung auf die Aufteilung einer Browserzeile in 12 Spalten und die anschließende Zuweisung der von den entsprechenden Elementen belegten Spaltenbreite entsprechend den Anforderungen der entwickelten Seite. jedes Segment Feste Breite, responsives Layout über Prozentsätze und Medienabfragen.

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

Was ist Bootstrap-Rasterisierung? Bei Bootstrap besteht das Prinzip der Rasterisierung darin, jedes Segment entsprechend der Größe zu segmentieren Feste Breite, reaktionsfähiges Layout durch Prozentsätze und Medienabfragen; dadurch kann derselbe Satz von Seiten an Geräte mit unterschiedlichen Auflösungen angepasst werden.

Grundprinzip des Rasterlayouts: Das Raster unterteilt die Seite in eine bestimmte Anzahl (angenommen n) Spalten mit Grundbreite in horizontaler Richtung.

Dann kann der Entwickler das entsprechende Element auf der Seite so einstellen, dass es je nach Bedarf m Spalten einnimmt Breite. (m

Mein Verständnis: Rasterisierung besteht darin, eine Zeile des Browsers in 12 Spalten zu unterteilen und die Spalten selbst zuzuordnen.

Übersicht über das Rastersystem

Gittersysteme (Gittersysteme) sind ein klarer und übersichtlicher Designstil, der ein festes Raster für das Webseitenlayout verwendet. Das Rastersystem wurde erstmals in Druckmedien verwendet. Ein Drucklayout ist in mehrere Raster unterteilt, was für den Schriftsatz sehr praktisch ist.

Später wurde das Rastersystem auf das Webseitenlayout angewendet. Bei Verwendung des responsiven Rastersystems für das Seitenlayout kann die Webseite je nach Anzeigeterminal unterschiedliche Seitenstrukturen anzeigen. Beispielsweise werden einige Module auf Geräten mit kleinem Bildschirm anders angeordnet oder ausgeblendet.

Grundlegende Verwendung des Bootstrap-Grid-Systems.

1. Das Bootstrap-Rastersystem definiert verschiedene Klassen für unterschiedliche Bildschirmbreiten. Fügen Sie einfach den Klassennamen direkt zum Element hinzu.

2. Zeilen müssen in einem Layout-Container enthalten sein, damit sie richtig angeordnet und aufgefüllt werden können.

3. Eine Gruppe von Spalten kann in horizontaler Richtung durch Zeilen erstellt werden, und nur Spalten können als direkte untergeordnete Elemente von Zeilen verwendet werden.

4. Verwenden Sie den Stil .row für Zeilen und .col-*-* für Spalten. Wenn die Anzahl der Spalten größer als 12 ist, wird eine neue Zeile angeordnet.

Student Information Form Case

Case-Implementierungsideen:

1. Zuerst müssen Sie ein p-Element mit der Klassennamenzeile als Zeile im Layoutcontainer erstellen.

2. Erstellen Sie dann Spalten im Zeilencontainer. Die Zeilen und Spalten eines Layout-Containers bilden ein Rastersystem.
3. Die Zeilen und Spalten im Rastersystem ähneln den Zeilen und Spalten in der Tabelle.

1. HTML-Code schreiben

    <p>
        </p><p>
            </p><p>姓名</p>
            <p>年龄</p>
            <p>性别</p>
        
        <p>
            </p><p>张三</p>
            <p>25</p>
            <p>男</p>
        
    

2. CSS-Stil schreiben

    .row {
        background-color: #eee;
        font-size: 30px;
    }
    .col-md-4 {
        border: 1px solid #fff;
        text-align: center;
    }

Wenn die Browser-Anzeigebreite größer als 992 Pixel ist, ist der Effekt wie folgt:

Wenn die Browser-Breite größer als 768 Pixel ist, ist der Effekt wie folgt Folgendes:

Wenn der Browser weniger als 768 Pixel breit ist, ist der Effekt wie folgt:

Verwandte Empfehlungen:

Bootstrap-Tutorial

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