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.

One-Page-Webseiten mit Bootstrap, LESS und Sass

Neue LESS-Dateien erzeugen

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Sie können eigene, bereits bestehende CSS- oder LESS-Dateien in die bestehende LESS-Struktur integrieren.
03:41

Transkript

Es kann immer mal wieder sein, dass Sie bereits existierende CSS-Dateien haben, die Sie zusätzlich verwenden, um die Möglichkeiten von Bootstrap an Ihre Bedürfnisse anzupassen. Die müssen Sie jetzt, wenn Sie mit LESS arbeiten, nicht sofort über Bord werfen, sondern Sie können sie zu Ihrem Vorteil nutzen. Ich habe hier jetzt ein meinstyle.css hinzugefügt, da steht nicht viel drin. Da steht eigentlich nur drin, dass HTML und body eine automatische Höhe und Breite von 100 Prozent haben sollen, das "body"-Element ein "padding-top" von 70 Pixel bekommen soll, damit es unter der Navigation hervorrutscht. Das gleiche gilt noch einmal für meine einzelnen Sektionen. Wobei diese wiederum eine automatische Höhe mitbekommen und ein "overflow: hidden", damit ich beim Firefox nicht die Scrollingbars am Rand automatisch habe. Mit diesen kleinen Erweiterungen sieht dann meine Seite im Moment folgendermaßen aus: Ich habe hier einen angenehmen Abstand, und wenn ich auf "Über" klicke, bekomme ich auch gleich meine "Über"-Seite angezeigt und "Kontakt" ist auch im Bild. Mit dem Wissen, dass das alles jetzt soweit funktioniert, werde ich "meinstyle" übersiedeln in die LESS-Dateien. Das geht relativ simpel: Ich klicke mit der rechten Maustaste drauf und sage zuallererst mal "Copy", wandere weiter in meine LESS-Dateien, und auf der Ebene von LESS sage ich "Paste". Da müsste ich jetzt irgendwo "meinstyle.css" haben, muss da jetzt allerdings noch den Namen ändern auf ".less". Damit meine frisch gekürte LESS-Datei auch tatsächlich mitkompiliert wird und zurückkompiliert wird, brauche ich einen Eintrag in der "bootstrap.less". Hier ist es genau so, wie Sie es auch aus normalen Arbeiten mit CSS kennen: Die ReIhenfolge spielt eine Rolle. Wenn ich zuerst alle Bootstrap-eigenen LESS-Dateien verarbeitet haben möchte und dann erst meins zum Überschreiben von diesen Einstellungen verwende, tue ich gut daran, wenn ich es ganz ans Ende der Datei setze. Hier kommen also meine Styles. Jetzt kann ich ganz leicht mit dem "Import"-Befehl meine eigenen Styles mit übernehmen. Ich kopiere mit STRG+C hier den letzten Eintrag und tausche jetzt einfach nur den Namen aus, denn meine heißt ja "meinstyle.less". Ich speichere jetzt, und das war eigentlich alles, um aus meiner CSS-Datei eine mit LESS weiter bearbeitbare Datei zu machen. Es ist ein durchaus passender Stil, wenn Sie eigene Angaben in eine eigene LESS-Datei einpacken. Denn stellen Sie sich vor, Sie werden irgendwann in die Situation kommen, dass Sie Ihr Bootstrap weiter updaten, dann ist es ganz gut, wenn Sie wissen, dass Ihre eigenen Veränderungen eben in "meinstyle.less" hinterlegt sind, und Sie nicht aus Versehen dann wieder etwas zurück überschrieben bekommen, was seitens Bootstrap eventuell geändert wird.

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)
ein Fehler hat sich eingeschlichen:
Carsten W.
richtig wäre:
height: auto !important;
 

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!