Source

Einführung

Beginnen Sie mit Bootstrap, dem weltweit beliebtesten Framework zum Erstellen reaktionsschneller, Mobile-First-Websites, mit jsDelivr und einer Vorlagenstartseite.

Schnellstart

Möchten Sie schnell Bootstrap zu Ihrem Projekt hinzufügen? Verwenden Sie jsDelivr, das von den Leuten bei jsDelivr kostenlos zur Verfügung gestellt wird. 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-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

JS

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

Wir verwenden den schlanken Build von jQuery , aber die Vollversion wird ebenfalls unterstützt.

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

Neugierig, welche Komponenten ausdrücklich jQuery, unser JS und Popper.js erfordern? 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.

Unsere bootstrap.bundle.jsund bootstrap.bundle.min.jsbeinhalten Popper , aber nicht jQuery . Weitere Informationen darüber, was in Bootstrap enthalten ist, finden Sie in unserem Inhaltsbereich .

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 (erfordert auch Popper.js )
  • Modale für Anzeige, Positionierung und Bildlaufverhalten
  • Navbar zum Erweitern unseres Collapse-Plug-ins, um reaktionsfähiges Verhalten zu implementieren
  • Tooltips und Popovers zum Anzeigen und Positionieren (benötigt auch Popper.js )
  • 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, shrink-to-fit=no">

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

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

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" 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ültig berechnete Breite eines Elements nicht beeinflusst wird, aber es kann zu Problemen mit 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.

  • Folgen Sie @getbootstrap auf Twitter .
  • Lesen und abonnieren Sie den offiziellen Bootstrap-Blog .
  • Chatten Sie mit anderen Bootstrappern im IRC. Auf dem irc.freenode.netServer, 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.