Getränke­flaschenausstellung

Bootstrap - Layout


Autor: D. Supper, Elektronikschule Tettnang

Bootstrap arbeitet mit einem Rastersystem, um auch auf größeren Seiten ein ansprechendes Layout zu gewährleisten.

In diesem Artikel wird das Container-Konzept und das Rastersystem vorgestellt. Neben den Standardfarben wird die Anpassung von Farben und deren Kontrast vorgestellt, um einer Internetseite eine eigene Note zu geben.

Layout - Container



Das Basic-Layout wird mit der Klasse .container realisiert. Je nach Bildschirmgröße passt sich Randabstand (Innenabstand) an.

sm md lg xl
≥576px ≥768px ≥992px ≥1200px

Um die gesamte Breite des Darstellungsfeldes (engl. viewport) abzudecken dient die Klasse .container-fluid.

Hinweis: Ein Standardcontainer dient als Basis für das Rastersystem.

Containerbeispiel

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

  • <div class="container">
      <p>Lorem ipsum dolor ...<p>
    </div>

    <div class="container-fluid">
      <p>Lorem ipsum dolor ...<p>
    </div>

Layout - Rastersystem



Rasterlayoutbeispiel

Eine von zwei Spalten.

Eine von zwei Spalten.



Spalte 1 mit 7/12-Breite.


Spalte 2 mit 5/12-Breite.

  • <div class="container">
      <div class="row">
        <div class="col-sm">
          Eine von zwei Spalten.
        </div>
        <div class="col-sm">
          Eine von zwei Spalten.
        </div>
      </div>
    </div>

Das Rastersystem stellt den Inhalt je nach Displaygröße in unterschiedlicher Anzahl an Spalten dar.

Beispiel 1 verwendet für jede Spalte die Klasse .col-sm. Dadurch werden die beiden Spalten gleichmäßig aufgeteilt und unterhalb des viewports sm (<576px) untereinander geschrieben.

Beispiel 2 verwendet für Spalte 1 die Klasse .col-md-7 und für Spalte 2 die Klasse .col-md-5. Dadurch werden die beiden Spalten unterschiedlich aufgeteilt und unterhalb des viewports md untereinander geschrieben.
Man beachte, dass es 12 Spalten gibt und die zugehörigen Klassen auch kombiniert eingesetzt werden können (z.B. .col-md-3 .col-sm-6).

Layout - Farben und Kontrast



Standardfarben für Warnungen, Infos oder Erfolg werden in verschiedenen Klassen, wie bspw. .bg-success oder .text-danger bereitgestellt.

Für die Anpassung (engl. customizing) empfehlen sich Color-Picking-Tools. Dazu erstellt man eigene Klassen wie bspw. .bg-100 oder .bg-200.

Google material

Text und Bilder sollen gegenüber dem Hintergrund einen minimalen Kontrast von 4,5:1 haben. Dies kann mit einem Contrast-Checker getestet werden.

WebAim


Standard­farben
Pri­mary
Secon­dary
Suc­cess
Danger
War­ning
Info
Light
Dark
  • <div class="row">
     <div class="col-md-4">
      <div class="bg-primary text-white">Primary</div>
     </div>
     <div class="col-md-4">
      <div class="bg-success text-white">Success</div>
     </div>
     <div class="col-md-4">
      <div class="bg-danger text-white">Danger</div>
     </div>
     <div class="col-md-4">
      <div class="bg-warning text-dark">Warning</div>
     </div>
    </div>

Übung 1 Bootstrap

Erstelle eine responsive Internetseite mit Bootstrap.

Internetseite mit Bootstrap formatiert

  1. Implementiere in allen Bereichen die Klasse .container.
  2. Nutze auf mindestens einer Seite das Rastersystem und stelle den Inhalt in zwei oder mehr Spalten dar.
  3. Passe die Hintergrund­farben an. Verwende hierzu die Standardfarben, als auch eigene Farben aus einer Farbpalette mit eigenen Klassen.
  4. Teste das Layout für verschiedene Displaygrößen und Browser.
<div class="container">
  <div class="row">
    <div class="col-sm">
      Eine von zwei Spalten.
    </div>
    <div class="col-sm">
      Eine von zwei Spalten.
    </div>
  </div>
</div>

Übung 2 Welche Aussage ist wahr?

Wähle die korrekten Aussagen aus.

Wähle eine passende Eigenschaft zur Klasse .container.
Wähle eine Antwort.

  1. setzt immer den identischen Innenabstand
  2. setzt je nach Hintergrundfarbe den Innenabstand
  3. setzt je nach Gerät den Innenabstand
  4. setzt je nach vieport den Innenabstand


Erkläre den Begriff viewport.
Wähle eine Antwort.

  1. Displaygröße
  2. Breite des Darstellungsfeldes
  3. der sichtbare Bereich
  4. der Sichthafen

Nenne die Grenze der Viewportgröße sm.
Wähle eine Antwort.

  1. ≥576px
  2. ≥768px
  3. ≥992px
  4. ≥1200px


Ein Anwender programmiert <div class="col-sm">.
Wähle eine Antwort.

  1. Alle Spalten sind bis Größe sm gleichmäßig aufgeteilt.
  2. Alle Spalten sind immer gleichmäßig aufgeteilt.
  3. Ab der Größe sm erscheinen die Spalten untereinander.
  4. Alle Spalten sind ab Größe sm gleichmäßig aufgeteilt.

Nenne den Mindestkontrast zwischen Hintergrund und Text.
Wähle eine Antwort.

  1. 2:1
  2. 3,5:1
  3. 4,5:1
  4. 9:1


Ein Nutzer möchte eine Farbpalette erstellen. Nenne das Tool.
Wähle eine Antwort.

  1. Toolkit
  2. Color-Tool
  3. Picking-Tool
  4. Color-Picking-Tool

Wortliste und Satzbausteine



Boot­strap Boot­strap ist eine Bibliothek mit CSS und Javascript und bietet ein respon­sivem Design.
der Con­tainer, ~ Mit Con­tainern wird das Lay­out reali­siert. Innerhalb dieser Klasse wird der Randabstand in Abhängigkeit des viewports gesteuert
die Darstel­lungsfeld­breite, ~ Mit der Breite des Darstellungsfeldes (engl. vieport) lässt sich die Anzeige einer Internetseite steuern.
das Ras­ter­system, - Mit dem Rastersystem lässt sich Inhalt je nach Display­größe in unter­schiedlicher An­zahl an Spal­ten dar­stellen.
Color-Picking-Tool Farbauswahlsoftware mit passenden Abstufungen.
der Kontrast, -e Helligkeitsunterschied zwischen zwei Farben