Bootstrap5 Installation und Verwendung

Wir können Bootstrap5 auf die folgenden zwei Arten installieren:

Verwenden Sie das Bootstrap5 CDN.
Von der offiziellen Websitegetbootstrap.comBootstrap 5 herunterladen.

Bootstrap 5 CDN

CDNJS：

Bootstrap5 CDN

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.1.3/css/bootstrap.min.css">  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/2.11.2/umd/popper.min.js"></script>  <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.1.3/js/bootstrap.min.js"></script>

Hinweis:popper.min.js wird verwendet, um Popovers, Tooltips und Dropdown-Menüs einzurichten.

bootstrap.bundle.js (unkomprimiert) oder bootstrap.bundle.min.js (komprimiert) enthält gebündelte Plugins wie popper.min.js und andere Abhängigkeitsskripte, sodass wir auch direkt den folgenden Code verwenden können:

Beispiel

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.1.3/css/bootstrap.min.css">


<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.1.3/js/bootstrap.bundle.min.js"></script>

Bootstrap5 CDN（jsDelivr）

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" crossorigin="anonymous">  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" crossorigin="anonymous"></script>

Bootstrap5 CDN（Staticfile）

<link rel="stylesheet" href="https://cdn.staticfile.net/twitter-bootstrap/5.1.1/css/bootstrap.min.css">


<script src="https://cdn.staticfile.net/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js"></script>

Zusätzlich können Sie auch die folgenden CDN-Dienste verwenden:

Empfohlen in China 1:https://cdn.bytedance.com/
Empfohlen in China 2:https://www.staticfile.net/
International empfohlen:https://cdnjs.com/

Bootstrap 5 herunterladen

Sie können die offizielle Websitehttps://getbootstrap.com/besuchen, um das Bootstrap5-Ressourcenpaket herunterzuladen.

Hinweis:Darüber hinaus können Sie es auch über Paketverwaltungswerkzeuge wie npm, yarn, gem, composer usw. installieren:
npm install bootstrap
yarn add bootstrap
gem install bootstrap -v 5.1.1
composer require twbs/bootstrap:5.1.1

Erstellen Sie Ihre erste Bootstrap-5-Seite

1. HTML5-Doctype hinzufügen

Bootstrap erfordert die Verwendung eines HTML5-Doctypes, daher müssen Sie die HTML5-Doctype-Deklaration hinzufügen.

Der HTML5-Doctype wird am Anfang des Dokuments zusammen mit der entsprechenden Zeichenkodierung deklariert:

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> </head> </html>

Mobile First

Um mit Bootstrap entwickelte Websites mobilfreundlich zu machen und eine korrekte Darstellung sowie Touch-Zooming sicherzustellen, müssen Sie das Viewport-Meta-Tag im Head der Webseite hinzufügen, wie unten gezeigt:

<meta name="viewport" content="width=device-width, initial-scale=1">

width=device-widthGibt an, dass die Breite der Breite des Gerätebildschirms entspricht.

initial-scale=1Gibt den anfänglichen Zoomfaktor an.

Container-Klassen

Bootstrap 5 erfordert ein Container-Element, um den Inhalt der Website zu umschließen.

Wir können die folgenden beiden Container-Klassen verwenden:

Die Klasse .container wird für einen Container mit fester Breite verwendet, der responsive Layouts unterstützt.
Die Klasse .container-fluid wird für einen Container mit 100 % Breite verwendet, der den gesamten Viewport umfasst.

Zwei Bootstrap-5-Seiten

Bootstrap5 .container Beispiel

<div class="container"> <h1>Meine erste Bootstrap-Seite</h1> <p>Dies ist etwas Text.</p> </div>

Selbst ausprobieren »

Das folgende Beispiel zeigt einen Container, der den gesamten Viewport umfasst.

Bootstrap5 .container-fluid Beispiel

<div class="container-fluid"> <h1>Meine erste Bootstrap-Seite</h1> <p>Verwendet .container-fluid, 100% Breite, einen Container, der den gesamten Viewport einnimmt.</p> </div>