rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-01-17 09:52:29 +01:00
Code Issues Actions Packages Releases Activity

overhaul the entire tabs component structure and docs; remove side nav and make it a nav list to build on new .nav base class

Browse Source
This commit is contained in:
Mark Otto 2012-01-07 20:40:28 -08:00
parent 1438b14f74
commit 2948d1c3b2
13 changed files with 1112 additions and 1007 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

306
bootstrap.css vendored
View File

@ -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 15:52:40 PST 2012
* Date: Sat Jan 7 20:25:41 PST 2012
*/
html, body {
margin: 0;
@ -516,9 +516,9 @@ pre {
background-color: #f5f5f5;
border: 1px solid #ccc;
border: 1px solid rgba(0, 0, 0, 0.15);
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
white-space: pre;
white-space: pre-wrap;
word-break: break-all;
@ -541,6 +541,7 @@ legend {
line-height: 36px;
color: #333333;
border-bottom: 1px solid #eee;
-webkit-margin-collapse: separate;
}
label,
input,
@ -1502,6 +1503,16 @@ i {
background-image: linear-gradient(top, #049cdb, #0064cd);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#049cdb', endColorstr='#0064cd', GradientType=0);
background-color: #0077b3;
background-image: -khtml-gradient(linear, left top, left bottom, from(#0088cc), to(#0077b3));
background-image: -moz-linear-gradient(top, #0088cc, #0077b3);
background-image: -ms-linear-gradient(top, #0088cc, #0077b3);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #0088cc), color-stop(100%, #0077b3));
background-image: -webkit-linear-gradient(top, #0088cc, #0077b3);
background-image: -o-linear-gradient(top, #0088cc, #0077b3);
background-image: linear-gradient(top, #0088cc, #0077b3);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0088cc', endColorstr='#0077b3', GradientType=0);
-webkit-box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.075), inset 0 -1px rgba(0, 0, 0, 0.075);
-moz-box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.075), inset 0 -1px rgba(0, 0, 0, 0.075);
box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.075), inset 0 -1px rgba(0, 0, 0, 0.075);
@ -1692,19 +1703,51 @@ i {
left: 0;
z-index: 1010;
}
.nav {
.navbar .nav {
position: relative;
left: 0;
display: block;
float: left;
margin: 0 10px 0 0;
/* // Dropdowns within the .nav
.dropdown-toggle:hover,
.dropdown.open .dropdown-toggle {
background: #444;
background: rgba(255,255,255,.05);
}
.dropdown-menu {
background-color: #333;
.dropdown-toggle {
color: @white;
&.open {
background: #444;
background: rgba(255,255,255,.05);
}
}
li a {
padding: 4px 15px;
color: #999;
text-shadow: 0 1px 0 rgba(0,0,0,.5);
&:hover {
#gradient > .vertical(#292929,#191919);
color: @white;
}
}
.active a {
color: @white;
}
.divider {
background-color: #222;
border-color: #444;
}
}*/
}
.nav > li {
.navbar .nav > li {
display: block;
float: left;
}
.nav a {
display: block;
.navbar .nav a {
float: none;
padding: 10px 10px 11px;
line-height: 19px;
@ -1712,15 +1755,15 @@ i {
text-decoration: none;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
}
.nav a:hover {
.navbar .nav a:hover {
color: #ffffff;
text-decoration: none;
}
.nav .active > a {
.navbar .nav .active > a {
background-color: #222;
background-color: rgba(0, 0, 0, 0.5);
}
.nav .vertical-divider {
.navbar .nav .vertical-divider {
height: 40px;
width: 1px;
margin: 0 5px;
@ -1728,58 +1771,55 @@ i {
background-color: #222;
border-right: 1px solid #444;
}
.nav.secondary-nav {
.navbar .nav.secondary-nav {
float: right;
margin-left: 10px;
margin-right: 0;
}
.nav.secondary-nav .dropdown-menu {
.navbar .nav.secondary-nav .dropdown-menu {
right: 0;
border: 0;
}
.nav .dropdown-toggle:hover, .nav .dropdown.open .dropdown-toggle {
background: #444;
background: rgba(255, 255, 255, 0.05);
.nav {
margin-left: 0;
margin-bottom: 18px;
list-style: none;
}
.nav .dropdown-menu {
background-color: #333;
.nav > li > a {
display: block;
}
.nav .dropdown-menu .dropdown-toggle {
.nav > li > a:hover {
text-decoration: none;
background-color: #eee;
}
.nav.list {
padding-left: 14px;
padding-right: 14px;
margin-bottom: 0;
}
.nav.list > li > a, .nav.list .nav-header {
display: block;
padding: 3px 15px;
margin-left: -15px;
margin-right: -15px;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
}
.nav.list .nav-header {
font-size: 11px;
font-weight: bold;
line-height: 18px;
color: #999999;
text-transform: uppercase;
}
.nav.list > li + .nav-header {
margin-top: 9px;
}
.nav.list .active > a {
color: #ffffff;
}
.nav .dropdown-menu .dropdown-toggle.open {
background: #444;
background: rgba(255, 255, 255, 0.05);
}
.nav .dropdown-menu li a {
padding: 4px 15px;
color: #999;
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5);
}
.nav .dropdown-menu li a:hover {
background-color: #191919;
background-image: -khtml-gradient(linear, left top, left bottom, from(#292929), to(#191919));
background-image: -moz-linear-gradient(top, #292929, #191919);
background-image: -ms-linear-gradient(top, #292929, #191919);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #292929), color-stop(100%, #191919));
background-image: -webkit-linear-gradient(top, #292929, #191919);
background-image: -o-linear-gradient(top, #292929, #191919);
background-image: linear-gradient(top, #292929, #191919);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#292929', endColorstr='#191919', GradientType=0);
color: #ffffff;
}
.nav .dropdown-menu .active a {
color: #ffffff;
}
.nav .dropdown-menu .divider {
background-color: #222;
border-color: #444;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.2);
background-color: #0088cc;
}
.tabs, .pills {
padding: 0;
margin: 0 0 20px;
list-style: none;
zoom: 1;
}
.tabs:before,
@ -1798,29 +1838,26 @@ i {
float: left;
}
.tabs > li > a, .pills > li > a {
display: block;
padding-right: 12px;
padding-left: 12px;
margin-right: 2px;
line-height: 14px;
}
.tabs {
border-color: #ddd;
border-style: solid;
border-width: 0 0 1px;
border-bottom: 1px solid #ddd;
}
.tabs > li {
position: relative;
margin-bottom: -1px;
}
.tabs > li > a {
padding: 0 15px;
margin-right: 2px;
line-height: 36px;
padding-top: 9px;
padding-bottom: 9px;
border: 1px solid transparent;
-webkit-border-radius: 4px 4px 0 0;
-moz-border-radius: 4px 4px 0 0;
border-radius: 4px 4px 0 0;
}
.tabs > li > a:hover {
text-decoration: none;
background-color: #eee;
border-color: #eee #eee #ddd;
}
.tabs .active > a, .tabs .active > a:hover {
@ -1830,6 +1867,76 @@ i {
border-bottom-color: transparent;
cursor: default;
}
.pills > li > a {
padding-top: 8px;
padding-bottom: 8px;
margin-top: 2px;
margin-bottom: 2px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
.pills .active > a, .pills .active > a:hover {
color: #ffffff;
background-color: #0088cc;
}
.nav.stacked > li {
float: none;
}
.nav.stacked > li > a {
margin-right: 0;
}
.tabs.stacked {
border-bottom: 0;
}
.tabs.stacked > li > a {
border: 1px solid #ddd;
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
}
.tabs.stacked > li:first-child > a {
-webkit-border-radius: 4px 4px 0 0;
-moz-border-radius: 4px 4px 0 0;
border-radius: 4px 4px 0 0;
}
.tabs.stacked > li:last-child > a {
-webkit-border-radius: 0 0 4px 4px;
-moz-border-radius: 0 0 4px 4px;
border-radius: 0 0 4px 4px;
}
.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;
}
.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;
}
.tabbable {
margin-bottom: 18px;
}
@ -1929,46 +2036,6 @@ i {
border-color: #ddd;
border-left-color: transparent;
}
.tabs .dropdown-menu {
top: 37px;
border-width: 1px;
}
.tabs .dropdown-toggle .caret {
margin-top: 15px;
margin-left: 5px;
}
.tabs .open .dropdown-toggle {
border-color: #999;
}
.tabs .open .dropdown-toggle .caret {
border-top-color: #fff;
filter: alpha(opacity=100);
-moz-opacity: 1;
opacity: 1;
}
.pills > li > a {
padding: 0 15px;
margin: 5px 3px 5px 0;
line-height: 30px;
text-shadow: 0 1px 1px #ffffff;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
}
.pills > li > a:hover {
color: #ffffff;
text-decoration: none;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
background-color: #005580;
}
.pills .active > a {
color: #ffffff;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
background-color: #0088cc;
}
.pills-vertical > li {
float: none;
}
.tab-content > .tab-pane, .pill-content > .pill-pane {
display: none;
}
@ -2060,27 +2127,29 @@ i {
color: #333333;
background-color: #eee;
}
.side-nav {
padding: 9px 0;
/*.side-nav {
padding: @baseLineHeight / 2 0;
}
.side-nav .nav-label, .side-nav .nav-item {
.side-nav .nav-label,
.side-nav .nav-item {
display: block;
padding: 3px 15px;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
text-shadow: 0 1px 0 rgba(255,255,255,.5);
}
.side-nav .nav-label {
font-size: 11px;
line-height: 18px;
color: #999999;
line-height: @baseLineHeight;
color: @grayLight;
text-transform: uppercase;
}
.side-nav .nav-group {
margin: 0;
margin: 0; // clear default ul margins
list-style: none;
}
.side-nav .nav-group + .nav-label {
margin-top: 9px;
}
.side-nav .nav-item {
font-weight: bold;
}
@ -2092,22 +2161,11 @@ i {
}
.side-nav .active .nav-item {
color: #fff;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3);
background-color: #999999;
background-image: -khtml-gradient(linear, left top, left bottom, from(#cccccc), to(#999999));
background-image: -moz-linear-gradient(top, #cccccc, #999999);
background-image: -ms-linear-gradient(top, #cccccc, #999999);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #cccccc), color-stop(100%, #999999));
background-image: -webkit-linear-gradient(top, #cccccc, #999999);
background-image: -o-linear-gradient(top, #cccccc, #999999);
background-image: linear-gradient(top, #cccccc, #999999);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#999999', GradientType=0);
-webkit-box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.05), inset 0 -1px 0 rgba(0, 0, 0, 0.05);
-moz-box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.05), inset 0 -1px 0 rgba(0, 0, 0, 0.05);
box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.05), inset 0 -1px 0 rgba(0, 0, 0, 0.05);
}
.breadcrumb {
text-shadow: 0 -1px 0 rgba(0,0,0,.3);
#gradient > .vertical(#ccc, #999);
@shadow: inset 0 1px 0 rgba(0,0,0,.05), inset 0 -1px 0 rgba(0,0,0,.05);
.box-shadow(@shadow);
}*/.breadcrumb {
padding: 7px 14px;
margin: 0 0 18px;
background-color: #f5f5f5;

70
bootstrap.min.css vendored
View File

@ -91,10 +91,10 @@ blockquote.pull-right{float:right;}blockquote.pull-right p,blockquote.pull-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;}
pre{display:block;padding:8.5px;margin:0 0 9px;font-size:12px;line-height:18px;background-color:#f5f5f5;border:1px solid #ccc;border:1px solid rgba(0, 0, 0, 0.15);-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;white-space:pre;white-space:pre-wrap;word-break:break-all;}pre.prettyprint{margin-bottom:18px;}
pre{display:block;padding:8.5px;margin:0 0 9px;font-size:12px;line-height:18px;background-color:#f5f5f5;border:1px solid #ccc;border:1px solid rgba(0, 0, 0, 0.15);-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;white-space:pre;white-space:pre-wrap;word-break:break-all;}pre.prettyprint{margin-bottom:18px;}
pre code{padding:0;background-color:transparent;}
form{margin-bottom:18px;}
legend{display:block;width:100%;margin-bottom:27px;font-size:19.5px;line-height:36px;color:#333333;border-bottom:1px solid #eee;}
legend{display:block;width:100%;margin-bottom:27px;font-size:19.5px;line-height:36px;color:#333333;border-bottom:1px solid #eee;-webkit-margin-collapse:separate;}
label,input,select,textarea{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:normal;font-weight:13px;line-height:18px;}
label{display:block;margin-bottom:5px;color:#333333;}
input,textarea,select,.uneditable-input{display:block;width:210px;height:18px;padding:4px;margin-bottom:9px;font-size:13px;line-height:18px;color:#555555;border:1px solid #ccc;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;}
@ -304,7 +304,7 @@ i{background-image:url(docs/assets/img/glyphicons-halflings-sprite.png);backgrou
.dropdown .caret{margin-top:8px;margin-left:2px;}
.dropdown:hover .caret{filter:alpha(opacity=100);-moz-opacity:1;opacity:1;}
.dropdown-menu{position:absolute;top:40px;z-index:1000;float:left;display:none;min-width:160px;max-width:220px;_width:160px;padding:5px 0;margin:0;list-style:none;background-color:#ffffff;border-color:#999;border-color:rgba(0, 0, 0, 0.1);border-style:solid;border-width:1px;-webkit-border-radius:0 0 5px 5px;-moz-border-radius:0 0 5px 5px;border-radius:0 0 5px 5px;-webkit-box-shadow:0 5px 10px rgba(0, 0, 0, 0.2);-moz-box-shadow:0 5px 10px rgba(0, 0, 0, 0.2);box-shadow:0 5px 10px rgba(0, 0, 0, 0.2);-webkit-background-clip:padding-box;-moz-background-clip:padding;background-clip:padding-box;zoom:1;}.dropdown-menu .divider{height:1px;margin:5px 1px;overflow:hidden;background-color:#e5e5e5;border-bottom:1px solid #ffffff;}
.dropdown-menu a{display:block;padding:2px 15px;clear:both;font-weight:normal;line-height:18px;color:#555555;}.dropdown-menu a:hover{color:#fff;text-decoration:none;text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);background-color:#0064cd;background-image:-khtml-gradient(linear, left top, left bottom, from(#049cdb), to(#0064cd));background-image:-moz-linear-gradient(top, #049cdb, #0064cd);background-image:-ms-linear-gradient(top, #049cdb, #0064cd);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #049cdb), color-stop(100%, #0064cd));background-image:-webkit-linear-gradient(top, #049cdb, #0064cd);background-image:-o-linear-gradient(top, #049cdb, #0064cd);background-image:linear-gradient(top, #049cdb, #0064cd);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#049cdb', endColorstr='#0064cd', GradientType=0);-webkit-box-shadow:inset 0 1px 0 rgba(0, 0, 0, 0.075),inset 0 -1px rgba(0, 0, 0, 0.075);-moz-box-shadow:inset 0 1px 0 rgba(0, 0, 0, 0.075),inset 0 -1px rgba(0, 0, 0, 0.075);box-shadow:inset 0 1px 0 rgba(0, 0, 0, 0.075),inset 0 -1px rgba(0, 0, 0, 0.075);}
.dropdown-menu a{display:block;padding:2px 15px;clear:both;font-weight:normal;line-height:18px;color:#555555;}.dropdown-menu a:hover{color:#fff;text-decoration:none;text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);background-color:#0064cd;background-image:-khtml-gradient(linear, left top, left bottom, from(#049cdb), to(#0064cd));background-image:-moz-linear-gradient(top, #049cdb, #0064cd);background-image:-ms-linear-gradient(top, #049cdb, #0064cd);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #049cdb), color-stop(100%, #0064cd));background-image:-webkit-linear-gradient(top, #049cdb, #0064cd);background-image:-o-linear-gradient(top, #049cdb, #0064cd);background-image:linear-gradient(top, #049cdb, #0064cd);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#049cdb', endColorstr='#0064cd', GradientType=0);background-color:#0077b3;background-image:-khtml-gradient(linear, left top, left bottom, from(#0088cc), to(#0077b3));background-image:-moz-linear-gradient(top, #0088cc, #0077b3);background-image:-ms-linear-gradient(top, #0088cc, #0077b3);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #0088cc), color-stop(100%, #0077b3));background-image:-webkit-linear-gradient(top, #0088cc, #0077b3);background-image:-o-linear-gradient(top, #0088cc, #0077b3);background-image:linear-gradient(top, #0088cc, #0077b3);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#0088cc', endColorstr='#0077b3', GradientType=0);-webkit-box-shadow:inset 0 1px 0 rgba(0, 0, 0, 0.075),inset 0 -1px rgba(0, 0, 0, 0.075);-moz-box-shadow:inset 0 1px 0 rgba(0, 0, 0, 0.075),inset 0 -1px rgba(0, 0, 0, 0.075);box-shadow:inset 0 1px 0 rgba(0, 0, 0, 0.075),inset 0 -1px rgba(0, 0, 0, 0.075);}
.dropdown.open .dropdown-toggle{color:#ffffff;background:#ccc;background:rgba(0, 0, 0, 0.3);}
.dropdown.open .dropdown-menu{display:block;}
.well{min-height:20px;padding:19px;margin-bottom:20px;background-color:#f5f5f5;border:1px solid #eee;border:1px solid rgba(0, 0, 0, 0.05);-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.05);-moz-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.05);box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.05);}.well blockquote{border-color:#ddd;border-color:rgba(0, 0, 0, 0.15);}
@ -325,21 +325,43 @@ i{background-image:url(docs/assets/img/glyphicons-halflings-sprite.png);backgrou
.navbar-static{margin-bottom:18px;}
.navbar-static .navbar-inner{padding-left:20px;padding-right:20px;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;}
.navbar-fixed{position:fixed;top:0;right:0;left:0;z-index:1010;}
.nav{position:relative;left:0;display:block;float:left;margin:0 10px 0 0;}.nav>li{display:block;float:left;}
.nav a{display:block;float:none;padding:10px 10px 11px;line-height:19px;color:#999999;text-decoration:none;text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);}.nav a:hover{color:#ffffff;text-decoration:none;}
.nav .active>a{background-color:#222;background-color:rgba(0, 0, 0, 0.5);}
.nav .vertical-divider{height:40px;width:1px;margin:0 5px;overflow:hidden;background-color:#222;border-right:1px solid #444;}
.nav.secondary-nav{float:right;margin-left:10px;margin-right:0;}.nav.secondary-nav .dropdown-menu{right:0;border:0;}
.nav .dropdown-toggle:hover,.nav .dropdown.open .dropdown-toggle{background:#444;background:rgba(255, 255, 255, 0.05);}
.nav .dropdown-menu{background-color:#333;}.nav .dropdown-menu .dropdown-toggle{color:#ffffff;}.nav .dropdown-menu .dropdown-toggle.open{background:#444;background:rgba(255, 255, 255, 0.05);}
.nav .dropdown-menu li a{padding:4px 15px;color:#999;text-shadow:0 1px 0 rgba(0, 0, 0, 0.5);}.nav .dropdown-menu li a:hover{background-color:#191919;background-image:-khtml-gradient(linear, left top, left bottom, from(#292929), to(#191919));background-image:-moz-linear-gradient(top, #292929, #191919);background-image:-ms-linear-gradient(top, #292929, #191919);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #292929), color-stop(100%, #191919));background-image:-webkit-linear-gradient(top, #292929, #191919);background-image:-o-linear-gradient(top, #292929, #191919);background-image:linear-gradient(top, #292929, #191919);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#292929', endColorstr='#191919', GradientType=0);color:#ffffff;}
.nav .dropdown-menu .active a{color:#ffffff;}
.nav .dropdown-menu .divider{background-color:#222;border-color:#444;}
.tabs,.pills{padding:0;margin:0 0 20px;list-style:none;zoom:1;}.tabs:before,.pills:before,.tabs:after,.pills:after{display:table;*display:inline;content:"";zoom:1;}
.navbar .nav{position:relative;left:0;display:block;float:left;margin:0 10px 0 0;}.navbar .nav>li{display:block;float:left;}
.navbar .nav a{float:none;padding:10px 10px 11px;line-height:19px;color:#999999;text-decoration:none;text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);}.navbar .nav a:hover{color:#ffffff;text-decoration:none;}
.navbar .nav .active>a{background-color:#222;background-color:rgba(0, 0, 0, 0.5);}
.navbar .nav .vertical-divider{height:40px;width:1px;margin:0 5px;overflow:hidden;background-color:#222;border-right:1px solid #444;}
.navbar .nav.secondary-nav{float:right;margin-left:10px;margin-right:0;}.navbar .nav.secondary-nav .dropdown-menu{right:0;border:0;}
.nav{margin-left:0;margin-bottom:18px;list-style:none;}
.nav>li>a{display:block;}
.nav>li>a:hover{text-decoration:none;background-color:#eee;}
.nav.list{padding-left:14px;padding-right:14px;margin-bottom:0;}
.nav.list>li>a,.nav.list .nav-header{display:block;padding:3px 15px;margin-left:-15px;margin-right:-15px;text-shadow:0 1px 0 rgba(255, 255, 255, 0.5);}
.nav.list .nav-header{font-size:11px;font-weight:bold;line-height:18px;color:#999999;text-transform:uppercase;}
.nav.list>li+.nav-header{margin-top:9px;}
.nav.list .active>a{color:#ffffff;text-shadow:0 -1px 0 rgba(0, 0, 0, 0.2);background-color:#0088cc;}
.tabs,.pills{zoom:1;}.tabs:before,.pills:before,.tabs:after,.pills:after{display:table;*display:inline;content:"";zoom:1;}
.tabs:after,.pills:after{clear:both;}
.tabs>li,.pills>li{float:left;}.tabs>li>a,.pills>li>a{display:block;}
.tabs{border-color:#ddd;border-style:solid;border-width:0 0 1px;}.tabs>li{position:relative;margin-bottom:-1px;}.tabs>li>a{padding:0 15px;margin-right:2px;line-height:36px;border:1px solid transparent;-webkit-border-radius:4px 4px 0 0;-moz-border-radius:4px 4px 0 0;border-radius:4px 4px 0 0;}.tabs>li>a:hover{text-decoration:none;background-color:#eee;border-color:#eee #eee #ddd;}
.tabs>li,.pills>li{float:left;}
.tabs>li>a,.pills>li>a{padding-right:12px;padding-left:12px;margin-right:2px;line-height:14px;}
.tabs{border-bottom:1px solid #ddd;}
.tabs>li{margin-bottom:-1px;}
.tabs>li>a{padding-top:9px;padding-bottom:9px;border:1px solid transparent;-webkit-border-radius:4px 4px 0 0;-moz-border-radius:4px 4px 0 0;border-radius:4px 4px 0 0;}.tabs>li>a:hover{border-color:#eee #eee #ddd;}
.tabs .active>a,.tabs .active>a:hover{color:#555555;background-color:#ffffff;border:1px solid #ddd;border-bottom-color:transparent;cursor:default;}
.pills>li>a{padding-top:8px;padding-bottom:8px;margin-top:2px;margin-bottom:2px;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;}
.pills .active>a,.pills .active>a:hover{color:#ffffff;background-color:#0088cc;}
.nav.stacked>li{float:none;}
.nav.stacked>li>a{margin-right:0;}
.tabs.stacked{border-bottom:0;}
.tabs.stacked>li>a{border:1px solid #ddd;-webkit-border-radius:0;-moz-border-radius:0;border-radius:0;}
.tabs.stacked>li:first-child>a{-webkit-border-radius:4px 4px 0 0;-moz-border-radius:4px 4px 0 0;border-radius:4px 4px 0 0;}
.tabs.stacked>li:last-child>a{-webkit-border-radius:0 0 4px 4px;-moz-border-radius:0 0 4px 4px;border-radius:0 0 4px 4px;}
.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;}
.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;}
.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;}
@ -354,13 +376,6 @@ i{background-image:url(docs/assets/img/glyphicons-halflings-sprite.png);backgrou
.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;}
.tabs .dropdown-menu{top:37px;border-width:1px;}
.tabs .dropdown-toggle .caret{margin-top:15px;margin-left:5px;}
.tabs .open .dropdown-toggle{border-color:#999;}
.tabs .open .dropdown-toggle .caret{border-top-color:#fff;filter:alpha(opacity=100);-moz-opacity:1;opacity:1;}
.pills>li>a{padding:0 15px;margin:5px 3px 5px 0;line-height:30px;text-shadow:0 1px 1px #ffffff;-webkit-border-radius:15px;-moz-border-radius:15px;border-radius:15px;}.pills>li>a:hover{color:#ffffff;text-decoration:none;text-shadow:0 1px 1px rgba(0, 0, 0, 0.25);background-color:#005580;}
.pills .active>a{color:#ffffff;text-shadow:0 1px 1px rgba(0, 0, 0, 0.25);background-color:#0088cc;}
.pills-vertical>li{float:none;}
.tab-content>.tab-pane,.pill-content>.pill-pane{display:none;}
.tab-content>.active,.pill-content>.active{display:block;}
.step-nav{position:relative;margin:0 0 18px;list-style:none;line-height:30px;text-align:center;background-color:#f5f5f5;-webkit-border-radius:15px;-moz-border-radius:15px;border-radius:15px;}.step-nav li{display:inline;color:#999999;}
@ -373,15 +388,6 @@ i{background-image:url(docs/assets/img/glyphicons-halflings-sprite.png);backgrou
.subnav li:first-child a{border-left:0;-webkit-border-radius:6px 0 0 6px;-moz-border-radius:6px 0 0 6px;border-radius:6px 0 0 6px;}
.subnav li:last-child a{border-right:0;-webkit-border-radius:0 6px 6px 0;-moz-border-radius:0 6px 6px 0;border-radius:0 6px 6px 0;}
.subnav ul .active>a{color:#333333;background-color:#eee;}
.side-nav{padding:9px 0;}
.side-nav .nav-label,.side-nav .nav-item{display:block;padding:3px 15px;text-shadow:0 1px 0 rgba(255, 255, 255, 0.5);}
.side-nav .nav-label{font-size:11px;line-height:18px;color:#999999;text-transform:uppercase;}
.side-nav .nav-group{margin:0;list-style:none;}
.side-nav .nav-group+.nav-label{margin-top:9px;}
.side-nav .nav-item{font-weight:bold;}
.side-nav .nav-item i{vertical-align:-2px;}
.side-nav .nav-item:hover{text-decoration:none;}
.side-nav .active .nav-item{color:#fff;text-shadow:0 -1px 0 rgba(0, 0, 0, 0.3);background-color:#999999;background-image:-khtml-gradient(linear, left top, left bottom, from(#cccccc), to(#999999));background-image:-moz-linear-gradient(top, #cccccc, #999999);background-image:-ms-linear-gradient(top, #cccccc, #999999);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #cccccc), color-stop(100%, #999999));background-image:-webkit-linear-gradient(top, #cccccc, #999999);background-image:-o-linear-gradient(top, #cccccc, #999999);background-image:linear-gradient(top, #cccccc, #999999);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#999999', GradientType=0);-webkit-box-shadow:inset 0 1px 0 rgba(0, 0, 0, 0.05),inset 0 -1px 0 rgba(0, 0, 0, 0.05);-moz-box-shadow:inset 0 1px 0 rgba(0, 0, 0, 0.05),inset 0 -1px 0 rgba(0, 0, 0, 0.05);box-shadow:inset 0 1px 0 rgba(0, 0, 0, 0.05),inset 0 -1px 0 rgba(0, 0, 0, 0.05);}
.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;}
.breadcrumb .divider{padding:0 5px;color:#999999;}
.breadcrumb .active a{color:#333333;}

14
docs/assets/js/google-code-prettify/prettify.css
View File

@ -6,21 +6,13 @@
.kwd, .linenums .tag { color: #1e347b; }
.typ, .atn, .dec, .var { color: teal; }
.pln { color: #48484c; }
pre.prettyprint {
background-color: #fefbf3;
padding: 9px;
margin-bottom: 9px;
}
pre.prettyprint {
color: #ccc;
background-color: #252525;
}
pre.prettyprint {
.prettyprint {
padding: 8px;
background-color: #f7f7f9;
border: 1px solid #e1e1e8;
}
.prettyprint.linenums {
-webkit-box-shadow: inset 40px 0 0 #fbfbfc, inset 41px 0 0 #ececf0;
-moz-box-shadow: inset 40px 0 0 #fbfbfc, inset 41px 0 0 #ececf0;
box-shadow: inset 40px 0 0 #fbfbfc, inset 41px 0 0 #ececf0;

1047
docs/components.html
View File

@ -54,6 +54,549 @@
</header>
<!-- Nav, Tabs, & Pills
================================================== -->
<section id="tabsAndPills">
<div class="page-header">
<h1>Nav, tabs, and pills <small>Highly customizable list-style navigation</small></h1>
</div>
<h2>Lightweight defaults <small>Same markup, different classes</small></h2>
<div class="row">
<div class="span4">
<h3>Powerful base class</h3>
<p>All nav components here&mdash;tabs, pills, and lists&mdash;<strong>share the same base markup and styles</strong> through the <code>.nav</code> class.</p>
<h3>Why tabs and pills</h3>
<p>Tabs and pills in Bootstrap are built on a <code>&lt;ul&gt;</code> with the same core HTML, a list of links. Swap between tabs or pills with only a class.</p>
<p>Both options are great for sub-sections of content or navigating between pages of related content.</p>
</div>
<div class="span4">
<h3>Basic tabs</h3>
<p>Take a regular <code>&lt;ul&gt;</code> of links and add <code>.tabs</code>:</p>
<ul class="nav tabs">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Profile</a></li>
<li><a href="#">Messages</a></li>
</ul>
<pre class="prettyprint linenums">
&lt;ul class="nav tabs"&gt;
&lt;li class="active"&gt;
&lt;a href="#"&gt;Home&lt;/a&gt;
&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;...&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;...&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
</pre>
</div>
<div class="span4">
<h3>Basic pills</h3>
<p>Take that same HTML, but use <code>.pills</code> instead:</p>
<ul class="nav pills">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Profile</a></li>
<li><a href="#">Messages</a></li>
</ul>
<pre class="prettyprint linenums">
&lt;ul class="nav pills"&gt;
&lt;li class="active"&gt;
&lt;a href="#"&gt;Home&lt;/a&gt;
&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;...&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;...&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
</pre>
</div>
</div>
<h2>Stackable <small>Make tabs or pills vertical</small></h2>
<div class="row">
<div class="span4">
<h3>How to stack 'em</h3>
<p>As tabs and pills are horizontal by default, just add a second class, <code>.stacked</code>, to make them appear vertically stacked.</p>
</div>
<div class="span4">
<h3>Stacked tabs</h3>
<ul class="nav tabs stacked">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Profile</a></li>
<li><a href="#">Messages</a></li>
</ul>
<pre class="prettyprint linenums">
&lt;ul class="nav tabs stacked"&gt;
...
&lt;/ul&gt;
</pre>
</div>
<div class="span4">
<h3>Stacked pills</h3>
<ul class="nav pills stacked">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Profile</a></li>
<li><a href="#">Messages</a></li>
</ul>
<pre class="prettyprint linenums">
&lt;ul class="nav pills stacked"&gt;
...
&lt;/ul&gt;
</pre>
</div>
</div>
<h2>Dropdowns <small>For advanced nav components</small></h2>
<div class="row">
<div class="span4">
<h3>Rich menus made easy</h3>
<p>Dropdown menus in Bootstrap tabs and pills are super easy and require only a little extra HTML and a lightweight jQuery plugin.</p>
<p>Head over to the Javascript page to read the docs on <a href="./javascript.html#tabs">initializing dropdowns</a> in Bootstrap.</p>
</div>
<div class="span4">
<h3>Tabs with dropdowns</h3>
<ul class="nav tabs">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Profile</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</li>
</ul>
<pre class="prettyprint linenums">
&lt;ul class="nav tabs"&gt;
&lt;li class="dropdown"&gt;
&lt;a class="dropdown-toggle"
data-toggle="dropdown"
href="#"&gt;
Dropdown
&lt;b class="caret"&gt;&lt;/b&gt;
&lt;/a&gt;
&lt;ul class="dropdown-menu"&gt;
&lt;!-- links --&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;/ul&gt;
</pre>
</div>
<div class="span4">
<h3>Pills with dropdowns</h3>
<ul class="nav pills">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Profile</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</li>
</ul>
<pre class="prettyprint linenums">
&lt;ul class="nav pills"&gt;
&lt;li class="dropdown"&gt;
&lt;a class="dropdown-toggle"
data-toggle="dropdown"
href="#"&gt;
Dropdown
&lt;b class="caret"&gt;&lt;/b&gt;
&lt;/a&gt;
&lt;ul class="dropdown-menu"&gt;
&lt;!-- links --&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;/ul&gt;
</pre>
</div>
</div>
<h2>Nav lists <small>Build simple stacked navs, great for sidebars</small></h2>
<div class="row">
<div class="span4">
<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>
</div>
<div class="span4">
<h3>Example sidebar navigation</h3>
<div class="well" style="padding: 8px 0;">
<ul class="nav list">
<li class="nav-header">List header</li>
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Library</a></li>
<li><a href="#">Applications</a></li>
<li class="nav-header">Another list header</li>
<li><a href="#">Profile</a></li>
<li><a href="#">Settings</a></li>
<li><a href="#">Help</a></li>
</ul>
</div> <!-- /well -->
</div>
<div class="span4">
<h3>Simple markup</h3>
<pre class="prettyprint linenums">
&lt;ul class="nav list"&gt;
&lt;li class="nav-header"&gt;
List header
&lt;/li&gt;
&lt;li class="active"&gt;
&lt;a href="#"&gt;Home&lt;/a&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;a href="#"&gt;Library&lt;/a&gt;
&lt;/li&gt;
...
&lt;/ul&gt;
</pre>
</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">
<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>
</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="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">
<div class="tab-content">
<div class="tab-pane active" id="11">
<p>Oh hai #1!</p>
</div>
<div class="tab-pane" id="12">
<p>Oh hai #2!</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>
</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>
</div>
</section>
<!-- Navbar
================================================== -->
<section id="navbar">
<div class="page-header">
<h1>Navbar</h1>
</div>
<h2>Static navbar example</h2>
<p>An example of a static (not fixed to the top) navbar with project name, navigation, and search form.</p>
<div class="navbar navbar-static">
<div class="navbar-inner">
<div class="container" style="width: auto;">
<a class="brand" href="#">Project name</a>
<ul class="nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a>
<ul class="dropdown-menu">
<li><a href="#">Secondary link</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Another link</a></li>
</ul>
</li>
</ul>
<form class="navbar-search pull-left" action="">
<input type="text" class="search-query span2" placeholder="Search">
</form>
<ul class="nav secondary-nav">
<li class="vertical-divider"></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a>
<ul class="dropdown-menu">
<li><a href="#">Secondary link</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Another link</a></li>
</ul>
</li>
</ul>
</div>
</div><!-- /navbar-inner -->
</div><!-- /navbar -->
<div class="row">
<div class="span8">
<h3>Navbar scaffolding</h3>
<p>The navbar requires only a few divs to structure it well for static or fixed display.</p>
<pre class="prettyprint linenums">
&lt;div class="navbar navbar-static"&gt;
&lt;div class="navbar-inner"&gt;
&lt;div class="container" style="width: auto;"&gt;
...
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
</pre>
<p>To make the navbar fixed, swamp the <code>.navbar-static</code> class for <code>.navbar-fixed</code>. In your CSS, you will also need to account for the overlap it causes by adding <code>padding-top: 40px;</code> to your <code>&lt;body&gt;</code>.</p>
<pre class="prettyprint linenums">
&lt;div class="navbar navbar-fixed"&gt;
...
&lt;/div&gt;
</pre>
<h3>Brand name</h3>
<p>A simple link to show your brand or project name only requires an anchor tag.</p>
<pre class="prettyprint linenums">
&lt;a class="brand" href="#"&gt;
Project name
&lt;/a&gt;
</pre>
<h3>Search form</h3>
<p>Search forms receive custom styles in the navbar with the <code>.navbar-search</code> class. Include <code>.pull-left</code> or <code>.pull-right</code> on the <code>form</code> to align it.</p>
<pre class="prettyprint linenums">
&lt;form class="navbar-search"&gt;
&lt;input type="text" class="search-query pull-left" placeholder="Search"&gt;
&lt;/form&gt;
</pre>
</div>
<div class="span4">
<h3>Nav links</h3>
<p>Nav items are simple to add via unordered lists.</p>
<pre class="prettyprint linenums">
&lt;ul class="nav"&gt;
&lt;li class="active"&gt;
&lt;a href="#">Home&lt;/a&gt;
&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;Link&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;Link&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
</pre>
<p>Adding dropdowns to the nav is super simple, but does require the use of <a href="./javascript.html/#dropdowns">our javascript plugin</a>.</p>
<pre class="prettyprint linenums">
&lt;ul class="nav"&gt;
&lt;li class="dropdown"&gt;
&lt;a href="#"
class="dropdown-toggle"
data-toggle="dropdown">
Account
&lt;/a&gt;
&lt;ul class="dropdown-menu"&gt;
...
&lt;/ul&gt;
&lt;/li&gt;
&lt;/ul&gt;
</pre>
</div>
</div>
</section>
<!-- Breadcrumbs
================================================== -->
<section id="breadcrumbs">
<div class="page-header">
<h1>Breadcrumbs <small></small></h1>
</div>
<div class="row">
<div class="span6">
<h3>Why use them</h3>
<p>Breadcrumb navigation is used as a way to show users where they are within an app or a site, but not for primary navigation. Keep their use sparse and succinct to be most effective.</p>
<h3>Examples</h3>
<p>A single example shown as it might be displayed across multiple pages.</p>
<ul class="breadcrumb">
<li class="active">Home</li>
</ul>
<ul class="breadcrumb">
<li><a href="#">Home</a> <span class="divider">/</span></li>
<li class="active">Library</li>
</ul>
<ul class="breadcrumb">
<li><a href="#">Home</a> <span class="divider">/</span></li>
<li><a href="#">Library</a> <span class="divider">/</span></li>
<li class="active">Data</li>
</ul>
</div>
<div class="span6">
<h3>Markup</h3>
<p>HTML is your standard unordered list with links.</p>
<pre class="prettyprint linenums">
&lt;ul class="breadcrumb"&gt;
&lt;li&gt;
&lt;a href="#"&gt;Home&lt;/a&gt; &lt;span class="divider"&gt;/&lt;/span&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;a href="#"&gt;Library&lt;/a&gt; &lt;span class="divider"&gt;/&lt;/span&gt;
&lt;/li&gt;
&lt;li class="active"&gt;
&lt;a href="#"&gt;Data&lt;/a&gt;
&lt;/li&gt;
&lt;/ul&gt;
</pre>
</div>
</div>
</section>
<!-- Pagination
================================================== -->
<section id="carousel">
<div class="page-header">
<h1>Pagination <small></small></h1>
</div>
<div class="row">
<div class="span3">
<h2>Pagination</h2>
<p>Ultra simplistic and minimally styled pagination inspired by Rdio. The large block is hard to miss, easily scalable, and provides large click areas.</p>
</div>
<div class="span9">
<div class="pagination">
<ul>
<li class="prev disabled"><a href="#">&larr; Previous</a></li>
<li class="active"><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li class="next"><a href="#">Next &rarr;</a></li>
</ul>
</div>
<div class="pagination">
<ul>
<li class="prev"><a href="#">&larr;</a></li>
<li class="active"><a href="#">10</a></li>
<li><a href="#">11</a></li>
<li class="disabled"><a href="#">…</a></li>
<li><a href="#">20</a></li>
<li><a href="#">21</a></li>
<li class="next"><a href="#">&rarr;</a></li>
</ul>
</div>
<div class="pagination">
<ul>
<li class="prev"><a href="#">&larr;</a></li>
<li><a href="#">10</a></li>
<li><a href="#">11</a></li>
<li class="active"><a href="#">12</a></li>
<li><a href="#">13</a></li>
<li><a href="#">14</a></li>
<li class="next"><a href="#">&rarr;</a></li>
</ul>
</div>
<pre class="prettyprint linenums">
&lt;div class="pagination"&gt;
&lt;ul&gt;
&lt;li class="prev disabled"&gt;&lt;a href="#"&gt;&amp;larr; Previous&lt;/a&gt;&lt;/li>
&lt;li class="active"&gt;&lt;a href="#"&gt;1&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;2&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;3&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;4&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;5&lt;/a&gt;&lt;/li&gt;
&lt;li class="next"&gt;&lt;a href="#"&gt;Next &amp;rarr;&lt;/a&gt;&lt;/li>
&lt;/ul&gt;
&lt;/div&gt;
</pre>
</div>
</div><!-- /row -->
</section>
<!-- Media
================================================== -->
<section id="media">
@ -223,510 +766,6 @@
<!-- Side nav
================================================== -->
<section id="sidenav">
<div class="page-header">
<h1>Side nav <small>for lists of links</small></h1>
</div>
<div class="row">
<div class="span3">
<h3>Examples</h3>
<p>Side navs can be just links, links with headings, and links with icons.</p>
<div class="well side-nav">
<ul class="nav-group">
<li class="active"><a class="nav-item" href="#">Home</a></li>
<li><a class="nav-item" href="#">Library</a></li>
<li><a class="nav-item" href="#">Help</a></li>
</ul>
<h6 class="nav-label">Your account</h6>
<ul class="nav-group">
<li><a class="nav-item" href="#">Profile</a></li>
<li><a class="nav-item" href="#">Settings</a></li>
</ul>
<h6 class="nav-label">Your account</h6>
<ul class="nav-group">
<li><a class="nav-item" href="#"><i class="home"></i> Home</a></li>
<li><a class="nav-item" href="#"><i class="book"></i> Library</a></li>
<li><a class="nav-item" href="#"><i class="user"></i> Profile</a></li>
<li><a class="nav-item" href="#"><i class="cog"></i> Settings</a></li>
<li><a class="nav-item" href="#"><i class="time"></i> Help</a></li>
</ul>
</div>
</div>
<div class="span3">
<h3>Why use it</h3>
<p></p>
</div>
<div class="span6">
<h3>Markup</h3>
<p>Marking up a side nav is at the core just writing an unordered list of links.</p>
<pre class="prettyprint linenums">
&lt;ul class="nav-group"&gt;
&lt;li class="active"&gt;
&lt;a class="nav-item" href="#"&gt;Home&lt;/a&gt;
&lt;/li&gt;
&lt;li&gt;&lt;a class="nav-item" href="#"&gt;Library&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a class="nav-item" href="#"&gt;Help&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
</pre>
<p>Bootstrap also makes it easy to expand a regular list of links with multiple groups and headings.</p>
<pre class="prettyprint linenums">
&lt;h6 class="nav-label"&gt;&lt;/h6&gt;
&lt;ul class="nav-group"&gt;
...
&lt;/ul&gt;
&lt;h6 class="nav-label"&gt;&lt;/h6&gt;
&lt;ul class="nav-group"&gt;
...
&lt;/ul&gt;
</pre>
</div>
</div>
</section>
<!-- Navbar
================================================== -->
<section id="navbar">
<div class="page-header">
<h1>Navbar</h1>
</div>
<h2>Static navbar example</h2>
<p>An example of a static (not fixed to the top) navbar with project name, navigation, and search form.</p>
<div class="navbar navbar-static">
<div class="navbar-inner">
<div class="container" style="width: auto;">
<a class="brand" href="#">Project name</a>
<ul class="nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a>
<ul class="dropdown-menu">
<li><a href="#">Secondary link</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Another link</a></li>
</ul>
</li>
</ul>
<form class="navbar-search pull-left" action="">
<input type="text" class="search-query span2" placeholder="Search">
</form>
<ul class="nav secondary-nav">
<li class="vertical-divider"></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a>
<ul class="dropdown-menu">
<li><a href="#">Secondary link</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Another link</a></li>
</ul>
</li>
</ul>
</div>
</div><!-- /navbar-inner -->
</div><!-- /navbar -->
<div class="row">
<div class="span8">
<h3>Navbar scaffolding</h3>
<p>The navbar requires only a few divs to structure it well for static or fixed display.</p>
<pre class="prettyprint linenums">
&lt;div class="navbar navbar-static"&gt;
&lt;div class="navbar-inner"&gt;
&lt;div class="container" style="width: auto;"&gt;
...
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
</pre>
<p>To make the navbar fixed, swamp the <code>.navbar-static</code> class for <code>.navbar-fixed</code>. In your CSS, you will also need to account for the overlap it causes by adding <code>padding-top: 40px;</code> to your <code>&lt;body&gt;</code>.</p>
<pre class="prettyprint linenums">
&lt;div class="navbar navbar-fixed"&gt;
...
&lt;/div&gt;
</pre>
<br>
<h3>Brand name</h3>
<p>A simple link to show your brand or project name only requires an anchor tag.</p>
<pre class="prettyprint linenums">
&lt;a class="brand" href="#"&gt;
Project name
&lt;/a&gt;
</pre>
<br>
<h3>Search form</h3>
<p>Search forms receive custom styles in the navbar with the <code>.navbar-search</code> class. Include <code>.pull-left</code> or <code>.pull-right</code> on the <code>form</code> to align it.</p>
<pre class="prettyprint linenums">
&lt;form class="navbar-search"&gt;
&lt;input type="text" class="search-query pull-left" placeholder="Search"&gt;
&lt;/form&gt;
</pre>
</div>
<div class="span4">
<h3>Nav links</h3>
<p>Nav items are simple to add via unordered lists.</p>
<pre class="prettyprint linenums">
&lt;ul class="nav"&gt;
&lt;li class="active"&gt;
&lt;a href="#">Home&lt;/a&gt;
&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;Link&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;Link&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
</pre>
<p>Adding dropdowns to the nav is super simple, but does require the use of <a href="./javascript.html/#dropdowns">our javascript plugin</a>.</p>
<pre class="prettyprint linenums">
&lt;ul class="nav"&gt;
&lt;li class="dropdown"&gt;
&lt;a href="#"
class="dropdown-toggle"
data-toggle="dropdown">
Account
&lt;/a&gt;
&lt;ul class="dropdown-menu"&gt;
...
&lt;/ul&gt;
&lt;/li&gt;
&lt;/ul&gt;
</pre>
</div>
</div>
</section>
<!-- Tabs & Pills
================================================== -->
<section id="tabsAndPills">
<div class="page-header">
<h1>Tabs and pills <small></small></h1>
</div>
<div class="row">
<div class="span3">
<p>Create simple secondary navigation with a <code>&lt;ul&gt;</code>. Swap between tabs or pills by adding the appropriate class.</p>
<p>Great for sub-sections of content like our account settings pages and user timelines for toggling between pages of like content. Available in tabbed or pill styles.</p>
</div>
<div class="span9">
<h3>Basic tabs example</h3>
<p>Tabs can be used as regular navigation (loading external pages in the same tab) or as tabbable content areas for swapping out panes of content. We have a <a href="./javascript.html#tabs">tabs plugin</a> that can be used to integrate the latter.</p>
<ul class="tabs">
<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>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Secondary link</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Another link</a></li>
</ul>
</li>
</ul>
<pre class="prettyprint linenums">
&lt;ul class="tabs"&gt;
&lt;li class="active"&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;Profile&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;Messages&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;Settings&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;Contact&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
</pre>
<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">
<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>
</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="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">
<div class="tab-content">
<div class="tab-pane active" id="11">
<p>Oh hai #1!</p>
</div>
<div class="tab-pane" id="12">
<p>Oh hai #2!</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>
</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>
</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>
<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>
<pre class="prettyprint linenums">
&lt;ul class="pills"&gt;
&lt;li class="active"&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;Profile&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;Messages&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;Settings&lt;/a&gt;&lt;/li&gt;
&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 -->
</section>
<!-- Breadcrumbs
================================================== -->
<section id="breadcrumbs">
<div class="page-header">
<h1>Breadcrumbs <small></small></h1>
</div>
<div class="row">
<div class="span6">
<h3>Why use them</h3>
<p>Breadcrumb navigation is used as a way to show users where they are within an app or a site, but not for primary navigation. Keep their use sparse and succinct to be most effective.</p>
<h3>Examples</h3>
<p>A single example shown as it might be displayed across multiple pages.</p>
<ul class="breadcrumb">
<li class="active">Home</li>
</ul>
<ul class="breadcrumb">
<li><a href="#">Home</a> <span class="divider">/</span></li>
<li class="active">Library</li>
</ul>
<ul class="breadcrumb">
<li><a href="#">Home</a> <span class="divider">/</span></li>
<li><a href="#">Library</a> <span class="divider">/</span></li>
<li class="active">Data</li>
</ul>
</div>
<div class="span6">
<h3>Markup</h3>
<p>HTML is your standard unordered list with links.</p>
<pre class="prettyprint linenums">
&lt;ul class="breadcrumb"&gt;
&lt;li&gt;
&lt;a href="#"&gt;Home&lt;/a&gt; &lt;span class="divider"&gt;/&lt;/span&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;a href="#"&gt;Library&lt;/a&gt; &lt;span class="divider"&gt;/&lt;/span&gt;
&lt;/li&gt;
&lt;li class="active"&gt;
&lt;a href="#"&gt;Data&lt;/a&gt;
&lt;/li&gt;
&lt;/ul&gt;
</pre>
</div>
</div>
</section>
<!-- Step nav
==================================================
COMMENTED OUT AND NOT SUPPORTED AT THIS TIME.
<section id="stepNav">
<div class="page-header">
<h1>Step nav <small></small></h1>
</div>
<div class="row">
<div class="span3">
<p>Placeholder for now!</p>
</div>
<div class="span9">
<br>
<ul class="step-nav">
<li class="prev"><a href="#">&laquo; Overview</a></li>
<li class="active"><a class="dot" href="#">1</a></li>
<li><a class="dot" href="#">2</a></li>
<li><a class="dot" href="#">3</a></li>
<li><a class="dot" href="#">4</a></li>
<li><a class="dot" href="#">5</a></li>
<li class="next"><a href="#">Base CSS &raquo;</a></li>
</ul>
<br>
<br>
</div>
</div>
</section>
-->
<!-- Pagination
================================================== -->
<section id="carousel">
<div class="page-header">
<h1>Pagination <small></small></h1>
</div>
<div class="row">
<div class="span3">
<h2>Pagination</h2>
<p>Ultra simplistic and minimally styled pagination inspired by Rdio. The large block is hard to miss, easily scalable, and provides large click areas.</p>
</div>
<div class="span9">
<div class="pagination">
<ul>
<li class="prev disabled"><a href="#">&larr; Previous</a></li>
<li class="active"><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li class="next"><a href="#">Next &rarr;</a></li>
</ul>
</div>
<div class="pagination">
<ul>
<li class="prev"><a href="#">&larr;</a></li>
<li class="active"><a href="#">10</a></li>
<li><a href="#">11</a></li>
<li class="disabled"><a href="#">…</a></li>
<li><a href="#">20</a></li>
<li><a href="#">21</a></li>
<li class="next"><a href="#">&rarr;</a></li>
</ul>
</div>
<div class="pagination">
<ul>
<li class="prev"><a href="#">&larr;</a></li>
<li><a href="#">10</a></li>
<li><a href="#">11</a></li>
<li class="active"><a href="#">12</a></li>
<li><a href="#">13</a></li>
<li><a href="#">14</a></li>
<li class="next"><a href="#">&rarr;</a></li>
</ul>
</div>
<pre class="prettyprint linenums">
&lt;div class="pagination"&gt;
&lt;ul&gt;
&lt;li class="prev disabled"&gt;&lt;a href="#"&gt;&amp;larr; Previous&lt;/a&gt;&lt;/li>
&lt;li class="active"&gt;&lt;a href="#"&gt;1&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;2&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;3&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;4&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;5&lt;/a&gt;&lt;/li&gt;
&lt;li class="next"&gt;&lt;a href="#"&gt;Next &amp;rarr;&lt;/a&gt;&lt;/li>
&lt;/ul&gt;
&lt;/div&gt;
</pre>
</div>
</div><!-- /row -->
</section>
<!-- Alerts & Messages
================================================== -->
<section id="alerts">

9
docs/upgrading.html
View File

@ -113,6 +113,15 @@
<li>Now requires you to add a <code>&lt;span class="caret"&gt;&lt;/span&gt;</code> to show the dropdown arrow</li>
</ul>
</li>
<li>Navigation
<ul>
<li>Tabs and pills now require the use of a new base class, <code>.nav</code>, on their <code>&lt;ul&gt;</code></li>
<li>New nav list component added that uses the same base class, <code>.nav</code></li>
<li>Vertical tabs and pills have been added&mdash;just add <code>.stacked</code> to the <code>&lt;ul&gt;</code></li>
<li>Pills were restyled to be less rounded by default</li>
<li>Pills now have dropdown menu support (they share the same markup and styles as tabs)</li>
</ul>
</li>
</ul>
<!--
<li>

3
lib/bootstrap.less vendored
View File

@ -33,8 +33,7 @@
// Components: Nav
@import "navbar.less";
@import "tabs-pills.less";
@import "sidenav.less";
@import "navs.less";
@import "breadcrumbs.less";
@import "pagination.less";

5
lib/dropdowns.less
View File

@ -1,4 +1,6 @@
// Dropdown Menus
// DROPDOWN MENUS
// --------------
// Use the .menu class on any <li> element within the topbar or ul.tabs and you'll get some superfancy dropdowns
.dropdown {
position: relative;
@ -71,6 +73,7 @@
text-decoration: none;
text-shadow: 0 -1px 0 rgba(0,0,0,.25);
#gradient > .vertical(@blue, @blueDark);
#gradient > .vertical(@linkColor, darken(@linkColor, 5%));
@shadow: inset 0 1px 0 rgba(0,0,0,.075), inset 0 -1px rgba(0,0,0,.075);
.box-shadow(@shadow);
}

1
lib/forms.less
View File

@ -20,6 +20,7 @@ legend {
line-height: @baseLineHeight * 2;
color: @grayDark;
border-bottom: 1px solid #eee;
-webkit-margin-collapse: separate;
}
// Set font for forms

7
lib/navbar.less
View File

@ -135,7 +135,7 @@
// Nav for navbar and topbar
// ul.nav for all topbar based navigation to avoid inheritance issues and over-specificity
.nav {
.navbar .nav {
position: relative;
left: 0;
display: block;
@ -146,7 +146,6 @@
float: left;
}
a {
display: block;
float: none;
padding: 10px 10px 11px;
line-height: 19px;
@ -182,7 +181,7 @@
border: 0;
}
}
// Dropdowns within the .nav
/* // Dropdowns within the .nav
.dropdown-toggle:hover,
.dropdown.open .dropdown-toggle {
background: #444;
@ -213,5 +212,5 @@
background-color: #222;
border-color: #444;
}
}
}*/
}

327
lib/navs.less Normal file
View File

@ -0,0 +1,327 @@
// NAVIGATIONS
// -----------
// BASE CLASS
// ----------
.nav {
margin-left: 0;
margin-bottom: @baseLineHeight;
list-style: none;
}
// Make links block level
.nav > li > a {
display: block;
}
.nav > li > a:hover {
text-decoration: none;
background-color: #eee;
}
// NAV LIST
// --------
.nav.list {
padding-left: 14px;
padding-right: 14px;
margin-bottom: 0;
}
.nav.list > li > a,
.nav.list .nav-header {
display: block;
padding: 3px 15px;
margin-left: -15px;
margin-right: -15px;
text-shadow: 0 1px 0 rgba(255,255,255,.5);
}
.nav.list .nav-header {
font-size: 11px;
font-weight: bold;
line-height: @baseLineHeight;
color: @grayLight;
text-transform: uppercase;
}
.nav.list > li + .nav-header {
margin-top: 9px;
}
.nav.list .active > a {
color: @white;
text-shadow: 0 -1px 0 rgba(0,0,0,.2);
background-color: @linkColor;
}
// TABS AND PILLS
// -------------
// Common styles
.tabs,
.pills {
.clearfix();
}
.tabs > li,
.pills > li {
float: left;
}
.tabs > li > a,
.pills > li > a {
padding-right: 12px;
padding-left: 12px;
margin-right: 2px;
line-height: 14px; // keeps the overall height an even number
}
// TABS
// ----
// Give the tabs something to sit on
.tabs {
border-bottom: 1px solid #ddd;
}
// Make the list-items overlay the bottom border
.tabs > li {
margin-bottom: -1px;
}
// Actual tabs (as links)
.tabs > li > a {
padding-top: 9px;
padding-bottom: 9px;
border: 1px solid transparent;
.border-radius(4px 4px 0 0);
&:hover {
border-color: #eee #eee #ddd;
}
}
// Active state, and it's :hover to override normal :hover
.tabs .active > a,
.tabs .active > a:hover {
color: @gray;
background-color: @white;
border: 1px solid #ddd;
border-bottom-color: transparent;
cursor: default;
}
// PILLS
// -----
// Links rendered as pills
.pills > li > a {
padding-top: 8px;
padding-bottom: 8px;
margin-top: 2px;
margin-bottom: 2px;
.border-radius(5px);
}
// Active state
.pills .active > a,
.pills .active > a:hover {
color: @white;
background-color: @linkColor;
}
// STACKED NAV
// -----------
// Stacked tabs and pills
.nav.stacked > li {
float: none;
}
.nav.stacked > li > a {
margin-right: 0; // no need for the gap between nav items
}
// Tabs
.tabs.stacked {
border-bottom: 0;
}
.tabs.stacked > li > a {
border: 1px solid #ddd;
.border-radius(0);
}
.tabs.stacked > li:first-child > a {
.border-radius(4px 4px 0 0);
}
.tabs.stacked > li:last-child > a {
.border-radius(0 0 4px 4px);
}
.tabs.stacked > li > a:hover {
border-color: #ddd;
z-index: 2;
}
// Pills
.pills.stacked > li > a {
margin-bottom: 3px;
}
.pills.stacked > li:last-child > a {
margin-bottom: 1px; // decrease margin to match sizing of stacked tabs
}
// DROPDOWNS
// ---------
// Position the menu
.tabs .dropdown-menu,
.pills .dropdown-menu {
top: 33px;
border-width: 1px;
}
.pills .dropdown-menu {
.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;
.opacity(100);
}
// TABBABLE
// --------
.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,
&.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;
}
}
}
}
// Tabbable areas
.tab-content > .tab-pane,
.pill-content > .pill-pane {
display: none;
}
.tab-content > .active,
.pill-content > .active {
display: block;
}

43
lib/sidenav.less
View File

@ -1,43 +0,0 @@
// SIDE NAV
// --------
.side-nav {
padding: @baseLineHeight / 2 0;
}
.side-nav .nav-label,
.side-nav .nav-item {
display: block;
padding: 3px 15px;
text-shadow: 0 1px 0 rgba(255,255,255,.5);
}
.side-nav .nav-label {
font-size: 11px;
line-height: @baseLineHeight;
color: @grayLight;
text-transform: uppercase;
}
.side-nav .nav-group {
margin: 0; // clear default ul margins
list-style: none;
}
.side-nav .nav-group + .nav-label {
margin-top: 9px;
}
.side-nav .nav-item {
font-weight: bold;
}
.side-nav .nav-item i {
vertical-align: -2px;
}
.side-nav .nav-item:hover {
text-decoration: none;
}
.side-nav .active .nav-item {
color: #fff;
text-shadow: 0 -1px 0 rgba(0,0,0,.3);
#gradient > .vertical(#ccc, #999);
@shadow: inset 0 1px 0 rgba(0,0,0,.05), inset 0 -1px 0 rgba(0,0,0,.05);
.box-shadow(@shadow);
}

285
lib/tabs-pills.less
View File

@ -1,285 +0,0 @@
// Tabs and Pills
.tabs,
.pills {
padding: 0;
margin: 0 0 20px;
list-style: none;
.clearfix();
> li {
float: left;
> a {
display: block;
}
}
}
// Tabs
.tabs {
border-color: #ddd;
border-style: solid;
border-width: 0 0 1px;
> li {
position: relative; // For the dropdowns mostly
margin-bottom: -1px;
> a {
padding: 0 15px;
margin-right: 2px;
line-height: @baseLineHeight * 2;
border: 1px solid transparent;
.border-radius(4px 4px 0 0);
&:hover {
text-decoration: none;
background-color: #eee;
border-color: #eee #eee #ddd;
}
}
}
// Active state, and it's :hover to override normal :hover
.active > a,
.active > a:hover {
color: @gray;
background-color: @white;
border: 1px solid #ddd;
border-bottom-color: transparent;
cursor: default;
}
}
.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,
&.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;
}
}
}
}
// Dropdowns in tabs
.tabs {
.dropdown-menu {
top: 37px;
border-width: 1px;
}
.dropdown-toggle .caret {
margin-top: 15px;
margin-left: 5px;
}
.open .dropdown-toggle {
border-color: #999;
}
.open .dropdown-toggle .caret {
border-top-color: #fff;
.opacity(100);
}
}
// Pills
.pills {
> li > a {
padding: 0 15px;
margin: 5px 3px 5px 0;
line-height: 30px;
text-shadow: 0 1px 1px @white;
.border-radius(15px);
&:hover {
color: @white;
text-decoration: none;
text-shadow: 0 1px 1px rgba(0,0,0,.25);
background-color: @linkColorHover;
}
}
.active > a {
color: @white;
text-shadow: 0 1px 1px rgba(0,0,0,.25);
background-color: @linkColor;
}
}
// Stacked pills
.pills-vertical > li {
float: none;
}
// Tabbable areas
.tab-content > .tab-pane,
.pill-content > .pill-pane {
display: none;
}
.tab-content > .active,
.pill-content > .active {
display: block;
}
// Step nav
.step-nav {
position: relative; // for prev/next links
margin: 0 0 @baseLineHeight;
list-style: none;
line-height: 30px;
text-align: center;
background-color: #f5f5f5;
.border-radius(15px);
li {
display: inline;
color: @grayLight;
}
// prev/next links
.prev,
.next {
position: absolute;
top: 6px;
}
.prev {
left: 15px;
}
.next {
right: 15px;
}
// indicators for each step/page/item/etc
.dot {
display: inline-block;
width: 10px;
height: 10px;
margin: 0 3px;
text-indent: -999em;
background-color: @grayLight;
.border-radius(5px);
.box-shadow(inset 0 1px 1px rgba(0,0,0,.25));
}
.dot:hover,
.active .dot {
background-color: @grayDark;
}
}
// Subnav
// STILL A WIP
.subnav {
#gradient > .vertical(#f5f5f5, #eeeeee);
@shadow: inset 0 1px 0 #fff, 0 0 5px rgba(0,0,0,.5);
.box-shadow(@shadow);
a {
padding: 8px 10px;
font-size: 12px;
color: @linkColor;
text-shadow: 0 1px 0 #fff;
border-left: 1px solid #f9f9f9;
border-right: 1px solid #e5e5e5;
&:hover {
color: @linkColorHover;
background-color: #eee;
}
}
li:first-child a {
border-left: 0;
.border-radius(6px 0 0 6px);
}
li:last-child a {
border-right: 0;
.border-radius(0 6px 6px 0);
}
ul .active > a {
color: @grayDark;
background-color: #eee;
}
}

2
lib/type.less
View File

@ -201,7 +201,7 @@ pre {
background-color: #f5f5f5;
border: 1px solid #ccc;
border: 1px solid rgba(0,0,0,.15);
.border-radius(3px);
.border-radius(4px);
white-space: pre;
white-space: pre-wrap;
word-break: break-all;