Springe zum Hauptinhalt
Universitäts­rechen­zentrum
Inhalt
Universitäts­rechen­zentrum 

Gestaltungselemente für Inhalte

Standard-Überschriften

Sie sollten Ihre Webseiten mit Überschriften gliedern (besonders wichtig für Screenreader). Jede Seite beginnt mit einer Überschrift <h1>. Für weitere Untergliederungen verwenden Sie je nach Hierarchie-Tiefe <h2> bis <h6>. Halten Sie diese Hierarchie bitte korrekt ein.

Der Stil wird von Größe und Gewicht (normal, fett) bestimmt.

Überschrift h1 ist die oberste

Überschrift h2 ist die erste Untergliederung

Überschrift h3 ist eine zweite Unter-Hierarchie

Überschrift h4 untergliedert weiter

Überschrift h5 noch eine Unter-Hierarchie
<h1>&Uuml;berschrift h1 ist die oberste</h1>
<h2>&Uuml;berschrift h2 ist die erste Untergliederung</h2>
<h3>&Uuml;berschrift h3 ist eine zweite Unter-Hierarchie</h3>
<h4>&Uuml;berschrift h4 untergliedert weiter</h4>
<h5>&Uuml;berschrift h5 noch eine Unter-Hierarchie</h5>

Falls Ihnen die Schriftgröße nicht zusagt, verwenden Sie eine Klasse h1 bis h6, die eine logische Überschrift wie eine andere aussehen lässt:

Überschrift h1, die wie eine h2 aussieht

Überschrift 2 wie eine Überschrift h4

<h1 class="h2">&Uuml;berschrift h1, die wie eine h2 aussieht</h1>
<h2 class="h4">&Uuml;berschrift 2 wie eine &Uuml;berschrift h4</h2>

Besondere Überschriften

Überschriften mit Linie

Überschriften mit Linie in der Farbe der Einrichtung (Standard), grau oder schwarz

Überschrift ist eine Schrift, die drüber steht

Überschrift ist eine Schrift, die drüber steht

Überschrift ist eine Schrift, die drüber steht

<h1 class="linie">&Uuml;berschrift ist eine Schrift, die dr&uuml;ber steht</h1>
<h2 class="linie grey">&Uuml;berschrift ist eine Schrift, die dr&uuml;ber steht</h2>
<h3 class="linie black">&Uuml;berschrift ist eine Schrift, die dr&uuml;ber steht</h3>

Überschriften mit Abstand

Überschriften mit weiterem Zeichenabstand

Überschrift ist eine Schrift, die drüber steht

Überschrift ist eine Schrift, die drüber steht

Überschrift ist eine Schrift, die drüber steht

<h1 class="topics">&Uuml;berschrift ist eine Schrift, die dr&uuml;ber steht</h1>
<h2 class="topics">&Uuml;berschrift ist eine Schrift, die dr&uuml;ber steht</h2>
<h3 class="topics">&Uuml;berschrift ist eine Schrift, die dr&uuml;ber steht</h3>

Überschriften mit doppelter Linie

Überschriften mit Linien oberhalb und unterhalb in der Farbe der Einrichtung (Standard), grau und schwarz.

Überschrift ist eine Schrift, die drüber steht

Überschrift ist eine Schrift, die drüber steht

Überschrift ist eine Schrift, die drüber steht

<h1 class="teaser">&Uuml;berschrift ist eine Schrift, die dr&uuml;ber steht</h1>
<h2 class="teaser grey">&Uuml;berschrift ist eine Schrift, die dr&uuml;ber steht</h2>
<h3 class="teaser black">&Uuml;berschrift ist eine Schrift, die dr&uuml;ber steht</h3>

Tabellen

Den Vorgaben des Corporate Designs folgend, werden Tabellen mit horizontalen schwarzen Linien (Standard) dargestellt. Alternativ können auch graue Linien (class="horizontal grey") verwendet werden.

