Das CSS -Framework namens Bootstrap ist eines der weit verbreiteten Frameworks zum Erstellen und Entwerfen von Webanwendungen. Es verfügt über HTML-, CSS -Stile und einige JavaScript -Designkomponenten für Formulare, Schaltflächen, Navigation und andere Schnittstellenmodule. Vor der Verwendung von Bootstrap muss man die erforderlichen CSS-, JavaScript- und JQuery -Links hinzufügen.

In diesem Artikel werden die Methoden zum Hinzufügen von Bootstrap zu einem Projekt beschrieben.

So fügen Sie einem Projekt Bootstrap hinzu?

Es gibt zwei Möglichkeiten, einem Projekt Bootstrap hinzuzufügen:

• • Download Bootstrap
  • Hinzufügen von Bootstrap von einem CDN

Methode 1: Bootstrap herunterladen

Wenn Sie Bootstrap auf Ihrer Website hosten möchten, laden Sie Bootstrap von der offiziellen Website herunter und befolgen Sie die Anweisungen.

Methode 2: Hinzufügen von Bootstrap von einem CDN

Ein globales Netzwerk namens CDN oder Content Delivery Network schneidet die statische Ressource für eine Website rund um den Globus aus. Die Ressourcen umfassen Bilder, Videos, CSS und mehr. Dadurch wird die Ladezeit der Website schneller durch das Laden der statischen Dateien aus dem relativ engen CDN -Server. MaxCDN bietet CDN -Unterstützung für das JavaScript und CSS von Bootstraps. JQuery muss auch enthalten sein.

Lassen Sie uns ein Beispiel implementieren, um eine Webseite mit Bootstrap zu erstellen.

Beispiel: Erstellen Sie eine Webseite mit Bootstrap

Um eine Webseite mit Bootstrap zu erstellen, probieren Sie die folgenden Schritte aus:

Schritt 1: Erstellen Sie eine HTML -Datei

Erstellen Sie zunächst eine HTML -Datei und nennen Sie sie mit der Erweiterung “.html”. In unserem Fall haben wir die HTML -Datei benannt "Index.html”. Fügen Sie nach dem Erstellen die erforderlichen Elemente hinzu, wie unten gezeigt:

Schritt 2: Fügen Sie den erforderlichen Bootstrap CSS -Link hinzu

Fügen Sie nun die erforderliche Bootstrap -CSS -Verbindung in das Element "" hinzu:

Nehmen wir an, wir verwenden Bootstrap 4. Besuchen Sie also die offizielle Website der Bootstrap 4 und kopieren.

Bootstrap CSS

Schritt 3: Fügen Sie die erforderlichen Skript -Tags hinzu

Es gibt mehrere Komponenten von Bootstrap, die JavaScript ordnungsgemäß funktionieren müssen. Insbesondere brauchen sie JQuery-, Popper- und JavaScript -Plugins. Verwenden Sie die “, um sie zu Ihrem Projekt hinzuzufügen, die“"Tags, kurz vor dem"”Schließetag:

Wichtiger Hinweis: Die Abfolge der "" -Tags darf nicht geändert werden, wie z. B. JQuery muss zuerst platziert werden, JS und dritter Popper.JS.

Bonuspipp

Es gibt eine einfache und einfachste Möglichkeit, Bootstrap in Ihr Projekt aufzunehmen. Die Starter -Vorlage kann von der offiziellen Website der Bootstrap -Website kopiert und in Ihr Projekt eingefügt werden.

Schritt 4: HTML -Elemente hinzufügen

Wir haben die erforderlichen Bootstrap -Links erfolgreich hinzugefügt. Fügen Sie nun die HTML -Elemente hinzu, um eine Webseite zu erstellen. Zum Beispiel im laufenden Beispiel die HTML -Elemente in die “hinzufügen“Element wie unten erwähnt:

• • Zuerst fügen Sie eine "hinzu"Element, um einen Bereich für die Elemente zu erstellen. Zuweisen Sie es die “Text-Center" Und "BG-Info" Klassen.
  • In der "" fügen Sie die "hinzu"

    "Tag mit der Klasse"Textwarnung”Um eine Überschrift in gelber Farbe anzugeben.

  • Fügen Sie dann einige Textinhalte mit der „Nutzung der“ bei

    " Element.

Html

LinuxHint

LinuxHint bietet die besten Artikel und Videos für Bildungszwecke!

Die im oben genannten Beispiel verwendeten Bootstrap-Klassen werden unten erklärt:

• • Der "Text-CenterDas Klassenzentrum richtet den Text aus.
  • “BG-Info”Fügt eine blaue Farbe hinzu.
  • “BG-Warnung”Wendet die gelbe Farbe auf den Text an.

Speichern Sie den Code und starten Sie ihn im Browser. Die Webseite sieht folgendermaßen aus:

So können Sie Ihrem Projekt Bootstrap hinzufügen.

Abschluss

So fügen Sie Ihrem Projekt Bootstrap hinzu. “Laden Sie die Bootstrap herunter" oder "Verwenden Sie Bootstrap CDN”Sind die beiden Optionen. Um Bootstrap herunterzuladen, besuchen Sie die offizielle Website und folgen Sie dem Leitfaden. Wenn Sie sie nicht herunterladen möchten, verwenden Sie sie über CDN über CDN. Fügen Sie dazu den CSS -Link in die "hinzu"Abschnitt der HTML und fügen Sie die Tags von JQuery, JavaScript und Popper hinzu.JS in der Nähe der Schließung “" Schild. Geben Sie dann die HTML -Elemente nach dem Start -Tag der “ein" Element. In diesem Artikel wurde erklärt, wie man einem Projekt mit einem Beispiel Bootstrap hinzufügt.