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

Das Jumbotron gestalten

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Beim Jumbotron haben Sie es mit einem Paradebeispiel für eingebettete Stilangaben zu tun, doch auch dabei können Sie auf alle Besonderheiten, die LESS zu bieten hat, zurückgreifen.
06:38

Transkript

Nun kümmern wir uns um die Gestaltung des Jumbotrons. Ein Jumbotron ist ein eigenes Element, das "Bootstrap" bereitstellt. Wir müssen es nur noch ein wenig unseren Bedürfnissen anpassen. Die Überschrift ist mir viel zu groß, dafür ist mir die Adresse zu klein, und wenn das Ganze noch zentriert wäre, wäre es auch gut. Gesagt, getan. Das Vorgehen ist Folgendes: Ich sehe mir hier erst einmal an, ob da soweit alles passt, so wie es ist. Ich habe hier eine "h1"-Überschrift. Dem "div", damit ich es gut ansprechen kann, werde ich vorsichtshalber noch eine Klasse mitgeben. Und zwar die Klasse "address". Mit diesen Vorbereitungen gehe ich nun auf die Suche nach Jumbotron. Jumbotron hat ebenfalls eine eigene "LESS"-Datei, und Sie sehen, dass es ein Paradebeispiel für eingebettete Stile ist. Ich habe hier einmal den Jumbotron, dann alle "h1"-Angaben, innerhalb des Jumbotrons die normalen Paragrafangaben, und hier unten haben wir den Teil, der uns interessiert, nämlich eine Medienabfrage. Durch diese Medienabfrage ist hier die Überschrift etwas zu groß geraten für unsere Verhältnisse. Nachdem es nicht die Variablen-Abteilung ist, werde ich hier dieses ganze Stück, das sich um den Jumbotron handelt, mit Strg+C wieder kopieren und werde in meiner höchst eigenen Style-Abteilung einen eigenen Bereich für den Jumbotron eröffnen. Und werde hier alles einfügen, und mich jetzt um die Details kümmern. Das Allererste ist, dass ich hier die Schriftgröße verkleinern werde, weil die "font-size-base" ist eine Variable und damit vorgegeben, aber ich glaube, mit 2.5 werde ich das Ganze groß genug haben. Wenn ich schon hier am Ausprobieren und Herumtüfteln bin, dann möchte ich gleich hier bei den generellen Jumbotron-Einstellungen dafür sorgen, dass der Text auch gleich richtig platziert wird. "text-align" sollte "center" sein. Die Textfarbe ist die "jumbotron-color", unter der kann ich mir jetzt nicht viel vorstellen. Ich werde wieder einmal in meine Variablen schauen müssen, und dort mit Strg+F auf die Suche nach Jumbotron gehen. So, da bin ich schon. Also die Jumbotron-Textfarbe ist offensichtlich eine vererbte. Hier bei der heading-Farbe habe ich es mit "brand-primary" zu tun, das würde mir soweit schonmal ganz gut gefallen. Das müsste so ein schöner Braunton werden. Dann lassen wir das auf der Seite so. Das Einzige, worum wir uns noch kümmern werden, ist die Schriftgröße unserer Adresse. Da werde ich jetzt unter den Paragrafen gehen. Bin noch in meinem Jumbotron als Elternteil drinnen, und schreibe hier einfach die Klasse ".address", und werde mich hier um die Textgröße kümmern. Als Textgröße werde ich eine Variable nehmen, denn es gibt bei den Variablen am Anfang schon eine ziemlich gute Einteilung für die Textgrößen. Ich werde es hier mit "font-size-large" probieren. Ich gehe hier zurück, und gebe hier die Variable "font-size-large" an, speichere alles mal ab, und werde mir das Ergebnis ansehen. Das sieht doch schon ganz gut aus. Ich habe hier den Kontakt mit der Farbe, die jetzt nicht mehr ganz so mächtig in den Vordergrund drängt, sondern angenehm mit dem Hintergrund mitspielt, und hier die Angaben zur Adresse. Ich glaube aber, es wäre ganz gut, wenn unser Jumbotron noch einen dunkleren Rand bekommt, einfach deshalb, damit es sich noch ein wenig abhebt vom Hintergrund. Ich gehe wieder in meine Anpassungseinstellungen zum Jumbotron, und werde es hier unten mit "border" probieren. Und zwar, möchte ich "border:1px solid" haben, und von der Farbe her schauen wir mal, ob wir es wieder mit unserem "brand-primary" probieren wollen. Sehen wir uns das Ganze an. Das ist mir fast ein bisschen zu stark, ein bisschen zu dunkel, aber zum Glück haben wir mit "LESS" die Möglichkeit, Farben etwas abzudämpfen. Genau das werden wir jetzt noch machen. Wieder zurück in "meinstyle". Anstatt, dass ich jetzt diese ganze "brand-primary" verwende, werde ich die Funktion "lighten" verwenden. Diese wird dazu führen, dass ich die Möglichkeit habe, diese Farbe etwas abzudämpfen. Gesagt, getan. Wir machen "lighten(", allerdings sollte das Ende erst hier hinten liegen. Dann muss ich noch einen Prozentsatz vergeben. Ich behaupte mal, mit 30 % Farbdichte bin ich hier ganz gut bedient. Ich speichere meinen Eintrag, wechsle zurück in meinen "index"-Ordner. Jetzt gefällt mir mein Jumbotron eigentlich sehr gut. Auch beim Jumbotron haben Sie gesehen, dass Sie einfach dieses Element nehmen können, und noch weiter für sich ausbauen und umändern können. Ich habe das eben in meiner eigenen "style"-Datei gemacht, und damit das für mich passendste Ergebnis geschafft.

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!