Neueste Web-Entwicklung Tutorials
 

Bootstrap Navigation Components


Tabs und Pillen

Klasse Beschreibung Beispiel
.nav nav-tabs Erzeugt Navigations-Registerkarten Versuch es
.nav nav-pills Erzeugt Navigation Pillen Versuch es
.nav nav-pills nav-stacked Erzeugt vertikale Navigation Pillen Versuch es
.nav-justified Macht Navigation Tabs / Pillen gleiche Breiten ihrer Eltern, auf Bildschirmen breiter als 768px. Auf kleineren Bildschirmen sind die nav tabs / Pillen gestapelt Versuch es
.disabled Zeigt einen deaktiviert (unclickable) tab / Pille Versuch es
Navigation Tabs mit Drop-Down-Menü Versuch es
Navigation Pillen mit Drop-Down-Menü Versuch es
.tab-content Zusammen mit .tab-pane und data-toggle="tab" (data-toggle="pill" for pills) , macht es die Registerkarte / Pille toggable Versuch es
.tab-pane Zusammen mit .tab-content und data-toggle="tab" (data-toggle="pill" for pills) , macht es die Registerkarte / Pille toggable Versuch es

Paniermehl und Paginierung

Klasse Beschreibung Beispiel
.breadcrumb Macht ein Brotkrumen Versuch es
.pager Bietet einfache Paginierung Links (Zurück / Weiter) Versuch es
.previous Richtet die .pager vorherigen Taste auf der linken Seite Versuch es
.next Richtet die .pager nächste Taste nach rechts Versuch es
.disabled Zeigt einen unclickable Link Versuch es
.pagination Bietet Paginierung Links Versuch es
.pagination-lg Zusammen mit der .pagination Klasse größere Paginierung Links zur Verfügung zu stellen Versuch es
.pagination-sm Zusammen mit der .pagination Klasse kleiner Paginierung Links zur Verfügung zu stellen Versuch es
.disabled Zeigt einen unclickable Link Versuch es
.active Zeigt die aktuelle Seite Versuch es

Labels

Klasse Beschreibung Beispiel
.label label-default Zeigt ein Standard-grau-Label Versuch es
.label label-primary Zeigt ein blaues Etikett des Typs "primary" Versuch es
.label label-success Zeigt ein grünes Etikett vom Typ "success" Versuch es
.label label-info Zeigt ein hellblaues Etikett vom Typ "info" Versuch es
.label label-warning Zeigt ein gelbes Etikett vom Typ "warning" Versuch es
.label label-danger Zeigt ein rotes Etikett vom Typ "danger" Versuch es
.badge Zeigt neue oder noch ungelesene Artikel Versuch es
.jumbotron Weist auf eine große Kiste für den Aufruf zusätzliche Aufmerksamkeit auf funktionsfähige Inhalte oder Informationen Versuch es
.jumbotron (extra) Damit das .jumbotron Feld über die gesamte Breite erstrecken, und ohne abgerundete Ecken, legen Sie sie außerhalb der .container Klasse Versuch es