Zum Hauptinhalt springen Zur Dokumentennavigation springen
Check
in English

Beginnen Sie mit Bootstrap

Bootstrap ist ein leistungsstarkes, funktionsreiches Frontend-Toolkit. Erstellen Sie alles – vom Prototyp bis zur Produktion – in wenigen Minuten.

Auf dieser Seite

Schnellstart

Beginnen Sie, indem Sie Bootstrap's produktionsreifes CSS und JavaScript über CDN einbinden, ohne dass Build-Schritte erforderlich sind. Sehen Sie es in der Praxis mit dieser Bootstrap CodePen-Demo .


  1. Erstellen Sie eine neue index.htmlDatei in Ihrem Projektstammverzeichnis. Schließen Sie <meta name="viewport">auch das Tag ein, damit es auf Mobilgeräten richtig reagiert.

    <!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
  </head>
  <body>
    <h1>Hello, world!</h1>
  </body>
</html>

  2. Schließen Sie CSS und JS von Bootstrap ein. Platzieren Sie das <link>Tag <head>für unser CSS und das <script>Tag für unser JavaScript-Bundle (einschließlich Popper zum Positionieren von Dropdowns, Poppers und Tooltips) vor dem schließenden </body>. Erfahren Sie mehr über unsere CDN-Links .

    <!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">
  </head>
  <body>
    <h1>Hello, world!</h1>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a+RTT6rIHI7NnikvbZlHgTPOOmMi466C8" crossorigin="anonymous"></script>
  </body>
</html>

    Sie können Popper und unser JS auch separat einbinden. Wenn Sie nicht vorhaben, Dropdowns, Popovers oder QuickInfos zu verwenden, sparen Sie einige Kilobyte, indem Sie Popper nicht einbeziehen.

    <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-7VPbUDkoPSGFnVtYi0QogXtr74QeVeeIs99Qfg5YCF+TidwNdjvaKZX19NZ/e6oz" crossorigin="anonymous"></script>

  3. Hallo Welt! Öffnen Sie die Seite in Ihrem bevorzugten Browser, um Ihre Bootstrapped-Seite anzuzeigen. Jetzt können Sie mit dem Bauen mit Bootstrap beginnen, indem Sie Ihr eigenes Layout erstellen , Dutzende von Komponenten hinzufügen und unsere offiziellen Beispiele verwenden .

Als Referenz sind hier unsere primären CDN-Links.

Beschreibung URL
CSS https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css
JS https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js

Sie können das CDN auch verwenden, um alle unsere zusätzlichen Builds abzurufen, die auf der Inhaltsseite aufgeführt sind .

Nächste Schritte

JS-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 unserer Collapse- und Offcanvas-Plugins, um responsives Verhalten zu implementieren
  • Navs mit dem Tab-Plugin zum Umschalten von Inhaltsbereichen
  • Offcanvases zum Anzeigen, Positionieren und Scrollverhalten
  • Scrollspy für Scrollverhalten und Navigationsaktualisierungen
  • Toasts zum Anzeigen und Verwerfen
  • Tooltips und Popovers zum Anzeigen und Positionieren (benötigt auch Popper )

Wichtige globale

Bootstrap verwendet eine Handvoll wichtiger globaler Stile und Einstellungen, die alle fast ausschließlich auf die Normalisierung von browserübergreifenden Stilen ausgerichtet sind. Tauchen wir ein.

HTML5-Dokumenttyp

Bootstrap erfordert die Verwendung des HTML5-Dokumenttyps. Ohne sie sehen Sie ein unkonventionelles und unvollständiges Styling.

<!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 ein korrektes Rendern und Zoomen per Touch für alle Geräte 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 Schnellstart 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ültig berechnete Breite eines Elements nicht beeinflusst wird, aber es kann zu Problemen mit einiger Software von Drittanbietern 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 eigenwilligere 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 .
  • Fragen und erkunden Sie unsere GitHub-Diskussionen .
  • Chatten Sie mit anderen Bootstrappern im IRC. Auf dem irc.libera.chatServer, im #bootstrapChannel.
  • Implementierungshilfe finden Sie unter Stack Overflow (getaggt 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.