Bootstrap 5 ist die neueste Version des Bootstrap-Frameworks, mit der seine Benutzer Websites erstellen können, die in der Natur reagieren. Dieser Ansatz gibt an, 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 Speedy Stylesheets und verbesserte Reaktionsfähigkeit. Hier führen wir Sie dazu, wie Sie mit Bootstrap 5 beginnen können, aber davor lernen wir ein bisschen mehr über Bootstrap 5.

Eigenschaften von Bootstrap 5

Bootstrap 5 verfügt über viele Funktionen, die es unter anderen Versionen hervorheben,. Einige dieser Eigenschaften sind unten aufgeführt.

1. Diese neueste Version von Bootstrap ist sehr benutzerfreundlich.
2. Es hat eine schnelle Reaktionsfähigkeit.
3. Es ist nützlich, um Websites zu entwickeln, die zuerst für Mobiltelefone und andere Geräte konzipiert sind.
4. Dieses Framework ist mit allen modernen Browsern kompatibel.
5. Es ist schnell und spart damit viel Zeit und Energie.

Bootstrap 5 vs. Bootstrap 3 & 4

Im Vergleich zu anderen Bootstrap -Versionen, insbesondere Version 3 und Version 4, und Version 4, kann der Hauptunterschied unter anderem darauf hingewiesen werden.

Holen Sie sich Bootstrap 5

Bevor Sie mit der Verwendung von Bootstrap 5 beginnen können, müssen Sie es offensichtlich zuerst herunterladen. Dafür können Sie es entweder aus dem Inhaltszustellungsnetzwerk einfügen oder aus Bootstrap herunterladen und installieren.com. Für dieses Tutorial werden wir Bootstrap 5 von CDN einbeziehen.

Für CSS

Für JavaScript

Jetzt, da Bootstrap 5 enthalten ist, entwickeln wir unser erstes Programm.

Erste Schritte mit Bootstrap 5

Im Folgenden haben wir Ihnen eine Schritt-für-Schritt-Anleitung zur Verfügung gestellt, wie Sie mit Bootstrap 5 beginnen können.

1. Machen Sie ein HTML -Dokument
Der Zweck der Erstellung einer HTML -Datei mit Bootstrap 5 besteht darin, HTML5 -DocType einzuschließen, damit dieses Framework verschiedene HTML -Elemente und CSS -Eigenschaften vollständig verwenden kann.

Fügen Sie auch das Lang -Attribut zusammen mit einem Zeichensatz ein. Eine andere, die wir hier hinzugefügt haben, ist das reaktionsschnelle Meta -Tag. Wie wir wissen, entwickelt Bootstrap 5 eine Website mit einem mobilen Ansatz, einschließlich eines reaktionsschnellen Meta-Tags, stellt sicher, dass die Website auf Berührung und Zooming reagiert.

2. Fügen Sie Bootstrap 5 hinzu
Fügen Sie nun einfach das CDN für CSS und JavaScript in Ihre HTML -Datei hinzu, um mit dem Bootstrap 5 ohne Probleme zu beginnen.

Beide CDNs wurden im Tag hinzugefügt. Ein weiterer Ansatz zum Hinzufügen des CDN von JavaScript in der Datei ist vor dem Schlusskörper -Tag.

3. Elemente hinzufügen
Der obige Code fehlt daher das Tag, um Inhalte hinzuzufügen, und erstellen Sie daher verschiedene HTML -Elemente im Körper Ihrer Datei. Da der Zweck dieses Beitrags darin besteht, die Reaktionsfähigkeit von Bootstrap 5 zu zeigen, präsentieren wir Ihnen hier einige Grundkenntnisse über Bootstrap -Containerklassen.

Eine grundlegende Anforderung von Bootstrap 5 besteht darin, einen Container zum Wickeln des Inhalts der Website aufzunehmen. Um diese Container zu verwenden, verwenden Sie die folgenden zwei Klassen.

1. .Container Um einen Container mit fester Breite zu bauen und dennoch reaktionsschnell.
2. .ContainerfluiD, um einen Container mit voller Breite zu erhalten, der über die gesamte Ansichtsfensterbreite erstreckt.

Hier werden wir die Container-Fluid-Klasse verwenden, um unsere erste reaktionsschnelle Seite mit Bootstrap 5 zu demonstrieren.

Bootstrap 5

Bootstrap 5 ist die neueste Version des Bootstrap -Frameworks, mit dem der Benutzer erstaunliche Websites mit schnellem CSS erstellen lässt
Stylesheets und verbesserte Reaktionsfähigkeit.

Im Vergleich zu anderen Versionen speziell Version 3 und Version 4 verwendet Bootstrap 5 Vanille -JavaScript anstelle
JQuery.

Mit der Container-Fluid-Klasse haben wir ein Div-Element erstellt, das weiter nistet a

Element und zwei

Elemente. Skalieren Sie das Browserfenster nach oben und unten, um den Effekt zu sehen.

Ausgang

Eine reaktionsschnelle Webseite wurde erfolgreich mit Bootstrap 5 erstellt.

Abschluss

Um mit Bootstrap 5 zu beginnen. Danach müssen Sie entweder Bootstrap 5 installieren oder seine CDN erhalten und in Ihr HTML -Dokument aufgenommen. Dann können Sie die Elemente erstellen, die Sie auf Ihrer Webseite anzeigen möchten. Speichern Sie zuletzt Ihre Datei und voila Ihre erste Bootstrap 5 -Seite wurde erstellt. Dieses Tutorial führt Sie Schritt für Schritt, wie Sie mit Bootstrap 5 beginnen können.