Dabei sind mehr als 250 Icons in Form einer Schriftart aus den Glyphicons Halflings.

 

<span class="glyphicon glyphicon-search"></span>

Weiterführende Informationen

Die Glyphicons müssen erst in der EM-Konfiguration aktiviert werden.
Hier sind stan­dard­mä­ßig Fontawesome Icons aktiviert.

Fontawesome Icons

Mehr als 600 Icons stehen hier zur Auswahl:
Fontawesome Icons

Nachdem Du dir ein Icon ausgesucht hast, wird dieses ohne die Basis-Klasse "fa" in das entsprechende Input-Feld eingeben.

Auch die Größe der Icons und weitere Parameter können angegeben werden.

Hier ein Beispiel für ein Font Awesome Icon mit weiteren Parametern: fa-spinner fa-spin fa-2x

 

Die Font Awesome Icons sind nicht nur in der NavBar, sondern auch als Überschrift-Icon in fast jedem Content-Element möglich.

Navs sind einfache Komponenten in Bootstrap, mit denen du verschiedene Bereiche deines Projekts verlinken kannst.

 

<ul class="nav nav-pills nav-stacke">
<li><a href="#">Start</a></li>
<li><a href="#">Profil</a></li>
<li><a href="#">Nachrichten</a></li>
</ul>

Weiterführende Informationen und Beispiele

Du hast im Contentelement "Spezial-Menüs" eine Auswahl an Typen.

Navbars sind anpassungsfähige Meta-Komponenten, die zur übergeordneten Navigation für deine Anwendung oder Site dienen. Sie beginnen auf mobilen Geräten minimiert (und können ein-/ausgeklappt werden) und werden dann horizontal, wenn die Breite des Bildschirms größer wird.

Weiterführende Informationen

Einstellungen und Anpassungen können im Konstanten-Editor durchgeführt werden.

Zeige an, wo sich die aktuelle Seite in einer Navigationshierarchie befindet.

Das Breadcrumb Menu kann über den Konstanten Editor ein- oder ausgeschaltet werden.

Breadcrumb ist mit der CSS-Klasse .hidden-xs versehen und somit auf Bildschirmen kleiner als 768px versteckt.

Weiterführende Informationen und Beispiele

Füge irgendeine der unten genannten zusätzlichen Klassen hinzu, um das Aussehen eines Labels anzupassen.

 

<span class="label label-default">Standard</span>
<span class="label label-primary">Primär</span>
<span class="label label-success">Erfolg</span>
<span class="label label-info">Info</span>
<span class="label label-warning">Warnung</span>
<span class="label label-danger">Gefahr</span>

Weiterführende Informationen

Du kannst diese Klassen mit dem Button "Benutzerdefiniertes Element einfügen" anbringen.

Beispiel:

default primary success info warning danger

Füge <span class="badge"> zu Links, Bootstrap-Navs und mehr hinzu, um Einträge hervorzuheben.

 

<p>Posteingang <span class="badge">42</span></p>

Weiterführende Informationen

Beispiel:

Posteingang 42

Eine leichte, flexible Komponente, die optional die gesamte Breite der Seite einnehmen kann, um wichtige Inhalte auf deiner Seite besonders zu präsentieren.

 

<div class="jumbotron">
<h1>Hallo Welt!</h1>
<p>...</p>
<p><a class="btn btn-primary btn-lg" href="#" role="button">Mehr erfahren</a></p>
</div>

Weiterführende Informationen

Der Jumbotron kann durch Auswahl des entsprechenden BE-Layouts angezeigt werden.

Weitere Einstellungen können im Konstanten Editor vorgenommen werden.

Eine einfache Hülle, um ein h1 für angemessenen Abstand zwischen Abschnitten auf einer Seite zu verwenden. Sie kann das normale small-Element des h1, sowie die meisten anderen Komponenten (mit zusätzlichen Stilen) enthalten.

 

<div class="page-header">
<h1>Beispiel-Seiten-Überschrift <small>Untertitel</small></h1>
</div>