Sollen Tabellen mit einer Tabellenüberschrift versehen werden, wird hierfür das Element caption genutzt, welches direkt auf das table-Element folgt.

Das summary-Element sollte nur dann eingesetzt werden, wenn besondere Hinweise notwendig sind, damit Screenreader-Nutzer die komplexe Tabelle erschließen können.

Tabellen zur Ausrichtung

Ohne Angabe der Klasse kann die Tabelle zur Ausrichtung von Text eingesetzt werden, wovon jedoch im Hinblick auf die Standardkonformität (Trennung von Inhalt und Layout) sowie Aspekte der Barrierefreiheit abzuraten ist. Sollte diese Möglichkeit dennoch genutzt werden, wird dem Browser über das Attribut role="presentation" im table-Element mitgeteilt, dass die Tabelleninformation für Screenreader auszulassen ist. Informationen zur Gestaltung von Tabellen im responsive Webdesign finden Sie außerdem in den Gestaltungsgrundlagen.

Tabellenüberschrift
Tabellenkopf Link Tabellenkopf Link Tabellenkopf Link
Tabellenzelle Link Tabellenzelle Link Tabellenzelle Link
Tabellenzelle Link Tabellenzelle Link Tabellenzelle Link
Tabellenkopf Link Tabellenkopf Link Tabellenkopf Link
Tabellenzelle Link Tabellenzelle Link Tabellenzelle Link
Tabellenzelle Link Tabellenzelle Link Tabellenzelle Link
Tabellenkopf Link Tabellenkopf Link Tabellenkopf Link
Tabellenzelle Link Tabellenzelle Link Tabellenzelle Link
Tabellenzelle Link Tabellenzelle Link Tabellenzelle Link
<table class="horizontal">
  <caption>Tabellen&uuml;berschrift</caption>
  <tbody>
    <tr>
      <th>Tabellenkopf <a href="">Link</a></th>
      <th>Tabellenkopf <a href="">Link</a></th>
      <th>Tabellenkopf <a href="">Link</a></th>
    </tr>
    <tr>
      <td>Tabellenzelle <a href="">Link</a></td>
      <td>Tabellenzelle <a href="">Link</a></td>
      <td>Tabellenzelle <a href="">Link</a></td>
    </tr>
    <tr>
      <td>Tabellenzelle <a href="">Link</a></td>
      <td>Tabellenzelle <a href="">Link</a></td>
      <td>Tabellenzelle <a href="">Link</a></td>
    </tr>
  </tbody>
</table>

<table class="horizontal grey">
  <tbody>
    <tr>
      <th>Tabellenkopf <a href="">Link</a></th>
      <th>Tabellenkopf <a href="">Link</a></th>
      <th>Tabellenkopf <a href="">Link</a></th>
    </tr>
    <tr>
      <td>Tabellenzelle <a href="">Link</a></td>
      <td>Tabellenzelle <a href="">Link</a></td>
      <td>Tabellenzelle <a href="">Link</a></td>
    </tr>
    <tr>
      <td>Tabellenzelle <a href="">Link</a></td>
      <td>Tabellenzelle <a href="">Link</a></td>
      <td>Tabellenzelle <a href="">Link</a></td>
    </tr>
  </tbody>
</table>

<table class="zeile">
  <tbody>
    <tr>
      <th>Tabellenkopf <a href="">Link</a></th>
      <th>Tabellenkopf <a href="">Link</a></th>
      <th>Tabellenkopf <a href="">Link</a></th>
    </tr>
    <tr>
      <td>Tabellenzelle <a href="">Link</a></td>
      <td>Tabellenzelle <a href="">Link</a></td>
      <td>Tabellenzelle <a href="">Link</a></td>
    </tr>
    <tr>
      <td>Tabellenzelle <a href="">Link</a></td>
      <td>Tabellenzelle <a href="">Link</a></td>
      <td>Tabellenzelle <a href="">Link</a></td>
    </tr>
  </tbody>
