few tweaks to responsive stuff, updated docs for grid system (still needs copy editing)
This commit is contained in:
Mark Otto
parent
c62a0239bd
commit
e7d2218b20
|
|
@ -6,7 +6,7 @@
|
|||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Designed and built with all the love in the world @twitter by @mdo and @fat.
|
||||
* Date: Sun Oct 16 19:08:43 PDT 2011
|
||||
* Date: Sun Oct 16 23:04:03 PDT 2011
|
||||
*/
|
||||
/* Reset.less
|
||||
* Props to Eric Meyer (meyerweb.com) for his CSS reset file. We're using an adapted version here that cuts out some of the reset HTML elements we will never need here (i.e., dfn, samp, etc).
|
||||
|
|
@ -260,6 +260,7 @@ a:hover {
|
|||
display: block;
|
||||
}
|
||||
.row {
|
||||
margin-left: -20px;
|
||||
zoom: 1;
|
||||
}
|
||||
.row:before, .row:after {
|
||||
|
|
@ -276,9 +277,6 @@ a:hover {
|
|||
float: left;
|
||||
margin-left: 20px;
|
||||
}
|
||||
.row > [class*="span"]:first-child {
|
||||
margin-left: 0;
|
||||
}
|
||||
.span1 {
|
||||
width: 60px;
|
||||
}
|
||||
|
|
@ -316,37 +314,37 @@ a:hover {
|
|||
width: 940px;
|
||||
}
|
||||
.offset1 {
|
||||
margin-left: 80px;
|
||||
margin-left: 100px;
|
||||
}
|
||||
.offset2 {
|
||||
margin-left: 160px;
|
||||
margin-left: 180px;
|
||||
}
|
||||
.offset3 {
|
||||
margin-left: 240px;
|
||||
margin-left: 260px;
|
||||
}
|
||||
.offset4 {
|
||||
margin-left: 320px;
|
||||
margin-left: 340px;
|
||||
}
|
||||
.offset5 {
|
||||
margin-left: 400px;
|
||||
margin-left: 420px;
|
||||
}
|
||||
.offset6 {
|
||||
margin-left: 480px;
|
||||
margin-left: 500px;
|
||||
}
|
||||
.offset7 {
|
||||
margin-left: 560px;
|
||||
margin-left: 580px;
|
||||
}
|
||||
.offset8 {
|
||||
margin-left: 640px;
|
||||
margin-left: 660px;
|
||||
}
|
||||
.offset9 {
|
||||
margin-left: 720px;
|
||||
margin-left: 740px;
|
||||
}
|
||||
.offset10 {
|
||||
margin-left: 800px;
|
||||
margin-left: 820px;
|
||||
}
|
||||
.offset11 {
|
||||
margin-left: 880px;
|
||||
margin-left: 900px;
|
||||
}
|
||||
/* Typography.less
|
||||
* Headings, body text, lists, code, and more for a versatile and durable typography system
|
||||
|
|
@ -1550,14 +1548,14 @@ footer {
|
|||
border-top: 1px solid #eee;
|
||||
}
|
||||
.page-header {
|
||||
margin-bottom: 17px;
|
||||
border-bottom: 1px solid #ddd;
|
||||
margin-bottom: 27px;
|
||||
border-bottom: 1px solid #eee;
|
||||
-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
|
||||
-moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
|
||||
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
.page-header h1 {
|
||||
margin-bottom: 8px;
|
||||
margin-bottom: 13.5px;
|
||||
}
|
||||
.btn.danger,
|
||||
.alert-message.danger,
|
||||
|
|
@ -2379,83 +2377,60 @@ 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: 1170px;
|
||||
width: @siteWidth;
|
||||
}
|
||||
[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;
|
||||
margin-left: @gridGutterWidth;
|
||||
}
|
||||
|
||||
// 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); }
|
||||
|
||||
}
|
||||
*/
|
||||
|
|
@ -36,10 +36,9 @@ a{color:#0069d6;text-decoration:none;line-height:inherit;font-weight:inherit;}a:
|
|||
.pull-left{float:left;}
|
||||
.hide{display:none;}
|
||||
.show{display:block;}
|
||||
.row{zoom:1;}.row:before,.row:after{display:table;content:"";zoom:1;*display:inline;}
|
||||
.row{margin-left:-20px;zoom:1;}.row:before,.row:after{display:table;content:"";zoom:1;*display:inline;}
|
||||
.row:after{clear:both;}
|
||||
[class*="span"]{display:inline;float:left;margin-left:20px;}
|
||||
.row>[class*="span"]:first-child{margin-left:0;}
|
||||
.span1{width:60px;}
|
||||
.span2{width:140px;}
|
||||
.span3{width:220px;}
|
||||
|
|
@ -52,17 +51,17 @@ a{color:#0069d6;text-decoration:none;line-height:inherit;font-weight:inherit;}a:
|
|||
.span10{width:780px;}
|
||||
.span11{width:860px;}
|
||||
.span12{width:940px;}
|
||||
.offset1{margin-left:80px;}
|
||||
.offset2{margin-left:160px;}
|
||||
.offset3{margin-left:240px;}
|
||||
.offset4{margin-left:320px;}
|
||||
.offset5{margin-left:400px;}
|
||||
.offset6{margin-left:480px;}
|
||||
.offset7{margin-left:560px;}
|
||||
.offset8{margin-left:640px;}
|
||||
.offset9{margin-left:720px;}
|
||||
.offset10{margin-left:800px;}
|
||||
.offset11{margin-left:880px;}
|
||||
.offset1{margin-left:100px;}
|
||||
.offset2{margin-left:180px;}
|
||||
.offset3{margin-left:260px;}
|
||||
.offset4{margin-left:340px;}
|
||||
.offset5{margin-left:420px;}
|
||||
.offset6{margin-left:500px;}
|
||||
.offset7{margin-left:580px;}
|
||||
.offset8{margin-left:660px;}
|
||||
.offset9{margin-left:740px;}
|
||||
.offset10{margin-left:820px;}
|
||||
.offset11{margin-left:900px;}
|
||||
p{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:13px;line-height:18px;margin-bottom:9px;}p small{font-size:11px;color:#bfbfbf;}
|
||||
h1,h2,h3,h4,h5,h6{font-weight:bold;color:#404040;}h1 small,h2 small,h3 small,h4 small,h5 small,h6 small{color:#bfbfbf;}
|
||||
h1{margin-bottom:18px;font-size:30px;line-height:36px;}h1 small{font-size:18px;}
|
||||
|
|
@ -242,7 +241,7 @@ table .headerSortUp.purple,table .headerSortDown.purple{background-color:#e2d5f0
|
|||
.hero-unit{background-color:#f5f5f5;margin-bottom:30px;padding:60px;-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;}.hero-unit h1{margin-bottom:0;font-size:60px;line-height:1;letter-spacing:-1px;}
|
||||
.hero-unit p{font-size:18px;font-weight:200;line-height:27px;}
|
||||
footer{margin-top:17px;padding-top:17px;border-top:1px solid #eee;}
|
||||
.page-header{margin-bottom:17px;border-bottom:1px solid #ddd;-webkit-box-shadow:0 1px 0 rgba(255, 255, 255, 0.5);-moz-box-shadow:0 1px 0 rgba(255, 255, 255, 0.5);box-shadow:0 1px 0 rgba(255, 255, 255, 0.5);}.page-header h1{margin-bottom:8px;}
|
||||
.page-header{margin-bottom:27px;border-bottom:1px solid #eee;-webkit-box-shadow:0 1px 0 rgba(255, 255, 255, 0.5);-moz-box-shadow:0 1px 0 rgba(255, 255, 255, 0.5);box-shadow:0 1px 0 rgba(255, 255, 255, 0.5);}.page-header h1{margin-bottom:13.5px;}
|
||||
.btn.danger,.alert-message.danger,.btn.danger:hover,.alert-message.danger:hover,.btn.error,.alert-message.error,.btn.error:hover,.alert-message.error:hover,.btn.success,.alert-message.success,.btn.success:hover,.alert-message.success:hover,.btn.info,.alert-message.info,.btn.info:hover,.alert-message.info:hover{color:#ffffff;}
|
||||
.btn.danger,.alert-message.danger,.btn.error,.alert-message.error{background-color:#c43c35;background-image:-khtml-gradient(linear, left top, left bottom, from(#ee5f5b), to(#c43c35));background-image:-moz-linear-gradient(top, #ee5f5b, #c43c35);background-image:-ms-linear-gradient(top, #ee5f5b, #c43c35);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #ee5f5b), color-stop(100%, #c43c35));background-image:-webkit-linear-gradient(top, #ee5f5b, #c43c35);background-image:-o-linear-gradient(top, #ee5f5b, #c43c35);background-image:linear-gradient(top, #ee5f5b, #c43c35);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ee5f5b', endColorstr='#c43c35', GradientType=0);text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);border-color:#c43c35 #c43c35 #882a25;border-color:rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);}
|
||||
.btn.success,.alert-message.success{background-color:#57a957;background-image:-khtml-gradient(linear, left top, left bottom, from(#62c462), to(#57a957));background-image:-moz-linear-gradient(top, #62c462, #57a957);background-image:-ms-linear-gradient(top, #62c462, #57a957);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #62c462), color-stop(100%, #57a957));background-image:-webkit-linear-gradient(top, #62c462, #57a957);background-image:-o-linear-gradient(top, #62c462, #57a957);background-image:linear-gradient(top, #62c462, #57a957);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#62c462', endColorstr='#57a957', GradientType=0);text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);border-color:#57a957 #57a957 #3d773d;border-color:rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);}
|
||||
|
|
@ -321,4 +320,4 @@ 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 10px;} [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;} [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;}}@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){.container{width:auto;padding:0 10px;} [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;} [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;}}
|
||||
|
|
|
|||
|
|
@ -17,19 +17,16 @@ body {
|
|||
section {
|
||||
padding-top: 60px;
|
||||
}
|
||||
section > .row {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
/* Tweak topbar brand link to be super sleek
|
||||
-------------------------------------------------- */
|
||||
.navbar .brand {
|
||||
body > .navbar-fixed .brand {
|
||||
float: right;
|
||||
font-weight: bold;
|
||||
color: #000;
|
||||
text-shadow: 0 1px 0 rgba(255,255,255,.1);
|
||||
}
|
||||
.navbar .brand:hover {
|
||||
body > .navbar-fixed .brand:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
|
|
@ -136,6 +133,9 @@ section > .row {
|
|||
-webkit-border-radius: 3px;
|
||||
-moz-border-radius: 3px;
|
||||
border-radius: 3px;
|
||||
-webkit-box-shadow: inset 0 1px 0 rgba(0,0,0,.03);
|
||||
-moz-box-shadow: inset 0 1px 0 rgba(0,0,0,.03);
|
||||
box-shadow: inset 0 1px 0 rgba(0,0,0,.03);
|
||||
}
|
||||
.quick-links li {
|
||||
display: inline;
|
||||
|
|
@ -171,10 +171,10 @@ section > .row {
|
|||
-------------------------------------------------- */
|
||||
.show-grid {
|
||||
margin-top: 10px;
|
||||
margin-bottom: 10px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.show-grid [class*="span"] {
|
||||
background: #eee;
|
||||
background-color: #eee;
|
||||
text-align: center;
|
||||
-webkit-border-radius: 3px;
|
||||
-moz-border-radius: 3px;
|
||||
|
|
|
|||
165
docs/index.html
165
docs/index.html
|
|
@ -86,7 +86,7 @@
|
|||
<h4>Feature highlights</h4>
|
||||
<ul>
|
||||
<li><span>×</span> Built on LESS</li>
|
||||
<li><span>×</span> Complete styleguide</li>
|
||||
<li><span>×</span> Complete styleguide docs</li>
|
||||
<li><span>×</span> Fully responsive design</li>
|
||||
<li><span>×</span> Small footprint (7kb gzipped)</li>
|
||||
<li><span>×</span> Support for IE7 and up</li>
|
||||
|
|
@ -199,28 +199,10 @@
|
|||
================================================== -->
|
||||
<section id="grid-system">
|
||||
<div class="page-header">
|
||||
<h1>Grid system <small>Rock the standard 940px or roll your own</small></h1>
|
||||
<h1>Grid system <small>12 columns with a responsive twist</small></h1>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="span3">
|
||||
<h2>Default grid</h2>
|
||||
<p>The default grid system provided as part of Bootstrap is a 940px wide 16-column grid. It’s a flavor of the popular 960 grid system, but without the additional margin/padding on the left and right sides.</p>
|
||||
</div>
|
||||
<div class="span9">
|
||||
<h3>Example grid markup</h3>
|
||||
<p>As shown here, a basic layout can be created with two "columns," each spanning a number of the 16 foundational columns we defined as part of our grid system. See the examples below for more variations.</p>
|
||||
<pre class="prettyprint linenums">
|
||||
<div class="row">
|
||||
<div class="span6">
|
||||
...
|
||||
</div>
|
||||
<div class="span10">
|
||||
...
|
||||
</div>
|
||||
</div>
|
||||
</pre>
|
||||
</div>
|
||||
</div><!-- /row -->
|
||||
|
||||
<h2>Default 940px grid</h2>
|
||||
<div class="row show-grid">
|
||||
<div class="span1">1</div>
|
||||
<div class="span1">1</div>
|
||||
|
|
@ -252,12 +234,28 @@
|
|||
<div class="span12">12</div>
|
||||
</div>
|
||||
|
||||
<br>
|
||||
<div class="row">
|
||||
<div class="span4">
|
||||
<p>The default grid system provided as part of Bootstrap is a <strong>940px-wide, 12-column grid</strong>.</p>
|
||||
<p>It also has three responsive variations for various devices and resolutions: phone, tablet, and large widescreen desktops.</p>
|
||||
</div>
|
||||
<div class="span4">
|
||||
<pre class="prettyprint linenums">
|
||||
<div class="row">
|
||||
<div class="span4">...</div>
|
||||
<div class="span8">...</div>
|
||||
</div>
|
||||
</pre>
|
||||
</div>
|
||||
<div class="span4">
|
||||
<p>As shown here, a basic layout can be created with two "columns," each spanning a number of the 12 foundational columns we defined as part of our grid system.</p>
|
||||
</div>
|
||||
</div><!-- /row -->
|
||||
|
||||
<h2>Offsetting columns</h2>
|
||||
<div class="row show-grid">
|
||||
<div class="span4">4</div>
|
||||
<div class="span8 offset4">8 offset 4</div>
|
||||
<div class="span4 offset4">4 offset 4</div>
|
||||
</div><!-- /row -->
|
||||
<div class="row show-grid">
|
||||
<div class="span3 offset3">3 offset 3</div>
|
||||
|
|
@ -269,37 +267,33 @@
|
|||
|
||||
<br>
|
||||
|
||||
<h2>Nesting columns</h2>
|
||||
<div class="row">
|
||||
<div class="span3">
|
||||
<h2>Nesting columns</h2>
|
||||
<p>Nest your content if you must by creating a <code>.row</code> within an existing column.</p>
|
||||
</div>
|
||||
<div class="span9">
|
||||
<h4>Example of nested columns</h4>
|
||||
<div class="span6">
|
||||
<p>With the static (non-fluid) grid system in Bootstrap, nesting is easy. To nest your content, just add a new <code>.row</code> and set of <code>.span*</code> columns within an existing <code>.span*</code> column.</p>
|
||||
<h4>Example</h4>
|
||||
<div class="row show-grid">
|
||||
<div class="span9">
|
||||
<div class="span6">
|
||||
Level 1 of column
|
||||
<div class="row show-grid">
|
||||
<div class="span4">
|
||||
<div class="span3">
|
||||
Level 2
|
||||
</div>
|
||||
<div class="span5">
|
||||
<div class="span3">
|
||||
Level 2
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="span6">
|
||||
<pre class="prettyprint linenums">
|
||||
<div class="row">
|
||||
<div class="span12">
|
||||
Level 1 of column
|
||||
<div class="row">
|
||||
<div class="span6">
|
||||
Level 2
|
||||
</div>
|
||||
<div class="span6">
|
||||
Level 2
|
||||
</div>
|
||||
<div class="span6">Level 2</div>
|
||||
<div class="span6">Level 2</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -307,56 +301,53 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<br>
|
||||
|
||||
<h2>Grid customization</h2>
|
||||
<table class="zebra-striped">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Variable</th>
|
||||
<th>Default value</th>
|
||||
<th>Description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><code>@gridColumns</code></td>
|
||||
<td>16</td>
|
||||
<td>The number of columns within the grid</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>@gridColumnWidth</code></td>
|
||||
<td>40px</td>
|
||||
<td>The width of each column within the grid</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>@gridGutterWidth</code></td>
|
||||
<td>20px</td>
|
||||
<td>The negative space between each column</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>@siteWidth</code></td>
|
||||
<td><em>Computed sum of all columns and gutters</em></td>
|
||||
<td>We use some basic match to count the number of columns and gutters and set the width of the <code>.fixed-container()</code> mixin.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<div class="row">
|
||||
<div class="span3">
|
||||
<h2>Roll your own grid</h2>
|
||||
<p>Built into Bootstrap are a handful of variables for customizing the default 940px grid system. With a bit of customization, you can modify the size of columns, their gutters, and the container they reside in.</p>
|
||||
<div class="span4">
|
||||
<h3>Variables in LESS</h3>
|
||||
<p>Built into Bootstrap are a handful of variables for customizing the default 940px grid system, documented above. All variables for the grid are stored in mixins.less.</p>
|
||||
</div>
|
||||
<div class="span9">
|
||||
<h3>Inside the grid</h3>
|
||||
<p>The variables needed to modify the grid system currently all reside in <code>preboot.less</code>.</p>
|
||||
<table class="zebra-striped">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Variable</th>
|
||||
<th>Default value</th>
|
||||
<th>Description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><code>@gridColumns</code></td>
|
||||
<td>16</td>
|
||||
<td>The number of columns within the grid</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>@gridColumnWidth</code></td>
|
||||
<td>40px</td>
|
||||
<td>The width of each column within the grid</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>@gridGutterWidth</code></td>
|
||||
<td>20px</td>
|
||||
<td>The negative space between each column</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>@siteWidth</code></td>
|
||||
<td><em>Computed sum of all columns and gutters</em></td>
|
||||
<td>We use some basic match to count the number of columns and gutters and set the width of the <code>.fixed-container()</code> mixin.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<h3>Now to customize</h3>
|
||||
<p>Modifying the grid means changing the three <code>@grid-*</code> variables and recompiling the Less files.</p>
|
||||
<p>Bootstrap comes equipped to handle a grid system with up to 24 columns; the default is just 16. Here's how your grid variables would look customized to a 24-column grid.</p>
|
||||
<pre class="prettyprint linenums">@gridColumns: 24;
|
||||
@gridColumnWidth: 20px;
|
||||
@gridGutterWidth: 20px;</pre>
|
||||
<p>Once recompiled, you'll be set!</p>
|
||||
<div class="span4">
|
||||
<h3>How to customize</h3>
|
||||
<p>Modifying the grid means changing the three <code>@grid*</code> variables and recompiling Bootstrap. Change the grids in the preboot.less file and use one of the <a href="#compiling">four ways documented to recompile</a>.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="span4">
|
||||
<h3>Staying responsive</h3>
|
||||
<p>Customization of the grid only works at the default level, the 940px grid. To maintain the responsive aspects of Bootstrap, you'll also have to customize the grids in responsive.less.</p>
|
||||
</div>
|
||||
</div><!-- /row -->
|
||||
|
||||
</section>
|
||||
|
||||
|
||||
|
|
@ -1928,7 +1919,7 @@ Lorem ipsum dolar sit amet illo error <a href="#" title="below">ipsum</a> verita
|
|||
}
|
||||
</pre>
|
||||
|
||||
<h2>Compiling Less</h2>
|
||||
<h2 id="compiling">Compiling Less</h2>
|
||||
<p>After modifying the <code>.less</code> files in /lib/, you'll need to recompile them in order to regenerate the bootstrap-*.*.*.css and bootstrap-*.*.*.min.css files. If you're submitting a pull request to GitHub, you must always recompile.</p>
|
||||
<h3>Ways to compile</h3>
|
||||
<table class="zebra-striped">
|
||||
|
|
|
|||
|
|
@ -78,12 +78,13 @@
|
|||
margin-right: auto;
|
||||
.clearfix();
|
||||
}
|
||||
.columns(@columnSpan: 1) {
|
||||
width: (@gridColumnWidth * @columnSpan) + (@gridGutterWidth * (@columnSpan - 1));
|
||||
.columns(@columns: 1) {
|
||||
width: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1));
|
||||
}
|
||||
.offset(@columnOffset: 1) {
|
||||
margin-left: (@gridColumnWidth * @columnOffset) + (@gridGutterWidth * (@columnOffset - 1)) + @gridGutterWidth;
|
||||
.offset(@columns: 1) {
|
||||
margin-left: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1)) + (@gridGutterWidth * 2);
|
||||
}
|
||||
|
||||
// Necessary grid styles for every column to make them appear next to each other horizontally
|
||||
.gridColumn() {
|
||||
display: inline;
|
||||
|
|
|
|||
|
|
@ -520,11 +520,11 @@ footer {
|
|||
// ------------
|
||||
|
||||
.page-header {
|
||||
margin-bottom: @baseLineHeight - 1;
|
||||
border-bottom: 1px solid #ddd;
|
||||
margin-bottom: @baseLineHeight * 1.5;
|
||||
border-bottom: 1px solid #eee;
|
||||
.box-shadow(0 1px 0 rgba(255,255,255,.5));
|
||||
h1 {
|
||||
margin-bottom: (@baseLineHeight / 2) - 1px;
|
||||
margin-bottom: @baseLineHeight * .75;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -121,6 +121,7 @@
|
|||
|
||||
}
|
||||
|
||||
/*
|
||||
// LARGE DESKTOP & UP
|
||||
// ------------------
|
||||
|
||||
|
|
@ -176,3 +177,4 @@
|
|||
.offset12 { .offset(12); }
|
||||
|
||||
}
|
||||
*/
|
||||
|
|
@ -85,6 +85,7 @@ a {
|
|||
// -----------
|
||||
// To customize the grid system, bring up the variables.less file and change the column count, size, and gutter there
|
||||
.row {
|
||||
margin-left: -@gridGutterWidth;
|
||||
.clearfix();
|
||||
}
|
||||
|
||||
|
|
@ -93,10 +94,6 @@ a {
|
|||
[class*="span"] {
|
||||
.gridColumn();
|
||||
}
|
||||
// Kill the margin on the first column
|
||||
.row > [class*="span"]:first-child {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
// Default columns
|
||||
.span1 { .columns(1); }
|
||||
|
|
|
|||
Loading…
Reference in New Issue