Unsere Datenschutzrichtlinie wird in Kürze aktualisiert. Bitte sehen Sie sich die Vorschau an.

One-Page-Webseiten mit Bootstrap, LESS und Sass

Mit den Quelldateien richtig umgehen

Testen Sie unsere 2016 Kurse

10 Tage kostenlos!

Jetzt testen Alle Abonnements anzeigen
Wenn Sie mit den Quelldateien arbeiten, arbeiten Sie mit den ursprünglichen Dateien und gestalten mit den LESS-Dateien, anstatt bestehende Einstellungen mit eigenem CSS zu überschreiben.
04:01

Transkript

Ich erzähle Ihnen sicher nichts neues, wenn ich Ihnen sage, dass Sie sich "Bootstrap" entweder über die englischsprachige "getbootstrap.com" oder über die deutsche Übersetzungsseite "holdirbootstrap.de" herunterladen können. Dabei haben Sie hier den sehr prominenten Knopf, mit dessen Hilfe Sie dann zu der Abteilung kommen, wo Sie zwischen diesen unterschiedlichen Paketen wählen können. Wir haben auf der einen Seite hier die kompilierte und minimierte Version von "Bootstrap". Das heißt, das ist der Zusammenschluss von Dokumenten und Dateien, die bereits soweit die Basis dann für Ihre eigene Webseite darstellen können, auf der aufbauend Sie dann Ihre eigene CSS und ihr eigenes JavaScript noch integrieren können, oder aber Sie holen sich den Quelltext und die Quelldateien, um dann vielleicht direkt mit den "LESS"-Dateien oder mit den JavaScript-Dateien arbeiten zu können. Oder aber Sie kommen aus der Tradition, dass Sie mit "Sass" arbeiten, dann gibt es auch hier eine eigene Downloadmöglichkeit. Wir wollen aber jetzt uns einmal den Quelltext herunterladen, um vielleicht so einen kleinen Blick hineinzuwerfen. Ich habe mir den Quelltext bereits heruntergeladen und mir hier auf den Desktop entpackt. Und wenn ich da jetzt einen kleinen Blick in das Innenleben werfe, dann sehen Sie, dass Sie es in der Quellversion mit einigen Dateien mehr zu tun haben. Und das, was Sie dann letztendlich brauchen, um online gehen zu können, befindet sich hier im "dist"-Ordner. Das heißt, da liegen dann die fertigkompilierten und minimierten CSS-Dateien und keine "LESS"-Datein mehr, beziehungsweise hier sind die Glyphicons drinnen und hier die JavaScript-Dateien. Hier ist auch dann der Ort, wo Sie zum Beispiel mit der Index-Datei anfangen können zu arbeiten. Die "LESS"-Dateien selbst befinden sich hier in diesem Ordner, und mit einem Doppelklick gehe ich mal hinein und dann sehen Sie, dass Sie es hier mit einer großen Anzahl an einzelnen, kleinen Dokumenten zu tun haben, wo eben all die Erscheinungsdetails hinterlegt sind, mit denen "Bootstrap" grundsätzlich mal daherkommt, wobei Sie hier bei den "Variables" -- wenn Sie sich das mal anschauen wollen, ich öffne es mal mit Notepad++ -- hier haben Sie die allergrundlegendsten Voreinstellungen, die ein "Bootstrap"-Aussehen zu diesem speziellen Aussehen verhelfen. Hier haben Sie die unterschiedlichen Farbeinstellungen, hier finden Sie die grundlegenden Schrift- und Schriftgrößeneinstellungen, und während Sie beim Kompilierten einfach auf dieses bereits Bestehende Ihre eigenen Vorstellungen von CSS quasi drüberstülpen und überschreiben, hätten Sie rein theoretisch die Möglichkeit, hier direkt in der Ursprungs-"LESS"-Datei Ihre Veränderungen durchzuführen. Und das Spannende ist das, dass all diese einzelnen Dateien dann quasi hier in der "bootstrap.less" mehr oder weniger zusammengefasst werden. Auch das öffne ich jetzt mal schnell, und Sie sehen, dass die "bootstrap.less", die dann später fertigkompiliert wird, eigentlich nur aus Import-Dateien besteht, und Sie selber hätten mit der soweit eigentlich gar nichts zu tun. Lange Rede, kurzer Sinn. Wir haben es hier mit den Quelldateien zu tun, zum Beispiel auch mit dem zugrunde liegenden Paketsystem, das heißt, es wird das Ganze dann später mit "Grunt" zusammengepackt werden und auch dafür sind die notwendigen Dateien hier in dieser Version schon vorhanden.

One-Page-Webseiten mit Bootstrap, LESS und Sass

Erstellen Sie eine moderne Website im One-Page-Design, die mit wenigen Dateien auskommt und mit Effekten wie Parallax Scrolling aufwartet.

2 Std. 1 min (28 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!