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

Bilder im Text

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Beim Einfügen von Bildern kann es von Vorteil sein, noch ein, zwei Anpassungen vorzunehmen.
05:30

Transkript

Ich möchte nun auch hier Bilder haben, und zwar möchte ich da Bilder haben-- ein Bild oberhalb von der Überschrift "Über die Region", und ein zweites Bild unterhalb des anderen Artikels "Was Sie erwartet". Das mache ich nun vorranging mal nicht in der LESS-Datei, sondern ganz normal in der Index, und zwar füge ich ein Bild ein, das heißt, ich sage, ich möchte gerne ein Image habe. - Source des Images - Nachdem ich nun auf der richtigen oberen Ebene stehe, ist der Ordner "dist" und im dist habe ich einen Ordner mit Pixel und im Ordner "pixel" habe ich ein Bild namens "Weg 2". Ich möchte auch einen Alternativtext haben, und dieser Alternativtext heißt "Weg". Dann bekommt mein Bild noch eine Klasse, eigentlich sogar zwei Klassen, und zwar auf der einen Seite gibt es eine Klasse namens "Image Responsive", die dafür sorgt, dass mein Bild auf die unterschiedlichen Größenverhältnisse korrekt reagieren kann. Und dann gibt es noch eine spezielle Klasse, die heißt "Image Thumbnail" und die möchte ich bei meinem Bild ebenfalls zum Einsatz bringen. So, das war mal der erste Streich und der zweite folgt sogleich. Und zwar möchte ich jetzt unterhalb meiner dritten Spalte ebenfalls ein Bild haben, und zwar werde ich dasselbe noch mal anwenden, nicht dasselbe Bild, aber dieselbe Vorgehensweise. Und ich bin wieder so gelegen, dass ich in meinen Dist-Ordner kann, in meinen Pixel-Ordner. Und da werde ich jetzt das Bild "Farn" verwenden. Wieder mit einem Alternativtext "Farn" und mit denselben Klassen wie ich sie schon oben hatte, das heißt, die eine Klasse ist "Image-Responsive" und die andere Klasse ist "Image-Thumbnail". So, ich speichere das Ganze, und sehe mir das Ergebnis jetzt mal in Firefox an. Okay, hier habe ich mal meine zwei Bilder, soweit hat es funktioniert. Ich sehe jetzt aber, dass das noch nicht das für mich optimale Erscheinungsbild hat. Thumbnails hätte ich gerne, dass sie wie alte Fotos einen weißen Rand haben und vielleicht noch eine kleine Umrandung rundherum. Und das werden wir jetzt in LESS regeln. Ich werde mir mal die Stelle suchen, wo ich vielleicht zum Ziel komme. Da habe ich ein eigenes LESS-Dokument mit Thumbnail. Ich schau da mal rein. Und hier habe ich tatsächlich ein passendes Mixin für Thumbnail, allerdings wird hier ständig auf Variablen verwiesen, das heißt, mein Weg führt mich wieder zu den Variablen. Und nachdem ich keine Lust habe, lange auf die Suche nach Thumbnail zu gehen, werde ich jetzt mit Strg+F mir meine Find-Aktion holen und habe es hier schon einmal versucht, das heißt, ich habe Thumbnail schon drin stehen, und sage "find" und lande dann direkt bei den Einträgen zum Thema Thumbnail. Und das sehe ich jetzt schon, wo ich ein bisschen am Rädchen drehen könnte, und zwar das eine Rädchen ist nämlich, dass die Hintergrundfarbe vielleicht eher weiß sein sollte als die Hintergrundfarbe des gesamten Bodys. Das heißt, ich werde das jetzt noch gar nicht wegmachen, sondern ich werde es einfach nur auskommentieren und versuchsweise hier vorne meinen Farbeintrag machen. Und was die Farbe des Rahmens anbelangt, möchte ich ebenfalls nicht diese Farbe, sondern ich möchte auf eine der Farben zurückgreifen, die ganz am Anfang so prinzipiell für den Gesamteindruck sorgen und das ist in meinem Fall jetzt die Farbe namens Brand-Primary. Das heißt, ich gebe an "brand-primary;" und ich speichere meinen Eintrag und sehe mir das Ergebnis an. Oh, sehen Sie mal, ich glaube, ich habe mich verschrieben, denn sonst könnte es kompiliert werden. "Primary" - so, jetzt passt es viel besser und wenn ich es jetzt kompilieren möchte, wird er wahrscheinlich etwas erhaltener reagieren. Stimmt. Sie sehen also es ist sehr praktisch, wenn man mit diesem kleinen Wachhund arbeitet, weil ab dem Moment, wo Sie zum Beispiel Schreibfehler machen wie ich gerade, kann er nicht kompilieren und das bekommen Sie sofort mitgeteilt. Das heißt, Sie haben noch dazu einen kleinen Korrekturteufel im Hintergrund sitzen, was praktisch ist und einiges an Fehlersuche ersparen kann. So, wir sehen uns das Ergebnis an. Ja, genau, das entspricht schon eher dem, was ich mir vorstelle. Ich habe jetzt also dank des Paddings den Hintergrund des Bildes noch hervorschauen und das Ganze noch mal mit einem Rahmen umgeben. Soweit habe ich nun auch meine Bilder eingefügt und sie mit entsprechenden Regeln versehen.

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!