Skip to content

B
bootstrap
Commit b12b71bf authored by Mark Otto's avatar Mark Otto
Browse files
Options

updated to include sub nav and pip nav, new docs updates, topbar nav... 

updated to include sub nav and pip nav, new docs updates, topbar nav refinements for media queried settings
parent bc51c157
Show whitespace changes
Inline Side-by-side
Showing with 234 additions and 178 deletions
bootstrap.css
View file @ b12b71bf
...@@ -6,7 +6,7 @@ ...@@ -6,7 +6,7 @@
* http://www.apache.org/licenses/LICENSE-2.0 * http://www.apache.org/licenses/LICENSE-2.0
* *
* Designed and built with all the love in the world @twitter by @mdo and @fat. * Designed and built with all the love in the world @twitter by @mdo and @fat.
* Date: Wed Nov 30 00:54:47 PST 2011 * Date: Fri Dec 9 11:23:25 PST 2011
*/ */
html, body { html, body {
margin: 0; margin: 0;
...@@ -1175,7 +1175,6 @@ table { ...@@ -1175,7 +1175,6 @@ table {
} }
}*/ }*/
.navbar { .navbar {
height: 40px;
overflow: visible; overflow: visible;
} }
.navbar-inner { .navbar-inner {
...@@ -2131,7 +2130,6 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner { ...@@ -2131,7 +2130,6 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner {
background-color: #404040; background-color: #404040;
} }
.subnav { .subnav {
position: relative;
background-color: #eeeeee; background-color: #eeeeee;
background-image: -khtml-gradient(linear, left top, left bottom, from(#f5f5f5), to(#eeeeee)); background-image: -khtml-gradient(linear, left top, left bottom, from(#f5f5f5), to(#eeeeee));
background-image: -moz-linear-gradient(top, #f5f5f5, #eeeeee); background-image: -moz-linear-gradient(top, #f5f5f5, #eeeeee);
...@@ -2142,12 +2140,13 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner { ...@@ -2142,12 +2140,13 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner {
background-image: linear-gradient(top, #f5f5f5, #eeeeee); background-image: linear-gradient(top, #f5f5f5, #eeeeee);
background-repeat: repeat-x; background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f5f5f5', endColorstr='#eeeeee', GradientType=0); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f5f5f5', endColorstr='#eeeeee', GradientType=0);
-webkit-border-radius: 6px; -webkit-box-shadow: inset 0 1px 0 #ffffff, 0 0 5px rgba(0, 0, 0, 0.5);
-moz-border-radius: 6px; -moz-box-shadow: inset 0 1px 0 #ffffff, 0 0 5px rgba(0, 0, 0, 0.5);
border-radius: 6px; box-shadow: inset 0 1px 0 #ffffff, 0 0 5px rgba(0, 0, 0, 0.5);
} }
.subnav a { .subnav a {
padding: 10px 15px; padding: 8px 10px;
font-size: 12px;
color: #0069d6; color: #0069d6;
text-shadow: 0 1px 0 #fff; text-shadow: 0 1px 0 #fff;
border-left: 1px solid #f9f9f9; border-left: 1px solid #f9f9f9;
...@@ -2515,44 +2514,35 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner { ...@@ -2515,44 +2514,35 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner {
-moz-box-shadow: 0 1px 4px rgba(0, 105, 214, 0.25); -moz-box-shadow: 0 1px 4px rgba(0, 105, 214, 0.25);
box-shadow: 0 1px 4px rgba(0, 105, 214, 0.25); box-shadow: 0 1px 4px rgba(0, 105, 214, 0.25);
} }
.hidden {
display: none;
visibility: hidden;
}
@media (max-width: 480px) { @media (max-width: 480px) {
.container {
width: auto;
padding: 0 15px;
}
.row {
margin-left: 0;
}
[class*="span"] {
float: none;
display: block;
width: auto;
margin: 0;
}
.modal { .modal {
width: auto; width: auto;
margin: 0; margin: 0;
} }
.form-horizontal .control-group > label { .horizontal-form .control-group > label {
float: none; float: none;
width: auto; width: auto;
padding-top: 0; padding-top: 0;
text-align: left; text-align: left;
} }
.form-horizontal .controls { .horizontal-form .controls {
margin-left: 0; margin-left: 0;
} }
.form-horizontal .control-list { .horizontal-form .control-list {
padding-top: 0; padding-top: 0;
} }
.form-horizontal .form-actions { .horizontal-form .form-actions {
padding-left: 0; padding-left: 0;
} }
} }
@media (min-width: 480px) and (max-width: 768px) { @media (max-width: 768px) {
.container { .container {
width: auto; width: auto;
padding: 0 10px; padding: 0 20px;
} }
.row { .row {
margin-left: 0; margin-left: 0;
...@@ -2563,6 +2553,55 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner { ...@@ -2563,6 +2553,55 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner {
width: auto; width: auto;
margin: 0; 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) { @media (min-width: 768px) and (max-width: 940px) {
.container { .container {
...@@ -2641,60 +2680,83 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner { ...@@ -2641,60 +2680,83 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner {
margin-left: 768px; margin-left: 768px;
} }
} }
/*
// LARGE DESKTOP & UP
// ------------------
@media (min-width: 1210px) { @media (min-width: 1210px) {
// Reset grid variables
@gridColumns: 12;
@gridColumnWidth: 70px;
@gridGutterWidth: 30px;
@siteWidth: 1170px;
// Bring grid mixins to recalculate widths
.columns(@columnSpan: 1) {
width: (@gridColumnWidth * @columnSpan) + (@gridGutterWidth * (@columnSpan - 1));
}
.offset(@columnOffset: 1) {
margin-left: (@gridColumnWidth * @columnOffset) + (@gridGutterWidth * (@columnOffset - 1)) + @gridGutterWidth;
}
.container { .container {
width: @siteWidth; width: 1170px;
} }
[class*="span"] { [class*="span"] {
margin-left: @gridGutterWidth; margin-left: 30px;
}
.span1 {
width: 70px;
}
.span2 {
width: 170px;
}
.span3 {
width: 270px;
}
.span4 {
width: 370px;
}
.span5 {
width: 470px;
}
.span6 {
width: 570px;
}
.span7 {
width: 670px;
}
.span8 {
width: 770px;
}
.span9 {
width: 870px;
}
.span10 {
width: 970px;
}
.span11 {
width: 1070px;
}
.span12 {
width: 1170px;
}
.offset1 {
margin-left: 100px;
}
.offset2 {
margin-left: 200px;
}
.offset3 {
margin-left: 300px;
}
.offset4 {
margin-left: 400px;
}
.offset5 {
margin-left: 500px;
}
.offset6 {
margin-left: 600px;
}
.offset7 {
margin-left: 700px;
}
.offset8 {
margin-left: 800px;
}
.offset9 {
margin-left: 900px;
}
.offset10 {
margin-left: 1000px;
}
.offset11 {
margin-left: 1100px;
}
.offset12 {
margin-left: 1200px;
} }
// Default columns
.span1 { .columns(1); }
.span2 { .columns(2); }
.span3 { .columns(3); }
.span4 { .columns(4); }
.span5 { .columns(5); }
.span6 { .columns(6); }
.span7 { .columns(7); }
.span8 { .columns(8); }
.span9 { .columns(9); }
.span10 { .columns(10); }
.span11 { .columns(11); }
.span12 { .columns(12); }
// Offset column options
.offset1 { .offset(1); }
.offset2 { .offset(2); }
.offset3 { .offset(3); }
.offset4 { .offset(4); }
.offset5 { .offset(5); }
.offset6 { .offset(6); }
.offset7 { .offset(7); }
.offset8 { .offset(8); }
.offset9 { .offset(9); }
.offset10 { .offset(10); }
.offset11 { .offset(11); }
.offset12 { .offset(12); }
} }
*/
\ No newline at end of file
bootstrap.min.css
View file @ b12b71bf
...@@ -173,7 +173,7 @@ tbody tr:last-child th,tbody tr:last-child td{border-bottom:0;} ...@@ -173,7 +173,7 @@ tbody tr:last-child th,tbody tr:last-child td{border-bottom:0;}
.bordered-table thead:last-child tr:last-child th:first-child,.bordered-table tbody:last-child tr:last-child td:first-child{-webkit-border-radius:0 0 0 4px;-moz-border-radius:0 0 0 4px;border-radius:0 0 0 4px;} .bordered-table thead:last-child tr:last-child th:first-child,.bordered-table tbody:last-child tr:last-child td:first-child{-webkit-border-radius:0 0 0 4px;-moz-border-radius:0 0 0 4px;border-radius:0 0 0 4px;}
.bordered-table thead:last-child tr:last-child th:last-child,.bordered-table tbody:last-child tr:last-child td:last-child{-webkit-border-radius:0 0 4px 0;-moz-border-radius:0 0 4px 0;border-radius:0 0 4px 0;} .bordered-table thead:last-child tr:last-child th:last-child,.bordered-table tbody:last-child tr:last-child td:last-child{-webkit-border-radius:0 0 4px 0;-moz-border-radius:0 0 4px 0;border-radius:0 0 4px 0;}
.striped-table tbody tr:nth-child(odd) td,.striped-table tbody tr:nth-child(odd) th{background-color:#f9f9f9;} .striped-table tbody tr:nth-child(odd) td,.striped-table tbody tr:nth-child(odd) th{background-color:#f9f9f9;}
.navbar{height:40px;overflow:visible;} .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-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 a{color:#bfbfbf;text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);} .navbar a{color:#bfbfbf;text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);}
.navbar .brand a:hover,.navbar ul .active>a{color:#ffffff;text-decoration:none;background-color:#333333;background-color:rgba(255, 255, 255, 0.05);} .navbar .brand a:hover,.navbar ul .active>a{color:#ffffff;text-decoration:none;background-color:#333333;background-color:rgba(255, 255, 255, 0.05);}
...@@ -285,7 +285,7 @@ button.btn::-moz-focus-inner,input[type=submit].btn::-moz-focus-inner{padding:0; ...@@ -285,7 +285,7 @@ button.btn::-moz-focus-inner,input[type=submit].btn::-moz-focus-inner{padding:0;
.step-nav .next{right:15px;} .step-nav .next{right:15px;}
.step-nav .dot{display:inline-block;width:10px;height:10px;margin:0 3px;text-indent:-999em;background-color:#bfbfbf;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;-webkit-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.25);-moz-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.25);box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.25);} .step-nav .dot{display:inline-block;width:10px;height:10px;margin:0 3px;text-indent:-999em;background-color:#bfbfbf;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;-webkit-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.25);-moz-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.25);box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.25);}
.step-nav .dot:hover,.step-nav .active .dot{background-color:#404040;} .step-nav .dot:hover,.step-nav .active .dot{background-color:#404040;}
.subnav{position:relative;background-color:#eeeeee;background-image:-khtml-gradient(linear, left top, left bottom, from(#f5f5f5), to(#eeeeee));background-image:-moz-linear-gradient(top, #f5f5f5, #eeeeee);background-image:-ms-linear-gradient(top, #f5f5f5, #eeeeee);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #f5f5f5), color-stop(100%, #eeeeee));background-image:-webkit-linear-gradient(top, #f5f5f5, #eeeeee);background-image:-o-linear-gradient(top, #f5f5f5, #eeeeee);background-image:linear-gradient(top, #f5f5f5, #eeeeee);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f5f5f5', endColorstr='#eeeeee', GradientType=0);-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;}.subnav a{padding:10px 15px;color:#0069d6;text-shadow:0 1px 0 #fff;border-left:1px solid #f9f9f9;border-right:1px solid #e5e5e5;}.subnav a:hover{color:#00438a;background-color:#eee;} .subnav{background-color:#eeeeee;background-image:-khtml-gradient(linear, left top, left bottom, from(#f5f5f5), to(#eeeeee));background-image:-moz-linear-gradient(top, #f5f5f5, #eeeeee);background-image:-ms-linear-gradient(top, #f5f5f5, #eeeeee);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #f5f5f5), color-stop(100%, #eeeeee));background-image:-webkit-linear-gradient(top, #f5f5f5, #eeeeee);background-image:-o-linear-gradient(top, #f5f5f5, #eeeeee);background-image:linear-gradient(top, #f5f5f5, #eeeeee);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f5f5f5', endColorstr='#eeeeee', GradientType=0);-webkit-box-shadow:inset 0 1px 0 #ffffff,0 0 5px rgba(0, 0, 0, 0.5);-moz-box-shadow:inset 0 1px 0 #ffffff,0 0 5px rgba(0, 0, 0, 0.5);box-shadow:inset 0 1px 0 #ffffff,0 0 5px rgba(0, 0, 0, 0.5);}.subnav a{padding:8px 10px;font-size:12px;color:#0069d6;text-shadow:0 1px 0 #fff;border-left:1px solid #f9f9f9;border-right:1px solid #e5e5e5;}.subnav a:hover{color:#00438a;background-color:#eee;}
.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: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 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:#404040;background-color:#eee;} .subnav ul .active>a{color:#404040;background-color:#eee;}
...@@ -328,4 +328,5 @@ button.btn::-moz-focus-inner,input[type=submit].btn::-moz-focus-inner{padding:0; ...@@ -328,4 +328,5 @@ button.btn::-moz-focus-inner,input[type=submit].btn::-moz-focus-inner{padding:0;
.media-grid li{display:inline;} .media-grid li{display:inline;}
.media-grid a{float:left;padding:4px;margin:0 0 20px 20px;border:1px solid #ddd;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-box-shadow:0 1px 1px rgba(0, 0, 0, 0.075);-moz-box-shadow:0 1px 1px rgba(0, 0, 0, 0.075);box-shadow:0 1px 1px rgba(0, 0, 0, 0.075);}.media-grid a img{display:block;} .media-grid a{float:left;padding:4px;margin:0 0 20px 20px;border:1px solid #ddd;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-box-shadow:0 1px 1px rgba(0, 0, 0, 0.075);-moz-box-shadow:0 1px 1px rgba(0, 0, 0, 0.075);box-shadow:0 1px 1px rgba(0, 0, 0, 0.075);}.media-grid a img{display:block;}
.media-grid a:hover{border-color:#0069d6;-webkit-box-shadow:0 1px 4px rgba(0, 105, 214, 0.25);-moz-box-shadow:0 1px 4px rgba(0, 105, 214, 0.25);box-shadow:0 1px 4px rgba(0, 105, 214, 0.25);} .media-grid a:hover{border-color:#0069d6;-webkit-box-shadow:0 1px 4px rgba(0, 105, 214, 0.25);-moz-box-shadow:0 1px 4px rgba(0, 105, 214, 0.25);box-shadow:0 1px 4px rgba(0, 105, 214, 0.25);}
@media (max-width: 480px){.container{width:auto;padding:0 15px;} .row{margin-left:0;} [class*="span"]{float:none;display:block;width:auto;margin:0;} .modal{width:auto;margin:0;} .form-horizontal .control-group>label{float:none;width:auto;padding-top:0;text-align:left;} .form-horizontal .controls{margin-left:0;} .form-horizontal .control-list{padding-top:0;} .form-horizontal .form-actions{padding-left:0;}}@media (min-width: 480px) and (max-width: 768px){.container{width:auto;padding:0 10px;} .row{margin-left:0;} [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;}} .hidden{display:none;visibility:hidden;}
@media (max-width: 480px){.modal{width:auto;margin:0;} .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;}}@media (max-width: 768px){.container{width:auto;padding:0 20px;} .row{margin-left:0;} [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 (min-width: 1210px){.container{width:1170px;} [class*="span"]{margin-left:30px;} .span1{width:70px;} .span2{width:170px;} .span3{width:270px;} .span4{width:370px;} .span5{width:470px;} .span6{width:570px;} .span7{width:670px;} .span8{width:770px;} .span9{width:870px;} .span10{width:970px;} .span11{width:1070px;} .span12{width:1170px;} .offset1{margin-left:100px;} .offset2{margin-left:200px;} .offset3{margin-left:300px;} .offset4{margin-left:400px;} .offset5{margin-left:500px;} .offset6{margin-left:600px;} .offset7{margin-left:700px;} .offset8{margin-left:800px;} .offset9{margin-left:900px;} .offset10{margin-left:1000px;} .offset11{margin-left:1100px;} .offset12{margin-left:1200px;}}
docs/assets/css/docs.css
View file @ b12b71bf
...@@ -315,11 +315,6 @@ h2 + table { ...@@ -315,11 +315,6 @@ h2 + table {
-------------------------------------------------- */ -------------------------------------------------- */
@media (max-width: 480px) { @media (max-width: 480px) {
/* Hide the nav for now */
body > .navbar-fixed .nav {
display: none;
}
/* Change up some type stuff */ /* Change up some type stuff */
h1 small { h1 small {
display: block; display: block;
...@@ -365,11 +360,6 @@ h2 + table { ...@@ -365,11 +360,6 @@ h2 + table {
@media (max-width: 768px) { @media (max-width: 768px) {
/* Hide the nav for now */
body > .navbar-fixed .nav {
display: none;
}
/* Adjust the jumbotron */ /* Adjust the jumbotron */
.jumbotron .benefits { .jumbotron .benefits {
position: relative; position: relative;
...@@ -394,6 +384,9 @@ h2 + table { ...@@ -394,6 +384,9 @@ h2 + table {
.footer .pull-right { .footer .pull-right {
float: none; float: none;
} }
.footer p {
margin-bottom: 9px;
}
} }
...@@ -423,7 +416,7 @@ h2 + table { ...@@ -423,7 +416,7 @@ h2 + table {
/* Provide enough space on right-hand side for benefits list */ /* Provide enough space on right-hand side for benefits list */
.jumbotron h1, .jumbotron h1,
.jumbotron p { .jumbotron p {
margin-right: 40%; margin-right: 20%;
} }
} }
docs/index.html
View file @ b12b71bf
...@@ -151,7 +151,7 @@ ...@@ -151,7 +151,7 @@
<p>What good is an awesome design component without easy-to-use, proper, and extensible interactions? With Bootstrap, you get custom-built jQuery plugins to bring your projects to life.</p> <p>What good is an awesome design component without easy-to-use, proper, and extensible interactions? With Bootstrap, you get custom-built jQuery plugins to bring your projects to life.</p>
</div> </div>
<div class="span4"> <div class="span4">
<img class="icon" src="assets/img/glyphicons/glyphicons_155_show_thumbnails.png"> <img class="icon" src="assets/img/less-small.png">
<h2>Built on LESS</h2> <h2>Built on LESS</h2>
<p>Where vanilla CSS falters, LESS excels. Variables, nesting, operations, and mixins in LESS makes coding CSS faster and more efficient with minimal overhead.</p> <p>Where vanilla CSS falters, LESS excels. Variables, nesting, operations, and mixins in LESS makes coding CSS faster and more efficient with minimal overhead.</p>
</div> </div>
...@@ -175,7 +175,7 @@ ...@@ -175,7 +175,7 @@
<div class="span3"> <div class="span3">
<img class="small-icon" src="assets/img/icon-twitter.png"> <img class="small-icon" src="assets/img/icon-twitter.png">
<h3>Made at Twitter</h3> <h3>Made at Twitter</h3>
<p>Brought to you by experienced engineers and designers.</p> <p>Brought to you by an experienced <a href="http://twitter.com/fat">engineer</a> and <a href="http://twitter.com/mdo">designer</a>.</p>
</div> </div>
</div><!--/row--> </div><!--/row-->
</div> </div>
...@@ -196,6 +196,16 @@ ...@@ -196,6 +196,16 @@
<!-- Le javascript --> <!-- Le javascript -->
<!-- Placed at the end of the document so the pages load faster --> <!-- Placed at the end of the document so the pages load faster -->
<script src="http://code.jquery.com/jquery-1.6.2.min.js"></script> <script src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.nav .active a').click(function(e) {
e.preventDefault();
$(this).parent().siblings().toggle();
});
});
</script>
<script src="http://autobahn.tablesorter.com/jquery.tablesorter.min.js"></script> <script src="http://autobahn.tablesorter.com/jquery.tablesorter.min.js"></script>
<script src="assets/js/google-code-prettify/prettify.js"></script> <script src="assets/js/google-code-prettify/prettify.js"></script>
<script>$(function () { prettyPrint() })</script> <script>$(function () { prettyPrint() })</script>
......
docs/less.html
View file @ b12b71bf
...@@ -63,7 +63,7 @@ ...@@ -63,7 +63,7 @@
<div class="row"> <div class="row">
<div class="span4"> <div class="span4">
<h3>Why LESS?</h3> <h3>Why LESS?</h3>
<p>Bootstrap is made with LESS at it's core, a dynamic stylesheet language created by Alexis Sellier. It makes developing systems-based CSS faster, easier, and more fun.</p> <p>Bootstrap is made with LESS at it's core, a dynamic stylesheet language created by <a href="http://cloudhead.io">Alexis Sellier</a>. It makes developing systems-based CSS faster, easier, and more fun.</p>
</div> </div>
<div class="span4"> <div class="span4">
<h3>What's included?</h3> <h3>What's included?</h3>
...@@ -72,7 +72,7 @@ ...@@ -72,7 +72,7 @@
<div class="span4"> <div class="span4">
<h3>Learn more</h3> <h3>Learn more</h3>
<img style="float: right; height: 36px;" src="assets/img/less-logo-large.png" alt="LESS CSS"> <img style="float: right; height: 36px;" src="assets/img/less-logo-large.png" alt="LESS CSS">
<p>Visit the official website at http://lesscss.org to learn more.</p> <p>Visit the official website at <a href="http://lesscss.org">http://lesscss.org</a> to learn more.</p>
</div> </div>
</div> </div>
<div class="row"> <div class="row">
...@@ -98,11 +98,7 @@ ...@@ -98,11 +98,7 @@
<h1>Variables <small>from variables.less</small></h1> <h1>Variables <small>from variables.less</small></h1>
</div> </div>
<div class="row">
<div class="span3">
<h3>Hyperlinks</h3> <h3>Hyperlinks</h3>
</div>
<div class="span9">
<table class="bordered-table striped-table"> <table class="bordered-table striped-table">
<thead> <thead>
<tr> <tr>
...@@ -124,92 +120,70 @@ ...@@ -124,92 +120,70 @@
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div>
</div>
<div class="row"> <div class="row">
<div class="span3"> <div class="span6">
<h3>Grayscale colors</h3> <h3>Grayscale colors</h3>
</div>
<div class="span9">
<table class="bordered-table striped-table"> <table class="bordered-table striped-table">
<tbody> <tbody>
<tr> <tr>
<td><code>@black</code></td> <td><code>@black</code></td>
<td>#000</td> <td>#000</td>
<td>Black</td>
</tr> </tr>
<tr> <tr>
<td><code>@grayDark</code></td> <td><code>@grayDark</code></td>
<td><code>lighten(@black, 25%)</code></td> <td><code>lighten(@black, 25%)</code></td>
<td>Dark gray</td>
</tr> </tr>
<tr> <tr>
<td><code>@gray</code></td> <td><code>@gray</code></td>
<td><code>lighten(@black, 50%)</code></td> <td><code>lighten(@black, 50%)</code></td>
<td>Medium gray</td>
</tr> </tr>
<tr> <tr>
<td><code>@grayLight</code></td> <td><code>@grayLight</code></td>
<td><code>lighten(@black, 75%)</code></td> <td><code>lighten(@black, 75%)</code></td>
<td>Light gray</td>
</tr> </tr>
<tr> <tr>
<td><code>@grayLighter</code></td> <td><code>@grayLighter</code></td>
<td><code>lighten(@black, 90%)</code></td> <td><code>lighten(@black, 90%)</code></td>
<td>Lighter gray</td>
</tr> </tr>
<tr> <tr>
<td><code>@white</code></td> <td><code>@white</code></td>
<td>#fff</td> <td>#fff</td>
<td>White</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div> </div>
</div> <div class="span6">
<div class="row">
<div class="span3">
<h3>Accent colors</h3> <h3>Accent colors</h3>
</div>
<div class="span9">
<table class="bordered-table striped-table"> <table class="bordered-table striped-table">
<tbody> <tbody>
<tr> <tr>
<td><code>@blue</code></td> <td><code>@blue</code></td>
<td>#049CDB</td> <td>#049CDB</td>
<td></td>
</tr> </tr>
<tr> <tr>
<td><code>@green</code></td> <td><code>@green</code></td>
<td>#46a546</td> <td>#46a546</td>
<td></td>
</tr> </tr>
<tr> <tr>
<td><code>@red</code></td> <td><code>@red</code></td>
<td>#9d261d</td> <td>#9d261d</td>
<td></td>
</tr> </tr>
<tr> <tr>
<td><code>@yellow</code></td> <td><code>@yellow</code></td>
<td>#ffc40d</td> <td>#ffc40d</td>
<td></td>
</tr> </tr>
<tr> <tr>
<td><code>@orange</code></td> <td><code>@orange</code></td>
<td>#f89406</td> <td>#f89406</td>
<td></td>
</tr> </tr>
<tr> <tr>
<td><code>@pink</code></td> <td><code>@pink</code></td>
<td>#c3325f</td> <td>#c3325f</td>
<td></td>
</tr> </tr>
<tr> <tr>
<td><code>@purple</code></td> <td><code>@purple</code></td>
<td>#7a43b6</td> <td>#7a43b6</td>
<td></td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
...@@ -217,48 +191,36 @@ ...@@ -217,48 +191,36 @@
</div> </div>
<div class="row"> <div class="row">
<div class="span3"> <div class="span6">
<h3>Grid system</h3> <h3>Grid system</h3>
</div>
<div class="span9">
<table class="bordered-table striped-table"> <table class="bordered-table striped-table">
<tbody> <tbody>
<tr> <tr>
<td><code>@gridColumns</code></td> <td><code>@gridColumns</code></td>
<td>12</td> <td>12</td>
<td></td>
</tr> </tr>
<tr> <tr>
<td><code>@gridColumnWidth</code></td> <td><code>@gridColumnWidth</code></td>
<td>60px</td> <td>60px</td>
<td></td>
</tr> </tr>
<tr> <tr>
<td><code>@gridGutterWidth</code></td> <td><code>@gridGutterWidth</code></td>
<td>20px</td> <td>20px</td>
<td></td>
</tr> </tr>
<tr> <tr>
<td><code>@siteWidth</code></td> <td><code>@siteWidth</code></td>
<td><code>(@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1))</code></td> <td><code>(@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1))</code></td>
<td></td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div> </div>
</div> <div class="span6">
<div class="row">
<div class="span3">
<h3>Typography</h3> <h3>Typography</h3>
</div>
<div class="span9">
<table class="bordered-table striped-table"> <table class="bordered-table striped-table">
<tbody> <tbody>
<tr> <tr>
<td><code>@baseFontSize</code></td> <td><code>@baseFontSize</code></td>
<td>13px</td> <td>13px</td>
<td></td>
</tr> </tr>
<tr> <tr>
<td><code>@baseFontFamily</code></td> <td><code>@baseFontFamily</code></td>
...@@ -268,7 +230,6 @@ ...@@ -268,7 +230,6 @@
<tr> <tr>
<td><code>@baseLineHeight</code></td> <td><code>@baseLineHeight</code></td>
<td>18px</td> <td>18px</td>
<td></td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
......
docs/scaffolding.html
View file @ b12b71bf
...@@ -53,15 +53,6 @@ ...@@ -53,15 +53,6 @@
<p class="lead">Bootstrap is built on a responsive 12-column grid. We've also included fixed- and fluid-width layouts based on that system.</p> <p class="lead">Bootstrap is built on a responsive 12-column grid. We've also included fixed- and fluid-width layouts based on that system.</p>
</header> </header>
<!-- Work in progress sub nav for docs -->
<div class="navbar subnav docked-top">
<ul class="nav">
<li class="active"><a href="#">Grid system</a></li>
<li><a href="#">Layouts</a></li>
<li><a href="#">Responsive</a></li>
</ul>
</div>
<!-- Grid system <!-- Grid system
......
lib/patterns.less
View file @ b12b71bf
...@@ -13,7 +13,6 @@ ...@@ -13,7 +13,6 @@
// Common styles // Common styles
.navbar { .navbar {
height: @navBarHeight;
overflow: visible; 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
...@@ -303,8 +302,6 @@ ...@@ -303,8 +302,6 @@
// PAGE HEADERS // PAGE HEADERS
// ------------ // ------------
......
lib/responsive.less
View file @ b12b71bf
...@@ -3,26 +3,21 @@ ...@@ -3,26 +3,21 @@
// ------------------------------------------------------------- // -------------------------------------------------------------
// RESPONSIVE CLASSES
// ------------------
// Hide from screenreaders and browsers
// Credit: HTML5BP
.hidden {
display: none;
visibility: hidden;
}
// UP TO LANDSCAPE PHONE // UP TO LANDSCAPE PHONE
// --------------------- // ---------------------
@media (max-width: 480px) { @media (max-width: 480px) {
// Remove width from containers
.container {
width: auto;
padding: 0 15px;
}
// Undo negative margin on rows
.row {
margin-left: 0;
}
// Make all columns even
[class*="span"] {
float: none;
display: block;
width: auto;
margin: 0;
}
// Resize modals // Resize modals
.modal { .modal {
width: auto; width: auto;
...@@ -30,36 +25,35 @@ ...@@ -30,36 +25,35 @@
} }
// Remove the horizontal form styles // Remove the horizontal form styles
.form-horizontal .control-group > label { .horizontal-form .control-group > label {
float: none; float: none;
width: auto; width: auto;
padding-top: 0; padding-top: 0;
text-align: left; text-align: left;
} }
// Move over all input controls and content // Move over all input controls and content
.form-horizontal .controls { .horizontal-form .controls {
margin-left: 0; margin-left: 0;
} }
// Move the options list down to align with labels // Move the options list down to align with labels
.form-horizontal .control-list { .horizontal-form .control-list {
padding-top: 0; // has to be padding because margin collaspes padding-top: 0; // has to be padding because margin collaspes
} }
// Move over buttons in .form-actions to align with .controls // Move over buttons in .form-actions to align with .controls
.form-horizontal .form-actions { .horizontal-form .form-actions {
padding-left: 0; padding-left: 0;
} }
} }
// LANDSCAPE PHONE TO SMALL DESKTOP & PORTRAIT TABLET // LANDSCAPE PHONE TO SMALL DESKTOP & PORTRAIT TABLET
// -------------------------------------------------- // --------------------------------------------------
@media (min-width: 480px) and (max-width: 768px) { @media (max-width: 768px) {
// Remove width from containers // Remove width from containers
.container { .container {
width: auto; width: auto;
padding: 0 10px; padding: 0 20px;
} }
// Undo negative margin on rows // Undo negative margin on rows
.row { .row {
...@@ -72,6 +66,54 @@ ...@@ -72,6 +66,54 @@
width: auto; width: auto;
margin: 0; 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: "&darr;";
}
.nav > .active a:hover {
background-color: rgba(255,255,255,.05);
}
} }
...@@ -129,7 +171,6 @@ ...@@ -129,7 +171,6 @@
} }
/*
// LARGE DESKTOP & UP // LARGE DESKTOP & UP
// ------------------ // ------------------
...@@ -185,4 +226,3 @@ ...@@ -185,4 +226,3 @@
.offset12 { .offset(12); } .offset12 { .offset(12); }
} }
*/
\ No newline at end of file
lib/tabs-pills.less
View file @ b12b71bf
...@@ -264,11 +264,12 @@ ...@@ -264,11 +264,12 @@
// Subnav // Subnav
// STILL A WIP // STILL A WIP
.subnav { .subnav {
position: relative;
#gradient > .vertical(#f5f5f5, #eeeeee); #gradient > .vertical(#f5f5f5, #eeeeee);
.border-radius(6px); @shadow: inset 0 1px 0 #fff, 0 0 5px rgba(0,0,0,.5);
.box-shadow(@shadow);
a { a {
padding: 10px 15px; padding: 8px 10px;
font-size: 12px;
color: @linkColor; color: @linkColor;
text-shadow: 0 1px 0 #fff; text-shadow: 0 1px 0 #fff;
border-left: 1px solid #f9f9f9; border-left: 1px solid #f9f9f9;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment