English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
Die Installation von Bootstrap ist sehr einfach. Dieses Kapitel erläutert, wie man Bootstrap herunterlädt und installiert, die Dateistruktur von Bootstrap diskutiert und seine Verwendung durch einen Beispielanwendung demonstriert.
Sie können Bootstrap von https://getbootstrap.com/Dokumente/3.4/ Bootstrap herunterladen. Wenn Sie auf diesen Link klicken, sehen Sie die folgende Webseite:
Klicken Sie auf den "Download Bootstrap"-Link, um in die folgende Seite zu gelangen:
Sie sehen zwei Buttons:
Download Bootstrap：Bootstrap herunterladen. Klicken Sie auf diesen Button, um die vorkompilierte und komprimierte Version von Bootstrap CSS, JavaScript und Schriftarten herunterzuladen. Dokumente und ursprüngliche Quellcode-Dateien sind nicht enthalten.
Download Source：Quellcodes herunterladen. Klicken Sie auf diesen Button, um die neuesten Bootstrap LESS- und JavaScript-Quellcodes direkt von der Quelle zu erhalten.
Wenn Sie unkomprimierte Quellcodes verwenden, müssen Sie LESS-Dateien kompilieren, um wiederverwendbare CSS-Dateien zu generieren. Bootstrap unterstützt offiziell die Kompilierung von LESS-Dateien nur Recess， das auf Twitter basiert less.js CSS-Hinweise.
Um ein besseres Verständnis und eine einfachere Verwendung zu gewährleisten, verwenden wir in diesem Handbuch die vorkompilierte Version von Bootstrap.
Da die Dateien kompiliert und komprimiert sind, müssen Sie diese separaten Dateien nicht jedes Mal einschließen, wenn Sie eine unabhängige Funktionalität entwickeln.
Bei der Erstellung dieses Handbuchs wurde die neueste Version (Bootstrap 3）。
Wenn Sie die kompilierte Version von Bootstrap heruntergeladen haben, entpacken Sie das ZIP-Archiv, und Sie werden die folgenden Dateien sehen:/Verzeichnisstruktur:
Wie im obigen Bild gezeigt, können Sie die kompilierten CSS und JS (bootstrap.*）。Darüber hinaus enthält es kompilierte und komprimierte CSS und JS (bootstrap.min.*）。Es enthält auch die Glyphicons-Schriftarten, die ein optionales Bootstrap-Thema sind.
Wenn Sie die Bootstrap-Quellcodes heruntergeladen haben, sieht die Datei-Struktur wie folgt aus:
less/jquery.jsjs/ bootstrap.min.js Schriftarten/ Unter den Dateien im Verzeichnis befinden sich die Quellcodes von Bootstrap CSS, JS und Symbol-Schriftarten.
dist/ Verzeichnisse enthalten die Dateien und Verzeichnisse, die in der oben genannten vorcompilierten Download-Datei aufgelistet sind.
Dokumente-Eigenschaften/jquery.jsBeispiele/ und alle *.html Das Dokument ist die Bootstrap-Dokumentation.
Ein grundlegendes HTML-Template, das Bootstrap verwendet, sieht wie folgt aus:
<!DOCTYPE html> <html> <head>/<title>Bootstrap-Template< title>-<meta name="viewport" content="width=device-width, initial1scale= <!-- .0"> --"> Neueste Bootstrap-Kern-CSS-Datei//Bootstrap einbinden/bootstrap/3.3.7/<link href="https:/css <!-- maxcdn.bootstrapcdn.com5 HTML8 Shiv und Respond.js werden verwendet, um IE5HTML unterstützen --"> <!-- Elemente und Medienabfragen// Hinweis: Wenn Sie über file: --"> <!--Respond.js-Datei einbinden, da diese Datei keine Wirkung erzielt 9[if lt IE <script src="https://shiv.js"></oss.maxcdn.com/shiv5]>/3.7respond.js/shiv5html/script> <script src="https://shiv.js"></oss.maxcdn.com/libs/1.3respond.js/.0/script> respond.min.js"><--"> body>/<![endif] <head> Beispiel1<h/>Hallo, Welt!<1"> <!-- <body> --"> <script src="https://jQuery (Bootstrap benötigt jQuery für JavaScript-Plugins)/code.jquery.com/script> <!-- jquery.js">< --"> Einschließlich aller kompilierten Plugins/bootstrap.min.js"></script> body>/<script src="js body>/<
html> Hier können Sie sehen, dass es enthältjquery.js、 bootstrap.min.js und bootstrap.min.css
Datei, die ein reguläres HTML-Dokument in ein Bootstrap-Template verwandelt. Details zu jedem Element im obigen Codeabschnitt finden Sie in Bootstrap CSS Übersicht
Online-Beispiel
Beispiel1<h/>Hallo, Welt!<1">
Staticfile CDN Empfehlung
<!-- Inländische Empfehlung: Bibliotheken von Staticfile CDN verwenden: --"> Neueste Bootstrap-Kern-CSS-Datei//cdn.staticfile.org/twitter-bootstrap/3.3.7/<link href="https:/css <!-- bootstrap.min.css" rel="stylesheet"> --"> <script src="https://cdn.staticfile.org/jQuery-Datei. Stellen Sie sicher, dass Sie jQuery.min.js vor bootstrap.min.js einbinden/2.1.1/jquery.min.js"></script> <!-- Neueste Bootstrap-Kern-JavaScript-Datei --"> <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
Außerdem können Sie auch die folgenden CDN-Dienste verwenden:
International empfohlen:https://cdnjs.com/