* 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;
}
}*/
.navbar {
- height: 40px;
overflow: visible;
}
.navbar-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);
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;
-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;
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 {
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); }
-
}
-*/
\ No newline at end of file
.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);}
.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;}
.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;}}
-------------------------------------------------- */
@media (max-width: 480px) {
- /* Hide the nav for now */
- body > .navbar-fixed .nav {
- display: none;
- }
-
/* Change up some type stuff */
h1 small {
display: block;
@media (max-width: 768px) {
- /* Hide the nav for now */
- body > .navbar-fixed .nav {
- display: none;
- }
-
/* Adjust the jumbotron */
.jumbotron .benefits {
position: relative;
.footer .pull-right {
float: none;
}
+ .footer p {
+ margin-bottom: 9px;
+ }
}
/* Provide enough space on right-hand side for benefits list */
.jumbotron h1,
.jumbotron p {
- margin-right: 40%;
+ margin-right: 20%;
}
}
<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>
<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>
<!-- 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>
<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>
<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">
<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>
</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>
</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>
<tr>
<td><code>@baseLineHeight</code></td>
<td>18px</td>
- <td></td>
</tr>
</tbody>
</table>
<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
// 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
-
-
// PAGE HEADERS
// ------------
// -------------------------------------------------------------
+// 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;
}
// 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 {
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);
+ }
}
}
-/*
// LARGE DESKTOP & UP
// ------------------
.offset12 { .offset(12); }
}
-*/
\ No newline at end of file
// 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;
projects / thirdparty / bootstrap.git / commitdiff
