Implementierung eines Bootstrap-Webseiten-Layoutrasters

1. So funktioniert das Bootstrap-Rastersystem

1.1 Zwölf-Gitter-System

Grid ist im Englischen ein Raster. Der Grund, warum manche Orte Raster und manche Orte Raster sind, liegt einfach an unterschiedlichen Übersetzungsgewohnheiten. Das Zwölferrastersystem bedeutet, den gesamten Bildschirm in zwölf gleich große Teile der Breite zu unterteilen, wobei ein Teil ein Zwölftel der Bildschirmbreite darstellt. Warum wird er in zwölf gleiche Teile unterteilt und nicht in zehn oder andere gleiche Teile? Dies liegt daran, dass 12 das kleinste gemeinsame Vielfache von 1, 2, 3, 4 und 6 ist. Erfahrungsgemäß ist eine solche Unterteilung die schönste und praktischste. Natürlich habe ich auch 36-Raster- und 10-Raster-Systeme gesehen. Aus Nutzungssicht sind sie tatsächlich nicht so praktisch wie das 12-Raster-System.

Wenn ich im Zwölf-Raster-System den Bildschirm in eine linke und eine rechte Seite unterteilen möchte, wobei die linke Seite ein Drittel und die rechte Seite zwei Drittel einnehmen soll, kann ich die linke Breite auf 4 Raster und die rechte auf 8 Raster einstellen. Benötige ich von jeder Station links und rechts die Hälfte, brauche ich nur jeweils 6 Raster einzustellen. Wenn ich nur eine Seite so einstellen muss, dass sie den gesamten Bildschirm ausfüllt, kann ich sie direkt auf 12 Raster einstellen. Schauen Sie, ist das nicht praktisch?

1.2 Bootstrap Grid System-Tags

Das Bootstrap-Rastersystem entwirft drei Tags: Container, Zeile und Spalte:

• Container ist ein Container, der im vorherigen Abschnitt ausführlich vorgestellt wurde.
• Zeile bedeutet Zeile und stellt eine horizontale Reihe dar
• col ist eine Zelle, die jede einzelne Zelle darstellt. Es gibt drei Möglichkeiten, sie zu schreiben: col, col-Rasternummer (z. B. col-3) und col-Bildschirmgrößen-Rasternummer (z. B. col-md-3).

Unten sehen Sie einen Beispielcode, der den Bildschirm in drei gleich breite Einheiten unterteilt. Sie müssen sich noch nicht mit dem spezifischen Code befassen. Sie müssen lediglich ein kurzes Verständnis der Struktur des Rastersystems haben, das wir später ausführlich erläutern werden.

<div Klasse="Container">
    <div Klasse="Zeile">
        <div Klasse="col">
            Erste Einheit</div>
        <div Klasse="col">
            Die zweite Einheit</div>
        <div Klasse="col">
            Die dritte Einheit</div>
    </div>
</div>

1.3 Regeln für das Bootstrap Grid-System

1. Verwenden Sie Zeilen, um horizontale Spaltengruppen zu erstellen.
2. Eine Seite kann mehrere Zeilen enthalten.
3. Zeilen müssen innerhalb eines Containers platziert werden, um eine korrekte Ausrichtung und Polsterung zu erhalten.
4. Inhalte sollten in Spalten (col) platziert werden und nur Spalten können direkte untergeordnete Elemente von Zeilen sein.
5. Zeilen können in Spalten verschachtelt werden und Zeilen innerhalb von Spalten benötigen keine Container, da die Spalte selbst ein Container ist.
6. Sie können vordefinierte Rasterklassen wie „col-screen-size-grid-number“ direkt verwenden, um schnell Rasterlayouts zu erstellen.
7. In der vordefinierten Klasse gibt es 5 Bildschirmgrößenwerte, die hauptsächlich für Responsive Design verwendet werden, siehe 3.1. Die Rasternummer ist eine Zahl zwischen 1 und 12 und stellt die Bildschirmbreite dar.

2. Einstellung der Zellenbreite im Bootstrap-Rastersystem

2.1 Standardmäßiges Layout mit gleicher Breite

Wenn wir die Breite jeder Spalte nicht festlegen, wird die Standardbreite jeder Spalte unabhängig von der Spaltenanzahl gleichmäßig verteilt. Wenn jedoch mehr als 12 Spalten in einer Zeile vorhanden sind, tritt unvorhersehbares Verhalten auf (ich habe zu Forschungszwecken einige Tests durchgeführt. Sie müssen dies nicht testen. Wenn Sie mehr als 12 Spalten layouten möchten, können Sie eine Tabelle verwenden). Unten gebe ich einen Codeausschnitt an, den ich später mit einigen kleinen Änderungen verwenden und nicht wiederholen werde.

