TechBlogSD - Alles für WordPress und WEB-Entwicklung
WEB- und WordPress-Anleitungen, Neuigkeiten, Rezensionen zu Themes und Plugins

Bootstrap 5 Starter-Vorlage

103

Bootstrap 5 wurde als letzte öffentliche Version veröffentlicht. Dies bedeutet im Wesentlichen, dass Sie die Migration von der vorherigen Version vorbereiten und die neue Version zum Erstellen neuer Websites verwenden sollten. Unabhängig davon, ob Sie eine neue Site migrieren oder eine neue Site starten, sollten Sie sich zuerst mit dem Nötigsten oder der Starter-Vorlage vertraut machen. In diesem Tutorial erklären wir mit einfachen Beispielen, wie Sie eine Bootstrap 5- Starter-Basisvorlage zum Starten Ihrer Projekte erstellen .

Verwenden der Bootstrap 5-Starter-Vorlage

  1. Herunterladen von Bootstrap-Quelldateien
  2. Hosten von Bootstrap 5-Dateien auf Ihrem Server
  3. Verwenden der Bootstrap 5-Starter-Vorlage mit CDN-Links
  4. Anpassen der Bootstrap 5-Komponenten
  5. Startervorlage weiterführen
  6. Verwenden der gebündelten Skriptdatei in Version 5
  7. Einschließlich Bootstrap-Symbole
  8. Verwenden von statischen Site-Generatoren

1 Herunterladen von Bootstrap 5 Quelldateien

Als Endbenutzer gibt es zwei Möglichkeiten, Bootstrap-CSS- und JavaScript-Dateien zu verwenden. Zum einen laden Sie die vorkompilierten Dateien herunter und binden sie in Ihre Projekte ein und zum anderen nutzen Sie die CDN-Links.

Weitere Informationen zum Abrufen von Bootstrap-Dateien finden Sie im Artikel Erste Schritte mit Bootstrap.

2 Verwenden von Bootstrap-Dateien auf Ihrem eigenen Server

Sie können die vorkompilierten CSS- und JavaScript-Dateien aus dem GitHub-Repository herunterladen. Die ZIP-Datei sollte CSS- und JS-Ordner enthalten. Unten sind die Dateien, die in CSS-Ordnern verfügbar sind:

Bootstrap 5 Starter-Vorlage

Bootstrap 5 Dateien

In der heruntergeladenen Quelldatei sind mehrere CSS-Versionen verfügbar:

  • Standard- und minimierte CSS-Dateien, die Sie mit jedem Projekt verwenden können
  • Dienstprogramme-Datei
  • Nur Rasterversion
  • Nur Version neu starten

Auf einem Produktionsserver können Sie die minifizierte Version „bootstrap.min.css” für alle Ihre Anforderungen verwenden. Die Quellzuordnungsdateien helfen bei der Zuordnung zwischen der Quelle und den vorkompilierten minifizierten Versionen. Sie müssen keinen Neustart, Grid und Kartendateien für die regelmäßige Verwendung auf den Websites.

Hinweis: Wenn Sie auf Ihrer Site nur die Datei „bootstrap.min.css” verwenden, zeigen einige Browser wie Safari in der Entwicklerkonsole einen Fehler oder eine Warnung an, dass die Quellzuordnungsdatei fehlt. Um den Fehler zu beheben, öffnen Sie die Bootstrap-CSS-Datei und entfernen Sie die letzte Zeile „/ # sourceMappingURL=bootstrap.min.css.map /”.

Ähnlich wie bei CSS-Dateien enthält der JS-Ordner „bootstrap.js” und „bootstrap.bundle.js”. Die Datei „bootstrap.js” enthält kein Popper-Skript, aber die Bundle-Version enthält das Popper-Skript. Bei früheren Bootstrap 4-Versionen müssen Sie jQuery separat einbinden, damit die JavaScript-Komponenten ordnungsgemäß funktionieren. Bootstrap 5 benötigt jedoch kein jQuery als Teil des Frameworks und ist so konzipiert, dass es ohne jQuery funktioniert.

