Einführung

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

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 rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">

JS

Viele unserer Komponenten erfordern die Verwendung von JavaScript, um zu funktionieren. Insbesondere benötigen sie jQuery , Popper und unsere eigenen JavaScript-Plugins. Wir verwenden den schlanken Build von jQuery , aber die Vollversion wird ebenfalls unterstützt.

Platzieren Sie eines der folgenden <script>s am Ende Ihrer Seiten, direkt vor dem schließenden </body>Tag, um sie zu aktivieren. jQuery muss zuerst kommen, dann Popper und dann unsere JavaScript-Plugins.

Bündeln

Schließen Sie jedes Bootstrap-JavaScript-Plugin in eines unserer beiden Bundles ein. Sowohl bootstrap.bundle.jsals bootstrap.bundle.min.jsauch enthalten Popper für unsere Tooltips und Popovers, aber nicht jQuery . Fügen Sie zuerst jQuery und dann ein Bootstrap-JavaScript-Bundle hinzu. Weitere Informationen darüber, was in Bootstrap enthalten ist, finden Sie in unserem Inhaltsbereich .

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" 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/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-+sLIOodYLS7CIrQpBjl+C7nPvqq+FbNUBDunl/OZv93DB7Ln/533i8e/mZXLi/P+" crossorigin="anonymous"></script>

Komponenten

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

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
Scrollspy für Scrollverhalten und Navigationsaktualisierungen
Tooltips und Popovers zum Anzeigen und Positionieren (benötigt auch Popper )

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, shrink-to-fit=no">

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

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

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

    <!-- Option 1: jQuery and Bootstrap Bundle (includes Popper) -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>

    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-+sLIOodYLS7CIrQpBjl+C7nPvqq+FbNUBDunl/OZv93DB7Ln/533i8e/mZXLi/P+" crossorigin="anonymous"></script>
    -->
  </body>
</html>

Das ist alles, was Sie für die allgemeinen Seitenanforderungen benötigen. Besuchen Sie 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, shrink-to-fit=no">

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. Dies stellt sicher padding, dass die endgültige berechnete Breite eines Elements nicht beeinflusst wird, aber es kann Probleme mit Software von Drittanbietern wie Google Maps und der benutzerdefinierten Suchmaschine von Google verursachen.

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-4).
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.

CSPs und eingebettete SVGs

Mehrere Bootstrap-Komponenten enthalten eingebettete SVGs in unserem CSS, um Komponenten konsistent und einfach über Browser und Geräte hinweg zu gestalten. Für Organisationen mit strengeren CSP - Konfigurationen haben wir alle Instanzen unserer eingebetteten SVGs (die alle über angewendet werden background-image) dokumentiert, damit Sie Ihre Optionen gründlicher überprüfen können.

Schließen-Schaltfläche (wird in Warnungen und Modalen verwendet)
Benutzerdefinierte Kontrollkästchen und Optionsfelder
Schalter bilden
Formularvalidierungssymbole
Benutzerdefinierte Auswahlmenüs
Karussellsteuerung
Schaltflächen zum Umschalten der Navigationsleiste

Basierend auf Community-Konversationen umfassen einige Optionen, um dies in Ihrer eigenen Codebasis anzugehen, das Ersetzen der URLs durch lokal gehostete Assets, das Entfernen der Bilder und die Verwendung von Inline-Bildern (nicht in allen Komponenten möglich) und das Ändern Ihres CSP. Wir empfehlen, Ihre eigenen Sicherheitsrichtlinien sorgfältig zu überprüfen und gegebenenfalls den besten Weg nach vorne zu finden.