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

Panels gestalten

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Die Klasse der Panels hat zwar eine vorgefertigte Formatierung, es ist aber durchaus möglich, diese an eigene Bedürfnisse anzupassen.
03:40

Transkript

In einem nächsten Schritt werde ich mich hier um die Panels kümmern, die links und rechts liegen, und noch nicht ganz zum Rest zu passen scheinen. Ich brauche auf der einen Seite etwas Padding für meinen Text, und auf der anderen Seite möchte ich mit der Farbgestaltung ein wenig spielen, und vielleicht eher dunkle Panels auf der Seite haben. Ich wechsle also zurück in meinen Bootstrap-Ordner, und suche hier bei den LESS-Dateien zuallererst mal nach der Datei, die sich um die Panels kümmert. Hier habe ich alle Einstellungen, die ich da eventuell für mein Panel brauche. Zum Beispiel bei der Hintergrundfarbe habe ich es wieder mit einer Variable zu tun, das heißt, wenn ich wissen möchte, welche Hintergrundfarbe gesetzt wird, muss ich mal wieder bei den Variablen vorbeischauen. Ich habe hier schon meinen Find-Bereich offen, und wenn ich jetzt im Suchfeld nach "@panel" suche, brauche ich nicht lange herumscrollen, sondern auf der Zeile 695 geht es dann los, mit den unterschiedlichen Variablen, alles zum Thema Panels. Hier sehe ich, dass Weiß als Farbe für den Hintergrund hinterlegt ist, und das werden wir jetzt ändern. Ich gehe zurück in "panels.less", werde aber nicht direkt hier innen arbeiten, sondern ich werde mir das, was ich verändern möchte, kopieren, um es dann in meiner eigenen LESS-Datei zu bearbeiten. Ich markiere mir alles hier zum Panel, mit Strg+C kopiere ich es mir in die Zwischenablage, gehe hier auf die Suche nach "meinstyle.less", und werde hier unten mit der Panel-Gestaltung weitermachen. Indem ich mit Strg+V hier diesen ersten Panel-Eintrag einfüge. Hier habe ich es jetzt mit "background-color" zu tun, das ist weiß, und das ändere ich einmal hin zu dieser primären "brand"-Farbe, die wir haben. Ich sage "brand-primary", und wenn ich den brand dunkel habe, werde ich dann die Schriftfarbe hell brauchen. Ich muss aber sowieso für diesen Paragrafen, der innerhalb des Panels ist, noch ein, zwei Kleinigkeiten regeln, Ich werde jetzt alles zum Paragrafen in dieses Panel einbetten, indem ich hier mit "p{" für neue Einträge sorge. Auf der einen Seite brauche ich ein Padding für meinen Paragrafen, da sollten "6px" eigentlich reichen, und ich brauche eine andere Farbe, nämlich weiß. Wenn ich schon ein dunkles Panel habe, dann brauche ich zumindest eine weiße Farbe. Das war's fürs Erste. Ich speichere es mit Strg+S, wechsle in meine Index, weiß nun, dass das Kompilieren gut funktioniert hat, und sehe mir das Ergebnis an. Das sieht doch schon ganz nett aus. Ich habe hier etwas Luft, und die Gestaltung sticht auch ein bisschen mehr heraus, Sie haben gesehen, es geht sich ganz wunderbar aus, mit ein, zwei Verbesserungen des Grundsätzlichen, dass wir dann zu einem Erscheinungsbild kommen, das optimal ausgerichtet ist auf die eigenen Bedürfnisse.

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)
Guter Einstieg in Bootstrap
Sven H.
Frau Schimpf vermittelt in diesem Videotraining leicht verständlich die Grundlagen zum Arbeiten mit Bootstrap und wie man dieses mit den CSS Präprozessoren LESS und SASS seinen Bedürfnissen anpasst.

In einem angenehmen Tempo lernt man die einzelnen Bestandteile des Frameworks kennen und wie man sie einsetzt.

Für jeden, der mit HTML und CSS vertraut ist, ist dieses Videotraining zu empfehlen. Es erleichtert den Einstieg in tiefer gehende Materie zu diesem Thema.
 

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!