Bootstrap 5 Starter-Vorlage

Bootstrap 5 JS-Dateien

Mit dem obigen Verständnis haben die Quelldateien die folgende Struktur mit vielen CSS- und JS-Dateien.

bootstrap/ ├── css/ │ ├── bootstrap-grid.css │ ├── bootstrap-grid.css.map │ ├── bootstrap-grid.min.css │ ├── bootstrap-grid.min.css.map │ ├── bootstrap-grid.rtl.css │ ├── bootstrap-grid.rtl.css.map │ ├── bootstrap-grid.rtl.min.css │ ├── bootstrap-grid.rtl.min.css.map │ ├── bootstrap-reboot.css │ ├── bootstrap-reboot.css.map │ ├── bootstrap-reboot.min.css │ ├── bootstrap-reboot.min.css.map │ ├── bootstrap-reboot.rtl.css │ ├── bootstrap-reboot.rtl.css.map │ ├── bootstrap-reboot.rtl.min.css │ ├── bootstrap-reboot.rtl.min.css.map │ ├── bootstrap-utilities.css │ ├── bootstrap-utilities.css.map │ ├── bootstrap-utilities.min.css │ ├── bootstrap-utilities.min.css.map │ ├── bootstrap-utilities.rtl.css │ ├── bootstrap-utilities.rtl.css.map │ ├── bootstrap-utilities.rtl.min.css │ ├── bootstrap-utilities.rtl.min.css.map │ ├── bootstrap.css │ ├── bootstrap.css.map │ ├── bootstrap.min.css │ ├── bootstrap.min.css.map │ ├── bootstrap.rtl.css │ ├── bootstrap.rtl.css.map │ ├── bootstrap.rtl.min.css │ └── bootstrap.rtl.min.css.map └── js/ ├── bootstrap.bundle.js ├── bootstrap.bundle.js.map ├── bootstrap.bundle.min.js ├── bootstrap.bundle.min.js.map ├── bootstrap.esm.js ├── bootstrap.esm.js.map ├── bootstrap.esm.min.js ├── bootstrap.esm.min.js.map ├── bootstrap.js ├── bootstrap.js.map ├── bootstrap.min.js └── bootstrap.min.js.map

Die grundlegende Startervorlage sollte wie folgt aussehen, wenn Sie die obigen Dateien auf Ihrem Server hosten:

<!DOCTYPE html> <html lang="en"> <head> <!-- Meta Tags for Bootstrap 5 --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- Bootstrap 5 CSS --> <link rel="stylesheet" href="assets/css/bootstrap.min.css"> </head> <body> Add Your Content Here <!-- Bootstrap 5 Scripts --> <script src="assets/js/bootstrap.bundle.min.js"></script> </body> </html>

Denken Sie daran, wenn Sie die mitgelieferte JS-Datei nicht verwenden, müssen Sie separate JS- und Popper-Skriptdateien einschließen. Wenn Sie es richtig bemerkt haben, gibt es viele zusätzliche Tags und Skripte in der Startervorlage.

  • Bootstrap verwendet HTML5 DOCTYPE für die Vorlagen. Stellen Sie daher sicher, dass Sie <!DOCTYPE HTML> am Anfang Ihres HTML-Templates einschließen, um unerwartetes Verhalten zu vermeiden.
  • Sie müssen das Viewport-Meta-Tag verwenden, um die Reaktionsfähigkeit der Vorlage basierend auf dem Rendering-Gerät sicherzustellen.
  • Falls Sie jQuery hinzufügen, stellen Sie sicher, dass Sie vor den Skripten „popper.min.js” und „bootstrap.min.js” hinzufügen.
  • Sie können das Popper-Skript auch von der Popper-Site herunterladen und in den  Ordner „assets/js/” Ihrer Site hochladen.
  • Denken Sie daran, dass das Popper-Skript für die ordnungsgemäße Funktion von Bootstrap-Plugins unerlässlich ist. Popper ist eine JavaScript-Bibliothek, die hauptsächlich zum Positionieren von schwebenden Elementen wie der Tooltip-Komponente in Bootstrap verwendet wird.

