Wie man Bootstrap Layout layer

Die Verwendung von Bootstrap zum Layout einer Website erfordert ein Gittersystem, das die Seite in Container, Zeilen und Spalten unterteilt. Fügen Sie zuerst den Container hinzu, fügen Sie dann die Zeilen hinzu, fügen Sie die Spalten in der Zeile hinzu und fügen Sie schließlich den Inhalt in der Spalte hinzu. Die Responsive -Layout -Funktion von Bootstrap passt das Layout automatisch anhand von Haltepunkten (XS, SM, MD, LG, XL) an. Unter Verwendung von Responsive -Klassen können verschiedene Layouts unter verschiedenen Bildschirmgrößen erreicht werden.

Bootstrap -Layout -Anleitung

Wie benutze ich Bootstrap für das Layout?

Bootstrap ist ein CSS-Framework für die schnelle Entwicklung reaktionsschneller, mobiler Websites und Anwendungen. Es bietet eine Reihe von vorgefertigten Klassen und Komponenten für die einfache Erstellung von Website-Layouts.

Bootstrap -Layoutstruktur

Bootstrap organisiert den Inhalt mithilfe eines Gittersystems, das Seiten in horizontale Zeilen und vertikale Spalten unterteilt. Die grundlegende Netzstruktur lautet wie folgt:

• Container: Enthält den gesamten Seiteninhalt.
• Zeile: Definiert eine horizontale Zeile, die Spalten enthält.
• Spalte: Gibt die Breite des Inhalts in der Zeile an.

Schritte zum Erstellen eines Layouts

1. Fügen Sie einen Container hinzu: Erstellen Sie einen Container mit <div class="container"> .<li> <strong>Zeile hinzufügen:</strong> Zeilen im Container erstellen mit <code><div class="row"> .<li> <strong>Fügen Sie eine Spalte hinzu:</strong> Fügen Sie eine Spalte in einer Zeile mit <code><div class="col-*"> hinzu, wobei <code>* die Spaltenbreite angibt (z. B. col-6 repräsentiert eine Spalte, die 6/12 Breite in einer Zeile berücksichtigt).
2. Inhalt setzen: Inhalt in der Spalte hinzufügen.

Bootstrap Responsive Layout

Mit der Responsive Layout -Funktion von Bootstrap können Websites basierend auf Browser oder Gerätegröße automatisch einstellen. Bootstrap verwendet Breakpoints, um den Bildschirmgrößenbereich zu definieren und das Layout für jeden Haltepunkt anzupassen. Die Haltepunkte sind wie folgt:

Haltepunkt	Bildschirmbreite
xs	≤575px
sm	≥576px
md	≥768px
lg	≥992px
xl	≥1200px

Beispiel für die Verwendung von Bootstrap Responsive Class

Erstellen Sie einen Container, der für drei Spalten auf mittleren und großen Bildschirmen und einzelnen Spalten auf kleinen Bildschirmen ausgelegt ist:

 <code class="html"><div class="container"> <div class="row"> <div class="col-md-4 col-lg-4">列1</div> <div class="col-md-4 col-lg-4">列2</div> <div class="col-md-4 col-lg-4">列3</div> </div> </div></code>