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>Überschrift h1 ist die oberste</h1>
<h2>Überschrift h2 ist die erste Untergliederung</h2>
<h3>Überschrift h3 ist eine zweite Unter-Hierarchie</h3>
<h4>Überschrift h4 untergliedert weiter</h4>
<h5>Ü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">Überschrift h1, die wie eine h2 aussieht</h1>
<h2 class="h4">Überschrift 2 wie eine Ü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">Überschrift ist eine Schrift, die drüber steht</h1>
<h2 class="linie grey">Überschrift ist eine Schrift, die drüber steht</h2>
<h3 class="linie black">Überschrift ist eine Schrift, die drü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">Überschrift ist eine Schrift, die drüber steht</h1>
<h2 class="topics">Überschrift ist eine Schrift, die drüber steht</h2>
<h3 class="topics">Überschrift ist eine Schrift, die drü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">Überschrift ist eine Schrift, die drüber steht</h1>
<h2 class="teaser grey">Überschrift ist eine Schrift, die drüber steht</h2>
<h3 class="teaser black">Überschrift ist eine Schrift, die drüber steht</h3>
Verlinkungen
Links im Text werden immer in der Farbe der Einrichtung dargestellt. Zusätzlich kann dem Link ein kleiner Pfeil vorangestellt werden. Externe Links sind die Links, die Seiten markieren, welche die TU-Chemnitz-Webseiten verlassen. Diese Links sollten entsprechend gekennzeichnet werden. Zur Kennzeichnung wird das Symbol verwendet.
Hier steht ein Link mit Pfeil.
Hier steht ein Link, der auf eine externe Seite verweist.
<a href="#link">Hier steht der Standard-Link.</a><br />
<a class="link" href="#link">Hier steht ein Link mit Pfeil.</a><br />
<a class="linkextern" href="#link" target="_blank">Hier steht ein Link, der auf eine externe Seite verweist.</a>
Hinweis:
Mit dem Zusatz target=
"_blank"
wird der Link in einem neuen Tab geöffnet. Achten Sie in diesem Fall im Sinne der Barrierefreiheit darauf, dass die Kontextänderung (neuer Tab) im Linktext angegeben wird. Weitere Hinweise zu barrierefreien Linktexten finden Sie in unserem Leitfaden.
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.
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ü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](images/responsive-design.jpg)
<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">👍</span>
Entität | Beschreibung |
---|---|
 | Pfeil links |
 | Pfeil rechts |
 | Pfeil hoch |
 | Pfeil links unten |
 | Pfeil rechts unten |
 | Pfeil links oben |
 | Pfeil rechts oben |
 | Pfeil zurück |
 | Sackgasse |
 | Viertel |
 | Eingang |
 | Ausgang |
 | Barrierefreier Eingang |
 | Barrierefreier Ausgang |
 | Toiletten |
 | Toilette Frauen |
 | Toilette Männer |
 | Toilette barrierefrei |
 | Wickelraum |
 | Toilette Allgender |
 | Eltern-Kind-Raum |
 | Ruheraum |
 | Computerpool |
 | Garderobe/Umkleide |
 | Drucker |
 | Sportplatz |
 | Werkstatt |
 | Labor |
 | Mensa |
 | Snack, Kaffee, Tee |
 | Hauswirtschaftsraum |
 | Damenumkleide |
 | Herrenumkleide |
 | Info Nahverkehr |
 | Straßenbahnhaltestelle |
 | Bushaltestelle |
 | Fahrrad |
 | Parkplatz |
 | Barrierefreier Parkplatz |
 | Elektroladesäule |
⌖ | Standort |
 | Bibliothek/Buch |
 | Lesesaal |
 | Technikraum/Server |
 | Lagerraum |
 | Poststelle |
 | Wissensgarten |
 | Printservice |
 | Treppe aufwärts |
 | Treppe abwärts |
 | Personenaufzug |
 | Lastenaufzug |
🏫 | Seminarraum |
 | Hörsaal |
 | Treppe |
 | Hybride Lehre |
 | Besprechungsraum |
 | Erste-Hilfe-Raum |
 | Ersthelfer |
 | Defibrillator |
 | Sammelpunkt bei Gefahr |
 | Feuerlöscher |
 | Hörunterstützende Systeme |
 | Rauchen verboten |
 | Büro |
Entität | Beschreibung |
---|---|
👤 | Nutzer |
≡ | Menü |
≢ | Menüauswahl |
⚙ | Einstellungen |
❓ | Hilfe |
ℹ | Info |
📊 | Statistik |
📷 | Fotografieren |
📋 | Umfrage |
⫵ | Barcode scannen |
🎧 | Podcast |
📕 | Buch |
📔 | Wissenschaftliche Arbeit |
♫ | Musik |
🌐 | Sprachauswahl |
📰 | Nachrichten |
🎓 | Studiengänge/Absolventen |
📅 | Veranstaltungskalender |
🔬 | Forschung |
🏫 | Lehre |
↹ | Transfer |
⌂ | Start/Home |
⏰ | Uhr |
🞋 | Ziel |
 | Zielgruppe |
 | Prüfung |
 | Zertifikat/Zeugnis |
 | Zulassung |
 | Nachteilsausgleich |