</table>

Abbildungen/Fotos auf der Webseite

Bitte verwenden Sie nur Abbildungen bzw. Fotos, an denen Sie die Rechte zur Online-Veröffentlichung haben! Bilder, die bspw. unter einer Creative-Commons-Lizenz veröffentlicht sind, können verwendet werden – jedoch nur, wenn die in der entsprechenden Lizenz genannten Bedingungen eingehalten werden (bei Lizenz CC-BY: Nennung des Namens des Urhebers).

Bilder sollten immer mit gesetztem alt-Attribut veröffentlicht werden:

<img src="image.png" alt="Bildbeschreibung">

Beachten Sie dazu die Hinweise zu Alternativtexten im Kapitel Barrierefreiheit.

Copyright-Hinweis definieren

Der Urheber bzw. der Copyright-Inhaber kann direkt auf dem Bild durch eine Einblendung angezeigt werden (ohne den Schriftzug direkt in das Bild integrieren zu müssen). Dazu muss ein Bild von einem <figure />-Element mit der CSS-Klasse imgtitle und einem title-Attribut mit der Copyright-Notiz umgeben werden. Standardmäßig wird der Hinweis dann in weißer Schrift schwarz umrandet unten rechts auf dem Bild dargestellt. Mit den weiteren CSS-Klassen left (unten links) und black (schwarze Schrift weiß umrandet) kann dieser auch noch angepasst werden.
Smartphone und Laptop mit aufgerufener TU-Seite
<figure class="imgtitle black left" title="Copyright-Hinweis">
  <img class="img-responsive" src="images/responsive-design.jpg"
       alt="Smartphone und Laptop mit aufgerufener TU-Seite">
</figure>

Symbole

Benannte Zeichen

Das Corporate Design der TU Chemnitz umfasst Symbole, die Sie auf Ihren Seiten verwenden können. Zusätzlich dazu bietet Bootstrap selbst über 200 sogenannte Glyphs aus der Zeichenmenge von Glyphicons Halflings. Weitere Informationen dazu entnehmen Sie bitte der Dokumentation von Bootstrap.

  • tucicon-nav-up
  • tucicon-nav-right
  • tucicon-nav-left
  • tucicon-nav-down
  • tucicon-link
  • tucicon-link-extern
  • tucicon-link-download
  • tucicon-check
  • tucicon-error
  • tucicon-rss
  • tucicon-key-closed
  • tucicon-key-open
  • tucicon-feedback-good
  • tucicon-feedback-neutral
  • tucicon-feedback-bad
  • tucicon-telephone
  • tucicon-search
  • tucicon-video
  • tucicon-emergency
  • tucicon-contact
  • tucicon-mail
  • tucicon-pdf
  • tucicon-sm-fb
  • tucicon-sm-tw
  • tucicon-sm-xi
  • tucicon-sm-yt
  • tucicon-sm-in
  • tucicon-sm-li
  • tucicon-sm-ma
  • tucicon-sm-sc
  • tucicon-sm-tt

Verwendung

Die Zeichen „tucicon-nav-…“ sollen dabei zur Navigation auf der Seite und zwischen Seiten genutzt werden. Die Symbole „tucicon-link“ und „tucicon-link-extern“ dienen der Kennzeichnung von Verweisen/Verlinkungen. Und die Zeichen „tucicon-sm-…“ dienen der Kennzeichnung von Social-Media-Inhalten (in = Instagram, fb = Facebook, tw = Twitter/X, xi = Xing, yt = YouTube, li = LinkedIn).

Die Icons sind in Klassen vordefiniert und werden mit Angabe der entsprechenden Bezeichnung eingebunden.

Sonderfall class="extern"

