Bootstrap

Die Technik

• Im Autoren- und Layoutsystem TUCAL wird das Framework Bootstrap (Version 3.x) zur Darstellung der Webseiten verwendet
• Es kann der gesamte Funktionsumfang von Bootstrap 3.x verwendet werden, zum Teil sind Elemente an das Corporate Design angepasst
• Zur ausführlichen Dokumentation von Bootstrap (in englisch)

Das Grid-System

• Grid-Layout ähnelt dem einer Tabelle, ist aber flexibler und besser geeignet für responsives Webdesign
  Erläuterungen zum Grid-System in TUCAL
• Grid besteht aus 12 Spalten
  • Suffix der CSS-Klasse gibt der Breite des Elements in Anzahl der Spalten an
  • "col-xm-6" ergibt eine Breite von: 6/12 = 50%
• Darstellung von Inhalten kann so schrittweise geändert werden, je nach verfügbarer Breite des Displays
  Bezeichnung

  Bereich

  xs

  ab 320px (0px)

  xm

  ab 550px

  sm

  ab 801px

  md

  ab 992px

  lg

  ab 1200px
• Zuweisung der Breite des Elements über CSS-Klassen,
  mehrere Klassen für unterschiedlich große Displays möglich

  <div class="row">
    <div class="col-xm-6">Lorem ipsum …</div>
    <div class="col-xm-6">Lorem ipsum …</div>
  </div>

• Grundlegend reicht es, mit der Größe xm zu arbeiten – Darstellung auf Desktops und Tablets wie gewohnt, auf Smartphones werden alle Inhalte untereinander angezeigt
• Beispiele zur Demonstration des Bootstrap Grid-Systems