Responsives Design

Grid

Das Grid-System von Bootstrap ermöglicht eine einfache und handhabbare Darstellung von Inhalten. Sein Layout ähnelt dem einer Tabelle. Es ist jedoch deutlich flexibler und passt sich dementsprechend besser einem responsiven Webdesign an.
Die Änderung der Darstellung geschieht dabei schrittweise. (Für die Universitätswebseite wurden diese Schritte gegenüber Bootstrap angepasst und eine zusätzliche Stufe hinzugefügt.)

Eine Übersicht dieser Schritte

Funktionsweise

<div class="col-xm-6 col-md-4">Inhalt</div>

• Zuweisung der Breite des Elements über Klassen
  • Die Breite ist relativ zum übergeordneten Element.
  • Mehrere Klassen können unterschiedliche Breiten für unterschiedlich große Displays angeben.
• Grid aus 12 Spalten bestehend
  • Suffix der Klasse gibt die Breite in Anzahl der Spalten an.
  • "col-xm-6" ergibt eine Breite von: 6/12 = 50%
• Unterschreitet die Displaybreite die durch die Klassen definierten Bereiche, wird das Element mit automatischer Breite dargestellt.
  • Bei Blockelementen (z. B. <div />) ist die automatische Breite 100%.
  • Bei Inline-Elementen (z. B. <span />) wird die Breite durch den Inhalt bestimmt.
  • Die weiteren Formatierungen durch "col-xm-6" bleiben auch unter 550px weiter aktiv.

Einfache Anwendung

Grundlegend reicht es, mit der Größe "m" zu arbeiten. So bleibt die Darstellung auf Desktops und Tablets wie gewohnt, nur auf Smartphones werden alle Inhalte untereinander angezeigt. Auf diese Weise sind sie auch dort gut zu betrachten.

Ab einer Breite von 800px wird das Seitenmenü neben dem Inhalt angezeigt, somit ist die zur Verfügung stehende Breite nahezu identisch der Mobilansicht ab 550px.

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

Hinweise

• "row" erweitert das überliegende Element rechts und links um jeweils 14px.
• "col-xm-6" hat links und rechts ein padding von 14px.
• Damit sind Spalten mit 28px voneinander getrennt, was optisch ansprechend ist.
• Mehr Beispiele

Media Queries

CSS-Stile können durch Media Queries auf bestimmte Medientypen, Displaygrößen und Ausrichtungen beschränkt werden. Media Queries liegen auch dem Bootstrap-Framework zu Grunde. Eine Beschreibung der Spezifikation findet sich auf w3schools.com. Der Media-Typ all ist der Standardwert und kann auch weggelassen werden. Der hierfür nötige CSS-Code muss entweder über eine CSS-Datei geladen oder der Rahmenvariable $css_in hinzugefügt werden.

$css_in = '@media (min-width: 550px) {
  .page-content table { background-color: #e6e6e6; }
}';

Tabellen

Sollten Sie doch nicht auf Tabellen verzichten können, gibt es zwei Möglichkeiten sich trotzdem an das responsive Webdesign zu halten.

1. Es gibt Fälle, in denen die Benutzung einer normalen Tabelle weiterhin die bessere Wahl ist. Dies trifft beispielsweise zu, wenn der Inhalt nur durch die Darstellung in Tabellenform übersichtlich bleibt oder wenn zusammengefasste Zellen benötigt werden. Diese muss dann aber in ein div-Element eingefasst werden, welches die Klasse class="table-responsive" hat. Somit muss man nur in der Tabelle scrollen, wenn die Breite nicht ausreicht.

   02.07.2015 15:30	Reichenhainer Str. 70, Rühlmann-Bau, 2/70/B202	Big Data: Mathematical methods and applied problems The aim of the workshop is to bring together mathematicians and scientists working in fields where mathematical expertise can bring significant profit to applications. Mehr …
   09.07.2015 16:30	Reichenhainer Str. 35/37, Studentenwohnheim, Wiese vorm Studentenclub	Grillfest der Fakultät für Mathematik Mehr …
   16.07.2015 11:30	Reichenhainer Str. 39, 638	E-Learning Lunch Franziska Nestler, Daniel Potts Für die Studenten des Maschinenbaus wird unsere Fakultät im kommenden Semester zusätzlich zu den Vorlesungen und Übungen ein Praktikum anbieten. Hier wollen wir das Konzept vorstellen und diskutieren.

   <div class="table-responsive">
     <table class="zeile">
       …
     </table>
   </div>

2. Wird die dynamische Anpassung der Zellengröße an deren Inhalt für bestimmte Displaygrößenlayouts benötigt, gibt es wieder zwei Möglichkeiten zur Umsetzung.
   1. div-Elemente mit CSS-Eigenschaft display:table in eine Tabelle umwandeln: Diese Eigenschaft kann über Media Queries auch nur für bestimmte Displaygrößen definiert werden.
      Eine ausführliche Beschreibung mit Beispielen finden sie auf selfhtml.org.
   2. Andersherum können auch Tabellenzellen mit Hilfe von CSS in Blockelemente wie div umgewandelt werden. Mit der Klasse "zeile-xs" geschieht das für eine Breite unter 550px. Dabei werden die Spalten von links nach rechts untereinander angeordnet.

      02.07.2015 15:30	Reichenhainer Str. 70, Rühlmann-Bau, 2/70/B202	Big Data: Mathematical methods and applied problems The aim of the workshop is to bring together mathematicians and scientists working in fields where mathematical expertise can bring significant profit to applications. Mehr …
      09.07.2015 16:30	Reichenhainer Str. 35/37, Studentenwohnheim, Wiese vorm Studentenclub	Grillfest der Fakultät für Mathematik Mehr …
      16.07.2015 11:30	Reichenhainer Str. 39, 638	E-Learning Lunch Franziska Nestler, Daniel Potts Für die Studenten des Maschinenbaus wird unsere Fakultät im kommenden Semester zusätzlich zu den Vorlesungen und Übungen ein Praktikum anbieten. Hier wollen wir das Konzept vorstellen und diskutieren.

      <table class="zeile zeile-xs">
        …
      </table>