Links innerhalb Blöcken der Klasse „extern“ oder Links mit der Klasse „linkextern“ binden das Icon immer hinter dem Link-Text ein. Bei Verwendung der Klasse „tucicon-link-extern“ steht das Symbol – wie bei allen tucicon-Klassen – jedoch vor dem Text.

Icons sind standardmäßig schwarz, können aber durch die CSS-Eigenschaft color beliebig eingefärbt werden. Auch die Änderung der Größe ist möglich.

<button class="btn btn-info" type="button">
 <span class="tucicon-search">Suche</span></button>
<button class="btn btn-info" type="button">
 <span class="tucicon-search" style="color:red">Suche</span></button>

Alle Zeichen der Iconsammlung der TU Chemnitz (Stand: August 2023)

Die Iconsammlung der TU Chemnitz umfasst noch viel mehr (zweckgebundene) Symbole. Diese sollen nicht alle als CSS-Klasse benannt zur Verfügung gestellt werden, können aber unter Eingabe der jeweiligen Zeichensatzposition verwendet werden:

<span class="tucicon" aria-hidden="true">&#x1f44d;</span>
EntitätBeschreibung
&#xe081;Pfeil links
&#xe082;Pfeil rechts
&#xe083;Pfeil hoch
&#xe084;Pfeil links unten
&#xe085;Pfeil rechts unten
&#xe086;Pfeil links oben
&#xe087;Pfeil rechts oben
&#xe088;Pfeil zurück
&#xe0b9;Sackgasse
&#xe0ba;Viertel
&#xe089;Eingang
&#xe08a;Ausgang
&#xe08b;Barrierefreier Eingang
&#xe08c;Barrierefreier Ausgang
&#xe08d;Toiletten
&#xe08e;Toilette Frauen
&#xe08f;Toilette Männer
&#xe090;Toilette barrierefrei
&#xe091;Wickelraum
&#xe092;Toilette Allgender
&#xe0bb;Eltern-Kind-Raum
&#xe093;Ruheraum
&#xe094;Computerpool
&#xe095;Garderobe/Umkleide
&#xe096;Drucker
&#xe097;Sportplatz
&#xe098;Werkstatt
&#xe099;Labor
&#xe09a;Mensa
&#xe09b;Snack, Kaffee, Tee
&#xe09c;Hauswirtschaftsraum
&#xe0bc;Damenumkleide
&#xe0bd;Herrenumkleide
&#xe008;Info Nahverkehr
&#xe0c0;Straßenbahnhaltestelle
&#xe0c1;Bushaltestelle
&#xe09e;Fahrrad
&#xe09f;Parkplatz
&#xe0a0;Barrierefreier Parkplatz
&#xe0a1;Elektroladesäule
&#x2316;Standort
&#xe0a3;Bibliothek/Buch
&#xe0a5;Lesesaal
&#xe0a6;Technikraum/Server
&#xe0a7;Lagerraum
&#xe0a8;Poststelle
&#xe0a9;Wissensgarten
&#xe0aa;Printservice
&#xe0ab;Treppe aufwärts
&#xe0ac;Treppe abwärts
&#xe0ad;Personenaufzug
&#xe0ae;Lastenaufzug
&#x1f3eb;Seminarraum
&#xe0b0;Hörsaal
&#xe0be;Treppe
&#xe0a4;Hybride Lehre
&#xe0b1;Besprechungsraum
&#xe0b2;Erste-Hilfe-Raum
&#xe0b3;Ersthelfer
&#xe0b4;Defibrillator
&#xe0b5;Sammelpunkt bei Gefahr
&#xe0b6;Feuerlöscher
&#xe0b7;Hörunterstützende Systeme
&#xe0b8;Rauchen verboten
&#xe0bf;Büro
EntitätBeschreibung
&#x1f464;Nutzer
&#x2261;Menü
&#x2262;Menüauswahl
&#x2699;Einstellungen
&#x2753;Hilfe
&#x2139;Info
&#x1f4ca;Statistik
&#x1f4f7;Fotografieren
&#x1f4cb;Umfrage
&#x2af5;Barcode scannen
&#x1f3a7;Podcast
&#x1f4d5;Buch
&#x1f4d4;Wissenschaftliche Arbeit
&#x266b;Musik
&#x1f310;Sprachauswahl
&#x1f4f0;Nachrichten
&#x1f393;Studiengänge/Absolventen
&#x1f4c5;Veranstaltungskalender
&#x1f52c;Forschung
&#x1f3eb;Lehre
&#x21b9;Transfer
&#x2302;Start/Home
&#x23f0;Uhr
&#x1f78b;Ziel
&#xe0d0;Zielgruppe
&#xe0d1;Prüfung
&#xe0d2;Zertifikat/Zeugnis
&#xe0d3;Zulassung
&#xe0d4;Nachteilsausgleich
&#x25b3;Pfeil hoch (tucicon-nav-up)
&#x25b7;Pfeil rechts (tucicon-nav-right)
&#x25c1;Pfeil links (tucicon-nav-left)
&#x25bd;Pfeil runter (tucicon-nav-down)
&#x1f4c2;Archiv
&#x2316;Aktuelle Position
&#x2757;Wichtig
&#x1f5d1;Müll/löschen
&#x2665;Like
&#x1f5f2;Blitz
&#x1f4f1;Smartphone
EntitätBeschreibung
&#x2192;Interner Link (tucicon-link)
&#x21a6;Externer Link (tucicon-link-extern)
&#x21e3;Download (tucicon-link-download)
&#x2705;Check (tucicon-check)
&#x274e;Fehler (tucicon-error)
&#x1e58;RSS-Feed (tucicon-rss)
&#x25bd;Dropdown (tucicon-nav-down)
&#x25cb;Gesperrt (tucicon-key-closed)
&#x25cc;Entsperrt (tucicon-key-open)
&#x1f446;Touch
&#x2601;Cloud
&#x270d;Blog
&#x23f5;Play-Button
&#x1f5a9;Berechnen
&#x1f4c8;Wachstum
&#x1f517;Verbindung/Link
&#x1f44d;Feedback gut (tucicon-feedback-good)
&#x1f450;Feedback neutral (tucicon-feedback-neutral)
&#x1f44e;Feedback schlecht (tucicon-feedback-bad)
&#x2706;Anrufen (tucicon-telephone)
&#x2315;Suchen (tucicon-search)
&#x23f4;Video (tucicon-video)
&#x26a0;Notfallsituation (tucicon-emergency)
&#x1f5e8;Kontakt (tucicon-contact)
&#x2709;E-Mail (tucicon-mail)
&#x24ab;PDF (tucicon-pdf)
&#xe021;Word
&#xe023;Excel
&#x24b5;ZIP
&#xe022;Powerpoint
&#x1f5cb;Datei/Blatt/Papier
&#xe00d;Webcam
EntitätBeschreibung
&#xe001;Printgenerator
&#xe002;Navigation
&#xe003;Stundenplan
&#xe009;Kalender
&#xe004;Vorlesungsfeedback
&#xe006;OPAL
&#xe007;Personensuche
&#xe005;Campusplan
&#x1f4f7;Foto
&#xe016;Robotik/Automatisierung
&#x1f4a1;Glühbirne/Idee
&#xe017;Gruppenarbeit
&#x23f2;Druck/Messen
&#x1f30d;Erde
&#x1f91d;Gemeinsam
&#x1f984;Einhorn
&#xe00b;Bilddatenbank
&#xe00c;Rechte
&#xe00e;Digitale Lehre
&#xe00f;Digitale Prüfung
&#xe010;OER
&#xe011;Sound
&#xe012;Smiley
&#xe013;Formel
&#xe014;Barrierefreiheit
&#xe015;Barrierefreie PDFs
&#xe018;Netzwerk
&#xe019;Formel (invers)
&#x1f9ec;Bio/DNA
&#xe01a;3D/Perspektive
&#x1f9e0;Denken/Gehirn
&#xe01b;Chip/Elektronik
EntitätBeschreibung
&#x1e1f;Facebook (tucicon-sm-fb)
&#x0257;TikTok (tucicon-sm-tt)
&#x1e8e;YouTube (tucicon-sm-yt)
&#x1e8a;Xing (tucicon-sm-xi)
&#x1e36;LinkedIn (tucicon-sm-li)
&#x25d8;Instagram (tucicon-sm-in)
&#x265f;Snapchat (tucicon-sm-sc)
&#x24dc;mastodon (tucicon-sm-ma)
&#x1e6b;Twitter/X (tucicon-sm-tw)
EntitätBeschreibung
&#xe101;E-Medien
&#xe0a6;Datenbank
&#xe103;Schüler
&#x1f393;Studierende
&#x1f5e8;Gäste
&#xe106;Wissenschaftliches Schreiben
&#xe107;Publizieren
&#xe108;Beraten/Beratung
&#xe109;Open Access
&#xe110;Open Data
&#x1d76e;Open Source
&#xe010;OER
&#xe113;Citizen Science
&#xe114;Open Review/Review
&#xe115;Open Science
EntitätBeschreibung
&#xe201;Materialien und Intelligente Systeme
&#xe202;Ressourceneffiziente Produktion und Leichtbau
&#xe203;Mensch und Technik

