rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2024-11-29 11:24:18 +01:00
Code Issues Actions Packages Releases Activity

Fixes #9991: Better docs for tabbable tabs and fade classes

Browse Source 
* Adds full code snippets
* Adds snippet for `.fade`
* Adds callout for `.in` requirement on first fade-able tab
This commit is contained in:
Mark Otto 2013-08-27 08:05:26 -07:00
parent 2970653bdc
commit 1445e09b5f
1 changed files with 19 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
javascript.html
View File

@ -708,15 +708,33 @@ $('#myTab li:eq(2) a').tab('show') // Select third tab (0-indexed)
<h3>Markup</h3>
<p>You can activate a tab or pill navigation without writing any JavaScript by simply specifying <code>data-toggle="tab"</code> or <code>data-toggle="pill"</code> on an element. Adding the <code>nav</code> and <code>nav-tabs</code> classes to the tab <code>ul</code> will apply the Bootstrap tab styling.</p>
{% highlight html %}
<!-- Nav tabs -->
<ul class="nav nav-tabs">
<li><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 active" id="home">...</div>
<div class="tab-pane" id="profile">...</div>
<div class="tab-pane" id="messages">...</div>
<div class="tab-pane" id="settings">...</div>
</div>
{% endhighlight %}
<p>To make tabs fade in, add <code>.fade</code> to each <code>.tab-pane</code>.</p>
<h3>Fade effect</h3>
<p>To make tabs fade in, add <code>.fade</code> to each <code>.tab-pane</code>. The first tab pane must also have <code>.in</code> to properly fade in initial content.</p>
{% highlight html %}
<div class="tab-content">
<div class="tab-pane fade in active" id="home">...</div>
<div class="tab-pane fade" id="profile">...</div>
<div class="tab-pane fade" id="messages">...</div>
<div class="tab-pane fade" id="settings">...</div>
</div>
{% endhighlight %}
<h3>Methods</h3>
<h4>$().tab</h4>