Hinweis: Die linke und rechte Seiten sind jeweils der Code in HTML und das Layout im Browser.
1. Code für Basic Tabs
<ul class='nav nav-tabs'>
<li class='active'><a href='#home' data-toggle='tab'>Home</a>
</li>
<li><a href='#profile' data-toggle='tab'>Profile</a>
</li>
<li><a href='#messages' data-toggle='tab'>Messages</a>
</li>
<li><a href='#settings' data-toggle='tab'>Settings</a>
</li>
</ul>
<!-- Tab panes -->
<div class='tab-content'>
<div class='tab-pane fade in active' id='home'>
<h4>Home Tab</h4>
<p>Text 1</p>
</div>
<div class='tab-pane fade' id='profile'>
<h4>Profile Tab</h4>
<p>Text 2</p>
</div>
<div class='tab-pane fade' id='messages'>
<h4>Messages Tab</h4>
<p>Text 3</p>
</div>
<div class='tab-pane fade' id='settings'>
<h4>Settings Tab</h4>
<p>Text 4</p>
</div>
</div>
1. Ausgabe für Basic Tabs
Text 1
Text 2
Text 3
Text 4
2. Code für Pills Tabs
<ul class='nav nav-pills'>
<li class='active'><a href='#home-pills' data-toggle='tab'>Home</a>
</li>
<li><a href='#profile-pills' data-toggle='tab'>Profile</a>
</li>
<li><a href='#messages-pills' data-toggle='tab'>Messages</a>
</li>
<li><a href='#settings-pills' data-toggle='tab'>Settings</a>
</li>
</ul>
<!-- Tab panes -->
<div class='tab-content'>
<div class='tab-pane fade in active' id='home-pills'>
<h4>Home Tab</h4>
<p>Text 1</p>
</div>
<div class='tab-pane fade' id='profile-pills'>
<h4>Profile Tab</h4>
<p>Text 2</p>
</div>
<div class='tab-pane fade' id='messages-pills'>
<h4>Messages Tab</h4>
<p>Text 3</p>
</div>
<div class='tab-pane fade' id='settings.pills'>
<h4>Settings Tab</h4>
<p>Text 4</p>
</div>
</div>
2. Ausgabe für Pills Tabs
Text 1
Text 2
Text 3
Text 4
3. Code für Tabbed Panel Default
<div class='panel tabbed-panel panel-default'>
<div class='panel-heading clearfix'>
<div class='panel-title pull-left'>Tabbed Panel Default</div>
<div class='pull-right'>
<ul class='nav nav-tabs'>
<li class='active'><a href='#tab-default-1' data-toggle='tab'>Page 1</a></li>
<li><a href='#tab-default-2' data-toggle='tab'>Page 2</a></li>
<li><a href='#tab-default-3' data-toggle='tab'>Page 3</a></li>
<li class='dropdown'>
<a href='#' data-toggle='dropdown'>More <span class='caret'></span></a>
<ul class='dropdown-menu' role='menu'>
<li><a href='#tab-default-4' data-toggle='tab'>Page 4</a></li>
<li><a href='#tab-default-5' data-toggle='tab'>Page 5</a></li>
</ul>
</li>
</ul>
</div>
</div>
<div class='panel-body'>
<div class='tab-content'>
<div class='tab-pane fade in active' id='tab-default-1'>Page 1</div>
<div class='tab-pane fade' id='tab-default-2'>Page 2</div>
<div class='tab-pane fade' id='tab-default-3'>Page 3</div>
<div class='tab-pane fade' id='tab-default-4'>Page 4</div>
<div class='tab-pane fade' id='tab-default-5'>Page 5</div>
</div>
</div>
</div>
3. Ausgabe für Tabbed Panel Default
Hinweis: Wenn Sie im Code statt primary dann info, success, warning und danger einsetzen, werden dann die Punkte 5, 6, 7 und 8 dargestellt.
4. Code für Tabbed Panel Primary
<div class='panel tabbed-panel panel-primary'>
<div class='panel-heading clearfix'>
<div class='panel-title pull-left'>Tabbed Panel Primary</div>
<div class='pull-right'>
<ul class='nav nav-tabs'>
<li class='active'><a href='#tab-primary-1' data-toggle='tab'>Page 1</a></li>
<li><a href='#tab-primary-2' data-toggle='tab'>Page 2</a></li>
<li><a href='#tab-primary-3' data-toggle='tab'>Page 3</a></li>
<li class='dropdown'>
<a href='#' data-toggle='dropdown'>More <span class='caret'></span></a>
<ul class='dropdown-menu' role='menu'>
<li><a href='#tab-primary-4' data-toggle='tab'>Page 4</a></li>
<li><a href='#tab-primary-5' data-toggle='tab'>Page 5</a></li>
</ul>
</li>
</ul>
</div>
</div>
<div class='panel-body'>
<div class='tab-content'>
<div class='tab-pane fade in active' id='tab-primary-1'>Page 1</div>
<div class='tab-pane fade' id='tab-primary-2'>Page 2</div>
<div class='tab-pane fade' id='tab-primary-3'>Page 3</div>
<div class='tab-pane fade' id='tab-primary-4'>Page 4</div>
<div class='tab-pane fade' id='tab-primary-5'>Page 5</div>
</div>
</div>
</div>
4. Ausgabe für Tabbed Panel Primary
5. Ausgabe für Tabbed Panel Info
6. Ausgabe für Tabbed Panel Success
7. Ausgabe für Tabbed Panel Warning
8. Ausgabe für Tabbed Panel Danger
9. Code für Collapsible Accordion Panel Group
<div class='panel-group' id='accordion'>
<div class='panel panel-info'>
<div class='panel-heading'>
<h4 class='panel-title'>
<a data-toggle='collapse' data-parent='#accordion' href='#collapseOne'>Page 1</a>
</h4>
</div>
<div id='collapseOne' class='panel-collapse collapse in'>
<div class='panel-body'>
<h4>Page 1</h4>
</div>
</div>
</div>
<div class='panel panel-info'>
<div class='panel-heading'>
<h4 class='panel-title'>
<a data-toggle='collapse' data-parent='#accordion' href='#collapseTwo'>Page 2</a>
</h4>
</div>
<div id='collapseTwo' class='panel-collapse collapse'>
<div class='panel-body'>
<h4>Page 2</h4>
</div>
</div>
</div>
<div class='panel panel-info'>
<div class='panel-heading'>
<h4 class='panel-title'>
<a data-toggle='collapse' data-parent='#accordion' href='#collapseThree'>Page 3</a>
</h4>
</div>
<div id='collapseThree' class='panel-collapse collapse'>
<div class='panel-body'>
<h4>Page 3</h4>
</div>
</div>
</div>
</div>