Hervorhebungen

Besondere Textauszeichnungen können farblich hervorgehoben werden. Dazu stehen drei unterschiedliche Boxen-Typen zur Verfügung.

Hinweisboxen für besondere Hervorhebungen im Text

Hinweisboxen werden üblicherweise direkt im Text für besondere Hervorhebungen verwendet. Sie haben keinen farbigen Hintergrund, sind jedoch durch eine farblich passende Markierung auf der linken Seite sowie einen Rahmen gekennzeichnet. Die Basisklasse ist mit "tucbox-tip" bezeichnet und hat standardmäßig die Hausfarbe.

Überschrift Hinweisbox tucbox-tip Link

Diese Box erscheint in der Hausfarbe… Link

Überschrift Hinweisbox tucbox-tip-info Link

Diese Box ist grau… Link

Überschrift Hinweisbox tucbox-tip-warning Link

Diese Box soll Warnungen kennzeichnen… Link

Überschrift Hinweisbox tucbox-tip-danger Link

Diese Box kennzeichnet besonders wichtige, dringende und besonders hervorzuhebende Hinweise… Link

<div class="tucbox-tip">
<h4>&Uuml;berschrift Hinweisbox <code>tucbox-tip</code> <a href="#">Link</a></h4>
<p>Diese Box erscheint in der Hausfarbe&hellip; <a href="#">Link</a></p>
</div>

