mirrors/bootstrap
2
0
Fork 0
mirror of https://github.com/tenrok/bootstrap.git synced 2026-06-08 17:22:31 +03:00
Code Activity

remove new tab stuff since it breaks backwards compatability

Browse Source
This commit is contained in:
Mark Otto
2011-10-11 23:49:43 -07:00
parent e2a0ce2062
commit 740e64a2c9
3 changed files with 18 additions and 211 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/index.html
-143
View File
@@ -1474,140 +1474,6 @@
<li><a href="#">Contact</a></li>
</ul>
</pre>
<h3>Alternate tabs</h3>
<p>You can also use tabs that are stacked on either side of an element, or on the bottom.</p>
<div class="row">
<div class="span3">
<div class="clearfix">
<ul class="tabs tabs-left">
<li class="active"><a href="#">Active link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Linky link</a></li>
<li><a href="#">What up link</a></li>
</ul>
</div>
</div>
<div class="span3">
<div class="clearfix">
<ul class="tabs tabs-right">
<li class="active"><a href="#">Active link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Linky link</a></li>
<li><a href="#">What up link</a></li>
</ul>
</div>
</div>
<div class="span6">
<div class="clearfix">
<ul class="tabs tabs-bottom">
<li class="active"><a href="#">Active link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Linky link</a></li>
</ul>
</div>
</div>
</div>
<h3>Tabbable tabs</h3>
<p>As mentioned above, you can bring your tabs to life with a simple plugin. Here we have integrated all four variations of the tabs&mdash;default (top), right, bottom, left&mdash;with example tab areas.</p>
<div class="tabbable">
<ul class="tabs" data-tabs="tabs">
<li class="active"><a href="#1">Section 1</a></li>
<li><a href="#2">Section 2</a></li>
<li><a href="#3">Section 3</a></li>
<li><a href="#4">Section 4</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="1">
<p>Oh hai #1!</p>
</div>
<div class="tab-pane" id="2">
<p>Oh hai #2!</p>
</div>
<div class="tab-pane" id="3">
<p>Oh hai #3!</p>
</div>
<div class="tab-pane" id="4">
<p>Oh hai #4!</p>
</div>
</div>
</div>
<div class="row">
<div class="span6">
<div class="tabbable tabs-left">
<ul class="tabs" data-tabs="tabs">
<li class="active"><a href="#1">Section 1</a></li>
<li><a href="#2">Section 2</a></li>
<li><a href="#3">Section 3</a></li>
</ul>
<div class="tab-content" id="myTabContent2">
<div class="tab-pane active" id="1">
<h4>Section 1</h4>
<p>Oh hai!</p>
</div>
<div class="tab-pane" id="2">
<h4>Section 2</h4>
<p>Oh hai!</p>
</div>
<div class="tab-pane" id="3">
<h4>Section 3</h4>
<p>Oh hai!</p>
</div>
</div>
</div>
</div>
<div class="span6">
<div class="tabbable tabs-right">
<ul class="tabs" data-tabs="tabs">
<li class="active"><a href="#1">Section 1</a></li>
<li><a href="#2">Section 2</a></li>
<li><a href="#3">Section 3</a></li>
</ul>
<div class="tab-content" id="myTabContent3">
<div class="tab-pane active" id="1">
<h4>Section 1</h4>
<p>Oh hai!</p>
</div>
<div class="tab-pane" id="2">
<h4>Section 2</h4>
<p>Oh hai!</p>
</div>
<div class="tab-pane" id="3">
<h4>Section 3</h4>
<p>Oh hai!</p>
</div>
</div>
</div>
</div>
</div>
<div class="tabbable tabs-bottom">
<div class="tab-content">
<div class="tab-pane active" id="1">
<p>Oh hai #1!</p>
</div>
<div class="tab-pane" id="2">
<p>Oh hai #2!</p>
</div>
<div class="tab-pane" id="3">
<p>Oh hai #3!</p>
</div>
<div class="tab-pane" id="4">
<p>Oh hai #4!</p>
</div>
</div>
<ul class="tabs" data-tabs="tabs">
<li class="active"><a href="#1">Section 1</a></li>
<li><a href="#2">Section 2</a></li>
<li><a href="#3">Section 3</a></li>
<li><a href="#4">Section 4</a></li>
</ul>
</div>
<p>In addition to tabs, we have pills! Though a bit more limited in functionality, they share much of the same markup.</p>
<hr>
<h3>Basic pills example</h3>
<ul class="pills">
<li class="active"><a href="#">Home</a></li>
@@ -1625,15 +1491,6 @@
&lt;li&gt;&lt;a href="#"&gt;Contact&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
</pre>
<h3>Vertical pill nav</h3>
<p>With a pill-style nav, you can also stack the list items to have a simple sidebar. We don't offer left or right aligned versions here because that's easy enough to customize based on your own needs</p>
<ul class="pills pills-vertical span4">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Profile</a></li>
<li><a href="#">Messages</a></li>
<li><a href="#">Settings</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</div><!-- /row -->