Wenn Sie zum Einstellen der Breite die Spalten- oder Spaltenrasternummer verwenden, stellen Sie die Fensterbreite bitte auf das Maximum ein, um den Effekt in der Vorschau anzuzeigen. Andernfalls kann es zu Effektabweichungen kommen. Darüber hinaus empfehlen wir diese Einstellung in tatsächlichen Anwendungen nicht. Verwenden Sie bitte ein responsives Rasterlayout, auch wenn Sie nicht möchten, dass es responsive ist.

<!doctype html>
<html lang="de">
  <Kopf>
    <meta charset="utf-8">
    <meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1">
    <meta name="Schlüsselwörter" content="">
    <meta name="Beschreibung" Inhalt="">
    <link href="bootstrap5/bootstrap.min.css" rel="externes Nofollow" rel="stylesheet">
 
    <title>Demonstration des Gittersystems</title>
  </Kopf>
  <Text>
  
    <div Klasse="Container">
        <div Klasse="Zeile">
            <div Klasse="col">
                <h1>Was ist Bootstrap? </h1>
                <p>
                    Bei der Entwicklung von Front-End-Seiten wäre es Zeitverschwendung, wenn wir jeden Button, jeden Stil und jeden Browser-Kompatibilitätscode von Grund auf neu schreiben müssten. Wir benötigen also ein Framework, das uns bei der Implementierung der grundlegenden Teile einer Seite hilft und einige langwierige Details löst, und auf dessen Grundlage wir die Seite anpassen können. Bootstrap ist ein so prägnantes, intuitives und leistungsstarkes Front-End-Entwicklungsframework. Solange Sie seine Standards lernen und einhalten, können selbst Entwickler, die kein Webdesign gelernt haben, sehr professionelle und schöne Seiten erstellen, was die Arbeitseffizienz erheblich verbessert.
                </p>
            </div>
            <div Klasse="col">
                <h1>Was ist Bootstrap? </h1>
                <p>
                    Bei der Entwicklung von Front-End-Seiten wäre es Zeitverschwendung, wenn wir jeden Button, jeden Stil und jeden Browser-Kompatibilitätscode von Grund auf neu schreiben müssten. Wir benötigen also ein Framework, das uns bei der Implementierung der grundlegenden Teile einer Seite hilft und einige langwierige Details löst, und auf dessen Grundlage wir die Seite anpassen können. Bootstrap ist ein so prägnantes, intuitives und leistungsstarkes Front-End-Entwicklungsframework. Solange Sie seine Standards lernen und einhalten, können selbst Entwickler, die kein Webdesign gelernt haben, sehr professionelle und schöne Seiten erstellen, was die Arbeitseffizienz erheblich verbessert.
                </p>
            </div>
            <div Klasse="col">
                <h1>Was ist Bootstrap? </h1>
                <p>
                    Bei der Entwicklung von Front-End-Seiten wäre es Zeitverschwendung, wenn wir jeden Button, jeden Stil und jeden Browser-Kompatibilitätscode von Grund auf neu schreiben müssten. Wir benötigen also ein Framework, das uns bei der Implementierung der grundlegenden Teile einer Seite hilft und einige langwierige Details löst, und auf dessen Grundlage wir die Seite anpassen können. Bootstrap ist ein so prägnantes, intuitives und leistungsstarkes Front-End-Entwicklungsframework. Solange Sie seine Standards lernen und einhalten, können selbst Entwickler, die kein Webdesign gelernt haben, sehr professionelle und schöne Seiten erstellen, was die Arbeitseffizienz erheblich verbessert.
                </p>
            </div>
            <div Klasse="col">
                <h1>Was ist Bootstrap? </h1>
                <p>
                    Bei der Entwicklung von Front-End-Seiten wäre es Zeitverschwendung, wenn wir jeden Button, jeden Stil und jeden Browser-Kompatibilitätscode von Grund auf neu schreiben müssten. Wir benötigen also ein Framework, das uns bei der Implementierung der grundlegenden Teile einer Seite hilft und einige langwierige Details löst, und auf dessen Grundlage wir die Seite anpassen können. Bootstrap ist ein so prägnantes, intuitives und leistungsstarkes Front-End-Entwicklungsframework. Solange Sie seine Standards lernen und einhalten, können selbst Entwickler, die kein Webdesign gelernt haben, sehr professionelle und schöne Seiten erstellen, was die Arbeitseffizienz erheblich verbessert.
                </p>
            </div>
            
        </div>
    </div>
 
     <script src="bootstrap5/bootstrap.bundle.min.js" ></script>
  </body>
</html>

Die Wirkung dieses Codes ist in der Abbildung oben dargestellt. Sie können den folgenden Zellteil noch ein paar Mal kopieren, um die Wirkung zu sehen.

2.2 Legen Sie die Breite jeder Spalte fest

Versuchen Sie, die Spalte in den drei <div class="col"> in col-3, col-6, col-3 oder andere Werte zu ändern, solange die Summe der drei Zahlen 12 ergibt. Natürlich können Sie auch eine oder mehrere Zellen löschen oder hinzufügen, solange die Summe der Zeile 12 ergibt. Durch solch einfache Einstellungen lässt sich die Breite der Zelle ganz bequem verändern. Die folgende Abbildung zeigt den Anzeigeeffekt, wenn col jeweils auf col-2, col-2, col-4 und col-4 eingestellt ist.