<div class="tucbox-tip-info">
<h4>&Uuml;berschrift Hinweisbox <code>tucbox-tip-info</code> <a href="#">Link</a></h4>
<p>Diese Box ist grau&hellip; <a href="#">Link</a></p>
</div>

<div class="tucbox-tip-warning">
<h4>&Uuml;berschrift Hinweisbox <code>tucbox-tip-warning</code> <a href="#">Link</a></h4>
<p>Diese Box soll Warnungen kennzeichnen&hellip; <a href="#">Link</a></p>
</div>

<div class="tucbox-tip-danger">
<h4>&Uuml;berschrift Hinweisbox <code>tucbox-tip-danger</code> <a href="#">Link</a></h4>
<p>Diese Box kennzeichnet besonders wichtige, dringende und besonders hervorzuhebende Hinweise&hellip; <a href="#">Link</a></p>
</div>

Textauszeichnung

Diese Flächen sollen Informationen innerhalb von Texten besonders hervorheben. Textauszeichnungen tragen standardmäßig die Fakultäts- oder Einrichtungsfarbe, können aber auch in grau verwendet werden.

Dies stellt eine besondere Hervorhebung im Text dar und kann beliebig erweitert werden. Link
Dies stellt eine besondere Hervorhebung im Text dar und kann beliebig erweitert werden. Link
<div class="tucbox-area">Dies stellt eine besondere <strong>Hervorhebung</strong> im Text dar
und kann beliebig erweitert werden.  <a href="#">Link</a></div>

