Am 14. September 2017 haben wir eine überarbeitete Fassung unserer Datenschutzrichtlinie veröffentlicht. Wenn Sie video2brain.com weiterhin nutzen, erklären Sie sich mit diesem überarbeiteten Dokument einverstanden. Bitte lesen Sie es deshalb sorgfältig durch.

WordPress-Themes mit Bootstrap

Erste HTML-Datei erstellen

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Dieses Video zeigt den Download von Bootstrap sowie die Erstellung der ersten kleinen HTML-Datei innerhalb der Programmierumgebung.
03:07

Transkript

Fangen wir mal an, mit Bootstrap zu arbeiten. also machen wir ein Hallo Welt Beispiel. Ich bin auf getbootstrap.com, und als allererstes springt mich hier schon dieser Button Download Bootstrap an, ich klicke mal drauf und habe hier gleich mehrere Möglichkeiten: den Source code, Sass, oder eben die Standart Variante Download Bootstrap, das machen wir auch, und ich lade das hier mal herunter, geht auch relativ schnell. In Ordner anzeigen. Das ist eine ZIP-Datei und die entpacke ich hier mal direkt nebendran hin. Jawohl, jawohl, jawohl. Immer wieder bestätigen, und dann habe ich hier einen Ordner, und der hat drei Unterordner: CSS, da sind die entsprechenden CSS-Dateien drinnen, die wir später verwenden werden. In Fonts, da haben wir eine Schriftart eingebunden, mit der wir später einzelne kleine Icons machen können. Und in js, da haben wir eben JavaScript drin. Diese Datei nehme ich mal in die Zwischenablage und jetzt gehe ich hier mal auf meinen Server nach xamp phtdocs, ich habe mir einen Ordner aufgemacht, der heißt Bootstrap und hier füge ich jetzt das Ganze einfach ein und damit das Ganze ordentlich heißt, nenn ich das Ganze auch nochmal Bootstrap, da bin ich frei in meiner Namenswahl. Was wir da noch brauchen ist natürlich eine HTML-Datei, die das Ganze dann auch verwendet, ich klicke hier nochmal zurück. Da habe ich hier oben einen Button, "Getting started", und wenn ich jetzt hier nochmal runtergehe, dann habe ich hier auch ein Basic Template, eine normale HTML-Datei und die werde ich jetzt hier bei mir auch mal anlegen. Ich gehe in mein Verzeichnis Bootstrap, in das obere Verzeichnis und lege hier eine neue Datei an. Diese Datei nenne ich index.html. Jawohl. Ich möchte den Dateinamen ändern. Editiere das mal mit Notepad und füge hier das alles nochmal genau ein. Und jetzt muss ich nur dafür sorgen, dass diese Pfad-Angaben hier richtig sind. Ich habe ja gesagt, mein ganzes Bootstrap ist im Unterverzeichnis Bootstrap, also muss ich das hier auch angeben. Normalerweise wird hier jQuery automatisch von Google APIs eingebunden, aber Sie können hier natürlich Ihr eigenes jQuery auch verlinken, wenn Sie das haben, ansonsten nehmen Sie einfach dieses Standardverfahren hier. Das war es. Ich speichere das Ganze ab und jetzt schaue ich mir das mal in meinem Browser an. Ich kann entweder diese HTML-Datei direkt aufrufen oder, weil ich in meinem Fall hier auch einen lokalen Web Server installiert habe, kann ich auch über 127.0.0.1 draufgehen. Jawohl, ich habe ein "Hello, world!" Gehe mal in den DOM Inspector hinein und schaue, ob es irgendwelche Fehlermeldungen gibt, ob irgendetwas nicht eingebunden wird. Nein, das ist nicht der Fall, also ich habe es geschafft, ein "Hello, world!" zu starten und da ist noch nichts Besonderes dabei, aber wir werden jetzt nach und nach mit Hilfe von Bootstrap diese Seite uns schön gestalten.

WordPress-Themes mit Bootstrap

Verwirklichen Sie Ihre eigenen Designvorstellungen bei Ihrem Webauftritt und sehen Sie, wie Sie WordPress-Seiten über Plug-ins und Themes wie z.B. Bootstrap erweitern können.

2 Std. 33 min (39 Videos)
Derzeit sind keine Feedbacks vorhanden...
 

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!