Beachten Sie, dass wir „assets/css/bootstrap.min.css” und „assets/js/bootstrap.bundle.min.js” als Dateipfade verwendet haben. Es ist eine gute Angewohnheit, alle CSS- und JS-Dateien in separaten Ordnern aufzubewahren, damit sie leicht zu verwalten sind. Das bedeutet im Wesentlichen, dass Sie auf Ihrem Server entsprechende Ordner erstellen und die Bootstrap-CSS- und JS-Dateien manuell hochladen sollten. Bewahren Sie die Bilder auch in einem separaten Ordner „images” und in HTML-Dateien im Stammverzeichnis Ihrer Site auf. Die gesamte Struktur sollte also auf Ihrem Server in etwa wie folgt aussehen:

Bootstrap 5 Starter-Vorlage

Bootstrap 5 Theme-Dateistruktur

Der „Themenordner” im obigen Beispiel ist der Stammordner Ihrer Site, der Ihre Domäne oder Unterdomäne oder Ihr Unterverzeichnis sein sollte.

3 Verwenden der Starter-Vorlage mit CDN

Das Hosten aller benötigten Dateien auf Ihrem Server ist der richtige Weg, wirkt sich jedoch auf die Ladegeschwindigkeit und die Hosting-Kapazität aus. Wir empfehlen daher, CDN-Links für CSS- und JS-Dateien zu verwenden, anstatt sie auf Ihrem eigenen Server zu hosten. Dies gewährleistet die schnelle Bereitstellung dieser statischen Dateien und verbessert die Ladegeschwindigkeit der Seite. Unten ist eine Bootstrap 5-Starter-Vorlage mit CDN-Links für CSS und Skripte. Sie können einfach Inhalte im Hauptteil hinzufügen, um mit der Erstellung Ihrer Website oder Ihres Themas zu beginnen. Früher stammte die Bootstrap 4-Version vom Bootstrap CDN-Netzwerk und die neueste Version 5 stammt von jsDelivr.

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous"> </head> <body> <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js" integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT" crossorigin="anonymous"></script> </body> </html>

4 Anpassen von Bootstrap-Quelldateien

Die Verwendung der vollständigen Vorlagendateien ist nicht in allen Fällen erforderlich. Wenn Sie beispielsweise nur Bootstrap-Schaltflächen verwenden möchten, können Sie nur die entsprechenden Stile für die Schaltflächen verwenden. Bootstrap bietet einen Customizer für die Vorgängerversion 3.4, in dem Sie die benötigten Komponenten auswählen und die vorkompilierten Dateien generieren können.

Bootstrap 5 Starter-Vorlage

Anpassen von Bootstrap-Dateien

Derzeit ist kein detaillierter Customizer für die Bootstrap 5-Version verfügbar. Sie können jedoch die offizielle Dokumentationsseite besuchen, um weitere Informationen zum Anpassen von Bootstrap 5 zu erhalten.

5 Die Starter-Vorlage weiterführen

Nun, da Sie Ihre endgültige Startervorlage entweder auf Ihrem Server gehostet haben oder CDN-Links verwenden. Der nächste Schritt besteht darin, Inhalte hinzuzufügen und mit der Erstellung Ihrer Website zu beginnen. Unten ist ein einfaches Beispiel, in dem wir verschiedene kontextbezogene Schaltflächen mit den standardmäßigen Bootstrap-Schaltflächenklassen erstellt haben.

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous"> </head> <body> <button type="button" class="btn btn-primary">Primary</button> <button type="button" class="btn btn-secondary">Secondary</button> <button type="button" class="btn btn-success">Success</button> <button type="button" class="btn btn-info">Info</button> <button type="button" class="btn btn-warning">Warning</button> <button type="button" class="btn btn-danger">Danger</button> <button type="button" class="btn btn-link">Link</button> <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js" integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT" crossorigin="anonymous"></script> </body> </html>

Die Ausgabe sollte im Browser wie folgt aussehen:

Bootstrap 5 Starter-Vorlage