<div class="tucbox-area-info">Dies stellt eine besondere <strong>Hervorhebung</strong> im Text dar
und kann beliebig erweitert werden. <a href="#">Link</a></div>

Panels

Panels können ebenfalls der Hervorhebung im Text dienen. Anders als bei den Textauszeichnungen sind Panels nicht im gesamten Bereich farblich hinterlegt. Lediglich die Überschrift und die Umrandung ist farblich der jeweiligen Klasse angepasst. Auch Panels sind standardmäßig in Fakultäts- oder Einrichtungsfarbe und können alternativ in grau verwendet werden.

Überschrift im Panel, auch mit Link

Hier steht der Inhalt.

Überschrift im Panel tucbox-panel-info, auch mit Link

Hier steht der Inhalt.
<div class="tucbox-panel">
<div class="panel-heading">
<h3 class="panel-title">&Uuml;berschrift im Panel, <a href="#">auch mit Link</a></h3>
</div>
<div class="panel-body">Hier steht der Inhalt.</div>
</div>

<div class="tucbox-panel-info">
<div class="panel-heading">
<h3 class="panel-title">&Uuml;berschrift im Panel <code>tucbox-panel-info</code>, <a href="#">auch mit Link</a></h3>
</div>
<div class="panel-body">Hier steht der Inhalt.</div>
</div>

Alert-Boxen

„Alerts“ haben keine runden Ecken und keine Schatten. Es sind vier Farben (Fakultäts- bzw. Einrichtungsfarbe, grau, orange für Warnungen, rot für Gefahr/Verbote) verfügbar. Eine typische Verwendung für Alerts ist die Warnung bei fehlender Eingabe in ein Formular.

Gut gemacht! Sie haben eben diese Botschaft gelesen.
Obacht! Dieser Text braucht Ihre Aufmerksamkeit, ist aber nicht extrem wichtig.
Warnung! Sie sollten diesem Text schon Bedeutung zumessen!
Fehler! Diese wichtigen Informationen beschreiben die Details.
<div class="alert alert-success"><strong>Gut gemacht!</strong> Sie haben eben <a href="#">diese Botschaft</a> gelesen.</div>
<div class="alert alert-info"><strong>Obacht!</strong> Dieser Text braucht <a href="#">Ihre Aufmerksamkeit,</a> ist aber nicht extrem wichtig.</div>
<div class="alert alert-warning"><strong>Warnung!</strong> Sie sollten diesem Text schon <a href="#">Bedeutung</a> zumessen!</div>
<div class="alert alert-danger"><strong>Fehler!</strong> Diese <a href="#">wichtigen Informationen</a> beschreiben die Details.</div>

Buttons

Die in Bootstrap enthaltenen Standard-Button-Klassen wurden wie folgt umdefiniert. Der Button der Klasse btn-default wird in Einrichtungs- bzw. Fakultätsfarbe dargestellt.

<button class="btn btn-default">Default</button>
<button class="btn btn-primary">Primary</button>
<button class="btn btn-info">Info</button>
<button class="btn btn-warning">Warning</button>
<button class="btn btn-danger">Danger</button>

Gleiches gilt für alle Klassen, die Buttons verwenden, wie beispielsweise die Klasse btn-group.

