1
0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-25 06:21:26 +02:00

remove alt tab styles for now, too complicated to accomplish both static and tabble; fix up CSS a bit

This commit is contained in:
Mark Otto
2011-10-31 21:45:46 -07:00
parent ac9073e1e4
commit 31ea003046
4 changed files with 111 additions and 72 deletions

View File

@@ -245,39 +245,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="span2">
<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="span2">
<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="span5">
<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>
@@ -315,20 +282,20 @@
<div class="tab-content" id="myTabContent2">
<div class="tab-pane active" id="1">
<h4>Section 1</h4>
<p>Oh hai!</p>
<p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Maecenas sed diam eget risus varius blandit sit amet non magna. Vestibulum id ligula porta felis euismod semper.</p>
</div>
<div class="tab-pane" id="2">
<h4>Section 2</h4>
<p>Oh hai!</p>
<p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Maecenas sed diam eget risus varius blandit sit amet non magna. Vestibulum id ligula porta felis euismod semper.</p>
</div>
<div class="tab-pane" id="3">
<h4>Section 3</h4>
<p>Oh hai!</p>
<p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Maecenas sed diam eget risus varius blandit sit amet non magna. Vestibulum id ligula porta felis euismod semper.</p>
</div>
</div>
</div>
</div>
<div class="span5">
<div class="span4 offset1">
<div class="tabbable tabs-right">
<ul class="tabs" data-tabs="tabs">
<li class="active"><a href="#1">Section 1</a></li>
@@ -338,15 +305,15 @@
<div class="tab-content" id="myTabContent3">
<div class="tab-pane active" id="1">
<h4>Section 1</h4>
<p>Oh hai!</p>
<p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Maecenas sed diam eget risus varius blandit sit amet non magna. Vestibulum id ligula porta felis euismod semper.</p>
</div>
<div class="tab-pane" id="2">
<h4>Section 2</h4>
<p>Oh hai!</p>
<p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Maecenas sed diam eget risus varius blandit sit amet non magna. Vestibulum id ligula porta felis euismod semper.</p>
</div>
<div class="tab-pane" id="3">
<h4>Section 3</h4>
<p>Oh hai!</p>
<p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Maecenas sed diam eget risus varius blandit sit amet non magna. Vestibulum id ligula porta felis euismod semper.</p>
</div>
</div>
</div>