In diesem wikiHow zeigen wir dir, wie du die Bootstrap-Dateien auf deinen Computer herunterlädst und sie mit deinen HTML-Texten verknüpfst, um Bootstrap-Elemente in deinem Code zu verwenden. Nachdem Sie die Bootstrap-Dateien heruntergeladen und verknüpft haben, können Sie alle Stylesheet- und JavaScript-Elemente von Bootstrap in Ihrem Webdesign verwenden.
Schritte
Schritt 1. Öffnen Sie die Bootstrap-Website in Ihrem Internetbrowser
Tippe https://getbootstrap.com in die Adressleiste ein und drücke ↵ Enter oder ⏎ Return auf deiner Tastatur.
Schritt 2. Klicken Sie auf die Schaltfläche Herunterladen
Dies öffnet die Seite "Download".
Schritt 3. Klicken Sie unten auf den Download-Button "Compiled CSS and JS
" Dadurch werden die vollständigen Bootstrap-Dateien als ZIP-Archiv auf Ihren Computer heruntergeladen.
Wenn Sie dazu aufgefordert werden, wählen Sie einen Speicherort für die Bootstrap-ZIP aus
Schritt 4. Extrahieren Sie die Dateien aus dem ZIP-Archiv
Suchen Sie die gerade heruntergeladene ZIP-Datei und doppelklicken Sie darauf, um alle darin enthaltenen Dateien in denselben Ordner zu extrahieren.
- Dadurch werden zwei Ordner mit dem Namen " CSS" und " js."
- Wenn Ihre Entpacker-App die Dateien nicht automatisch extrahiert, lesen Sie diesen Artikel, um alle Möglichkeiten zum Exportieren eines ZIP-Archivs zu erfahren.
Schritt 5. Verschieben Sie die extrahierten Ordner in denselben Ordner wie Ihre Website-HTML-Dateien
Öffnen Sie den Ordner, der alle HTML-Dateien Ihrer Website enthält, und ziehen Sie die " CSS" und " js"-Ordner hier, um sie in denselben Ordner wie Ihre Website-Dokumente zu verschieben.
Sie können jetzt die Dateien mit Ihren HTML-Dateien verknüpfen und Bootstrap in Ihrem Code verwenden
Schritt 6. Klicken Sie mit der rechten Maustaste auf die HTML-Datei, die Sie mit Bootstrap verwenden möchten
Sie können Bootstrap nur in einer Ihrer HTML-Dateien oder in allen verwenden.
Schritt 7. Bewegen Sie den Mauszeiger über Öffnen mit im Kontextmenü
Ein Untermenü mit kompatiblen Apps wird angezeigt.
Schritt 8. Wählen Sie Ihr Texteditorprogramm aus
Dadurch wird die ausgewählte HTML-Datei in Ihrem Texteditor geöffnet.
Sie können einen einfachen Texteditor wie Notizblock oder TextBearbeiten sowie einen dedizierten Code-Editor wie Atom (https://atom.io) oder Koda (https://panic.com/coda).
Schritt 9. Fügen Sie die Bootstrap-Links zum Header Ihrer HTML-Datei hinzu
Bevor Sie Bootstrap-Code in Ihrem HTML-Code verwenden, müssen Sie die folgenden Zeilen in die Kopfzeile Ihres Codes eingeben oder einfügen:
Wenn Sie einige der anderen Dateien aus den Ordnern css und js verknüpfen und verwenden möchten, fügen Sie einfach neue Zeilen in den Header ein und ersetzen Sie die Teile css/bootstrap.css und js/bootstrap.js durch die Namen der gewünschten Dateien verlinken
Schritt 10. Überprüfen Sie die Platzierung Ihrer Bootstrap-Links im Code
Im Header des HTML sollten sich beide Zeilen zwischen den Zeilen und der Zeile befinden.
- Nachdem Sie diese Zeilen zum Header hinzugefügt haben, können Sie damit beginnen, Bootstrap-Elemente in dieser HTML-Datei zu verwenden.
- Eine vollständige Liste aller Bootstrap-Elemente finden Sie unter https://getbootstrap.com/docs/4.3/getting-started/introduction. Klicken Sie einfach auf eine beliebige Kategorie wie Layout oder Komponenten im linken Menü.
- Sobald Sie Bootstrap installiert haben, können Sie jeden Code von hier aus in Ihren eigenen Code einfügen oder kopieren/einfügen.