Schaltflächen sind eigentlich für Aktionen gedacht. Ab und zu werden aber Links auch wie Schaltflächen gestaltet. Im Sinne der Barrierefreiheit ist in solchen Fällen daran zu denken, dem Screenreader diese Information über die WAI-ARIA-Rolle mitzugeben.:

<a class="btn btn-default" href="/urz/www/bf" role="button">Hinweise zur Barrierefreiheit</a>

Formulare

Für webbasierte Formulare ist das Responsive Design besonders nützlich, damit sowohl auf kleinen Mobilgeräten als auch am normalen PC-Bildschirm sinnvolle Eingaben gemacht werden können. Dafür ist die Verwendung des Grids sehr nützlich, wie man am folgenden Beispiel schon sieht:

<form class="form-horizontal">
  <div class="form-group">
    <label for="inputTerm" class="col-xm-3 control-label">Suchbegriff</label>
    <div class="col-xm-9">
      <input type="text" class="form-control" id="inputTerm" placeholder="Suchbegriff">
    </div>
  </div>
  <div class="form-group">
    <label for="inputCategory" class="col-xm-3 control-label">Kategorie</label>
    <div class="col-xm-9">
      <select class="form-control" id="inputCategory">
        <option value="web" selected>Webseite</option>
        <option value="dict">Wörterbuch</option>
      </select>
    </div>
  </div>
  <div class="form-group">
    <div class="col-xm-offset-3 col-xm-9">
      <div class="checkbox">
        <label><input type="checkbox" id="checkCase"> Groß-/Kleinschreibung beachten</label>
      </div>
    </div>
  </div>
  <div class="form-group">
    <div class="col-xm-offset-3 col-xm-9">
      <button type="submit" class="btn btn-default">Suchen</button>
    </div>
  </div>
</form>

Hinweise

Mathematische Formeln

Auf dieser Seite zeigen wir Ihnen eine Methode, wie mathematische Formeln optisch ansprechend und gleichzeitig barrierefrei auf Webseiten dargestellt werden können. Formeln können dabei in verschiedenen Formaten eingegeben werden, in unserem Beispiel haben wir LaTeX benutzt. Über die rechte Maustaste hat der Webseitenbetrachter die Möglichkeit, die Ausgabe anzupassen.

Genutzt wird dafür MathJax, das wir lokal gespiegelt haben, damit die Webseitenbesucher die notwendigen Ressourcen nur von unseren Webservern beziehen. Die Einbindung sollte ressourcenschonend nur auf Seiten geschehen, die tatsächlich Formeln enthalten. Um die aktuelle Version 3 von MathJax mit TeX-Code zu nutzen, müssen diese beiden JavaScript-Dateien im Header angegeben werden:

  • https://www.tu-chemnitz.de/static/mathjax/polyfill-3-es6.min.js (für Internet-Explorer-11-Kompatibilität)
  • https://www.tu-chemnitz.de/static/mathjax/3/es5/tex-mml-chtml.js

Vor dem Aufruf von seite() sollten also diese Definitionen vorgenommen werden:

$javascript[] = '//www.tu-chemnitz.de/static/mathjax/polyfill-3-es6.min.js';
$javascript[] = '//www.tu-chemnitz.de/static/mathjax/3/es5/tex-mml-chtml.js';

Im Inhalt kann man dann einfach eine Mathe-Umgebung öffnen und darin Formeln angeben:

<div class="tucbox-tip">
Ohmsches Gesetz: \[ R = \frac{U}{I} \]
<p>(Die Stromstärke berechnet man demnach mit \( I = \frac{U}{R} \).)</p>
</div>
Ohmsches Gesetz: \[ R = \frac{U}{I} \]

(Die Stromstärke berechnet man demnach mit \( I = \frac{U}{R} \).)

Mit Rechtsklick auf die Formeldarstellung erhält man ein Kontextmenü, in dem bspw. Sprachausgabeeinstellungen vorgenommen werden können.

Für weitere Informationen verlinken wir auf die MathJax-Dokumentation: