mirror of
https://github.com/twbs/bootstrap.git
synced 2025-01-18 10:52:19 +01:00
Merge branch '2.0-wip' of https://github.com/twitter/bootstrap into 2.0-wip
This commit is contained in:
Jacob Thornton
commit
c78016e3ac
133
bootstrap.css
vendored
133
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: Sun Jan 8 01:50:02 PST 2012
|
||||
* Date: Sun Jan 8 02:58:37 PST 2012
|
||||
*/
|
||||
html, body {
|
||||
margin: 0;
|
||||
@ -485,6 +485,10 @@ blockquote small:before {
|
||||
}
|
||||
blockquote.pull-right {
|
||||
float: right;
|
||||
padding-left: 0;
|
||||
padding-right: 15px;
|
||||
border-left: 0;
|
||||
border-right: 5px solid #eee;
|
||||
}
|
||||
blockquote.pull-right p, blockquote.pull-right small {
|
||||
text-align: right;
|
||||
@ -1600,7 +1604,7 @@ i {
|
||||
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25), inset 0 -1px 0 rgba(0, 0, 0, 0.1);
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25), inset 0 -1px 0 rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
.navbar .brand:hover, .navbar ul .active > a {
|
||||
.navbar .brand:hover, .navbar .nav .active > a {
|
||||
color: #ffffff;
|
||||
text-decoration: none;
|
||||
background-color: #333333;
|
||||
@ -1921,7 +1925,7 @@ i {
|
||||
.pills.stacked > li:last-child > a {
|
||||
margin-bottom: 1px;
|
||||
}
|
||||
.tabs .dropdown-menu, .pills .dropdown-menu {
|
||||
.nav .dropdown-menu {
|
||||
top: 33px;
|
||||
border-width: 1px;
|
||||
}
|
||||
@ -1930,19 +1934,26 @@ i {
|
||||
-moz-border-radius: 4px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.tabs .dropdown-toggle .caret, .pills .dropdown-toggle .caret {
|
||||
.nav .dropdown-toggle .caret {
|
||||
border-top-color: #0088cc;
|
||||
margin-top: 6px;
|
||||
}
|
||||
.tabs .open .dropdown-toggle, .pills .open .dropdown-toggle {
|
||||
.nav .dropdown-toggle:hover .caret {
|
||||
border-top-color: #005580;
|
||||
}
|
||||
.nav .open .dropdown-toggle {
|
||||
background-color: #999;
|
||||
border-color: #999;
|
||||
}
|
||||
.tabs .open .caret, .pills .open .caret {
|
||||
.nav .open .caret, .nav .open a:hover .caret {
|
||||
border-top-color: #fff;
|
||||
filter: alpha(opacity=100);
|
||||
-moz-opacity: 1;
|
||||
opacity: 1;
|
||||
}
|
||||
.tabs.stacked .open > a:hover {
|
||||
border-color: #999;
|
||||
}
|
||||
.tabbable {
|
||||
zoom: 1;
|
||||
}
|
||||
@ -2996,6 +3007,61 @@ a.thumbnail:hover {
|
||||
visibility: hidden;
|
||||
}
|
||||
@media (max-width: 480px) {
|
||||
.navbar .nav {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 180px;
|
||||
padding-top: 40px;
|
||||
list-style: none;
|
||||
}
|
||||
.navbar .nav, .navbar .nav > li:last-child a {
|
||||
-webkit-border-radius: 0 0 4px 0;
|
||||
-moz-border-radius: 0 0 4px 0;
|
||||
border-radius: 0 0 4px 0;
|
||||
}
|
||||
.navbar .nav > li {
|
||||
float: none;
|
||||
display: none;
|
||||
}
|
||||
.navbar .nav > li > a {
|
||||
float: none;
|
||||
background-color: #222;
|
||||
}
|
||||
.navbar .nav > .active {
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
.navbar .nav > .active > a {
|
||||
background-color: transparent;
|
||||
}
|
||||
.navbar .nav > .active > a:hover {
|
||||
background-color: #333;
|
||||
}
|
||||
.navbar .nav > .active > a:after {
|
||||
display: inline-block;
|
||||
width: 0;
|
||||
height: 0;
|
||||
margin-top: 8px;
|
||||
margin-left: 6px;
|
||||
text-indent: -99999px;
|
||||
vertical-align: top;
|
||||
border-left: 4px solid transparent;
|
||||
border-right: 4px solid transparent;
|
||||
border-top: 4px solid #ffffff;
|
||||
filter: alpha(opacity=100);
|
||||
-moz-opacity: 1;
|
||||
opacity: 1;
|
||||
content: "↓";
|
||||
}
|
||||
.navbar .nav:hover > li {
|
||||
display: block;
|
||||
}
|
||||
.navbar .nav:hover > li > a:hover {
|
||||
background-color: #333;
|
||||
}
|
||||
.modal {
|
||||
width: auto;
|
||||
margin: 0;
|
||||
@ -3030,6 +3096,12 @@ a.thumbnail:hover {
|
||||
}
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.navbar-fixed {
|
||||
position: absolute;
|
||||
}
|
||||
.navbar-fixed .nav {
|
||||
float: none;
|
||||
}
|
||||
.container {
|
||||
width: auto;
|
||||
padding: 0 20px;
|
||||
@ -3043,55 +3115,6 @@ a.thumbnail:hover {
|
||||
width: auto;
|
||||
margin: 0;
|
||||
}
|
||||
.nav {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 180px;
|
||||
padding-top: 40px;
|
||||
list-style: none;
|
||||
}
|
||||
.nav, .nav > li:last-child a {
|
||||
-webkit-border-radius: 0 0 4px 0;
|
||||
-moz-border-radius: 0 0 4px 0;
|
||||
border-radius: 0 0 4px 0;
|
||||
}
|
||||
.nav > li {
|
||||
float: none;
|
||||
display: none;
|
||||
}
|
||||
.nav > li > a {
|
||||
float: none;
|
||||
background-color: #222;
|
||||
}
|
||||
.nav > .active {
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
.navbar ul .active > a {
|
||||
background-color: transparent;
|
||||
}
|
||||
.nav > .active a:after {
|
||||
display: inline-block;
|
||||
width: 0;
|
||||
height: 0;
|
||||
margin-top: 8px;
|
||||
margin-left: 6px;
|
||||
text-indent: -99999px;
|
||||
vertical-align: top;
|
||||
border-left: 4px solid transparent;
|
||||
border-right: 4px solid transparent;
|
||||
border-top: 4px solid #ffffff;
|
||||
filter: alpha(opacity=100);
|
||||
-moz-opacity: 1;
|
||||
opacity: 1;
|
||||
content: "↓";
|
||||
}
|
||||
.nav > .active a:hover {
|
||||
background-color: rgba(255, 255, 255, 0.05);
|
||||
}
|
||||
}
|
||||
@media (min-width: 768px) and (max-width: 940px) {
|
||||
.container {
|
||||
|
||||
16
bootstrap.min.css
vendored
16
bootstrap.min.css
vendored
@ -87,7 +87,7 @@ em{font-style:italic;font-weight:inherit;line-height:inherit;}
|
||||
abbr{font-size:90%;text-transform:uppercase;border-bottom:1px dotted #ddd;cursor:help;}
|
||||
blockquote{padding-left:15px;margin-bottom:18px;border-left:5px solid #eee;}blockquote p{margin-bottom:0;font-size:300;font-weight:16px;line-height:22.5px;}
|
||||
blockquote small{display:block;line-height:18px;color:#999999;}blockquote small:before{content:'\2014 \00A0';}
|
||||
blockquote.pull-right{float:right;}blockquote.pull-right p,blockquote.pull-right small{text-align:right;}
|
||||
blockquote.pull-right{float:right;padding-left:0;padding-right:15px;border-left:0;border-right:5px solid #eee;}blockquote.pull-right p,blockquote.pull-right small{text-align:right;}
|
||||
address{display:block;margin-bottom:18px;line-height:18px;}
|
||||
code,pre{padding:0 3px 2px;font-family:Menlo,Monaco,"Courier New",monospace;font-size:12px;color:#333333;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;}
|
||||
code{padding:1px 3px;background-color:#fee9cc;}
|
||||
@ -315,7 +315,7 @@ i{background-image:url(docs/assets/img/glyphicons-halflings-sprite.png);backgrou
|
||||
.close{float:right;font-size:20px;font-weight:bold;line-height:13.5px;color:#000000;text-shadow:0 1px 0 #ffffff;filter:alpha(opacity=20);-moz-opacity:0.2;opacity:0.2;}.close:hover{color:#000000;text-decoration:none;filter:alpha(opacity=40);-moz-opacity:0.4;opacity:0.4;}
|
||||
.navbar{overflow:visible;}
|
||||
.navbar-inner{background-color:#222222;background-color:#222222;background-image:-khtml-gradient(linear, left top, left bottom, from(#333333), to(#222222));background-image:-moz-linear-gradient(top, #333333, #222222);background-image:-ms-linear-gradient(top, #333333, #222222);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #333333), color-stop(100%, #222222));background-image:-webkit-linear-gradient(top, #333333, #222222);background-image:-o-linear-gradient(top, #333333, #222222);background-image:linear-gradient(top, #333333, #222222);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#333333', endColorstr='#222222', GradientType=0);-webkit-box-shadow:0 1px 3px rgba(0, 0, 0, 0.25),inset 0 -1px 0 rgba(0, 0, 0, 0.1);-moz-box-shadow:0 1px 3px rgba(0, 0, 0, 0.25),inset 0 -1px 0 rgba(0, 0, 0, 0.1);box-shadow:0 1px 3px rgba(0, 0, 0, 0.25),inset 0 -1px 0 rgba(0, 0, 0, 0.1);}
|
||||
.navbar .brand:hover,.navbar ul .active>a{color:#ffffff;text-decoration:none;background-color:#333333;background-color:rgba(255, 255, 255, 0.05);}
|
||||
.navbar .brand:hover,.navbar .nav .active>a{color:#ffffff;text-decoration:none;background-color:#333333;background-color:rgba(255, 255, 255, 0.05);}
|
||||
.navbar .brand{float:left;display:block;padding:8px 20px 12px;margin-left:-20px;font-size:20px;font-weight:200;line-height:1;color:#ffffff;}
|
||||
.navbar p{margin:0;line-height:40px;}.navbar p a:hover{color:#ffffff;background-color:transparent;}
|
||||
.navbar .btn{margin-top:5px;}
|
||||
@ -368,11 +368,13 @@ i{background-image:url(docs/assets/img/glyphicons-halflings-sprite.png);backgrou
|
||||
.tabs.stacked>li>a:hover{border-color:#ddd;z-index:2;}
|
||||
.pills.stacked>li>a{margin-bottom:3px;}
|
||||
.pills.stacked>li:last-child>a{margin-bottom:1px;}
|
||||
.tabs .dropdown-menu,.pills .dropdown-menu{top:33px;border-width:1px;}
|
||||
.nav .dropdown-menu{top:33px;border-width:1px;}
|
||||
.pills .dropdown-menu{-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;}
|
||||
.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;}
|
||||
.nav .dropdown-toggle .caret{border-top-color:#0088cc;margin-top:6px;}
|
||||
.nav .dropdown-toggle:hover .caret{border-top-color:#005580;}
|
||||
.nav .open .dropdown-toggle{background-color:#999;border-color:#999;}
|
||||
.nav .open .caret,.nav .open a:hover .caret{border-top-color:#fff;filter:alpha(opacity=100);-moz-opacity:1;opacity:1;}
|
||||
.tabs.stacked .open>a:hover{border-color:#999;}
|
||||
.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;}
|
||||
@ -511,4 +513,4 @@ a.thumbnail:hover{border-color:#0088cc;-webkit-box-shadow:0 1px 4px rgba(0, 105,
|
||||
.progress.info .bar{background-color:#339bb9;background-image:-khtml-gradient(linear, left top, left bottom, from(#5bc0de), to(#339bb9));background-image:-moz-linear-gradient(top, #5bc0de, #339bb9);background-image:-ms-linear-gradient(top, #5bc0de, #339bb9);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #5bc0de), color-stop(100%, #339bb9));background-image:-webkit-linear-gradient(top, #5bc0de, #339bb9);background-image:-o-linear-gradient(top, #5bc0de, #339bb9);background-image:linear-gradient(top, #5bc0de, #339bb9);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#5bc0de', endColorstr='#339bb9', GradientType=0);}
|
||||
.progress.info.striped .bar{background-color:#5bc0de;background-image:-webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent));background-image:-webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);background-image:-moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);background-image:-ms-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);background-image:-o-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);background-image:linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);}
|
||||
.hidden{display:none;visibility:hidden;}
|
||||
@media (max-width: 480px){.modal{width:auto;margin:0;}.modal.fade.in{top:auto;} .horizontal-form .control-group>label{float:none;width:auto;padding-top:0;text-align:left;} .horizontal-form .controls{margin-left:0;} .horizontal-form .control-list{padding-top:0;} .horizontal-form .form-actions{padding-left:0;} .modal{position:fixed;top:20px;left:20px;right:20px;width:auto;}.modal .close{padding:10px;}}@media (max-width: 768px){.container{width:auto;padding:0 20px;} .row{margin-left:0;} .row>[class*="span"]{float:none;display:block;width:auto;margin:0;} .nav{position:absolute;top:0;left:0;width:180px;padding-top:40px;list-style:none;} .nav,.nav>li:last-child a{-webkit-border-radius:0 0 4px 0;-moz-border-radius:0 0 4px 0;border-radius:0 0 4px 0;} .nav>li{float:none;display:none;} .nav>li>a{float:none;background-color:#222;} .nav>.active{display:block;position:absolute;top:0;left:0;} .navbar ul .active>a{background-color:transparent;} .nav>.active a:after{display:inline-block;width:0;height:0;margin-top:8px;margin-left:6px;text-indent:-99999px;vertical-align:top;border-left:4px solid transparent;border-right:4px solid transparent;border-top:4px solid #ffffff;filter:alpha(opacity=100);-moz-opacity:1;opacity:1;content:"↓";} .nav>.active a:hover{background-color:rgba(255, 255, 255, 0.05);}}@media (min-width: 768px) and (max-width: 940px){.container{width:748px;} .span1{width:44px;} .span2{width:108px;} .span3{width:172px;} .span4{width:236px;} .span5{width:300px;} .span6{width:364px;} .span7{width:428px;} .span8{width:492px;} .span9{width:556px;} .span10{width:620px;} .span11{width:684px;} .span12{width:748px;} .offset1{margin-left:64px;} .offset2{margin-left:128px;} .offset3{margin-left:192px;} .offset4{margin-left:256px;} .offset5{margin-left:320px;} .offset6{margin-left:384px;} .offset7{margin-left:448px;} .offset8{margin-left:512px;} .offset9{margin-left:576px;} .offset10{margin-left:640px;} .offset11{margin-left:704px;} .offset12{margin-left:768px;}}
|
||||
@media (max-width: 480px){.navbar .nav{position:absolute;top:0;left:0;width:180px;padding-top:40px;list-style:none;} .navbar .nav,.navbar .nav>li:last-child a{-webkit-border-radius:0 0 4px 0;-moz-border-radius:0 0 4px 0;border-radius:0 0 4px 0;} .navbar .nav>li{float:none;display:none;} .navbar .nav>li>a{float:none;background-color:#222;} .navbar .nav>.active{display:block;position:absolute;top:0;left:0;} .navbar .nav>.active>a{background-color:transparent;} .navbar .nav>.active>a:hover{background-color:#333;} .navbar .nav>.active>a:after{display:inline-block;width:0;height:0;margin-top:8px;margin-left:6px;text-indent:-99999px;vertical-align:top;border-left:4px solid transparent;border-right:4px solid transparent;border-top:4px solid #ffffff;filter:alpha(opacity=100);-moz-opacity:1;opacity:1;content:"↓";} .navbar .nav:hover>li{display:block;} .navbar .nav:hover>li>a:hover{background-color:#333;} .modal{width:auto;margin:0;}.modal.fade.in{top:auto;} .horizontal-form .control-group>label{float:none;width:auto;padding-top:0;text-align:left;} .horizontal-form .controls{margin-left:0;} .horizontal-form .control-list{padding-top:0;} .horizontal-form .form-actions{padding-left:0;} .modal{position:fixed;top:20px;left:20px;right:20px;width:auto;}.modal .close{padding:10px;}}@media (max-width: 768px){.navbar-fixed{position:absolute;} .navbar-fixed .nav{float:none;} .container{width:auto;padding:0 20px;} .row{margin-left:0;} .row>[class*="span"]{float:none;display:block;width:auto;margin:0;}}@media (min-width: 768px) and (max-width: 940px){.container{width:748px;} .span1{width:44px;} .span2{width:108px;} .span3{width:172px;} .span4{width:236px;} .span5{width:300px;} .span6{width:364px;} .span7{width:428px;} .span8{width:492px;} .span9{width:556px;} .span10{width:620px;} .span11{width:684px;} .span12{width:748px;} .offset1{margin-left:64px;} .offset2{margin-left:128px;} .offset3{margin-left:192px;} .offset4{margin-left:256px;} .offset5{margin-left:320px;} .offset6{margin-left:384px;} .offset7{margin-left:448px;} .offset8{margin-left:512px;} .offset9{margin-left:576px;} .offset10{margin-left:640px;} .offset11{margin-left:704px;} .offset12{margin-left:768px;}}
|
||||
|
||||
@ -222,9 +222,12 @@
|
||||
<h3>Application-style navigation</h3>
|
||||
<p>Nav lists provide a simple and easy way to build groups of nav links with optional headers. They're best used in sidebars like the Finder in OS X.</p>
|
||||
<p>Structurally, they're built on the same core nav styles as tabs and pills, so usage and customization are straightforward.</p>
|
||||
<h4>With icons</h4>
|
||||
<p>Nav lists are also easy to equip with icons. Add the proper <code><i></code> tag with class and you're set.</p>
|
||||
</div>
|
||||
<div class="span4">
|
||||
<h3>Example sidebar navigation</h3>
|
||||
<h3>Example nav list</h3>
|
||||
<p>Take a list of links and add <code>class="nav list"</code>:</p>
|
||||
<div class="well" style="padding: 8px 0;">
|
||||
<ul class="nav list">
|
||||
<li class="nav-header">List header</li>
|
||||
@ -237,9 +240,6 @@
|
||||
<li><a href="#">Help</a></li>
|
||||
</ul>
|
||||
</div> <!-- /well -->
|
||||
</div>
|
||||
<div class="span4">
|
||||
<h3>Simple markup</h3>
|
||||
<pre class="prettyprint linenums">
|
||||
<ul class="nav list">
|
||||
<li class="nav-header">
|
||||
@ -253,6 +253,34 @@
|
||||
</li>
|
||||
...
|
||||
</ul>
|
||||
</pre>
|
||||
</div>
|
||||
<div class="span4">
|
||||
<h3>Example with icons</h3>
|
||||
<p>Same example, but with <code><i></code> tags for icons.</p>
|
||||
<div class="well" style="padding: 8px 0;">
|
||||
<ul class="nav list">
|
||||
<li class="nav-header">List header</li>
|
||||
<li class="active"><a href="#"><i class="home"></i> Home</a></li>
|
||||
<li><a href="#"><i class="book"></i> Library</a></li>
|
||||
<li><a href="#"><i class="pencil"></i> Applications</a></li>
|
||||
<li class="nav-header">Another list header</li>
|
||||
<li><a href="#"><i class="user"></i> Profile</a></li>
|
||||
<li><a href="#"><i class="cog"></i> Settings</a></li>
|
||||
<li><a href="#"><i class="flag"></i> Help</a></li>
|
||||
</ul>
|
||||
</div> <!-- /well -->
|
||||
<pre class="prettyprint linenums">
|
||||
<ul class="nav list">
|
||||
...
|
||||
<li>
|
||||
<a href="#">
|
||||
<i class="book"></i>
|
||||
Library
|
||||
</a>
|
||||
</li>
|
||||
...
|
||||
</ul>
|
||||
</pre>
|
||||
</div>
|
||||
</div>
|
||||
@ -262,23 +290,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 →</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,7 +314,14 @@
|
||||
</div>
|
||||
</div>
|
||||
</div> <!-- /tabbable -->
|
||||
<hr>
|
||||
</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 →</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">
|
||||
@ -315,8 +340,6 @@
|
||||
</div>
|
||||
</div>
|
||||
</pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3>Tabbable in any direction</h3>
|
||||
<div class="row">
|
||||
@ -809,28 +832,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">
|
||||
|
||||
@ -243,11 +243,11 @@
|
||||
</div>
|
||||
<pre class="prettyprint linenums">
|
||||
<body>
|
||||
<div class="fluid-container">
|
||||
<div class="sidebar">
|
||||
<div class="fluid-container sidebar-left">
|
||||
<div class="fluid-sidebar">
|
||||
...
|
||||
</div>
|
||||
<div class="content">
|
||||
<div class="fluid-content">
|
||||
...
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -10,7 +10,7 @@
|
||||
.navbar {
|
||||
overflow: visible;
|
||||
}
|
||||
// gradient is applied to it's own element because overflow visible is not honored by ie when filter is present
|
||||
// gradient is applied to it's own element because overflow visible is not honored by IE when filter is present
|
||||
.navbar-inner {
|
||||
background-color: @navBarBgEnd;
|
||||
#gradient > .vertical(@navBarBgStart, @navBarBgEnd);
|
||||
@ -21,7 +21,7 @@
|
||||
.navbar {
|
||||
// Hover and active states
|
||||
.brand:hover,
|
||||
ul .active > a {
|
||||
.nav .active > a {
|
||||
color: @white;
|
||||
text-decoration: none;
|
||||
background-color: @navBarBgStart;
|
||||
|
||||
@ -175,29 +175,35 @@
|
||||
// ---------
|
||||
|
||||
// Position the menu
|
||||
.tabs .dropdown-menu,
|
||||
.pills .dropdown-menu {
|
||||
.nav .dropdown-menu {
|
||||
top: 33px;
|
||||
border-width: 1px;
|
||||
}
|
||||
.pills .dropdown-menu {
|
||||
.border-radius(4px);
|
||||
}
|
||||
.tabs .dropdown-toggle .caret,
|
||||
.pills .dropdown-toggle .caret {
|
||||
.nav .dropdown-toggle .caret {
|
||||
border-top-color: @linkColor;
|
||||
margin-top: 6px;
|
||||
}
|
||||
.tabs .open .dropdown-toggle,
|
||||
.pills .open .dropdown-toggle {
|
||||
.nav .dropdown-toggle:hover .caret {
|
||||
border-top-color: @linkColorHover;
|
||||
}
|
||||
.nav .open .dropdown-toggle {
|
||||
background-color: #999;
|
||||
border-color: #999;
|
||||
}
|
||||
.tabs .open .caret,
|
||||
.pills .open .caret {
|
||||
.nav .open .caret,
|
||||
.nav .open a:hover .caret {
|
||||
border-top-color: #fff;
|
||||
.opacity(100);
|
||||
}
|
||||
|
||||
// Dropdowns in stacked tabs
|
||||
.tabs.stacked .open > a:hover {
|
||||
border-color: #999;
|
||||
}
|
||||
|
||||
|
||||
|
||||
// TABBABLE
|
||||
|
||||
@ -18,6 +18,64 @@
|
||||
// ---------------------
|
||||
|
||||
@media (max-width: 480px) {
|
||||
|
||||
// Make the nav work for small devices
|
||||
.navbar {
|
||||
.nav {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 180px;
|
||||
padding-top: 40px;
|
||||
list-style: none;
|
||||
}
|
||||
.nav,
|
||||
.nav > li:last-child a {
|
||||
.border-radius(0 0 4px 0);
|
||||
}
|
||||
.nav > li {
|
||||
float: none;
|
||||
display: none;
|
||||
}
|
||||
.nav > li > a {
|
||||
float: none;
|
||||
background-color: #222;
|
||||
}
|
||||
.nav > .active {
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
.nav > .active > a {
|
||||
background-color: transparent;
|
||||
}
|
||||
.nav > .active > a:hover {
|
||||
background-color: #333;
|
||||
}
|
||||
.nav > .active > a:after {
|
||||
display: inline-block;
|
||||
width: 0;
|
||||
height: 0;
|
||||
margin-top: 8px;
|
||||
margin-left: 6px;
|
||||
text-indent: -99999px;
|
||||
vertical-align: top;
|
||||
border-left: 4px solid transparent;
|
||||
border-right: 4px solid transparent;
|
||||
border-top: 4px solid @white;
|
||||
.opacity(100);
|
||||
content: "↓";
|
||||
}
|
||||
|
||||
.nav:hover > li {
|
||||
display: block;
|
||||
}
|
||||
.nav:hover > li > a:hover {
|
||||
background-color: #333;
|
||||
}
|
||||
}
|
||||
|
||||
// Resize modals
|
||||
.modal {
|
||||
width: auto;
|
||||
@ -63,6 +121,15 @@
|
||||
// --------------------------------------------------
|
||||
|
||||
@media (max-width: 768px) {
|
||||
|
||||
// Unfix the navbar
|
||||
.navbar-fixed {
|
||||
position: absolute;
|
||||
}
|
||||
.navbar-fixed .nav {
|
||||
float: none;
|
||||
}
|
||||
|
||||
// Remove width from containers
|
||||
.container {
|
||||
width: auto;
|
||||
@ -80,53 +147,6 @@
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
// Make the nav work for small devices
|
||||
.nav {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 180px;
|
||||
padding-top: 40px;
|
||||
list-style: none;
|
||||
}
|
||||
.nav,
|
||||
.nav > li:last-child a {
|
||||
.border-radius(0 0 4px 0);
|
||||
}
|
||||
.nav > li {
|
||||
float: none;
|
||||
display: none;
|
||||
}
|
||||
.nav > li > a {
|
||||
float: none;
|
||||
background-color: #222;
|
||||
}
|
||||
.nav > .active {
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
.navbar ul .active > a {
|
||||
background-color: transparent;
|
||||
}
|
||||
.nav > .active a:after {
|
||||
display: inline-block;
|
||||
width: 0;
|
||||
height: 0;
|
||||
margin-top: 8px;
|
||||
margin-left: 6px;
|
||||
text-indent: -99999px;
|
||||
vertical-align: top;
|
||||
border-left: 4px solid transparent;
|
||||
border-right: 4px solid transparent;
|
||||
border-top: 4px solid @white;
|
||||
.opacity(100);
|
||||
content: "↓";
|
||||
}
|
||||
.nav > .active a:hover {
|
||||
background-color: rgba(255,255,255,.05);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
@ -165,6 +165,10 @@ blockquote {
|
||||
// Float right with text-align: right
|
||||
&.pull-right {
|
||||
float: right;
|
||||
padding-left: 0;
|
||||
padding-right: 15px;
|
||||
border-left: 0;
|
||||
border-right: 5px solid #eee;
|
||||
p,
|
||||
small {
|
||||
text-align: right;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user