Bootstrap -Umgebungseinrichtung
Die Installation von Bootstrap ist sehr einfach. In diesem Kapitel wird erklärt, wie Sie Bootstrap herunterladen und installieren, die Dateistruktur von Bootstrap besprochen und die Verwendung anhand eines Beispiels demonstriert.
Bootstrap herunterladen
Sie könnenhttp://getbootstrap.com/die neueste Version von Bootstrap hier herunterladen. Wenn Sie auf diesen Link klicken, sehen Sie die folgende Webseite:
Sie sehen zwei Schaltflächen:
- Download Bootstrap: Bootstrap herunterladen. Klicken Sie auf diese Schaltfläche, um die vorkompilierten, komprimierten Versionen von Bootstrap-CSS, JavaScript und Fonts herunterzuladen. Sie enthält keine Dokumentation oder Original-Quellcodedateien.
- Download Source: Quellcode herunterladen. Klicken Sie auf diese Schaltfläche, um den neuesten LESS- und JavaScript-Quellcode von Bootstrap direkt zu erhalten.
Wenn Sie unkompilierten Quellcode verwenden, müssen Sie die LESS-Dateien kompilieren, um wiederverwendbare CSS-Dateien zu generieren. Für das Kompilieren von LESS-Dateien unterstützt Bootstrap offiziell nurRecess, den CSS-Präprozessor von Twitter, der aufless.jsbasiert.
Zum besseren Verständnis und zur einfacheren Verwendung werden wir in diesem Tutorial die vorkompilierte Version von Bootstrap verwenden.
Da die Dateien kompiliert und komprimiert sind, müssen Sie diese separaten Dateien nicht jedes Mal bei der eigenständigen Funktionsentwicklung einbinden.
Zum Zeitpunkt des Verfassens dieses Tutorials wurde die neueste Version (Bootstrap 3) verwendet.
Dateistruktur
Vorkompiliertes Bootstrap
Wenn Sie die kompilierte Version von Bootstrap herunterladen und die ZIP-Datei entpacken, sehen Sie die folgende Datei- und Verzeichnisstruktur:
Wie in der Abbildung oben gezeigt, sehen Sie das kompilierte CSS und JS (bootstrap.*) sowie das kompilierte und minifizierte CSS und JS (bootstrap.min.*). Es enthält auch die Glyphicons-Schriftarten, die ein optionales Bootstrap-Theme darstellen.
Bootstrap-Quellcode
Wenn Sie den Bootstrap-Quellcode herunterladen, sieht die Dateistruktur wie folgt aus:
- less/、js/undfonts/Die Dateien unter diesen Pfaden sind der Quellcode für das Bootstrap-CSS, -JS und die Icon-Schriftarten.
- dist/Der Ordner enthält die Dateien und Ordner, die im obigen Abschnitt zum vorkompilierten Download aufgelistet sind.
- docs-assets/、examples/und alle*.html-Dateien sind die Bootstrap-Dokumentation.
HTML-Vorlage
Eine grundlegende HTML-Vorlage mit Bootstrap wird unten gezeigt:
Beispiel
Hier sehen Sie, dass die Dateienjquery.js、bootstrap.min.jsundbootstrap.min.csseingebunden sind, um eine normale HTML-Datei in eine Vorlage zu verwandeln, die Bootstrap verwendet.
Details zu jedem Element im obigen Codeausschnitt werden im KapitelBootstrap CSS-Übersichtausführlich erläutert.
Beispiel
Versuchen wir nun, Bootstrap zu verwenden, um „Hallo Welt!“ auszugeben:
Staticfile CDN-Empfehlung
Für inländische Benutzer werden die Bibliotheken auf dem Staticfile CDN empfohlen:
Zusätzlich können Sie auch die folgenden CDN-Dienste verwenden:
- Empfohlen für den internationalen Einsatz:https://cdnjs.com/