Mehrspalter

– oder auch: Rasterboxen – werden verwendet um mehrspaltige Seitenlayouts zu erstellen. Jede Spalte kann dabei mit Content-Elementen befüllt werden. Dabei können Sie festlegen, wie breit jede Spalte auf den unterschiedlichen Geräteklassen (Smartphone, Tablet usw.) dargestellt wird.

    Weiterhin kann über den Reiter "Spaltenformatierung" jeder Spalte

    • eine Hintergrundfarbe,
    • die Innenabstände (nach oben und unten),
    • die vertikale Ausrichtung der Content-Elemente innerhalb der Spalte,
    • die Textfarbe und 
    • die Sichtbarkeit (nach Geräteklassen)

    zugewiesen werden.

    Erfahrenen Web-Redakteuren bieten die "Erweiterten Optionen" zudem die Möglichkeit festzulegen

    • in welcher Reihenfolge und 
    • mit welche zusätzlichen CSS-Merkmalen

    die Spalten erscheinen.

    Über die Optionen im Reiter "Container" steuern Sie das Aussehen des inneren und äußeren Containers. Diese Einstellungen sollten ebenfalls nur von erfahrenen Web-Redakteuren vorgenommen werden.

    Die nachfolgende Übersicht (und die Definitionstabelle) soll einen schneller Überblick über das Verhalten (Breite) der sechs – bereits vordefinierten* – Mehrspalter geben. Die Spaltenbreiten können natürlich von den Redakteuren verändert werden. Dabei gilt zu beachten:

    • Die Spaltenbreiten beziehen sich immer auf das 12-spaltige Bootstrap-Rastersystem
    • Spaltenbreiten werden "von unten nach oben" definiert (mobile first), d.h. die Spaltenbreite wird an die jeweils breitere Geräteklasse "vererbt".
    • Einspaltige Boxen können zudem einen Einzug erhalten. Über die Zeilenformatierung (Reiter "Container") kann der Einzug nach links, rechts oder verteilt auf beide Seiten eingestellt werden.

    1-spaltige Box

    1/1

    Elvis

    2-spaltige Box

    1/2

    Liam

    2/2

    Noel

    3-spaltige Box

    1/3

    Morten

    2/3

    Pål

    3/3

    Magne

    4-spaltige Box

    1/4

    John

    2/4

    Paul

    3/4

    George

    4/4

    Ringo

    5-spaltige Box

    1/5

    Jackie

    2/5

    Jermaine

    3/5

    Tito

    4/5

    Randy

    5/5

    Michael

    6-spaltige Box

    1/6

    Till

    2/6

    Richard

    3/6

    Paul

    4/6

    Oliver

    5/6

    "Doom"

    6/6

    "Flake"

    Definitionen

    1-spalter
    Smartphone Phablet Tablet hoch Tablet quer Große Desktops
    .col- .col-sm- .col-md- .col-lg- .col-xl-
    12 – 10 – 8
    2-spalter
    Smartphone Phablet Tablet hoch Tablet quer Große Desktops
    .col- .col-sm- .col-md- .col-lg- .col-xl-
    12 – 6 - -
    12 – 6 - -
    3-spalter
    Smartphone Phablet Tablet hoch Tablet quer Große Desktops
    .col- .col-sm- .col-md- .col-lg- .col-xl-
    12 – 4 - -
    12 – 4 - -
    12 – 4 - -
    4-spalter
    Smartphone Phablet Tablet hoch Tablet quer Große Desktops
    .col- .col-sm- .col-md- .col-lg- .col-xl-
    12 – 6 3 -
    12 – 6 3 -
    12 – 6 3 -
    12 – 6 3 -
    5-spalter
    Smartphone Phablet Tablet hoch Tablet quer Große Desktops
    .col- .col-sm- .col-md- .col-lg- .col-xl-
    6 – 4 2 -
    6 – 4 2 -
    6 – 4 2 -
    6 – 4 2 -
    6 – 4 2 -
    6-spalter
    Smartphone Phablet Tablet hoch Tablet quer Große Desktops
    .col- .col-sm- .col-md- .col-lg- .col-xl-
    6 – 4 2 -
    6 – 4 2 -
    6 – 4 2 -
    6 – 4 2 -
    6 – 4 2 -
    6 – 4 2 -
    Nach oben