Idealerweise müssen keine jQuery-, Popper- und Bootstrap-Skriptdateien verwendet werden, um einfache Schaltflächen zu erstellen, die über CSS gesteuert werden. Wir haben das Beispiel der Vollständigkeit halber für das Starter-Template gezeigt. Auch wenn Sie weitere Komponenten hinzufügen, sollte die gebündelte Skriptdatei enthalten sein.

6 Verwenden der gebündelten Bootstrap-Skriptversion

Wie oben erläutert, verfügt Bootstrap 5 über eine gebündelte Skriptdatei, die „bootstrap.min.js” und „popper.min.js” kombiniert. Wenn Sie also die gebündelte Version verwenden möchten, ändern Sie die Startervorlage wie unten mit der Datei „bootstrap.bundle.min.js”.

<!DOCTYPE html> <html lang="en"> <head> <!-- Meta Tags for Bootstrap 5 --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- Bootstrap 5 CSS --> <link rel="stylesheet" href="assets/css/bootstrap.min.css"> </head> <body> Add Your Content Here <!-- Bootstrap 5 Scripts --> <script src="assets/js/bootstrap.bundle.min.js"></script> </body> </html>

7 Einbinden von Bootstrap-Symbolen in die Vorlage

Bootstrap Version 5 enthält über 1300 kostenlose SVG-Symbole, die Sie problemlos in Ihre Websites einbinden können. Es hilft, die Abhängigkeit von externen Symbolen wie Font Awesome-Symbolen zu beseitigen. Es gibt mehrere Möglichkeiten, die Symbole in Ihr Starter-Template aufzunehmen, und die beste Option ist die Verwendung von CDN-CSS wie unten beschrieben. Wir haben ein Beispiel-Icon im Body-Bereich mit der Alert-Komponente gezeigt. Die vollständige Liste der CSS-Klassen für die Icons erhalten Sie hier.

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous"> </head> <body> <div class="alert alert-info" role="alert"> <i class="bi-star"></i> This is an info alert and <a href="#" class="alert-link">here is a link with info color</a>. </div> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script> </body> </html>

8 Verwenden von statischen Site-Generatoren

Es ist einfach, eine statische Website mit der Bootstrap-Startervorlage zu erstellen, aber das Ändern mehrerer statischer Dateien auf einer größeren Website nimmt viel Zeit in Anspruch. Eine einzelne Webseite enthält verschiedene Abschnitte wie Kopfzeile, Hauptinhalt, Fußzeile und Seitenleiste. Alle Abschnitte mit Ausnahme des Hauptinhalts werden auf der gesamten Site mit denselben Informationen verwendet. Statische Generatoren verwenden das Konzept der Teiltöne, indem sie die Basisvorlagen für jeden der Abschnitte wie Kopfzeile, Fußzeile und Seitenleiste haben. Schließlich werden alle diese Basisvorlagen mit dem Hauptinhalt auf jeder Seite separat zusammengestellt.

Wann immer eine Änderung an Kopf-, Fuß- und Seitenleiste erforderlich ist, können Sie die Basisvorlagen ändern, anstatt jede einzelne Seite einzeln zu ändern. Wenn die Site fertig ist, können Sie die HTML-, CSS- und JavaScript-Dateien generieren, um sie auf Ihren Server hochzuladen. Einer der beliebtesten Generatoren für statische Sites ist Harp.js, den Sie auf Ihrem lokalen Computer installieren können, um das Starter-Template weiterzuentwickeln. Denken Sie daran, dass Harp.js Node.js/NPM als Abhängigkeit benötigt, daher sollten Sie diese Komponenten vorher installiert haben. Alternativ können Sie Generator-Apps wie Mobirise verwenden, um das Bootstrap-Framework zu nutzen, ohne die Codierung verstehen zu müssen.


Bootstrap 5 lernen (Index )


Aufnahmequelle: www.webnots.com

Diese Website verwendet Cookies, um Ihre Erfahrung zu verbessern. Wir gehen davon aus, dass Sie damit einverstanden sind, Sie können sich jedoch abmelden, wenn Sie möchten. Annehmen Weiterlesen