Bootstrap - Umgebungs-Setup

Es ist sehr einfach, Bootstrap einzurichten und zu verwenden. In diesem Kapitel wird erläutert, wie Sie Bootstrap herunterladen und einrichten. Wir werden auch die Bootstrap-Dateistruktur diskutieren und ihre Verwendung anhand eines Beispiels demonstrieren.

Laden Sie Bootstrap herunter

Sie können die neueste Version von Bootstrap von herunterladen https://getbootstrap.com/. Wenn Sie auf diesen Link klicken, wird ein Bildschirm wie folgt angezeigt:

Hier sehen Sie zwei Schaltflächen -

Download Bootstrap- Wenn Sie darauf klicken, können Sie die vorkompilierten und minimierten Versionen von Bootstrap CSS, JavaScript und Schriftarten herunterladen. Es sind keine Dokumentation oder Original-Quellcodedateien enthalten.
Download Source - Wenn Sie darauf klicken, erhalten Sie den neuesten Bootstrap LESS- und JavaScript-Quellcode direkt von GitHub.

Wenn Sie mit dem nicht kompilierten Quellcode von Bootstrap arbeiten, müssen Sie die WENIGER-Dateien kompilieren, um verwendbare CSS-Dateien zu erstellen. Zum Kompilieren von WENIGER Dateien in CSS unterstützt Bootstrap offiziell nur Recess , das CSS- Hinter von Twitter, das auf less.js basiert .

Zum besseren Verständnis und zur Vereinfachung der Verwendung verwenden wir im gesamten Lernprogramm eine vorkompilierte Version von Bootstrap. Da die Dateien eingehalten und minimiert werden, müssen Sie sich nicht jedes Mal darum kümmern, separate Dateien für die einzelnen Funktionen einzuschließen. Zum Zeitpunkt des Schreibens dieses Tutorials wurde die neueste Version (Bootstrap 3) heruntergeladen.

Dateistruktur

Vorkompilierter Bootstrap

Sobald die kompilierte Version von Bootstrap heruntergeladen wurde, extrahieren Sie die ZIP-Datei und Sie sehen die folgende Datei- / Verzeichnisstruktur:

Wie Sie sehen können, gibt es kompiliertes CSS und JS (Bootstrap. *) Sowie kompiliertes und minimiertes CSS und JS (bootstrap.min. *). Schriftarten aus Glyphicons sind enthalten, da dies das optionale Bootstrap-Design ist.

Bootstrap-Quellcode

Wenn Sie den Bootstrap-Quellcode heruntergeladen haben, lautet die Dateistruktur wie folgt:

Die Dateien unter less / , js / und fonts / sind der Quellcode für Bootstrap CSS-, JS- bzw. Symbolschriftarten .
Der Ordner dist / enthält alles, was oben im Abschnitt zum vorkompilierten Download aufgeführt ist.
docs-assets / , examples / und alle * .html- Dateien sind Bootstrap-Dokumentationen.

HTML-Vorlage

Eine grundlegende HTML-Vorlage mit Bootstrap würde folgendermaßen aussehen:

<!DOCTYPE html>
<html>
   
   <head>
      <title>Bootstrap 101 Template</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1.0">
      
      <!-- Bootstrap -->
      <link href = "css/bootstrap.min.css" rel = "stylesheet">
      
      <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
      <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
      
      <!--[if lt IE 9]>
      <script src = "https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
      <script src = "https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
      <![endif]-->
      
   </head>
   
   <body>
      <h1>Hello, world!</h1>

      <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
      <script src = "https://code.jquery.com/jquery.js"></script>
      
      <!-- Include all compiled plugins (below), or include individual files as needed -->
      <script src = "js/bootstrap.min.js"></script>
      
   </body>
</html>

Hier sehen Sie die jquery.js, bootstrap.min.js und bootstrap.min.cssDateien, die enthalten sind, um eine normale HTM-Datei für die Bootstrapped-Vorlage zu erstellen. Stellen Sie einfach sicher, dass Sie die jQuery-Bibliothek einschließen, bevor Sie die Bootstrap-Bibliothek einschließen.

Weitere Details zu den einzelnen Elementen in diesem obigen Code werden im Kapitel Bootstrap-CSS-Übersicht erläutert .

Beispiel

Versuchen wir nun ein Beispiel mit der obigen Vorlage. Probieren Sie das folgende Beispiel mit der Live-Demo-Option aus, die in der oberen rechten Ecke des folgenden Beispielcodefelds auf unserer Website verfügbar ist:

<h1>Hello, world!</h1>

In allen folgenden Kapiteln haben wir Dummy-Text von der Site verwendet https://www.lipsum.com/.