Weiterführende Informationen

Mit der Vorschaubild-Komponente kannst du Bootstraps Raster-System erweitern, um ganz leicht ein Raster von Bildern, Videos, Text und mehr anzuzeigen.

Weiterführende Informationen

Zuerst muss ein Thumbnail-Behälter (Raster-Element) im BE erstellt werden.

Hier kann die Bildgröße und Anzahl der Spalten angegeben werden.
Mit einer weiteren Option besteht die Möglichkeit, die Thumbnails in gleicher Höhe pro Zeile anzuzeigen (jQuery:JavaSript).

In diesen Behälter können dann beliebig viele Thumbnails (neues Content Element) eingebunden werden.

Beispiel:

Vorschaubild-Titel

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Vorschaubild-Titel

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Beispiel mit Video

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Stelle mit den verschiedenen flexiblen Warnhinweisen Rückmeldungen mit Kontext für typische Benutzeraktionen zur Verfügung.

 

<div class="alert alert-success" role="alert">...</div>
<div class="alert alert-info" role="alert">...</div>
<div class="alert alert-warning" role="alert">...</div>
<div class="alert alert-danger" role="alert">...</div>

Weiterführende Informationen

Du kannst diese Klassen mit dem Button "Benutzerdefiniertes Element einfügen" anbringen.

Beispiel:

Sehr gut! Du hast erfolgreich diesen wichtigen Warnhinweis gelesen. 

Oh nein! Kontrolliere deine Eingaben und versuch es dann noch einmal.

Listengruppen sind eine flexible und umfangreiche Komponente für die Anzeige von mehr als simplen Listen von Elementen, nämlich komplexen Versionen davon mit eigenem Inhalt.

 

<ul class="list-group">
<li class="list-group-item">Cras justo odio</li>
<li class="list-group-item">Dapibus ac facilisis in</li>
<li class="list-group-item">Morbi leo risus</li>
<li class="list-group-item">Porta ac consectetur ac</li>
<li class="list-group-item">Vestibulum at eros</li>
</ul>

 

Weiterführende Informationen

Beispiel:

  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
  • Porta ac consectetur ac
  • Vestibulum at eros

Während das nicht immer notwendig ist, willst du dein DOM manchmal vielleicht in eine Box einfügen. Probier für solche Situationen doch mal die Panel-Komponente aus.

Wie bei anderen Komponenten kannst du auch einem Panel mit Kontextklassen mehr Bedeutung in Bezug auf einen bestimmten Zusammenhang verleihen.

 

<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">Panel-Titel</h3>
</div>
<div class="panel-body">
Panel-Inhalt
</div>
</div>

Weiterführende Informationen

Beispiel:

Panel-Titel

Panel-Inhalt

Ermöglicht es Browsern, die Abmessungen von Videos abhängig von der Breite des übergeordneten Blocks zu ermitteln, indem du ein grundlegendes Verhältnis festlegst, das sich jedem Gerät anpasst.

 

<!-- 16:9-Seitenverhältnis -->
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="..."></iframe>
</div>
<!-- 4:3-Seitenverhältnis -->
<div class="embed-responsive embed-responsive-4by3">
<iframe class="embed-responsive-item" src="..."></iframe>
</div>

 

Weiterführende Informationen

Das Seitenverhältnis kann im Konstanten-Editor ausgewählt werden.

Das Well kannst du als simplen Effekt für ein Element verwenden, um diesen einen eingravierten Effekt zu geben.

 

<div class="well">...</div> 

Innenabstand und abgerundete Ecken kannst du mit zwei optionalen Veränderungsklassen anpassen.

Weiterführende Informationen

Du kannst diese Klassen mit dem Button "Benutzerdefiniertes Element einfügen" anbringen.

Beispiel:

Sieh mal, ich bin in einem Well!

Sieh mal, ich bin in einem großen Well!

Sieh mal, ich bin in einem kleinen Well!