mirror of
https://github.com/twbs/bootstrap.git
synced 2025-01-29 21:52:22 +01:00
redoing the tabs on bottom, left, and right
This commit is contained in:
Mark Otto
parent
d0eecc85f8
commit
22e0c5f7c8
198
bootstrap.css
vendored
198
bootstrap.css
vendored
@ -6,7 +6,7 @@
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Designed and built with all the love in the world @twitter by @mdo and @fat.
|
||||
* Date: Sat Jan 7 21:10:08 PST 2012
|
||||
* Date: Sat Jan 7 22:06:30 PST 2012
|
||||
*/
|
||||
html, body {
|
||||
margin: 0;
|
||||
@ -1948,104 +1948,160 @@ i {
|
||||
opacity: 1;
|
||||
}
|
||||
.tabbable {
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
.tabbable .tabs {
|
||||
margin-bottom: 0;
|
||||
border-bottom: 0;
|
||||
}
|
||||
.tabbable .tab-content {
|
||||
padding: 19px;
|
||||
border: 1px solid #ddd;
|
||||
}
|
||||
.tabbable.tabs-bottom .tabs > li {
|
||||
margin-top: -1px;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.tabbable.tabs-bottom .tabs > li > a {
|
||||
-webkit-border-radius: 0 0 4px 4px;
|
||||
-moz-border-radius: 0 0 4px 4px;
|
||||
border-radius: 0 0 4px 4px;
|
||||
}
|
||||
.tabbable.tabs-bottom .tabs > li > a:hover {
|
||||
border-bottom-color: transparent;
|
||||
border-top-color: #ddd;
|
||||
}
|
||||
.tabbable.tabs-bottom .tabs > .active > a, .tabbable.tabs-bottom .tabs > .active > a:hover {
|
||||
border-color: transparent #ddd #ddd #ddd;
|
||||
}
|
||||
.tabbable.tabs-left, .tabbable.tabs-right {
|
||||
zoom: 1;
|
||||
}
|
||||
.tabbable.tabs-left:before,
|
||||
.tabbable.tabs-right:before,
|
||||
.tabbable.tabs-left:after,
|
||||
.tabbable.tabs-right:after {
|
||||
.tabbable:before, .tabbable:after {
|
||||
display: table;
|
||||
*display: inline;
|
||||
content: "";
|
||||
zoom: 1;
|
||||
}
|
||||
.tabbable.tabs-left:after, .tabbable.tabs-right:after {
|
||||
.tabbable:after {
|
||||
clear: both;
|
||||
}
|
||||
.tabbable.tabs-left .tabs, .tabbable.tabs-right .tabs {
|
||||
width: 100px;
|
||||
.tabs-below .tabs, .tabs-right .tabs, .tabs-left .tabs {
|
||||
border-bottom: 0;
|
||||
}
|
||||
.tabbable.tabs-left .tabs > li, .tabbable.tabs-right .tabs > li {
|
||||
.tabs-below .tabs {
|
||||
border-top: 1px solid #ddd;
|
||||
}
|
||||
.tabs-below .tabs > li {
|
||||
margin-top: -1px;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.tabs-below .tabs > li > a {
|
||||
-webkit-border-radius: 0 0 4px 4px;
|
||||
-moz-border-radius: 0 0 4px 4px;
|
||||
border-radius: 0 0 4px 4px;
|
||||
}
|
||||
.tabs-below .tabs > li > a:hover {
|
||||
border-bottom-color: transparent;
|
||||
border-top-color: #ddd;
|
||||
}
|
||||
.tabs-below .tabs .active > a, .tabs-below .tabs .active > a:hover {
|
||||
border-color: transparent #ddd #ddd #ddd;
|
||||
}
|
||||
.tabs-left .tabs > li, .tabs-right .tabs > li {
|
||||
float: none;
|
||||
margin-bottom: -1px;
|
||||
}
|
||||
.tabbable.tabs-left .tabs > li > a, .tabbable.tabs-right .tabs > li > a {
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
.tabbable.tabs-left .tabs > li > a:hover, .tabbable.tabs-right .tabs > li > a:hover {
|
||||
border-color: transparent;
|
||||
}
|
||||
.tabbable.tabs-left .tab-content {
|
||||
margin-left: 100px;
|
||||
}
|
||||
.tabbable.tabs-left .tabs {
|
||||
float: left;
|
||||
}
|
||||
.tabbable.tabs-left .tabs > li {
|
||||
margin-right: -1px;
|
||||
}
|
||||
.tabbable.tabs-left .tabs > li > a {
|
||||
.tabs-left .tabs > li > a, .tabs-right .tabs > li > a {
|
||||
min-width: 74px;
|
||||
margin-right: 0;
|
||||
margin-bottom: 3px;
|
||||
}
|
||||
.tabs-left .tabs {
|
||||
float: left;
|
||||
margin-right: 19px;
|
||||
border-right: 1px solid #ddd;
|
||||
}
|
||||
.tabs-left .tabs > li > a {
|
||||
margin-right: -1px;
|
||||
-webkit-border-radius: 4px 0 0 4px;
|
||||
-moz-border-radius: 4px 0 0 4px;
|
||||
border-radius: 4px 0 0 4px;
|
||||
}
|
||||
.tabbable.tabs-left .tabs > li > a:hover {
|
||||
border-right-color: #ddd;
|
||||
.tabs-left .tabs > li > a:hover {
|
||||
border-color: #eee #ddd #eee #eee;
|
||||
}
|
||||
.tabbable.tabs-left .tabs .active > a, .tabbable.tabs-left .tabs .active > a:hover {
|
||||
border-color: #ddd;
|
||||
border-right-color: transparent;
|
||||
.tabs-left .tabs .active > a, .tabs-left .tabs .active > a:hover {
|
||||
border-color: #ddd transparent #ddd #ddd;
|
||||
}
|
||||
.tabbable.tabs-right .tab-content {
|
||||
margin-right: 100px;
|
||||
}
|
||||
.tabbable.tabs-right .tabs {
|
||||
.tabs-right .tabs {
|
||||
float: right;
|
||||
margin-left: 19px;
|
||||
border-left: 1px solid #ddd;
|
||||
}
|
||||
.tabbable.tabs-right .tabs > li {
|
||||
.tabs-right .tabs > li > a {
|
||||
margin-left: -1px;
|
||||
}
|
||||
.tabbable.tabs-right .tabs > li > a {
|
||||
margin-left: 0;
|
||||
-webkit-border-radius: 0 4px 4px 0;
|
||||
-moz-border-radius: 0 4px 4px 0;
|
||||
border-radius: 0 4px 4px 0;
|
||||
}
|
||||
.tabbable.tabs-right .tabs > li > a:hover {
|
||||
border-left-color: #ddd;
|
||||
.tabs-right .tabs > li > a:hover {
|
||||
border-color: #eee #eee #eee #ddd;
|
||||
}
|
||||
.tabbable.tabs-right .tabs .active > a, .tabbable.tabs-right .tabs .active > a:hover {
|
||||
border-color: #ddd;
|
||||
border-left-color: transparent;
|
||||
.tabs-right .tabs .active > a, .tabs-right .tabs .active > a:hover {
|
||||
border-color: #ddd #ddd #ddd transparent;
|
||||
}
|
||||
/*
|
||||
.tabbable {
|
||||
|
||||
// Tabs on left and right
|
||||
&.tabs-left,
|
||||
&.tabs-right {
|
||||
.clearfix();
|
||||
.tabs {
|
||||
// Give a fixed width to avoid floating .tab-con
|
||||
width: 100px;
|
||||
// Unfloat them so they stack
|
||||
> li {
|
||||
float: none;
|
||||
margin-bottom: -1px;
|
||||
> a {
|
||||
margin-bottom: 2px;
|
||||
&:hover {
|
||||
border-color: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Tabs on left
|
||||
&.tabs-left {
|
||||
.tab-content {
|
||||
margin-left: 100px;
|
||||
}
|
||||
.tabs {
|
||||
float: left;
|
||||
> li {
|
||||
margin-right: -1px;
|
||||
> a {
|
||||
margin-right: 0;
|
||||
.border-radius(4px 0 0 4px);
|
||||
|
||||
&:hover {
|
||||
border-right-color: #ddd;
|
||||
}
|
||||
}
|
||||
}
|
||||
// Active state
|
||||
.active > a,
|
||||
.active > a:hover {
|
||||
border-color: #ddd;
|
||||
border-right-color: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Tabs on right
|
||||
&.tabs-right {
|
||||
.tab-content {
|
||||
margin-right: 100px;
|
||||
}
|
||||
.tabs {
|
||||
float: right;
|
||||
> li {
|
||||
margin-left: -1px;
|
||||
> a {
|
||||
margin-left: 0;
|
||||
.border-radius(0 4px 4px 0);
|
||||
|
||||
&:hover {
|
||||
border-left-color: #ddd;
|
||||
}
|
||||
}
|
||||
}
|
||||
// Active state
|
||||
.active > a,
|
||||
.active > a:hover {
|
||||
border-color: #ddd;
|
||||
border-left-color: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
*/
|
||||
.tab-content > .tab-pane, .pill-content > .pill-pane {
|
||||
display: none;
|
||||
}
|
||||
|
||||
31
bootstrap.min.css
vendored
31
bootstrap.min.css
vendored
@ -371,20 +371,23 @@ i{background-image:url(docs/assets/img/glyphicons-halflings-sprite.png);backgrou
|
||||
.tabs .dropdown-toggle .caret,.pills .dropdown-toggle .caret{margin-top:6px;}
|
||||
.tabs .open .dropdown-toggle,.pills .open .dropdown-toggle{background-color:#999;border-color:#999;}
|
||||
.tabs .open .caret,.pills .open .caret{border-top-color:#fff;filter:alpha(opacity=100);-moz-opacity:1;opacity:1;}
|
||||
.tabbable{margin-bottom:18px;}.tabbable .tabs{margin-bottom:0;border-bottom:0;}
|
||||
.tabbable .tab-content{padding:19px;border:1px solid #ddd;}
|
||||
.tabbable.tabs-bottom .tabs>li{margin-top:-1px;margin-bottom:0;}
|
||||
.tabbable.tabs-bottom .tabs>li>a{-webkit-border-radius:0 0 4px 4px;-moz-border-radius:0 0 4px 4px;border-radius:0 0 4px 4px;}.tabbable.tabs-bottom .tabs>li>a:hover{border-bottom-color:transparent;border-top-color:#ddd;}
|
||||
.tabbable.tabs-bottom .tabs>.active>a,.tabbable.tabs-bottom .tabs>.active>a:hover{border-color:transparent #ddd #ddd #ddd;}
|
||||
.tabbable.tabs-left,.tabbable.tabs-right{zoom:1;}.tabbable.tabs-left:before,.tabbable.tabs-right:before,.tabbable.tabs-left:after,.tabbable.tabs-right:after{display:table;*display:inline;content:"";zoom:1;}
|
||||
.tabbable.tabs-left:after,.tabbable.tabs-right:after{clear:both;}
|
||||
.tabbable.tabs-left .tabs,.tabbable.tabs-right .tabs{width:100px;}.tabbable.tabs-left .tabs>li,.tabbable.tabs-right .tabs>li{float:none;margin-bottom:-1px;}.tabbable.tabs-left .tabs>li>a,.tabbable.tabs-right .tabs>li>a{margin-bottom:2px;}.tabbable.tabs-left .tabs>li>a:hover,.tabbable.tabs-right .tabs>li>a:hover{border-color:transparent;}
|
||||
.tabbable.tabs-left .tab-content{margin-left:100px;}
|
||||
.tabbable.tabs-left .tabs{float:left;}.tabbable.tabs-left .tabs>li{margin-right:-1px;}.tabbable.tabs-left .tabs>li>a{margin-right:0;-webkit-border-radius:4px 0 0 4px;-moz-border-radius:4px 0 0 4px;border-radius:4px 0 0 4px;}.tabbable.tabs-left .tabs>li>a:hover{border-right-color:#ddd;}
|
||||
.tabbable.tabs-left .tabs .active>a,.tabbable.tabs-left .tabs .active>a:hover{border-color:#ddd;border-right-color:transparent;}
|
||||
.tabbable.tabs-right .tab-content{margin-right:100px;}
|
||||
.tabbable.tabs-right .tabs{float:right;}.tabbable.tabs-right .tabs>li{margin-left:-1px;}.tabbable.tabs-right .tabs>li>a{margin-left:0;-webkit-border-radius:0 4px 4px 0;-moz-border-radius:0 4px 4px 0;border-radius:0 4px 4px 0;}.tabbable.tabs-right .tabs>li>a:hover{border-left-color:#ddd;}
|
||||
.tabbable.tabs-right .tabs .active>a,.tabbable.tabs-right .tabs .active>a:hover{border-color:#ddd;border-left-color:transparent;}
|
||||
.tabbable{zoom:1;}.tabbable:before,.tabbable:after{display:table;*display:inline;content:"";zoom:1;}
|
||||
.tabbable:after{clear:both;}
|
||||
.tabs-below .tabs,.tabs-right .tabs,.tabs-left .tabs{border-bottom:0;}
|
||||
.tabs-below .tabs{border-top:1px solid #ddd;}
|
||||
.tabs-below .tabs>li{margin-top:-1px;margin-bottom:0;}
|
||||
.tabs-below .tabs>li>a{-webkit-border-radius:0 0 4px 4px;-moz-border-radius:0 0 4px 4px;border-radius:0 0 4px 4px;}.tabs-below .tabs>li>a:hover{border-bottom-color:transparent;border-top-color:#ddd;}
|
||||
.tabs-below .tabs .active>a,.tabs-below .tabs .active>a:hover{border-color:transparent #ddd #ddd #ddd;}
|
||||
.tabs-left .tabs>li,.tabs-right .tabs>li{float:none;}
|
||||
.tabs-left .tabs>li>a,.tabs-right .tabs>li>a{min-width:74px;margin-right:0;margin-bottom:3px;}
|
||||
.tabs-left .tabs{float:left;margin-right:19px;border-right:1px solid #ddd;}
|
||||
.tabs-left .tabs>li>a{margin-right:-1px;-webkit-border-radius:4px 0 0 4px;-moz-border-radius:4px 0 0 4px;border-radius:4px 0 0 4px;}
|
||||
.tabs-left .tabs>li>a:hover{border-color:#eee #ddd #eee #eee;}
|
||||
.tabs-left .tabs .active>a,.tabs-left .tabs .active>a:hover{border-color:#ddd transparent #ddd #ddd;}
|
||||
.tabs-right .tabs{float:right;margin-left:19px;border-left:1px solid #ddd;}
|
||||
.tabs-right .tabs>li>a{margin-left:-1px;-webkit-border-radius:0 4px 4px 0;-moz-border-radius:0 4px 4px 0;border-radius:0 4px 4px 0;}
|
||||
.tabs-right .tabs>li>a:hover{border-color:#eee #eee #eee #ddd;}
|
||||
.tabs-right .tabs .active>a,.tabs-right .tabs .active>a:hover{border-color:#ddd #ddd #ddd transparent;}
|
||||
.tab-content>.tab-pane,.pill-content>.pill-pane{display:none;}
|
||||
.tab-content>.active,.pill-content>.active{display:block;}
|
||||
.breadcrumb{padding:7px 14px;margin:0 0 18px;background-color:#f5f5f5;background-image:-khtml-gradient(linear, left top, left bottom, from(#ffffff), to(#f5f5f5));background-image:-moz-linear-gradient(top, #ffffff, #f5f5f5);background-image:-ms-linear-gradient(top, #ffffff, #f5f5f5);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff), color-stop(100%, #f5f5f5));background-image:-webkit-linear-gradient(top, #ffffff, #f5f5f5);background-image:-o-linear-gradient(top, #ffffff, #f5f5f5);background-image:linear-gradient(top, #ffffff, #f5f5f5);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#f5f5f5', GradientType=0);border:1px solid #ddd;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;-webkit-box-shadow:inset 0 1px 0 #ffffff;-moz-box-shadow:inset 0 1px 0 #ffffff;box-shadow:inset 0 1px 0 #ffffff;}.breadcrumb li{display:inline;text-shadow:0 1px 0 #ffffff;}
|
||||
|
||||
@ -258,7 +258,7 @@
|
||||
</div>
|
||||
|
||||
|
||||
<h2>Tabbable tabs</h2>
|
||||
<h2>Tabbable nav <small>Bring tabs to life via javascript</small></h2>
|
||||
<div class="row">
|
||||
<div class="span4">
|
||||
<h3>What's included</h3>
|
||||
@ -270,116 +270,128 @@
|
||||
<li>left</li>
|
||||
</ul>
|
||||
<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 →</a></p>
|
||||
</div>
|
||||
<div class="span4">
|
||||
</div>
|
||||
<div class="span4">
|
||||
</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—default (top), right, bottom, left—with example tab areas.</p>
|
||||
|
||||
<div class="span8">
|
||||
<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">
|
||||
<ul class="tabs">
|
||||
<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>
|
||||
<li><a href="#3" data-toggle="tab">Section 3</a></li>
|
||||
<li><a href="#4" data-toggle="tab">Section 4</a></li>
|
||||
</ul>
|
||||
<div class="tab-content">
|
||||
<div class="tab-pane active" id="1">
|
||||
<p>Oh hai #1!</p>
|
||||
<p>I'm in Section 1.</p>
|
||||
</div>
|
||||
<div class="tab-pane" id="2">
|
||||
<p>Oh hai #2!</p>
|
||||
<p>Howdy, I'm in Section 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>
|
||||
<p>What up girl, this is Section 3.</p>
|
||||
</div>
|
||||
</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>
|
||||
<pre class="prettyprint linenums">
|
||||
<div class="tabbable">
|
||||
<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>
|
||||
</ul>
|
||||
<div class="tab-content">
|
||||
<div class="tab-pane active" id="1">
|
||||
<p>I'm in Section 1.</p>
|
||||
</div>
|
||||
<div class="tab-pane" id="2">
|
||||
<p>Howdy, I'm in Section 2.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="span4">
|
||||
<div class="tabbable tabs-left">
|
||||
<ul class="tabs">
|
||||
<li class="active"><a href="#5" data-toggle="tab">Section 1</a></li>
|
||||
<li><a href="#6" data-toggle="tab">Section 2</a></li>
|
||||
<li><a href="#7" data-toggle="tab">Section 3</a></li>
|
||||
</ul>
|
||||
<div class="tab-content" id="myTabContent2">
|
||||
<div class="tab-pane active" id="5">
|
||||
<h4>Section 1</h4>
|
||||
<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="6">
|
||||
<h4>Section 2</h4>
|
||||
<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="7">
|
||||
<h4>Section 3</h4>
|
||||
<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="span4 offset1">
|
||||
<div class="tabbable tabs-right">
|
||||
<ul class="tabs">
|
||||
<li class="active"><a href="#8" data-toggle="tab">Section 1</a></li>
|
||||
<li><a href="#9" data-toggle="tab">Section 2</a></li>
|
||||
<li><a href="#10" data-toggle="tab">Section 3</a></li>
|
||||
</ul>
|
||||
<div class="tab-content" id="myTabContent3">
|
||||
<div class="tab-pane active" id="8">
|
||||
<h4>Section 1</h4>
|
||||
<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="9">
|
||||
<h4>Section 2</h4>
|
||||
<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="10">
|
||||
<h4>Section 3</h4>
|
||||
<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>
|
||||
|
||||
<div class="tabbable tabs-bottom">
|
||||
<h3>Tabbable in any direction</h3>
|
||||
<div class="row">
|
||||
<!--
|
||||
<div class="span4">
|
||||
<p>Swap the order of your HTML—placing <code>.tabs</code> after <code>.tab-content</code>—for tabs on the bottom.</p>
|
||||
</div>
|
||||
-->
|
||||
<div class="span4">
|
||||
<h4>Tabs on the bottom</h4>
|
||||
<p>Flip the order of the HTML and add a class to put tabs on the bottom.</p>
|
||||
<div class="tabbable tabs-below">
|
||||
<div class="tab-content">
|
||||
<div class="tab-pane active" id="11">
|
||||
<p>Oh hai #1!</p>
|
||||
<div class="tab-pane active" id="A">
|
||||
<p>I'm in Section A.</p>
|
||||
</div>
|
||||
<div class="tab-pane" id="12">
|
||||
<p>Oh hai #2!</p>
|
||||
<div class="tab-pane" id="B">
|
||||
<p>Howdy, I'm in Section B.</p>
|
||||
</div>
|
||||
<div class="tab-pane" id="13">
|
||||
<p>Oh hai #3!</p>
|
||||
</div>
|
||||
<div class="tab-pane" id="14">
|
||||
<p>Oh hai #4!</p>
|
||||
<div class="tab-pane" id="C">
|
||||
<p>What up girl, this is Section C.</p>
|
||||
</div>
|
||||
</div>
|
||||
<ul class="tabs">
|
||||
<li class="active"><a href="#11" data-toggle="tab">Section 1</a></li>
|
||||
<li><a href="#12" data-toggle="tab">Section 2</a></li>
|
||||
<li><a href="#13" data-toggle="tab">Section 3</a></li>
|
||||
<li><a href="#14" data-toggle="tab">Section 4</a></li>
|
||||
<ul class="nav tabs">
|
||||
<li class="active"><a href="#A" data-toggle="tab">Section 1</a></li>
|
||||
<li><a href="#B" data-toggle="tab">Section 2</a></li>
|
||||
<li><a href="#C" data-toggle="tab">Section 3</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div> <!-- /tabbable -->
|
||||
</div>
|
||||
<div class="span4">
|
||||
<h4>Tabs on the left</h4>
|
||||
<p>Swap the class to put tabs on the left.</p>
|
||||
<div class="tabbable tabs-left">
|
||||
<ul class="nav tabs">
|
||||
<li class="active"><a href="#lA" data-toggle="tab">Section 1</a></li>
|
||||
<li><a href="#lB" data-toggle="tab">Section 2</a></li>
|
||||
<li><a href="#lC" data-toggle="tab">Section 3</a></li>
|
||||
</ul>
|
||||
<div class="tab-content">
|
||||
<div class="tab-pane active" id="lA">
|
||||
<p>I'm in Section A.</p>
|
||||
</div>
|
||||
<div class="tab-pane" id="lB">
|
||||
<p>Howdy, I'm in Section B.</p>
|
||||
</div>
|
||||
<div class="tab-pane" id="lC">
|
||||
<p>What up girl, this is Section C.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div> <!-- /tabbable -->
|
||||
</div>
|
||||
<div class="span4">
|
||||
<h4>Tabs on the right</h4>
|
||||
<p>Swap the class to put tabs on the right.</p>
|
||||
<div class="tabbable tabs-right">
|
||||
<ul class="nav tabs">
|
||||
<li class="active"><a href="#rA" data-toggle="tab">Section 1</a></li>
|
||||
<li><a href="#rB" data-toggle="tab">Section 2</a></li>
|
||||
<li><a href="#rC" data-toggle="tab">Section 3</a></li>
|
||||
</ul>
|
||||
<div class="tab-content">
|
||||
<div class="tab-pane active" id="rA">
|
||||
<p>I'm in Section A.</p>
|
||||
</div>
|
||||
<div class="tab-pane" id="rB">
|
||||
<p>Howdy, I'm in Section B.</p>
|
||||
</div>
|
||||
<div class="tab-pane" id="rC">
|
||||
<p>What up girl, this is Section C.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div> <!-- /tabbable -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
|
||||
117
lib/navs.less
117
lib/navs.less
@ -203,36 +203,97 @@
|
||||
// TABBABLE
|
||||
// --------
|
||||
|
||||
|
||||
// COMMON STYLES
|
||||
// -------------
|
||||
|
||||
// Clear any floats
|
||||
.tabbable {
|
||||
.clearfix();
|
||||
}
|
||||
// Remove border on bottom, left, right
|
||||
.tabs-below .tabs,
|
||||
.tabs-right .tabs,
|
||||
.tabs-left .tabs {
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
// BOTTOM
|
||||
// ------
|
||||
|
||||
.tabs-below .tabs {
|
||||
border-top: 1px solid #ddd;
|
||||
}
|
||||
.tabs-below .tabs > li {
|
||||
margin-top: -1px;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.tabs-below .tabs > li > a {
|
||||
.border-radius(0 0 4px 4px);
|
||||
&:hover {
|
||||
border-bottom-color: transparent;
|
||||
border-top-color: #ddd;
|
||||
}
|
||||
}
|
||||
.tabs-below .tabs .active > a,
|
||||
.tabs-below .tabs .active > a:hover {
|
||||
border-color: transparent #ddd #ddd #ddd;
|
||||
}
|
||||
|
||||
// LEFT & RIGHT
|
||||
// ------------
|
||||
|
||||
// Common styles
|
||||
.tabs-left .tabs > li,
|
||||
.tabs-right .tabs > li {
|
||||
float: none;
|
||||
}
|
||||
.tabs-left .tabs > li > a,
|
||||
.tabs-right .tabs > li > a {
|
||||
min-width: 74px;
|
||||
margin-right: 0;
|
||||
margin-bottom: 3px;
|
||||
}
|
||||
|
||||
// Tabs on the left
|
||||
.tabs-left .tabs {
|
||||
float: left;
|
||||
margin-right: 19px;
|
||||
border-right: 1px solid #ddd;
|
||||
}
|
||||
.tabs-left .tabs > li > a {
|
||||
margin-right: -1px;
|
||||
.border-radius(4px 0 0 4px);
|
||||
}
|
||||
.tabs-left .tabs > li > a:hover {
|
||||
border-color: #eee #ddd #eee #eee;
|
||||
}
|
||||
.tabs-left .tabs .active > a,
|
||||
.tabs-left .tabs .active > a:hover {
|
||||
border-color: #ddd transparent #ddd #ddd;
|
||||
}
|
||||
|
||||
// Tabs on the right
|
||||
.tabs-right .tabs {
|
||||
float: right;
|
||||
margin-left: 19px;
|
||||
border-left: 1px solid #ddd;
|
||||
}
|
||||
.tabs-right .tabs > li > a {
|
||||
margin-left: -1px;
|
||||
.border-radius(0 4px 4px 0);
|
||||
}
|
||||
.tabs-right .tabs > li > a:hover {
|
||||
border-color: #eee #eee #eee #ddd;
|
||||
}
|
||||
.tabs-right .tabs .active > a,
|
||||
.tabs-right .tabs .active > a:hover {
|
||||
border-color: #ddd #ddd #ddd transparent;
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
.tabbable {
|
||||
margin-bottom: @baseLineHeight;
|
||||
|
||||
// Tabs on top
|
||||
.tabs {
|
||||
margin-bottom: 0;
|
||||
border-bottom: 0;
|
||||
}
|
||||
.tab-content {
|
||||
padding: 19px;
|
||||
border: 1px solid #ddd;
|
||||
}
|
||||
|
||||
// Tabs on bottom
|
||||
&.tabs-bottom .tabs > li {
|
||||
margin-top: -1px;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
&.tabs-bottom .tabs > li > a {
|
||||
.border-radius(0 0 4px 4px);
|
||||
&:hover {
|
||||
border-bottom-color: transparent;
|
||||
border-top-color: #ddd;
|
||||
}
|
||||
}
|
||||
&.tabs-bottom .tabs > .active > a,
|
||||
&.tabs-bottom .tabs > .active > a:hover {
|
||||
border-color: transparent #ddd #ddd #ddd;
|
||||
}
|
||||
|
||||
// Tabs on left and right
|
||||
&.tabs-left,
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user