LazyLoad-Bild
LazyLoad-Bilder bestehen aus einem per JavaScript gebautem <img alt="..."> mit leerem src="" Attribut
(diese wird erst später gefüllt) sowie einem <noscript> Tag, welcher das entsprechende Bild
<img src="..." alt="..."> bereits enthält.
alt="..." ist Pflicht und muss gefüllt sein. Es sollte den Inhalt des Bildes vermitteln, für den Fall, dass
das Bild nicht gesehen wird (z.B. bei Sprachausgabe).
width="..." und height="..." korrekt angegeben
werden, damit das Bild bereits unmittelbar nach dem Seitenaufbau – also bereits vor dem Laden des Bildes – seinen finale Größe erhält. Sind die
Attribute nicht angegeben, so hat das Bild initial die Größe 0px × 0px.
Minimales Setting
<script>document.write('<img class="img-fluid" src="" width="1140" height="380" data-fn="lazyload" data-src="/wp-content/themes/bsx-wordpress-example/assets/example-img/example-img-001-1140x380.jpg" alt="Beispiel Bild">');</script>
<noscript><img class="img-fluid" src="/wp-content/themes/bsx-wordpress-example/assets/example-img/example-img-001-1140x380.jpg" alt="Beispiel Bild"></noscript>Minimales LazyLoad-Bild (z.B. zur Einbindung in eine Überschrift oder in einen Link)
.img-fluid nehmen maximal die Breite ihres übergeordneten Elements an (verkleinern sich also auf schmalen Devices).
Standard-Bild mit Beschreibung
Standardmäßig befindet sich das Bild in einem <figure> Tag, welcher eine <figcaption>
enthält. Die Figcaption kann optional entfernt werden.
<figure>
<script>document.write('<img class="img-fluid" src="" width="1140" height="380" data-fn="lazyload" data-src="/wp-content/themes/bsx-wordpress-example/assets/example-img/example-img-002-1140x380.jpg" alt="Beispiel Bild">');</script>
<noscript><img class="img-fluid" src="/wp-content/themes/bsx-wordpress-example/assets/example-img/example-img-002-1140x380.jpg" alt="Beispiel Bild"></noscript>
<figcaption class="text-muted font-italic small mt-1">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.
</figcaption>
</figure>LazyLoad-Bild in Figure mit Figcaption
Responsive lazy loading picture
Der <picture>-Tag ermöglicht es, ein Bild (<img>), das sich
innerhalb des <picture>-Tags befindet, abhängig von den Gegebenheiten eines Devices (z.B. Portrait- oder Landscape-Format)
unterschiedlich anzuzeigen, also für unterschiedliche media="..."-Voraussetzungen (Media-Queries) innerhalb des
selben HTML-Bildes unterschiedliche URLs darzustellen. Die unterschiedlichen Bild-URLs werden mittels einer beliebigen
Anzahl an <source>-Tags innerhalb des zugehörigen <picture>-Tags
hinterlegt und enthalten jeweils Media-Query (media="...") und URL
(data-srcset="..."), sowie Breite (data-width="...") und Höhe
(data-height="..."). Es kann also gleichzeitig für kleine Devices ein kleines Bild und
für große Devices ein großes Bild hinterlegt werden, bzw. beliebige Abstufungen in Größe und Format können
vorgenommen werden.
<script>
document.write(
'<picture>'
+ '<source media="(orientation: portrait) and (max-width: 799.98px)" srcset="" data-srcset="/wp-content/themes/bsx-wordpress-example/assets/example-img/example-img-006-720x720-thumb.jpg" data-width="720" data-height="720">\n'
+ '<source media="(min-width: 1440px)" srcset="" data-srcset="/wp-content/themes/bsx-wordpress-example/assets/example-img/example-img-006-1440x720.jpg" data-width="1440" data-height="480">\n'
+ '<source media="(min-width: 1140px)" srcset="" data-srcset="/wp-content/themes/bsx-wordpress-example/assets/example-img/example-img-006-1140x380.jpg" data-width="1140" data-height="380">\n'
+ '<img class="img-fluid" alt="Beispiel Bild" src="" data-fn="lazyload" data-src="/wp-content/themes/bsx-wordpress-example/assets/example-img/example-img-006-720x480.jpg" data-width="1140" data-height="380">'
+ '</picture>'
);
</script>
<noscript><img class="img-fluid" src="/wp-content/themes/bsx-wordpress-example/assets/example-img/example-img-006-720x480.jpg" alt="Beispiel Bild"></noscript>Quelltext
Rundes Bild
Quadratische Bilder können durch die Klasse .rounded-circle rund formatiert werden.
Die Größe der Bilder richtet sich nach ihren jeweiligen Größenabgaben oder, bei Verwendung der Klasse
.img-fluid, nach der maximal Verfügbaren Breite. Folglich können mithilfe von
.rows und .cols responsive Hilfskonstruktionen
um das Bild herum gebaut werden, um eine gewünschte Größe zu erzielen.
Durch Zufügen der Klasse .img-thumbnail wird ein beabstandeter schmaler Rahmen um das Bild erzeugt.
Die Farbe des Rahmens kann durch Zusatzklassen .border-{ state }, z.B.
.border-primary angepasst werden kann.
<div class="row">
<div class="col-6 col-sm-4 col-md-3 col-lg-2">
<figure>
<script>document.write('<img class="img-fluid rounded-circle" src="" width="720" height="720" data-fn="lazyload" data-src="/wp-content/themes/bsx-wordpress-example/assets/example-img/example-img-001-720x720.jpg" alt="Beispiel Bild">');</script>
<noscript><img class="img-fluid rounded-circle" src="/wp-content/themes/bsx-wordpress-example/assets/example-img/example-img-001-720x720.jpg" alt="Beispiel Bild"></noscript>
</figure>
</div>
<div class="col-6 col-sm-4 col-md-3 col-lg-2">
<figure>
<script>document.write('<img class="img-fluid rounded-circle img-thumbnail" src="" width="720" height="720" data-fn="lazyload" data-src="/wp-content/themes/bsx-wordpress-example/assets/example-img/example-img-004-720x720.jpg" alt="Beispiel Bild">');</script>
<noscript><img class="img-fluid rounded-circle img-thumbnail" src="/wp-content/themes/bsx-wordpress-example/assets/example-img/example-img-004-720x720.jpg" alt="Beispiel Bild"></noscript>
</figure>
</div>
<div class="col-6 col-sm-4 col-md-3 col-lg-2">
<figure>
<script>document.write('<img class="img-fluid rounded-circle img-thumbnail border-primary" src="" width="720" height="720" data-fn="lazyload" data-src="/wp-content/themes/bsx-wordpress-example/assets/example-img/example-img-006-720x720.jpg" alt="Beispiel Bild">');</script>
<noscript><img class="img-fluid rounded-circle img-thumbnail border-primary" src="/wp-content/themes/bsx-wordpress-example/assets/example-img/example-img-006-720x720.jpg" alt="Beispiel Bild"></noscript>
</figure>
</div>
</div>
<!-- /.row -->
.row mit .cols (col-6 col-sm-4 col-md-3 col-lg-2), die
jeweils ein rundes Bild enthalten. Die Breite des 720px breiten, quadratischen Bildes wird durch die Breite der
.col innerhalb der jeweiligen Fensterbreite begrenzt.
Bild mit breitem Rahmen
Durch Zufügen der Klasse .img-bordered erhalten Builder eine Rahmen, dessen Farbe durch Zusatzklassen
.border-{ state }, z.B. .border-primary angepasst werden kann.
Neben der Klasse .rounded-circle (kreisrund) können auch weiteren Image-Klassen kombiniert werden, z.B.
.rounded (gerundete Ecken) oder .img-thumbnail (Innenabstand zwischen Bild und Border).
<div class="row">
<div class="col-6 col-sm-4 col-md-3 col-lg-2">
<figure>
<script>document.write('<img class="img-fluid rounded-circle img-bordered" src="" width="720" height="720" data-fn="lazyload" data-src="/wp-content/themes/bsx-wordpress-example/assets/example-img/example-img-002-720x720.jpg" alt="Beispiel Bild">');</script>
<noscript><img class="img-fluid rounded-circle img-bordered" src="/wp-content/themes/bsx-wordpress-example/assets/example-img/example-img-002-720x720.jpg" alt="Beispiel Bild"></noscript>
</figure>
</div>
<div class="col-6 col-sm-4 col-md-3 col-lg-2">
<figure>
<script>document.write('<img class="img-fluid rounded-circle img-bordered border-primary" src="" width="720" height="720" data-fn="lazyload" data-src="/wp-content/themes/bsx-wordpress-example/assets/example-img/example-img-010-720x720.jpg" alt="Beispiel Bild">');</script>
<noscript><img class="img-fluid rounded-circle img-bordered border-primary" src="/wp-content/themes/bsx-wordpress-example/assets/example-img/example-img-010-720x720.jpg" alt="Beispiel Bild"></noscript>
</figure>
</div>
<div class="col-6 col-sm-4 col-md-3 col-lg-2">
<figure>
<script>document.write('<img class="img-fluid rounded-circle img-bordered img-thumbnail border-dark" src="" width="720" height="720" data-fn="lazyload" data-src="/wp-content/themes/bsx-wordpress-example/assets/example-img/example-img-007-720x720.jpg" alt="Beispiel Bild">');</script>
<noscript><img class="img-fluid rounded-circle img-bordered img-thumbnail border-dark" src="/wp-content/themes/bsx-wordpress-example/assets/example-img/example-img-007-720x720.jpg" alt="Beispiel Bild"></noscript>
</figure>
</div>
<div class="col-6 col-sm-4 col-md-3 col-lg-2">
<figure>
<script>document.write('<img class="img-fluid rounded img-bordered img-thumbnail border-dark" src="" width="720" height="720" data-fn="lazyload" data-src="/wp-content/themes/bsx-wordpress-example/assets/example-img/example-img-001-720x720.jpg" alt="Beispiel Bild">');</script>
<noscript><img class="img-fluid rounded img-bordered img-thumbnail border-dark" src="/wp-content/themes/bsx-wordpress-example/assets/example-img/example-img-001-720x720.jpg" alt="Beispiel Bild"></noscript>
</figure>
</div>
</div>
<!-- /.row -->
.row mit .cols (col-6 col-sm-4 col-md-3 col-lg-2), die
jeweils ein Bild mit breitem Rahmen enthalten. Die Breite des 720px breiten, quadratischen Bildes wird durch die Breite der
.col innerhalb der jeweiligen Fensterbreite begrenzt.
Bild mit breitem Rahmen auf Kartenrand
TODO: Beschreibung .code
-
Lorem ipsum
dolor sit amet, consectetuer adipiscing elit. -
Curabitur ullamcorper
Ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus. -
Faucibus tincidunt
Nam quam nunc, blandit vel, luctus pulvinar. -
Sagittis magna
Leo eget bibendum sodales.
Bild-Text-Columns
Standardmäßig sind Text und Bild oben ausgerichtet.
Überschrift zweiter Ordnung
Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero.
Durch Zufügen von .flex-md-row-reverse zur .row kehrt sich ab der Displaygröße
md aufwärts die Reihenfolge der Columns um. Auf kleineren Displaygrößen als md
hingegen bleibt das Bild unverändert vor dem Text positioniert:
Überschrift zweiter Ordnung
Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero.
Vertikal zentrierte Bild-Text-Columns
Durch Zufügen der Klassen .d-flex und .align-items-center auf beiden
.cols werden deren Inhalte vertikal zentriert. Indem wir beide .cols identisch
formatieren, spielt es keine Rolle, welche .col die größere Höhe hat und somit maßgeblich für
die Zentrierung der anderen .col ist.
<figure>-Element (als Kindelement von .d-flex.align-items-center) die Klasse .w-100, um den Inhalt
korrekt (nicht zu breit) anzuzeigen. Für andere Browser würde die Klasse nicht benötigt, sie schadet jedoch nicht. – Gleiches gilt für jegliche Inhalte von .d-flex.align-items-center.
Überschrift zweiter Ordnung
Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero.
Durch Zufügen von .flex-md-row-reverse zur .row kehrt sich ab der Displaygröße
md aufwärts die Reihenfolge der Columns um. Auf kleineren Displaygrößen als md
hingegen bleibt das Bild unverändert vor dem Text positioniert:
Überschrift zweiter Ordnung
Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero.
Horizontal text video card
Text .code
- Lorem ipsum dolor sit amet
- Consectetuer adipiscing elit. Aenean commodo ligula eget dolor
- Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes
- Nascetur ridiculus mus. Donec quam felis, ultricies nec
Rounded figure
Ein <figure>-Element hat die Klasse .rounded-figure und
enthält ein Bild sowie i.d.R. eine <figcaption>.
Optional kann das Bild .img-fluid (1x im <script>, 1x im
<noscript>) mit einem Rahmen versehen werden (z.B. im Falle von hellen Screenshots),
indem die Klassen .border.border-bottom-0.rounded-top zugefügt werden.
Rounded Figure Standard und mit Rand
Beschreibung
Linked Rounded Figure
Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue.
Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero
Rounded Figure Styling für sonstige Elemente
Nachfolgend werden <div>-Elemente als Rounded figure gestylt.
Hierfür erhält das die Beschreibung enthaltende <div>-Element die Klasse
.rounded-figure-caption.
Bild-Text-Boxen-Banner
Kernelement ist Fullwidth-Farbbanner, hier eine <section> der Farbe .bg-light mit einem .container,
welcher eine als .row formatierte <ul> Liste mit mehreren als .col-md-4
(xs und sm volle Breite, ab md aufwärts 33.3 % Breite) formatierten <li> Listenelementen enthält.
Jedes Listenelement enthält eine .card ohne Rahmen (.border-0) mit jeweils einer
<figure> mit LazyLoad-Bild sowie dem .card-body mit zwei
<div> Elementen, deren ersteres sich oben ausrichtet, während zweiteres sich unten ausrichtet,
wodurch der im unteren enthaltene .btn Button sich immer auf der gleichen Höhe befindet.
<figure>-Element die Klasse .w-100, um den Inhalt
korrekt (nicht zu hoch) anzuzeigen. Für andere Browser würde die Klasse nicht benötigt, sie schadet jedoch nicht.
Überschrift zweiter Ordnung
-
Überschrift dritter Ordnung
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.
-
Überschrift dritter Ordnung
In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.
-
Überschrift dritter Ordnung
Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.
Rundes Bild mit Text und Button
Kernelement ist Fullwidth-Farbbanner, hier eine <section> der Farbe .bg-light mit einem .container,
welcher eine als .row formatierte <ul> Liste mit mehreren als .col-md-4
(xs und sm volle Breite, ab md aufwärts 33.3 % Breite) formatierten <li> Listenelementen enthält.
Jedes Listenelement enthält eine .card ohne Rahmen (.border-0) mit jeweils einer
<figure> mit LazyLoad-Bild sowie dem .card-body mit zwei
<div> Elementen, deren ersteres sich oben ausrichtet, während zweiteres sich unten ausrichtet,
wodurch der im unteren enthaltene .btn Button sich immer auf der gleichen Höhe befindet.
.d-flex.flex-column.justify-content-between die Klasse .w-100, um den Inhalt
korrekt (nicht zu hoch) anzuzeigen. Für andere Browser würde die Klasse nicht benötigt, sie schadet jedoch nicht.
.justify-content-between die Klasse .of-hidden, um den Inhalt
korrekt (nicht zu hoch) anzuzeigen. Für andere Browser würde die Klasse nicht benötigt, sie schadet jedoch nicht.
Überschrift zweiter Ordnung
-
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.
-
Consectetuer adipiscing elit. Aenean commodo ligula eget dolor.
<ul><li> Struktur benötigt, so können beide Elemente jeweils
in ein <div> umgewandelt werden, wobei ebenfalls die Klasse .list-unstyled
entfernt werden kann.
Container-breiter Banner mit überlagerndem Logo
Wird der Banner am Anfang der Seite genutzt, so sorgt die Klasse .main-container-banner auf dem
Element .multilayer-banner für einen geeigneten Abstand zur Navigation bzw. zu den Breadcrumbs.
Wird hin gegen der Banner an einer anderen Stelle genutzt, so kann die Klasse .main-container-banner
entfernt werden.
Sofern der Banner innerhalb eines bereits vorhandenen .container-Elements genutzt wird, kann das im
Code enthaltenen äußere .container-Element entfernt werden.
Großes Logo mit Überschrift
Beschreibung
