rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-02-18 15:54:26 +01:00
Code Issues Actions Packages Releases Activity

cleanup organization of tabbable nav section

Browse Source
This commit is contained in:
Mark Otto 2012-01-08 03:11:51 -08:00
parent b7acbd8476
commit 2376da40fb
1 changed files with 13 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

53
docs/components.html
View File

@ -262,23 +262,13 @@
<div class="row">
<div class="span4">
<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:</p>
<ul>
<li>top (default)</li>
<li>right</li>
<li>bottom</li>
<li>left</li>
</ul>
<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>
<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 &rarr;</a></p>
</div>
<div class="span8">
<div class="span4">
<h3>Tabbable example</h3>
<p>To make tabs tabbable, wrap the <code>.tabs</code> in another div with class <code>.tabbable</code>.</p>
<div class="tabbable">
<div class="tabbable" style="margin-bottom: 9px;">
<ul class="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>
@ -296,9 +286,16 @@
</div>
</div>
</div> <!-- /tabbable -->
<hr>
<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>
</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 &rarr;</a></p>
</div>
</div>
<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">
&lt;div class="tabbable"&gt;
&lt;ul class="nav tabs"&gt;
@ -315,8 +312,6 @@
&lt;/div&gt;
&lt;/div&gt;
</pre>
</div>
</div>
<h3>Tabbable in any direction</h3>
<div class="row">
@ -809,28 +804,6 @@
<!-- Autocomplete
================================================== -->
<section id="autocomplete">
<div class="page-header">
<h1>Autocomplete <small></small></h1>
</div>
</section>
<!-- Carousel
================================================== -->
<section id="carousel">
<div class="page-header">
<h1>Carousel <small></small></h1>
</div>
</section>
<!-- Alerts & Messages
================================================== -->
<section id="alerts">