△ | Pfeil hoch (tucicon-nav-up ) |
▷ | Pfeil rechts (tucicon-nav-right ) |
◁ | Pfeil links (tucicon-nav-left ) |
▽ | Pfeil runter (tucicon-nav-down ) |
📂 | Archiv |
⌖ | Aktuelle Position |
❗ | Wichtig |
🗑 | Müll/löschen |
♥ | Like |
🗲 | Blitz |
📱 | Smartphone |
Entität | Beschreibung |
---|---|
→ | Interner Link (tucicon-link ) |
↦ | Externer Link (tucicon-link-extern ) |
⇣ | Download (tucicon-link-download ) |
✅ | Check (tucicon-check ) |
❎ | Fehler (tucicon-error ) |
Ṙ | RSS-Feed (tucicon-rss ) |
▽ | Dropdown (tucicon-nav-down ) |
○ | Gesperrt (tucicon-key-closed ) |
◌ | Entsperrt (tucicon-key-open ) |
👆 | Touch |
☁ | Cloud |
✍ | Blog |
⏵ | Play-Button |
🖩 | Berechnen |
📈 | Wachstum |
🔗 | Verbindung/Link |
👍 | Feedback gut (tucicon-feedback-good ) |
👐 | Feedback neutral (tucicon-feedback-neutral ) |
👎 | Feedback schlecht (tucicon-feedback-bad ) |
✆ | Anrufen (tucicon-telephone ) |
⌕ | Suchen (tucicon-search ) |
⏴ | Video (tucicon-video ) |
⚠ | Notfallsituation (tucicon-emergency ) |
🗨 | Kontakt (tucicon-contact ) |
✉ | E-Mail (tucicon-mail ) |
⒫ | PDF (tucicon-pdf ) |
 | Word |
 | Excel |
⒵ | ZIP |
 | Powerpoint |
🗋 | Datei/Blatt/Papier |
 | Webcam |
Entität | Beschreibung |
---|---|
 | Printgenerator |
 | Navigation |
 | Stundenplan |
 | Kalender |
 | Vorlesungsfeedback |
 | OPAL |
 | Personensuche |
 | Campusplan |
📷 | Foto |
 | Robotik/Automatisierung |
💡 | Glühbirne/Idee |
 | Gruppenarbeit |
⏲ | Druck/Messen |
🌍 | Erde |
🤝 | Gemeinsam |
🦄 | Einhorn |
 | Bilddatenbank |
 | Rechte |
 | Digitale Lehre |
 | Digitale Prüfung |
 | OER |
 | Sound |
 | Smiley |
 | Formel |
 | Barrierefreiheit |
 | Barrierefreie PDFs |
 | Netzwerk |
 | Formel (invers) |
🧬 | Bio/DNA |
 | 3D/Perspektive |
🧠 | Denken/Gehirn |
 | Chip/Elektronik |
Entität | Beschreibung |
---|---|
ḟ | Facebook (tucicon-sm-fb ) |
ɗ | TikTok (tucicon-sm-tt ) |
Ẏ | YouTube (tucicon-sm-yt ) |
Ẋ | Xing (tucicon-sm-xi ) |
Ḷ | LinkedIn (tucicon-sm-li ) |
◘ | Instagram (tucicon-sm-in ) |
♟ | Snapchat (tucicon-sm-sc ) |
ⓜ | mastodon (tucicon-sm-ma ) |
ṫ | Twitter/X (tucicon-sm-tw ) |
Entität | Beschreibung |
---|---|
 | E-Medien |
 | Datenbank |
 | Schüler |
🎓 | Studierende |
🗨 | Gäste |
 | Wissenschaftliches Schreiben |
 | Publizieren |
 | Beraten/Beratung |
 | Open Access |
 | Open Data |
𝝮 | Open Source |
 | OER |
 | Citizen Science |
 | Open Review/Review |
 | Open Science |
Entität | Beschreibung |
---|---|
 | Materialien und Intelligente Systeme |
 | Ressourceneffiziente Produktion und Leichtbau |
 | 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.
<div class="tucbox-tip">
<h4>Überschrift Hinweisbox <code>tucbox-tip</code> <a href="#">Link</a></h4>
<p>Diese Box erscheint in der Hausfarbe… <a href="#">Link</a></p>
</div>
<div class="tucbox-tip-info">
<h4>Überschrift Hinweisbox <code>tucbox-tip-info</code> <a href="#">Link</a></h4>
<p>Diese Box ist grau… <a href="#">Link</a></p>
</div>
<div class="tucbox-tip-warning">
<h4>Überschrift Hinweisbox <code>tucbox-tip-warning</code> <a href="#">Link</a></h4>
<p>Diese Box soll Warnungen kennzeichnen… <a href="#">Link</a></p>
</div>
<div class="tucbox-tip-danger">
<h4>Überschrift Hinweisbox <code>tucbox-tip-danger</code> <a href="#">Link</a></h4>
<p>Diese Box kennzeichnet besonders wichtige, dringende und besonders hervorzuhebende Hinweise… <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.
<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
Überschrift im Panel tucbox-panel-info
, auch mit Link
<div class="tucbox-panel">
<div class="panel-heading">
<h3 class="panel-title">Ü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">Ü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.
<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
- Mehr Beispiele finden Sie auf der Bootstrap-Seite.
- Spaltenbreiten mit
col-xm-…
angeben statt mitcol-sm-…
! - Hinweise zur Formularauswertung mit PHP
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>
(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: