diff options
Diffstat (limited to 'docs')
| -rw-r--r-- | docs/assets/bootstrap.zip | bin | 56915 -> 56915 bytes | |||
| -rw-r--r-- | docs/components.html | 52 | ||||
| -rw-r--r-- | docs/templates/pages/components.mustache | 52 |
3 files changed, 56 insertions, 48 deletions
diff --git a/docs/assets/bootstrap.zip b/docs/assets/bootstrap.zip Binary files differindex 22a565198..48d9fdd1b 100644 --- a/docs/assets/bootstrap.zip +++ b/docs/assets/bootstrap.zip diff --git a/docs/components.html b/docs/components.html index 7854df523..66f62329a 100644 --- a/docs/components.html +++ b/docs/components.html @@ -779,54 +779,58 @@ <h3>What's included</h3> <p>Bring your tabs to life with a simple plugin to toggle between content via tabs. Bootstrap integrates tabbable tabs in four styles: top (default), right, bottom, and left.</p> <p>Changing between them is easy and only requires changing very little markup.</p> + <hr> + <h4>Fade in tabs</h4> + <p>To make tabs fade in, add <code>.fade</code> to each <code>.tab-pane</code>.</p> + <hr> + <h4>Requires jQuery plugin</h4> + <p>All tabbable tabs are powered by our lightweight jQuery plugin. Read more about how to bring tabbable tabs to life <a href="./javascript.html#tabs">on the javascript docs page</a>.</p> + <p><a class="btn" href="./javascript.html#tabs">Get the javascript →</a></p> </div> - <div class="span4"> + <div class="span8"> <h3>Tabbable example</h3> - <p>To make tabs tabbable, wrap the <code>.nav-tabs</code> in another div with class <code>.tabbable</code>.</p> - <div class="tabbable" style="margin-bottom: 9px;"> + <p>To make tabs tabbable, create a <code>.tab-pane</code> with unique ID for every tab and wrap them in <code>.tab-content</code>.</p> + <div class="tabbable" style="margin-bottom: 18px;"> <ul class="nav nav-tabs"> - <li class="active"><a href="#1" data-toggle="tab">Section 1</a></li> - <li><a href="#2" data-toggle="tab">Section 2</a></li> - <li><a href="#3" data-toggle="tab">Section 3</a></li> + <li class="active"><a href="#tab1" data-toggle="tab">Section 1</a></li> + <li><a href="#tab2" data-toggle="tab">Section 2</a></li> + <li><a href="#tab3" data-toggle="tab">Section 3</a></li> </ul> - <div class="tab-content"> - <div class="tab-pane active" id="1"> + <div class="tab-content" style="padding-bottom: 9px; border-bottom: 1px solid #ddd;"> + <div class="tab-pane active" id="tab1"> <p>I'm in Section 1.</p> </div> - <div class="tab-pane" id="2"> + <div class="tab-pane" id="tab2"> <p>Howdy, I'm in Section 2.</p> </div> - <div class="tab-pane" id="3"> + <div class="tab-pane" id="tab3"> <p>What up girl, this is Section 3.</p> </div> </div> </div> <!-- /tabbable --> - </div> - <div class="span4"> - <h3>Custom jQuery plugin</h3> - <p>All tabbable tabs are powered by our lightweight jQuery plugin. Read more about how to bring tabbable tabs to life on the javascript docs page.</p> - <p><a class="btn" href="./javascript.html#tabs">Get the javascript →</a></p> - </div> - </div> + <p>For right or left aligned tabs, wrap the <code>.nav-tabs</code> and <code>.tab-content</code> in <code>.tabbable</code>.</p> - <h3>Straightforward markup</h3> - <p>Using tabbable tabs requires a wrapping div, a set of tabs, and a set of tabbable panes of content.</p> + <h3>Straightforward markup</h3> + <p>Using tabbable tabs requires a wrapping div, a set of tabs, and a set of tabbable panes of content.</p> <pre class="prettyprint linenums"> -<div class="tabbable"> +<div class="tabbable"> <-- Only required for left/right tabs --> <ul class="nav nav-tabs"> - <li class="active"><a href="#1" data-toggle="tab">Section 1</a></li> - <li><a href="#2" data-toggle="tab">Section 2</a></li> + <li class="active"><a href="#tab1" data-toggle="tab">Section 1</a></li> + <li><a href="#tab2" data-toggle="tab">Section 2</a></li> </ul> <div class="tab-content"> - <div class="tab-pane active" id="1"> + <div class="tab-pane active" id="tab1"> <p>I'm in Section 1.</p> </div> - <div class="tab-pane" id="2"> + <div class="tab-pane" id="tab2"> <p>Howdy, I'm in Section 2.</p> </div> </div> </div> </pre> + </div> + </div> + <h3>Tabbable in any direction</h3> <div class="row"> diff --git a/docs/templates/pages/components.mustache b/docs/templates/pages/components.mustache index b0d88dd14..aff449c73 100644 --- a/docs/templates/pages/components.mustache +++ b/docs/templates/pages/components.mustache @@ -702,54 +702,58 @@ <h3>{{_i}}What's included{{/i}}</h3> <p>{{_i}}Bring your tabs to life with a simple plugin to toggle between content via tabs. Bootstrap integrates tabbable tabs in four styles: top (default), right, bottom, and left.{{/i}}</p> <p>{{_i}}Changing between them is easy and only requires changing very little markup.{{/i}}</p> + <hr> + <h4>{{_i}}Fade in tabs{{/i}}</h4> + <p>{{_i}}To make tabs fade in, add <code>.fade</code> to each <code>.tab-pane</code>.{{/i}}</p> + <hr> + <h4>{{_i}}Requires jQuery plugin{{/i}}</h4> + <p>{{_i}}All tabbable tabs are powered by our lightweight jQuery plugin. Read more about how to bring tabbable tabs to life <a href="./javascript.html#tabs">on the javascript docs page</a>.{{/i}}</p> + <p><a class="btn" href="./javascript.html#tabs">{{_i}}Get the javascript →{{/i}}</a></p> </div> - <div class="span4"> + <div class="span8"> <h3>{{_i}}Tabbable example{{/i}}</h3> - <p>{{_i}}To make tabs tabbable, wrap the <code>.nav-tabs</code> in another div with class <code>.tabbable</code>.{{/i}}</p> - <div class="tabbable" style="margin-bottom: 9px;"> + <p>{{_i}}To make tabs tabbable, create a <code>.tab-pane</code> with unique ID for every tab and wrap them in <code>.tab-content</code>.{{/i}}</p> + <div class="tabbable" style="margin-bottom: 18px;"> <ul class="nav nav-tabs"> - <li class="active"><a href="#1" data-toggle="tab">{{_i}}Section 1{{/i}}</a></li> - <li><a href="#2" data-toggle="tab">{{_i}}Section 2{{/i}}</a></li> - <li><a href="#3" data-toggle="tab">{{_i}}Section 3{{/i}}</a></li> + <li class="active"><a href="#tab1" data-toggle="tab">{{_i}}Section 1{{/i}}</a></li> + <li><a href="#tab2" data-toggle="tab">{{_i}}Section 2{{/i}}</a></li> + <li><a href="#tab3" data-toggle="tab">{{_i}}Section 3{{/i}}</a></li> </ul> - <div class="tab-content"> - <div class="tab-pane active" id="1"> + <div class="tab-content" style="padding-bottom: 9px; border-bottom: 1px solid #ddd;"> + <div class="tab-pane active" id="tab1"> <p>{{_i}}I'm in Section 1.{{/i}}</p> </div> - <div class="tab-pane" id="2"> + <div class="tab-pane" id="tab2"> <p>{{_i}}Howdy, I'm in Section 2.{{/i}}</p> </div> - <div class="tab-pane" id="3"> + <div class="tab-pane" id="tab3"> <p>{{_i}}What up girl, this is Section 3.{{/i}}</p> </div> </div> </div> <!-- /tabbable --> - </div> - <div class="span4"> - <h3>{{_i}}Custom jQuery plugin{{/i}}</h3> - <p>{{_i}}All tabbable tabs are powered by our lightweight jQuery plugin. Read more about how to bring tabbable tabs to life on the javascript docs page.{{/i}}</p> - <p><a class="btn" href="./javascript.html#tabs">{{_i}}Get the javascript →{{/i}}</a></p> - </div> - </div> + <p>{{_i}}For right or left aligned tabs, wrap the <code>.nav-tabs</code> and <code>.tab-content</code> in <code>.tabbable</code>.{{/i}}</p> - <h3>{{_i}}Straightforward markup{{/i}}</h3> - <p>{{_i}}Using tabbable tabs requires a wrapping div, a set of tabs, and a set of tabbable panes of content.{{/i}}</p> + <h3>{{_i}}Straightforward markup{{/i}}</h3> + <p>{{_i}}Using tabbable tabs requires a wrapping div, a set of tabs, and a set of tabbable panes of content.{{/i}}</p> <pre class="prettyprint linenums"> -<div class="tabbable"> +<div class="tabbable"> <-- Only required for left/right tabs --> <ul class="nav nav-tabs"> - <li class="active"><a href="#1" data-toggle="tab">{{_i}}Section 1{{/i}}</a></li> - <li><a href="#2" data-toggle="tab">{{_i}}Section 2{{/i}}</a></li> + <li class="active"><a href="#tab1" data-toggle="tab">{{_i}}Section 1{{/i}}</a></li> + <li><a href="#tab2" data-toggle="tab">{{_i}}Section 2{{/i}}</a></li> </ul> <div class="tab-content"> - <div class="tab-pane active" id="1"> + <div class="tab-pane active" id="tab1"> <p>{{_i}}I'm in Section 1.{{/i}}</p> </div> - <div class="tab-pane" id="2"> + <div class="tab-pane" id="tab2"> <p>{{_i}}Howdy, I'm in Section 2.{{/i}}</p> </div> </div> </div> </pre> + </div> + </div> + <h3>{{_i}}Tabbable in any direction{{/i}}</h3> <div class="row"> |