Bootstrap 5 ist die neueste Version des Bootstrap-Frameworks, mit dem seine Benutzer reaktionsschnelle Websites erstellen können, die mit der mobilen Technik erstellt wurden. Bootstrap 5 wurde im Jahr 2021 auf den Markt gebracht und hat viele Unterscheidungsmerkmale, wie es sich um schnelle Stylesheets und eine verbesserte Reaktionsfähigkeit befindet. In diesem Tutorial zeigen wir, wie Sie eine einfache Webseite mit Bootstrap 5 erstellen können.

Lass uns anfangen.

So erstellen Sie Ihre erste Webseite mit Bootstrap 5

Bootstrap 5 einbeziehen

Der erste Schritt besteht darin, Bootstrap 5 in Ihrer HTML -Datei offensichtlich hinzuzufügen. Zum Zwecke der Einbeziehung von Bootstrap 5 erhalten Sie ein CDN für CSS und JavaScript und fügen Sie ihn in Ihre Datei hinzu, wie wir unten gezeigt haben.

Neben dem CDN haben wir zusammen mit einem responsiven Meta-Tag ein UTF-8-Zeichenset hinzugefügt. In diesem Tag wird die Breite auf die Gerätebreite eingestellt, was bedeutet, dass sich die Webseitenbreite in der Korrespondenz auf die Breite des Geräts ändert, während der Anfangsmaßstab auf 1 eingestellt ist, was bedeutet, wenn die Webseite vom Browser geladen wird Zum ersten Mal wird der Zoom -Level 1 sein.

Eine Navigationsleiste machen

Nachdem wir Bootstrap 5 in unsere Datei aufgenommen haben, werden wir nun eine Top -Navigationsleiste mit verschiedenen Bootstrap 5 -Klassen erstellen.

Im Folgenden werden wir die verschiedenen Klassen erklären, die zum Erstellen einer Navigationsleiste verwendet werden.

1. Der .Navillat wird verwendet, um eine Navigationsleiste zusammen mitzuwickeln .Navbar-Expand-SM Für das reaktionsschnelle Zusammenbruch, inzwischen die .BG-Sekundär Und .Navi-Dark sind die verschiedenen Farbschemata, die in der Navigationsleiste bereitgestellt werden.
2. Der .Container Die Klasse wickelt alle Elemente einer Navigationsleiste mit einer festen Breite ein.
3. Der .Text-Weiß Und .Text-Center Der Unterricht entspricht der Farbe und Ausrichtung der Hauptüberschrift der Website.
4. Der .Navi-nav wird verwendet, um eine Navigationsleiste mit einer maximalen Höhe zu erstellen und leicht zu sein und auch Dropdowns unterstützt. In der Zwischenzeit, .ML-Auto Legt den linken Rand der Listenelemente auf automatisch fest.
5. Der .NAV-ITEM, Und .Nav-Link werden verwendet, um verschiedene Listenelemente in der Navigationsleiste zu erstellen.
6. Der .aktiv Klasse macht einen Link aktiv.

Ausgang

Eine Navigationsleiste wurde erfolgreich erstellt.

Inhalte hinzufügen

Nachdem wir eine Navigationsleiste erfolgreich erstellt haben, werden wir einige Inhalte auf der Website hinzufügen. Im folgenden Code fügen wir nur einen Text zum Abschnitt "Über uns" hinzu.

Über uns

Hallo. Willkommen zu meiner ersten Webseite. Dies ist eine reaktionsschnelle Webseite, die ich mit Bootstrap 5 erstellt habe. Bootstrap ist die neueste Version des Bootstrap-Frameworks, mit dem seine Benutzer reaktionsschnelle Websites mit einer mobilen Technik erstellen können. Dieser Ansatz besagt, dass das Webdesign zuerst für Mobiltelefone und später für andere Geräte entwickelt wurde.

Bootstrap 5 wurde im Jahr 2021 auf den Markt gebracht und verfügt über viele erstaunliche Funktionen, wie es schnelle Stylesheets und eine verbesserte Reaktionsfähigkeit hat.

Verschiedene Klassen, die zum Hinzufügen von Inhalten auf der Webseite verwendet werden, werden hier erläutert.

1. Der .Reihe Die Klasse erstellt eine Zeile, in der wir unseren Text platzieren werden, .Align-items-links Die Klasse richtet den Inhalt nach links aus.
2. Der .col Klasse erzeugt eine Spalte, während die, die, die .Text-Col Die Klasse bietet eine Standardfarbe für den Text.

Notiz: Um Inhalte hinzuzufügen. Ein Netzsystem in Bootstrap 5 verwendet verschiedene Behälter, Zeilen und Spalten, um den Inhalt anzupassen und auszurichten.

Ausgang

Einige Inhalte wurden zur Webseite hinzugefügt.

Hinzufügen von Bildergalerie

Um unsere Website weiter interessant zu machen, fügen wir jetzt einige Bilder hinzu, indem wir ein anderes Netzsystem erstellen.

Hier haben wir die oben verwendeten Klassen erklärt.

1. Der .Col-MD-4 Die Klasse erstellt vier Spalten mit gleicher Breite und gibt an, dass die Gerätebreite mittel oder größer als 768px ist. Inzwischen beträgt die Containerbreite 720px.
2. Der .MT-3 Die Klasse bietet einen Randtop zum Netzlayout.
3. Der .col-lg-3 Die Klasse erstellt 3 Spalten mit gleicher Breite und gibt an, dass die Gerätebreite groß ist, die eine Bildschirmgröße mehr oder gleich 992px hat.
4. Zuletzt werden die Bilder reagieren .Img-fluid Klasse.

Ausgang

Eine reaktionsschnelle Bildergalerie wurde mit Erfolg hinzugefügt.

Hinzufügen einer Taste

Zuletzt werden wir auf unserer Website einen Knopf hinzufügen.

Kontaktiere uns

Klassen, die zum Erstellen der Schaltfläche verwendet werden.

1. Der .MT-2 Legt den Rand oben auf der Taste fest.
2. Zum Zwecke des Anpassens unserer Taste verwenden wir die .Btn Klasse, inzwischen die .BTN-Sekundär Klasse gibt die Farbe der Taste und die an .Btn-Large Klasse gibt die Größe der Schaltfläche an.

Ausgang
So sieht die komplette Webseite aus.

Eine einfache Webseite wurde erfolgreich mit Bootstrap 5 erstellt.

Notiz: Um die Reaktionsfähigkeit der Webseiten zu bewerten, skalieren Sie den Webbrowser auf und ab.

Abschluss

Zum Zwecke des Erstellens Ihrer ersten Webseite mit Bootstrap 5 müssen Sie ein grundlegendes Verständnis für verschiedene integrierte Bootstrap 5-Kurse haben. Eine grundlegende Notwendigkeit dieses Frameworks ist ein Container, der Elemente darin einwickelt. Die Containerklassen können mit anderen Klassen verwendet werden, um verschiedene Entitäten zu erstellen, die auf einer Webseite wie einer Navigationsleiste, Bildnetz, Schaltflächen usw. verfügt. In diesem Artikel haben wir mit Hilfe eines geeigneten Beispiels demonstriert, wie Sie Ihre erste Webseite mit Bootstrap 5 erstellen können.