2.3 Spalten mit variabler Breite

Wenn Sie einen Zellenwert festlegen und drei Zellen vorhanden sind und Sie nur eine festlegen, teilen die verbleibenden zwei Zellen den verbleibenden Platz gleichmäßig auf, sodass Sie problemlos eine Spalte mit variabler Breite festlegen können. Zur Erinnerung: Die Zelle mit dem festen Wert muss nicht im Vordergrund stehen. In Code 2.1 können Sie beispielsweise festlegen, dass die zweite Zelle die Hälfte des Bildschirms einnimmt (Spalte 6) und die anderen Zellen gleichmäßig verteilt werden.

2.4 Automatisches Umbrechen von Spalten

Wenn für jede Zelle ein Breitenwert festgelegt ist, wird die Zeile automatisch umbrochen, wenn der verbleibende Platz in einer Reihe nicht mehr für eine Zelle ausreicht.

Ändern Sie in Beispiel 2.1 die Spalte in jedem der vier <div class="col"> in col-6, um den Effekt zu sehen.

Ändern Sie in Beispiel 2.1 die Spalte in jedem der vier <div class="col"> in col-12, um den Effekt zu sehen.

Ändern Sie in Beispiel 2.1 die Spalte in jedem der vier <div class="col"> in col-8, um den Effekt zu sehen.

Es ist ersichtlich, dass, obwohl bei der Einstellung auf Spalte 8 auch eine Zeile pro Zelle möglich ist, der Text nur 8/12 des Bildschirms bzw. zwei Drittel einnimmt. Wenn also keine besonderen Anforderungen bestehen, versuchen Sie, die Summe der Zellenwerte in jeder Zeile genau auf 12 zu setzen.

3. Bootstrap-Raster-responsives Layout

3.1 Was ist responsives Layout?

Was das responsive Layout betrifft, lässt sich vereinfacht sagen, dass das angezeigte Seitenlayout bei unterschiedlicher Bildschirmgröße unterschiedlich ist. Beispielsweise ist bei der Anzeige auf einem Mobiltelefon nur eine Zelle in einer Reihe vorhanden, bei der Anzeige auf einem Tablet zwei Zellen in einer Reihe und bei der Anzeige auf einem Computer drei Zellen. Bootstrap kann diese Funktion problemlos erreichen.

3.2 Bildschirmgrößenaufteilung im Bootstrap-Rastersystem

Schauen Sie sich die folgende Tabelle an. Kommt Ihnen das bekannt vor? Es ist genau dasselbe wie die Breakpoint-Regeln, außer dass ein zusätzliches xs vorhanden ist. Tatsächlich ist xs der Standardwert, sodass es direkt weggelassen werden kann. Wie Sie sehen, unterteilt Bootstrap den Bildschirm durch 5 Haltepunkte in 6 Größen.

3.3 Beispiel für ein Bootstrap-Raster-Responsive-Layout

Ersetzen Sie im Beispiel von 2.1 die vier <div class="col"> durch <div class="col-12 col-md-6 col-lg-4"> , ändern Sie die Größe des Browserfensters und prüfen Sie die Wirkung. Dieser Code bedeutet, dass bei einer Breite <768px nur eine Spalte in einer Zeile vorhanden ist (jede Spalte ist 12 Raster breit), bei 768px<Breite<992px gibt es zwei Spalten (jede Spalte ist 6 Raster breit) und bei mehr als 992px gibt es in jeder Zeile 3 Spalten (jede Spalte ist 4 Raster breit). Hier ist eine Videodemonstration

Natürlich können Sie es auch detaillierter gestalten, zum Beispiel mit <div class="col-12 col-sm-6 col-md-4 col-md-3 col-lg-2"> .

Hier verrate ich euch einen kleinen Trick. Wenn ihr mehrere Spalten in einer Zeile darstellen wollt, dann ist die Breite einfach 12 geteilt durch eine bestimmte Zahl. Haha, das könnt ihr euch ja denken.

3.4 Wenn Sie nicht antworten möchten

Wenn Sie möchten, dass alle Browser die gleiche Anzeigewirkung haben und sie in zwei Spalten aufteilen, also nicht responsive sein sollen, ist das ganz einfach. Sie müssen nur auf allen Bildschirmen die gleiche Anzahl von Rastern festlegen <div class="col-6 col-sm-6 col-md-6 col-md-6 col-lg-6 col-xl-6 col-xxl-6"> , damit die Anzeige auf jedem Bildschirm einheitlich bleibt.

Dies ist das Ende dieses Artikels über die Implementierung des Bootstrap-Webseiten-Layoutrasters. Weitere relevante Inhalte zum Bootstrap-Rasterlayout finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!