Einführung

Beginnen Sie mit Bootstrap, dem weltweit beliebtesten Framework zum Erstellen reaktionsschneller, auf Mobilgeräte ausgerichteter Websites, mit jsDelivr und einer Startseitenvorlage.

Auf dieser Seite

Schnellstart

Möchten Sie schnell Bootstrap zu Ihrem Projekt hinzufügen? Verwenden Sie jsDelivr, ein kostenloses Open-Source-CDN. Verwenden Sie einen Paketmanager oder müssen Sie die Quelldateien herunterladen? Gehen Sie zur Download-Seite .

CSS

Kopieren Sie das Stylesheet und fügen Sie es <link>in Ihr <head>vor allen anderen Stylesheets ein, um unser CSS zu laden.

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

JS

Viele unserer Komponenten erfordern die Verwendung von JavaScript, um zu funktionieren. Insbesondere benötigen sie unsere eigenen JavaScript-Plugins und Popper . Platzieren Sie eines der folgenden <script>s am Ende Ihrer Seiten, direkt vor dem schließenden </body>Tag, um sie zu aktivieren.

Bündeln

Schließen Sie jedes Bootstrap-JavaScript-Plug-in und jede Abhängigkeit mit einem unserer beiden Bundles ein. Sowohl bootstrap.bundle.jsals bootstrap.bundle.min.jsauch enthalten Popper für unsere Tooltips und Popovers. Weitere Informationen darüber, was in Bootstrap enthalten ist, finden Sie in unserem Inhaltsbereich .

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

Getrennt

Wenn Sie sich für die separate Skriptlösung entscheiden, muss Popper zuerst kommen (wenn Sie Tooltips oder Popover verwenden) und dann unsere JavaScript-Plugins.

<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>

Module

Wenn Sie verwenden <script type="module">, lesen Sie bitte unseren Abschnitt zur Verwendung von Bootstrap als Modul .

Komponenten

Neugierig, welche Komponenten explizit unser JavaScript und Popper benötigen? Klicken Sie unten auf den Link Komponenten anzeigen. Wenn Sie sich bezüglich der allgemeinen Seitenstruktur nicht sicher sind, lesen Sie weiter, um ein Beispiel für eine Seitenvorlage zu erhalten.

Komponenten anzeigen, die JavaScript erfordern

Benachrichtigungen zur Entlassung
Schaltflächen zum Umschalten von Zuständen und Checkbox/Radio-Funktionalität
Karussell für alle Folienverhalten, Bedienelemente und Anzeigen
Minimieren, um die Sichtbarkeit von Inhalten umzuschalten
Dropdowns zum Anzeigen und Positionieren (benötigt auch Popper )
Modale für Anzeige, Positionierung und Bildlaufverhalten
Navbar zum Erweitern unseres Collapse-Plug-ins, um reaktionsfähiges Verhalten zu implementieren
Offcanvases zum Anzeigen, Positionieren und Scrollverhalten
Toasts zum Anzeigen und Verwerfen
Tooltips und Popovers zum Anzeigen und Positionieren (benötigt auch Popper )
Scrollspy für Scrollverhalten und Navigationsaktualisierungen

Starter-Vorlage

Stellen Sie sicher, dass Ihre Seiten mit den neuesten Design- und Entwicklungsstandards eingerichtet sind. Das bedeutet die Verwendung eines HTML5-Doctypes und das Einfügen eines Viewport-Meta-Tags für das richtige Reaktionsverhalten. Setzen Sie alles zusammen und Ihre Seiten sollten so aussehen:

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- Optional JavaScript; choose one of the two! -->

    <!-- Option 1: Bootstrap Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
    -->
  </body>
</html>

Besuchen Sie für die nächsten Schritte die Layout -Dokumentation oder unsere offiziellen Beispiele , um mit dem Layout der Inhalte und Komponenten Ihrer Website zu beginnen.

Wichtige globale

Bootstrap verwendet eine Handvoll wichtiger globaler Stile und Einstellungen, die Sie bei der Verwendung beachten müssen, die alle fast ausschließlich auf die Normalisierung von Cross-Browser-Stilen ausgerichtet sind. Tauchen wir ein.

HTML5-Dokumenttyp

Bootstrap erfordert die Verwendung des HTML5-Dokumenttyps. Ohne sie sehen Sie ein unkonventionelles, unvollständiges Styling, aber das Einbeziehen sollte keine nennenswerten Schluckauf verursachen.

<!doctype html>
<html lang="en">
  ...
</html>

Responsives Meta-Tag

Bootstrap wird zuerst mobil entwickelt , eine Strategie, bei der wir den Code zuerst für mobile Geräte optimieren und dann die Komponenten nach Bedarf mithilfe von CSS-Medienabfragen skalieren. Um für alle Geräte ein korrektes Rendering und Touch-Zoom sicherzustellen, fügen Sie das responsive Viewport-Meta-Tag zu Ihrer <head>.

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

Ein Beispiel dafür können Sie im Starter-Template sehen .

Box-Größe

Für eine einfachere Größenanpassung in CSS ändern wir den globalen box-sizingWert von content-boxzu border-box. Dadurch wird sichergestellt padding, dass die endgültig berechnete Breite eines Elements nicht beeinflusst wird, aber es kann zu Problemen mit einigen Drittanbieter-Programmen wie Google Maps und der benutzerdefinierten Suchmaschine von Google kommen.

In den seltenen Fällen, in denen Sie es überschreiben müssen, verwenden Sie Folgendes:

.selector-for-some-widget {
  box-sizing: content-box;
}

Mit dem obigen Snippet erben alle verschachtelten Elemente – einschließlich generierter Inhalte über ::beforeund – die dafür angegebene .::afterbox-sizing.selector-for-some-widget

Erfahren Sie mehr über das Box-Modell und die Größe unter CSS Tricks .

Neustart

Für ein verbessertes Cross-Browser-Rendering verwenden wir Reboot , um Inkonsistenzen zwischen Browsern und Geräten zu korrigieren und gleichzeitig etwas eigensinnigere Rücksetzungen für gängige HTML-Elemente bereitzustellen.

Gemeinschaft

Bleiben Sie über die Entwicklung von Bootstrap auf dem Laufenden und erreichen Sie die Community mit diesen hilfreichen Ressourcen.

Lesen und abonnieren Sie den offiziellen Bootstrap-Blog .
Chatten Sie mit anderen Bootstrappern im IRC. Auf dem irc.libera.chatServer, im #bootstrapKanal.
Implementierungshilfe finden Sie unter Stack Overflow (gekennzeichnet mit bootstrap-5).
Entwickler sollten das Schlüsselwort bootstrapfür Pakete verwenden, die die Funktionalität von Bootstrap ändern oder erweitern, wenn sie über npm oder ähnliche Bereitstellungsmechanismen verteilt werden, um eine maximale Auffindbarkeit zu erreichen.

Sie können auch @getbootstrap auf Twitter folgen, um den neuesten Klatsch und tolle Musikvideos zu erhalten.