So installieren, konfigurieren und verwenden Sie Bootstrap
Öffnen Sie Ihren Webbrowser und gehen Sie zur offiziellen Website von Bootstrap: https://getbootstrap.com/docs/3.3/getting-started/
Scrollen Sie auf der Seite der Website nach unten zum Abschnitt „Bootstrap herunterladen“.
In diesem Abschnitt sehen Sie eine blaue Schaltfläche mit der Aufschrift „Bootstrap herunterladen“. Klicken Sie auf diese Schaltfläche.
Als Nächstes wird ein Popup-Fenster angezeigt, in dem Sie gefragt werden, ob Sie eine vorkompilierte Version oder Quellcodedatei herunterladen möchten. Wählen Sie je nach Bedarf den Download der vorkompilierten Version oder Quellcodedatei und klicken Sie auf die entsprechende Schaltfläche.
Der Download startet automatisch. Abhängig von Ihren Browsereinstellungen wird möglicherweise ein Dialogfeld angezeigt, in dem Sie gefragt werden, wo die Datei gespeichert werden soll. Wählen Sie einen Speicherort aus, an dem Sie die Datei speichern möchten, und klicken Sie auf „Speichern“.
Warten Sie, bis der Download abgeschlossen ist.
Sobald der Download abgeschlossen ist, erhalten Sie eine komprimierte Datei (normalerweise im ZIP-Format). Nach dem Entpacken der Datei erhalten Sie die Dateien und Ordner für Bootstrap 3.3.7.
Bootstrap CDN
Die Leute von jsDelivr bieten großzügig CDN-Unterstützung für Bootstraps CSS und JavaScript. Verwenden Sie einfach diese Bootstrapping-CDN-Links.
Installation mit Bower
Sie können Bower auch verwenden, um Bootstraps Less, CSS, JavaScript und Schriftarten zu installieren und zu verwalten:
$ Bower Install Bootstrap
Installation mit npm
Sie können Bootstrap auch mit npm installieren:
$ npm install bootstrap@3
require(‘bootstrap’) lädt alle jQuery-Plug-ins von Bootstrap auf das jQuery-Objekt. Das Modul selbst exportiert nichts. Sie können das jQuery-Plugin von Bootstrap manuell separat laden, indem Sie eine Datei im obersten Verzeichnis des Pakets laden. bootstrap/js/*.js
Bootstrap enthält einige zusätzliche Metadaten unter dem Schlüssel: package.json
less – Pfad zur Haupt-Bootstrap-Less-Quelldatei
-Stil – Pfad zum vorkompilierten, nicht minimierten Bootstrap-CSS mit Standardeinstellungen (keine Anpassung)
Mit dem Editor installieren
Sie können Composer auch verwenden, um Bootstraps Less, CSS, JavaScript und Schriftarten zu installieren und zu verwalten:
$ Composer erfordert twbs/bootstrap
weniger/weniger/weniger erfordert automatisches Präfixieren
Bootstrap verwendet Autoprefixer, um Präfixe von CSS-Anbietern zu verarbeiten. Wenn Sie Bootstrap aus seinem Less/Sass-Quellcode kompilieren und nicht unser Gruntfile verwenden, müssen Sie Autoprefixer selbst in Ihren Build-Prozess integrieren. Wenn Sie vorkompiliertes Bootstrap oder unser Gruntfile verwenden, müssen Sie sich darüber keine Sorgen machen, da Autoprefixer bereits in unserem Gruntfile integriert ist.
Was ist im Lieferumfang enthalten
Bootstrap steht in zwei Formen zum Download zur Verfügung. Dort finden Sie die folgenden Verzeichnisse und Dateien, in denen gemeinsame Ressourcen logisch gruppiert sind und kompilierte und minimierte Varianten bereitgestellt werden.
jquery erforderlich
Bitte beachten Sie, dass alle JavaScript-Plugins jQuery enthalten müssen, wie in der Starter-Vorlage gezeigt. Bitte überprüfen Sie unsere Datei „bower.json“, um zu sehen, welche Versionen von jQuery unterstützt werden.
Vorkompilierter Bootloader
Entpacken Sie nach dem Herunterladen den komprimierten Ordner, um die Struktur des (kompilierten) Bootloaders anzuzeigen. Sie sehen etwa Folgendes:
bootstrap/
├── css/
│ ├── bootstrap.css
│ ├── Bootstrap.css.map
│ ├── Bootstrap.min.css
│ ├── Bootstrap.min.css.map
│ ├── Bootstrap-Theme.css
│ ├── Bootstrap-Theme.css.map
│ ├── Bootstrap-Theme.min. css
│ └── bootstrap-theme.min.css.map
├── js/
│ ├── bootstrap.js
│ └── bootstrap.min.js
└── Schriftarten/
├── glyphicons-halflings -regular.eot
├── glyphicons-halflings-regular.svg
├── glyphicons-halflings-regular.ttf
├── glyphicons-halflings-regular.woff
└── glyphicons-halflings-regular.woff2
Dies ist die grundlegendste Form von Bootstrap: vorkompilierte Datei , kann schnell in fast jedem Webprojekt verwendet werden. Wir bieten kompiliertes CSS und JS () sowie kompiliertes und minimiertes CSS und JS () an. CSS SourceMap() ist in den Entwicklertools einiger Browser verfügbar. Enthält Schriftarten von Glyphicon und ein optionales Bootstrap-Design. bootstrap.*bootstrap.min.bootstrap..map
Bootstrap-Quellcode
Der Download des Bootstrap-Quellcodes umfasst vorkompiliertes CSS, JavaScript und Schriftart-Assets sowie Quellcode Less, JavaScript und Dokumentation. Genauer gesagt umfasst es Folgendes und mehr:
bootstrap/
├── less/
├── js/
├── Fonts/< /span> , bzw. wir Quelle Code für CSS, JS und Symbolschriftarten. Dieser Ordner enthält alles, was im Abschnitt „vorkompilierte Downloads“ oben aufgeführt ist. Dieser Ordner enthält unsere Dokumentation und den Quellcode für die Bootstrap-Nutzung. Darüber hinaus bieten alle anderen enthaltenen Dateien Unterstützung für das Paket, Lizenzinformationen und die Entwicklung. less/js/fonts/dist/docs/examples/ └── Beispiele/ └── Dokumente/ │ └── Schriftarten/ │ ├── js/ │ ├── css/
├── dist/
CSS und JavaScript kompilieren
Bootstrap verwendet Grunt als Build-System und bietet eine bequeme Möglichkeit, das Framework zu verwenden. So kompilieren wir Code, führen Tests durch usw.
Grunt installieren
Um Grunt zu installieren, müssen Sie zuerst node.js (einschließlich npm) herunterladen und installieren. npm steht für Node Packaged Modules und ist eine Möglichkeit, Entwicklungsabhängigkeiten mit Node.js zu verwalten.
Dann über die Befehlszeile:
Zur globalen Installation verwenden. grunt-clinpm install -g grunt-cli
Navigieren Sie zum Stammverzeichnis und führen Sie aus. npm schaut sich die Datei package.json an und installiert automatisch die dort aufgeführten erforderlichen lokalen Abhängigkeiten. /bootstrap/npm install
Sobald Sie fertig sind, können Sie die verschiedenen Grunt-Befehle ausführen, die über die Befehlszeile verfügbar sind.
Verfügbare grunt-Befehle
grunt dist (kompilieren Sie einfach CSS und JavaScript)
Erzeugen Sie das Verzeichnis mit kompilierten und minimierten CSS- und JavaScript-Dateien neu. Als Bootstrap-Benutzer ist dies normalerweise der gewünschte Befehl. /dist/
grunt watch
Überwacht weniger Quelldateien und kompiliert sie automatisch neu in CSS, wenn Änderungen gespeichert werden.
grunt test
Führt JSHint aus und führt QUnit-Tests kopflos in PhantomJS aus.
grunt docs (Dokument-Assets erstellen und testen)
Erstellen und testen Sie CSS, JavaScript und andere Assets, die beim lokalen Ausführen der Dokumente verwendet werden. bundle exec jekyll dienen
grunt (erstellt absolut alles und führt Tests aus)
Kompiliert und minimiert CSS und JavaScript, erstellt Dokumentationsseiten, führt HTML5-Validatoren anhand der Dokumentation aus, generiert Customizer-Assets neu und mehr. Jekyll wird gebraucht. Wird normalerweise nur benötigt, wenn Sie Bootstrap selbst hacken.
Fehlerbehebung
Wenn beim Installieren von Abhängigkeiten oder beim Ausführen von Grunt-Befehlen Probleme auftreten, löschen Sie zunächst das von npm generierte Verzeichnis. Führen Sie dann erneut aus. /node_modules/npm install
Grundlegende Vorlage
Beginnen Sie mit dieser grundlegenden HTML-Vorlage oder ändern Sie diese Beispiele. Wir hoffen, dass Sie unsere Vorlagen und Beispiele individuell anpassen und an Ihre Bedürfnisse anpassen.
Kopieren Sie den folgenden HTML-Code, um mit der minimalen Bootstrap-Dokumentation zu beginnen.
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for 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://cdn.jsdelivr.net/npm/[email protected]/dist/html5shiv.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dest/respond.min.js"></script>
<![endif]-->
Hallo Welt!
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>