Bootstrap 3 Grundkurs

In Dreamweaver einbinden

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Auch Dreamweaver arbeitet sehr gut mit den Einstellungen von Bootstrap zusammen. Die notwendigen Ordner sind schnell eingebunden.
04:42

Transkript

Falls Sie zu den Menschen gehören, die gerne mit Dreamweaver arbeiten, wird es Sie freuen zu hören, dass das Einbinden von Bootstrap in Dreamweaver überhaupt kein Thema ist. Wir machen es wie immer, wenn wir mit Dreamweaver arbeiten, wir legen als Erstes eine neue Site an, und diese Site werde ich nennen Boot2 und dann gehe ich meinen lokalen Ordner suchen, der liegt aber in meinem Fall auf meiner lokalen Festplatte in meinem lokalen Web Server, in dem htdocs. Und da habe ich schon einen Ordner angelegt. Einen Ordner, der heißt jetzt Boot2 und in diesen Ordner hineinkopiert habe ich bereits diese 3 Ordner, die in der Distribution von Bootstrap mitgeliefert werden. Ich sage Ordner auswählen und sage Speichern. Und hier haben Sie dann schon diese 3 Grundordner. Was uns jetzt noch fehlt ist die Index-Datei, also eine Index-html und die werden wir uns hier erstellen. Jetzt wird automatisch schon ein html 5 Dokument generiert. Wir holen uns aber die Test-Seite von Bootstrap selbst. Wenn wir auf die Bootstrap Seite gehen, und auf die Getting started Seite, dann finden Sie unter Basic template eine ganz rudimentäre Datei, und mit Steuerung C kopiere ich sie mir und überschreibe damit hier diesen Eintrag. Mit Steuerung V füge ich den wieder ein und speichere die Datei unter der Bezeichnung Index.hmtl direkt in meinem Boot2 Ordner. Sage Speichern. Und wir werden uns das ganze jetzt gleich einmal anschauen. Wenn wir hier uns das in der Vorschau anzeigen lassen, was ich jetzt gerne mal herzeige, abgesehen davon, dass es funktioniert hat und wir hier Anhand der Schrift schon sehen können, dass die CSS Datei wirklich mit eingebunden ist, merken Sie hier oben an der Adresse, dass diese Seite jetzt gerade nicht von einem Web Browser ausgeführt wird. Wenn ich die Seite von einem Web Browser ausführen lassen möchte, dann muss ich hier vorne localhost eingeben. Localhost, wie Sie sicher wissen, ist der lokale Web Browser, falls Sie einen lokalen Web Browser am Laufen haben. Ok. Hello, world!. Die Seite wird dargestellt. Wenn Sie vorhaben mit der CSS Datei mehr zu tun, als einfach nur vorhandenes einzubinden, würde ich Ihnen nur raten, dass Sie diesen Link hier anpassen. Weil, es handelt sich hier, so wie wir es eingebunden haben, um die verkleinerte Form. Um die minimalisierte Form der CSS Datei und die ist schwer lesbar. Wenn Sie sich's anschauen wollen, hier ist sie. Da hat man keine große Lust, dass man etwas verändert drin, und deswegen schlage ich vor, dass Sie für das Arbeiten, solange Sie daran arbeiten, auf die normale Bootstrap CSS Datei zurückgreifen. Wir speichern das ganze wieder, Datei. Speichern. Gehen nochmal in unseren Firefox. Mit F5 lassen wir uns das ganze neu anzeigen. Und es passt noch immer gut. Schauen uns das ganze auch noch im Chrome an. Wir sagen wieder localhost. Nur eben nicht Boot1 sondern Boot2, und auch hier passt es ganz wunderbar und wir untersuchen das Element und sehen, dass tatsächlich, offensichtlich alles so eingebunden wird wie das sein sollte. Nämlich hier mit der CSS Bootstrap. Das war die ganze Zauberei. Und von nun an können Sie ganz gemütlich im Dreamweaver Ihr Ding weiterentwickeln, Ihr Projekt weiterentwickeln und auf die Vorteile und Vorzüge von Bootstrap zugreifen.

Bootstrap 3 Grundkurs

Lernen Sie, wie Sie über Bootstrap 3 mit dem Gridsystem - einem ausgeklügelten Spaltensystem – beliebige Gestaltungsmöglichkeiten schnell und flexibel umsetzen können.

2 Std. 14 min (25 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!