Testseite für bootstrap

[flexy_breadcrumb]

[breadcrumb]

Responsives Bild-Design

Will ich Bild neben Text darstellen, sieht das auf Tabletts und Smartphones meist sehr komisch aus, weil die Textzeilen dann nur noch aus 1-3 Wörtern bestehen bzw. auch ganz leer bleiben.

Da hilft nur, ein responisves Design, als ein Design, dass je nach Bildschirmgröße, das Bild über dem Text oder neben dem Text darstellt. Meist sieht es allerdings auch nicht schön aus, wenn das Bild direkt über dem Text verschoben wird, weil dann das Bild die Überschrift vom Fließtext trennt. Zudem wäre bei einer Darstellung des Bildes über dem Text ein größeres Bild (medium, Breite=300px) schön, während bei Darstellung neben dem Text i.d.R. das Bild kleiner gezogen wird.

Lösung für Tabletts und Smartphones ein Bild über der Überschrift einfügen, dass nur dort sichtbar ist. Bild-CSS-Klasse= visible-xs-block visible-sm-block setzen.
Und für größere und ganz große Bildschirme ein zweites identisches Bild neben dem Text unter der Überschrift einfügen.
Nun folgt ein Beispiel:

Zunächst das Bild für Tabletts und Smartphones – ACHTUNG: nur sichtbar unter einer bestimmten Firefox-Fenster-Größe (visible-xs-block visible-sm-block)!

Foto: die LebWendige-Strukturelemente Sanduhr, Frosch, Empfehlungen u. Befindlichkeitsampel

Die Überschrift

  1. Foto: die LebWendige-Strukturelemente Sanduhr, Frosch, Empfehlungen u. BefindlichkeitsampelHier dann der Text, wo das Bild bei großen Bildschirmen daneben erscheinen soll statt da drüber – ACHTUNG: nur sichtbar ab einer bestimmten Firefox-Fenster-Größe (visible-md-inline-block visible-lg-inline-block)!
  2. In diesem Beispiel wird der Eindruck noch verstärkt durch die Aufzählung, hier steht dann bei kleinen Bildschirmen noch weniger Zeilenplatz für den Text zur Verfügung.
  3. WICHTIG: Dieser Effekt kann nur sauber mit „Klassischem Block“ unseres Editor-Plugins erzeugt werden.
  4. Im folgenden wird dies mit dem Gutenberg-Block „Medien und Text“ erledigt, der es nicht erlaubt ausschließlich dem Bild spezielle CSS-Klassen zu zuweisen. Das Bild wird nicht als Block im Block dargestellt! Die Einstellung „bei Mobilgeräten stapeln“, die im folgenden stattdessen aktiviert wurde, sieht nicht so schön aus und hilft auch nicht für Tabletts.

Das Versagen des Gutenberg-Editors für diesen Fall

  1. Hier der Versucht mit den Bordmitteln vom Gutenberg-Editor … und ich schreibe auch möglichst viel Text in eine Zeile, damit der Vergleich möglich ist und der Unterschied sichtbar wird!
  2. Die Bildgröße kann ich hier auch nur durch Ziehen festlegen. 🙁
  3. Zusätzliche CSS-Klasse(n) lassen sich nur für diese Aufzählung oder den übergeordneten Block „Medien und Text“ eingeben, was kontraproduktiv ist!
Foto: die LebWendige-Strukturelemente Sanduhr, Frosch, Empfehlungen u. Befindlichkeitsampel

Ausklapp-Texte – klappt neuerdings 🙂

Bootstrap-Variante

This is the first item’s accordion body. It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It’s also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.

This is the second item’s accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It’s also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.

This is the third item’s accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It’s also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.

CSS-Variante

Beispieltext
auch über mehrere Zeilen …

Ein hervorgehobener Absatz

Ein normaler Absatz, der aber hervorgehoben werden soll, weil wichtiger Hinweis!
per Block-Zusätzliche CSS-Klassen = alert bg-primary erledigt

Ein Bootstrap-Icons – klappt teilweise – TIMEOUT

 als HTML-Entität
oder U+F700 als Unicode

egal ob per span- oder i-HTML-Tag, entscheidend ist die class

class glyphicon funktioniert nicht

class fa schon – oder liegt es an Suchlupe versus Briefumschlag???

FIXME: ggf. hilft bootstrap downloaden und fonts-Ordner an passender Stelle auf Visiana-Server hochladen, vgl. folgende Firefox-Fehlermeldung!

downloadable font: download failed (font-family: „Glyphicons Halflings“ style:normal weight:400 stretch:100 src index:3): status=2147746065 source: https://www.visiana.de/wp-content/themes/simple-life/third-party/bootstrap/fonts/glyphicons-halflings-regular.ttf