mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-16 10:34:07 +02:00
Code Issues Releases Wiki 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
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="row">
<div class="span4"> <div class="span4">
<h3>What's included</h3> <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> <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>
<ul>
<li>top (default)</li>
<li>right</li>
<li>bottom</li>
<li>left</li>
</ul>
<p>Changing between them is easy and only requires changing very little markup.</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>
<div class="span8"> <div class="span4">
<h3>Tabbable example</h3> <h3>Tabbable example</h3>
<p>To make tabs tabbable, wrap the <code>.tabs</code> in another div with class <code>.tabbable</code>.</p> <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"> <ul class="nav tabs">
<li class="active"><a href="#1" data-toggle="tab">Section 1</a></li> <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="#2" data-toggle="tab">Section 2</a></li>
@@ -296,9 +286,16 @@
</div> </div>
</div> </div>
</div> <!-- /tabbable --> </div> <!-- /tabbable -->
<hr> </div>
<h3>Straightforward markup</h3> <div class="span4">
<p>Using tabbable tabs requires a wrapping div, a set of tabs, and a set of tabbable panes of content.</p> <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"> <pre class="prettyprint linenums">
&lt;div class="tabbable"&gt; &lt;div class="tabbable"&gt;
&lt;ul class="nav tabs"&gt; &lt;ul class="nav tabs"&gt;
@@ -315,8 +312,6 @@
&lt;/div&gt; &lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;
</pre> </pre>
</div>
</div>
<h3>Tabbable in any direction</h3> <h3>Tabbable in any direction</h3>
<div class="row"> <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 <!-- Alerts & Messages
================================================== --> ================================================== -->
<section id="alerts"> <section id="alerts">