mirror of
https://github.com/twbs/bootstrap.git
synced 2025-02-19 16:54:24 +01:00
updated to include sub nav and pip nav, new docs updates, topbar nav refinements for media queried settings
This commit is contained in:
Mark Otto
parent
bc51c15709
commit
b12b71bf7c
216
bootstrap.css
vendored
216
bootstrap.css
vendored
@ -6,7 +6,7 @@
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Designed and built with all the love in the world @twitter by @mdo and @fat.
|
||||
* Date: Wed Nov 30 00:54:47 PST 2011
|
||||
* Date: Fri Dec 9 11:23:25 PST 2011
|
||||
*/
|
||||
html, body {
|
||||
margin: 0;
|
||||
@ -1175,7 +1175,6 @@ table {
|
||||
}
|
||||
}*/
|
||||
.navbar {
|
||||
height: 40px;
|
||||
overflow: visible;
|
||||
}
|
||||
.navbar-inner {
|
||||
@ -2131,7 +2130,6 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner {
|
||||
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);
|
||||
@ -2142,12 +2140,13 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner {
|
||||
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;
|
||||
-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: 10px 15px;
|
||||
padding: 8px 10px;
|
||||
font-size: 12px;
|
||||
color: #0069d6;
|
||||
text-shadow: 0 1px 0 #fff;
|
||||
border-left: 1px solid #f9f9f9;
|
||||
@ -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);
|
||||
box-shadow: 0 1px 4px rgba(0, 105, 214, 0.25);
|
||||
}
|
||||
.hidden {
|
||||
display: none;
|
||||
visibility: hidden;
|
||||
}
|
||||
@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 {
|
||||
.horizontal-form .control-group > label {
|
||||
float: none;
|
||||
width: auto;
|
||||
padding-top: 0;
|
||||
text-align: left;
|
||||
}
|
||||
.form-horizontal .controls {
|
||||
.horizontal-form .controls {
|
||||
margin-left: 0;
|
||||
}
|
||||
.form-horizontal .control-list {
|
||||
.horizontal-form .control-list {
|
||||
padding-top: 0;
|
||||
}
|
||||
.form-horizontal .form-actions {
|
||||
.horizontal-form .form-actions {
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
@media (min-width: 480px) and (max-width: 768px) {
|
||||
@media (max-width: 768px) {
|
||||
.container {
|
||||
width: auto;
|
||||
padding: 0 10px;
|
||||
padding: 0 20px;
|
||||
}
|
||||
.row {
|
||||
margin-left: 0;
|
||||
@ -2563,6 +2553,55 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner {
|
||||
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 {
|
||||
@ -2641,60 +2680,83 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner {
|
||||
margin-left: 768px;
|
||||
}
|
||||
}
|
||||
/*
|
||||
// LARGE DESKTOP & UP
|
||||
// ------------------
|
||||
|
||||
@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 {
|
||||
width: @siteWidth;
|
||||
width: 1170px;
|
||||
}
|
||||
[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); }
|
||||
|
||||
}
|
||||
*/
|
||||
7
bootstrap.min.css
vendored
7
bootstrap.min.css
vendored
@ -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: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;}
|
||||
.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 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);}
|
||||
@ -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 .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;}
|
||||
.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: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;}
|
||||
@ -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 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 (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;}}
|
||||
|
||||
@ -315,11 +315,6 @@ h2 + table {
|
||||
-------------------------------------------------- */
|
||||
@media (max-width: 480px) {
|
||||
|
||||
/* Hide the nav for now */
|
||||
body > .navbar-fixed .nav {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Change up some type stuff */
|
||||
h1 small {
|
||||
display: block;
|
||||
@ -365,11 +360,6 @@ h2 + table {
|
||||
|
||||
@media (max-width: 768px) {
|
||||
|
||||
/* Hide the nav for now */
|
||||
body > .navbar-fixed .nav {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Adjust the jumbotron */
|
||||
.jumbotron .benefits {
|
||||
position: relative;
|
||||
@ -394,6 +384,9 @@ h2 + table {
|
||||
.footer .pull-right {
|
||||
float: none;
|
||||
}
|
||||
.footer p {
|
||||
margin-bottom: 9px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@ -423,7 +416,7 @@ h2 + table {
|
||||
/* Provide enough space on right-hand side for benefits list */
|
||||
.jumbotron h1,
|
||||
.jumbotron p {
|
||||
margin-right: 40%;
|
||||
margin-right: 20%;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
BIN
docs/assets/img/less-small.png
Normal file
BIN
docs/assets/img/less-small.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.2 KiB |
@ -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>
|
||||
</div>
|
||||
<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>
|
||||
<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>
|
||||
@ -175,7 +175,7 @@
|
||||
<div class="span3">
|
||||
<img class="small-icon" src="assets/img/icon-twitter.png">
|
||||
<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><!--/row-->
|
||||
</div>
|
||||
@ -196,6 +196,16 @@
|
||||
<!-- Le javascript -->
|
||||
<!-- 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 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="assets/js/google-code-prettify/prettify.js"></script>
|
||||
<script>$(function () { prettyPrint() })</script>
|
||||
|
||||
@ -63,7 +63,7 @@
|
||||
<div class="row">
|
||||
<div class="span4">
|
||||
<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 class="span4">
|
||||
<h3>What's included?</h3>
|
||||
@ -72,7 +72,7 @@
|
||||
<div class="span4">
|
||||
<h3>Learn more</h3>
|
||||
<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 class="row">
|
||||
@ -98,11 +98,7 @@
|
||||
<h1>Variables <small>from variables.less</small></h1>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="span3">
|
||||
<h3>Hyperlinks</h3>
|
||||
</div>
|
||||
<div class="span9">
|
||||
<table class="bordered-table striped-table">
|
||||
<thead>
|
||||
<tr>
|
||||
@ -124,92 +120,70 @@
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="span3">
|
||||
<div class="span6">
|
||||
<h3>Grayscale colors</h3>
|
||||
</div>
|
||||
<div class="span9">
|
||||
<table class="bordered-table striped-table">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><code>@black</code></td>
|
||||
<td>#000</td>
|
||||
<td>Black</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>@grayDark</code></td>
|
||||
<td><code>lighten(@black, 25%)</code></td>
|
||||
<td>Dark gray</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>@gray</code></td>
|
||||
<td><code>lighten(@black, 50%)</code></td>
|
||||
<td>Medium gray</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>@grayLight</code></td>
|
||||
<td><code>lighten(@black, 75%)</code></td>
|
||||
<td>Light gray</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>@grayLighter</code></td>
|
||||
<td><code>lighten(@black, 90%)</code></td>
|
||||
<td>Lighter gray</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>@white</code></td>
|
||||
<td>#fff</td>
|
||||
<td>White</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="span3">
|
||||
<div class="span6">
|
||||
<h3>Accent colors</h3>
|
||||
</div>
|
||||
<div class="span9">
|
||||
<table class="bordered-table striped-table">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><code>@blue</code></td>
|
||||
<td>#049CDB</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>@green</code></td>
|
||||
<td>#46a546</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>@red</code></td>
|
||||
<td>#9d261d</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>@yellow</code></td>
|
||||
<td>#ffc40d</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>@orange</code></td>
|
||||
<td>#f89406</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>@pink</code></td>
|
||||
<td>#c3325f</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>@purple</code></td>
|
||||
<td>#7a43b6</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
@ -217,48 +191,36 @@
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="span3">
|
||||
<div class="span6">
|
||||
<h3>Grid system</h3>
|
||||
</div>
|
||||
<div class="span9">
|
||||
<table class="bordered-table striped-table">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><code>@gridColumns</code></td>
|
||||
<td>12</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>@gridColumnWidth</code></td>
|
||||
<td>60px</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>@gridGutterWidth</code></td>
|
||||
<td>20px</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>@siteWidth</code></td>
|
||||
<td><code>(@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1))</code></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="span3">
|
||||
<div class="span6">
|
||||
<h3>Typography</h3>
|
||||
</div>
|
||||
<div class="span9">
|
||||
<table class="bordered-table striped-table">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><code>@baseFontSize</code></td>
|
||||
<td>13px</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>@baseFontFamily</code></td>
|
||||
@ -268,7 +230,6 @@
|
||||
<tr>
|
||||
<td><code>@baseLineHeight</code></td>
|
||||
<td>18px</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
@ -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>
|
||||
</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
|
||||
|
||||
@ -13,7 +13,6 @@
|
||||
|
||||
// Common styles
|
||||
.navbar {
|
||||
height: @navBarHeight;
|
||||
overflow: visible;
|
||||
}
|
||||
// gradient is applied to it's own element because overflow visible is not honored by ie when filter is present
|
||||
@ -303,8 +302,6 @@
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
// PAGE HEADERS
|
||||
// ------------
|
||||
|
||||
|
||||
@ -3,26 +3,21 @@
|
||||
// -------------------------------------------------------------
|
||||
|
||||
|
||||
// RESPONSIVE CLASSES
|
||||
// ------------------
|
||||
|
||||
// Hide from screenreaders and browsers
|
||||
// Credit: HTML5BP
|
||||
.hidden {
|
||||
display: none;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
|
||||
// UP TO LANDSCAPE PHONE
|
||||
// ---------------------
|
||||
|
||||
@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
|
||||
.modal {
|
||||
width: auto;
|
||||
@ -30,36 +25,35 @@
|
||||
}
|
||||
|
||||
// Remove the horizontal form styles
|
||||
.form-horizontal .control-group > label {
|
||||
.horizontal-form .control-group > label {
|
||||
float: none;
|
||||
width: auto;
|
||||
padding-top: 0;
|
||||
text-align: left;
|
||||
}
|
||||
// Move over all input controls and content
|
||||
.form-horizontal .controls {
|
||||
.horizontal-form .controls {
|
||||
margin-left: 0;
|
||||
}
|
||||
// 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
|
||||
}
|
||||
// Move over buttons in .form-actions to align with .controls
|
||||
.form-horizontal .form-actions {
|
||||
.horizontal-form .form-actions {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
// LANDSCAPE PHONE TO SMALL DESKTOP & PORTRAIT TABLET
|
||||
// --------------------------------------------------
|
||||
|
||||
@media (min-width: 480px) and (max-width: 768px) {
|
||||
@media (max-width: 768px) {
|
||||
// Remove width from containers
|
||||
.container {
|
||||
width: auto;
|
||||
padding: 0 10px;
|
||||
padding: 0 20px;
|
||||
}
|
||||
// Undo negative margin on rows
|
||||
.row {
|
||||
@ -72,6 +66,54 @@
|
||||
width: auto;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
// Make the nav work for small devices
|
||||
.nav {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 180px;
|
||||
padding-top: 40px;
|
||||
list-style: none;
|
||||
}
|
||||
.nav,
|
||||
.nav > li:last-child a {
|
||||
.border-radius(0 0 4px 0);
|
||||
}
|
||||
.nav > li {
|
||||
float: none;
|
||||
display: none;
|
||||
}
|
||||
.nav > li > a {
|
||||
float: none;
|
||||
background-color: #222;
|
||||
}
|
||||
.nav > .active {
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
.navbar ul .active > a {
|
||||
background-color: transparent;
|
||||
}
|
||||
.nav > .active a:after {
|
||||
display: inline-block;
|
||||
width: 0;
|
||||
height: 0;
|
||||
margin-top: 8px;
|
||||
margin-left: 6px;
|
||||
text-indent: -99999px;
|
||||
vertical-align: top;
|
||||
border-left: 4px solid transparent;
|
||||
border-right: 4px solid transparent;
|
||||
border-top: 4px solid @white;
|
||||
.opacity(100);
|
||||
content: "↓";
|
||||
}
|
||||
.nav > .active a:hover {
|
||||
background-color: rgba(255,255,255,.05);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -129,7 +171,6 @@
|
||||
|
||||
}
|
||||
|
||||
/*
|
||||
// LARGE DESKTOP & UP
|
||||
// ------------------
|
||||
|
||||
@ -185,4 +226,3 @@
|
||||
.offset12 { .offset(12); }
|
||||
|
||||
}
|
||||
*/
|
||||
@ -264,11 +264,12 @@
|
||||
// Subnav
|
||||
// STILL A WIP
|
||||
.subnav {
|
||||
position: relative;
|
||||
#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 {
|
||||
padding: 10px 15px;
|
||||
padding: 8px 10px;
|
||||
font-size: 12px;
|
||||
color: @linkColor;
|
||||
text-shadow: 0 1px 0 #fff;
|
||||
border-left: 1px solid #f9f9f9;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user