Nutzerbereich formatieren (Gebrauch von Spalten)

Bei den bisherigen Versionen des Webservers wurde die Formatierung der Seiten mit Hilfe von table-Umgebungen erreicht. Beim aktuellen Webserver erfolgt die Formatierung mit Hilfe von div-Tags. Diese Art der Formatierung ist wesentlich flexibeler und passt sich besser der Darstellung auf kleinen Geräten (zB. Handy, Tablet) an. Dabei wird der gesamte Seitenbereich in 24 gleich breite Spalten unterteilt. An diesen Spalten orientieren sich alle eingesetzten div-Tags. Ein div-Tag mit der Breite n (n=1..24) Spalten erhält man dadurch, dass man das div-Tag der Klasse "col-md-n" zuordnet. ZB. für n=5:

<div class="col-md-5">
Inhalt ...
</div>

Die Höhe des div-Tags wird durch den Inhalt bestimmt. Wenn man erreichen möchte, dass vor dem div-Tag m (m=1..24) Spalten frei bleiben, benutzt man die Klasse col-md-offset-m zusammen mit der Klasse col-md-n . ZB. fü n=5 und m=2:

<div class="col-md-5 col-md-offset-2">
Inhalt ...
</div>

Die div-Tags werden entsprechend ihrer Reihenfolge, ihrer durch die Klassenzugehörigkeit festgelegten Breite und der durch den Inhalt bestimmten Höhe von links nach rechts in das 24 Spalten breite Layout eingepasst. Mehrere div-Tags kann man mit Hilfe eines div-Tags mit der Klasse row zu einer Zeile zusammenfassen:

<div class="row">
	<div class="col-md-5">
	Inhalt ...
	</div>
	<div class="col-md-12">
	Inhalt ...
	</div>
	<div class="col-md-7">
	Inhalt ...
	</div>
</div>
<div class="row">
	<div class="col-md-12">
	Inhalt ...
	</div>
	<div class="col-md-12">
	Inhalt ...
	</div>
	<div class="col-md-12">
	Inhalt ...
	</div>
</div>