Die Bootstrap -Installation ist sehr einfach. Dieser Artikel ist eine Zusammenfassung meines Studiums, die für zukünftige Anfragen und Lernen geeignet ist. Gleichzeitig hoffe ich, Ihnen zu helfen.
1. Download Bootstrap
Sie können die neueste Version von Bootstrap von http://getbootstrap.com/ herunterladen. Wenn Sie auf diesen Link klicken, sehen Sie eine solche Webseite:
Sie werden zwei Tasten sehen:
Bootstrap herunterladen: Bootstrap herunterladen. Klicken Sie auf diese Schaltfläche und Sie können vorkompilierte komprimierte Versionen von Bootstrap CSS, JavaScript und Schriftarten herunterladen. Dokumente und ursprüngliche Quellcode -Dateien sind nicht enthalten.
Quelle herunterladen: Laden Sie den Quellcode herunter. Klicken Sie auf diese Schaltfläche und Sie können den neuesten Bootstrap weniger und den JavaScript -Quellcode direkt von abrufen.
Wenn Sie einen nicht kompilierten Quellcode verwenden, müssen Sie die weniger Datei zusammenstellen, um wiederverwendbare CSS -Dateien zu generieren. Für das Kompilieren weniger Dateien unterstützt Bootstrap nur die Pause, die Twitter-basierte CSS-Eingabeaufforderung von Twitter ist.
Für ein besseres Verständnis und die einfachere Verwendung werden wir in diesem Tutorial eine vorkompilierte Version von Bootstrap verwenden.
Da Dateien kompiliert und komprimiert werden, müssen Sie diese unabhängigen Dateien nicht jedes Mal in die unabhängige Funktionsentwicklung einbeziehen.
Diese Studie ist die neueste Version (Bootstrap 3).
2. Dateistruktur
1. Vorkompilierter Bootstrap
Wenn Sie die kompilierte Version von Bootstrap herunterladen und die ZIP -Datei entpacken, wird die folgende Datei-/Verzeichnisstruktur angezeigt:
Wie im obigen Bild gezeigt, sehen Sie die kompilierten CSS und JS (Bootstrap.*) Sowie die kompilierten kompilierten CSS und JS (Bootstrap.Min.*). Es enthält auch die Schrift der Glyphicons, ein optionales Bootstrap -Thema.
2. Bootstrap -Quellcode
Wenn Sie den Bootstrap -Quellcode heruntergeladen haben, sieht die Dateistruktur so aus:
Die Dateien unter weniger/, js/ und Schriftarten/ sind die Quellcodes von Bootstrap CSS, JS bzw. Symbolschriften.
Der DIST/ Ordner enthält die Dateien und Ordner, die im vorverkompilierten Download -Abschnitt oben aufgeführt sind.
DOCS-Assets/, Beispiele/und alle *.html-Dateien sind Bootstrap-Dokumente.
3. HTML -Vorlage
Eine grundlegende HTML -Vorlage mit Bootstrap sieht so aus:
<! DocType html> <html> <kopf> <titels> Bootstrap-Vorlage </title> <meta name = "viewPort" content = "width = Gerätebreite, initial-scale = 1.0"> <!-Einführung von Bootstrap-> <link href = "http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css" rel = "stylesheet"> <! Die Datei kann keinen Effekt haben-> <!-[Wenn LT IE 9]> <script src = "https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"> </script> <script src = "https://oss.maxcdn.com/libs/resprespect.js/1.3.0/respect.min src = "https://code.jquery.com/jquery.js"> </script> <!
Hier sehen Sie jQuery.js, bootstrap.min.js und bootstrap.min.css -Dateien, mit denen eine reguläre HTML -Datei eine Vorlage erstellt wird, die Bootstrap verwendet.
Iv. Beispiele
Versuchen wir jetzt, "Hallo, Welt! "Zugeben, auszugeben. Verwenden von Bootstrap:
<! DocType html> <html> <kopf> <titels> Versuchen Sie die Bootstrap -Instanz online </title> <link href = "http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css" rel = "stylesheet"> < src = "http://apps.bdimg.com/libs/jquery/2.0.0/jquery.min.js"> </script> <script src = "http://apps.bdimg.com/libs/bootstrap/3.0/js/bootStrap.min.jin.jn.js.js" Welt! </h1> </body> </html>
<!-New Bootstrap Core CSS-Datei-> <link href = "http://apps.bdimg.com/libs/bootstrap/3.0/css/bootstrap.min src = "http://apps.bdimg.com/libs/bootstrap/3.30/css/bootstrap-theme.min.css"> </script> <!-JQuery-Datei. Stellen Sie sicher src = "http://apps.bdimg.com/libs/bootstrap/3.30/js/bootstrap.min.js"> </script>
Wenn Sie weiterhin ausführlich lernen möchten, können Sie hier klicken, um Ihnen zu lernen und Ihnen zwei aufregende Themen anzuhängen: Bootstrap -Lern -Tutorial Bootstrap Practical Tutorial
Das obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, es wird für das Lernen aller hilfreich sein und die Bootstrap -Installationsumgebung korrekt erstellen.