Universitäts­rechen­zentrum
Beispiele

Beispiele

Überschrift

Lorem ipsum dolor sit amet, …

Zweispaltiges Design

Das Hörsaalgebäude
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vestibulum mollis purus, et placerat orci lobortis vestibulum. Nam porttitor convallis.
Das Hörsaalgebäude
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vestibulum mollis purus, et placerat orci lobortis vestibulum. Nam porttitor convallis.
<h2 class="linie">Überschrift</h2>
<p>Lorem ipsum dolor sit amet, …
</p>

<h3>Zweispaltiges Design</h3>
 <div class="row spacing">
  <div class="col-xm-4"><img src="/tu/images/campus.jpg"
  class="img-responsive" style="width:260px;margin:auto" alt="Das Hörsaalgebäude"></div>
  <div class="col-xm-8">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vestibulum mollis purus, et placerat orci lobortis vestibulum. Nam porttitor convallis.</div>
 </div>
 <div class="row spacing">
  <div class="col-xm-4"><img src="/tu/images/campus.jpg" class="img-responsive" alt="Das Hörsaalgebäude"></div>
  <div class="col-xm-8">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vestibulum mollis purus, et placerat orci lobortis vestibulum. Nam porttitor convallis.</div>
 </div>

Hinweis

  • Die Klasse "spacing" fügt unter jeder Spalte einen Abstand von 7px ein.

Dateikopf

<?php

// Konfigurationsdatei laden
require_once('../config/config.inc');

// Variablen für diese Seite separat setzen
$keywords = 'Beispielseite, Schlüsselwort';

// CSS-Variable initialisieren, wenn das in der config.inc noch nicht gemacht wurde
if (!isset($css_in))
   $css_in = '';

// CSS-Dateien hinzufügen (Vor @import darf kein anderer Befehl kommen!)
$css_in = '@import url(zweites-css.css);' . $css_in;
$css_in = '@import url(erstes-css.css);' . $css_in;

// Weiteren CSS-Code hinzufügen
$css_in .= '
.bsp {
   padding-top: 14px;
}
';

// Laden von Erweiterungen
require_once('php/hs.inc');

// Laden des Templates mit speziellem Seitentitel
seite(__FILE__, 'Seitentitel');?>

Verschachteltes zweispaltiges Design

Das Hörsaalgebäude
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vestibulum mollis purus, et placerat orci lobortis vestibulum. Nam porttitor convallis.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vestibulum mollis purus, et placerat orci lobortis vestibulum. Nam porttitor convallis.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vestibulum mollis purus, et placerat orci lobortis vestibulum. Nam porttitor convallis.
<div class="row spacing">
  <div class="col-xm-6"><img src="/tu/images/campus.jpg" class="img-responsive" /></div>
  <div class="col-xm-6">
    …
    <div class="row bsp">
      <div class="col-xs-6">…</div>
      <div class="col-xs-6">…</div>
    </div>
  </div>
</div>

Asymmetrisches zweispaltiges Design

Das Hörsaalgebäude
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vestibulum mollis purus, et placerat orci lobortis vestibulum. Nam porttitor convallis.
<div class="row spacing">
  <div class="col-xm-3"><img src="/tu/images/campus.jpg" class="img-responsive" /></div>
  <div class="col-xm-9">…</div>
</div>

Dreispaltiges Design

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vestibulum mollis purus, et placerat orci lobortis vestibulum. Nam porttitor convallis.
Das Hörsaalgebäude
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vestibulum mollis purus, et placerat orci lobortis vestibulum. Nam porttitor convallis.
Das Hörsaalgebäude
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vestibulum mollis purus, et placerat orci lobortis vestibulum. Nam porttitor convallis.
Das Hörsaalgebäude
<div class="row spacing">
  <div class="col-xm-4">…</div>
  <div class="col-xm-4"><img src="/tu/images/campus.jpg" class="img-responsive" /></div>
  <div class="col-xm-4">…</div>
</div>
<div class="row spacing">
  <div class="col-xm-4"><img src="/tu/images/campus.jpg" class="img-responsive" /></div>
  <div class="col-xm-4">…</div>
  <div class="col-xm-4"><img src="/tu/images/campus.jpg" class="img-responsive" /></div>
</div>

Anpassendes Design

Verändern Sie zum Testen die Breite Ihres Browserfensters!
Das Hörsaalgebäude
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vestibulum mollis purus, et placerat orci lobortis vestibulum. Nam porttitor convallis.
Das Hörsaalgebäude
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vestibulum mollis purus, et placerat orci lobortis vestibulum. Nam porttitor convallis.
Das Hörsaalgebäude
<div class="row spacing">
  <div class="col-xm-6 col-md-4 col-lg-3">Verändern Sie …</div>
  <div class="col-xm-6 col-md-4 col-lg-3"><img src="/tu/images/campus.jpg" class="img-responsive" /></div>
  <div class="col-xm-6 col-md-4 col-lg-3 clear-xm">Lorem ipsum …</div>
<!-- clear-xm zwingt das Element für diese Displaygröße auf eine neue Zeile,
     sonst könnte es unter das vorherige Element rutschen. //-->
  <div class="col-xm-6 col-md-4 col-lg-3 clear-md"><img
  src="/tu/images/campus.jpg" class="img-responsive" /></div>
  <div class="col-xm-6 col-md-4 col-lg-3 clear-xm clear-lg">Lorem ipsum …</div>
  <div class="col-xm-6 col-md-4 col-lg-3"><img src="/tu/images/campus.jpg" class="img-responsive" /></div>
</div>

Hinweis

  • Die Klassen "clear-*" zwingen ein Element auf die nächste Zeile.
    • Auf die angegebene Breite beschränkt
    • Beispiel: class="clear-xm" erzwingt einen Zeilenumbruch von 550px bis 800px
    • Nötig, wenn…
      • die Spalten nicht mehr alle auf einer Zeile (class="row") dargestellt werden können,
      • noch mehr als zwei Spalten auf der Zeile sind oder
      • die umspringende Spalte von der Breite unter das vorherige Element passt.

TUCaktuell