* 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: Sun Oct 16 19:08:43 PDT 2011
* Date: Sun Oct 16 23:04:03 PDT 2011
*/
*/
/* Reset.less
/* 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).
* 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 {
...
@@ -260,6 +260,7 @@ a:hover {
display:block;
display:block;
}
}
.row{
.row{
margin-left:-20px;
zoom:1;
zoom:1;
}
}
.row:before,.row:after{
.row:before,.row:after{
...
@@ -276,9 +277,6 @@ a:hover {
...
@@ -276,9 +277,6 @@ a:hover {
float:left;
float:left;
margin-left:20px;
margin-left:20px;
}
}
.row>[class*="span"]:first-child{
margin-left:0;
}
.span1{
.span1{
width:60px;
width:60px;
}
}
...
@@ -316,37 +314,37 @@ a:hover {
...
@@ -316,37 +314,37 @@ a:hover {
width:940px;
width:940px;
}
}
.offset1{
.offset1{
margin-left:80px;
margin-left:100px;
}
}
.offset2{
.offset2{
margin-left:160px;
margin-left:180px;
}
}
.offset3{
.offset3{
margin-left:240px;
margin-left:260px;
}
}
.offset4{
.offset4{
margin-left:320px;
margin-left:340px;
}
}
.offset5{
.offset5{
margin-left:400px;
margin-left:420px;
}
}
.offset6{
.offset6{
margin-left:480px;
margin-left:500px;
}
}
.offset7{
.offset7{
margin-left:560px;
margin-left:580px;
}
}
.offset8{
.offset8{
margin-left:640px;
margin-left:660px;
}
}
.offset9{
.offset9{
margin-left:720px;
margin-left:740px;
}
}
.offset10{
.offset10{
margin-left:800px;
margin-left:820px;
}
}
.offset11{
.offset11{
margin-left:880px;
margin-left:900px;
}
}
/* Typography.less
/* Typography.less
* Headings, body text, lists, code, and more for a versatile and durable typography system
* Headings, body text, lists, code, and more for a versatile and durable typography system
<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>
<divclass="row">
<divclass="span3">
<h2>Default 940px grid</h2>
<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>
<divclass="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>
<preclass="prettyprint linenums">
<div class="row">
<div class="span6">
...
</div>
<div class="span10">
...
</div>
</div>
</pre>
</div>
</div><!-- /row -->
<divclass="row show-grid">
<divclass="row show-grid">
<divclass="span1">1</div>
<divclass="span1">1</div>
<divclass="span1">1</div>
<divclass="span1">1</div>
...
@@ -252,12 +234,28 @@
...
@@ -252,12 +234,28 @@
<divclass="span12">12</div>
<divclass="span12">12</div>
</div>
</div>
<br>
<divclass="row">
<divclass="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>
<divclass="span4">
<preclass="prettyprint linenums">
<div class="row">
<div class="span4">...</div>
<div class="span8">...</div>
</div>
</pre>
</div>
<divclass="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>
<h2>Offsetting columns</h2>
<divclass="row show-grid">
<divclass="row show-grid">
<divclass="span4">4</div>
<divclass="span4">4</div>
<divclass="span8 offset4">8 offset 4</div>
<divclass="span4 offset4">4 offset 4</div>
</div><!-- /row -->
</div><!-- /row -->
<divclass="row show-grid">
<divclass="row show-grid">
<divclass="span3 offset3">3 offset 3</div>
<divclass="span3 offset3">3 offset 3</div>
...
@@ -269,37 +267,33 @@
...
@@ -269,37 +267,33 @@
<br>
<br>
<h2>Nesting columns</h2>
<divclass="row">
<divclass="row">
<divclass="span3">
<divclass="span6">
<h2>Nesting columns</h2>
<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>
<p>Nest your content if you must by creating a <code>.row</code> within an existing column.</p>
<h4>Example</h4>
</div>
<divclass="span9">
<h4>Example of nested columns</h4>
<divclass="row show-grid">
<divclass="row show-grid">
<divclass="span9">
<divclass="span6">
Level 1 of column
Level 1 of column
<divclass="row show-grid">
<divclass="row show-grid">
<divclass="span4">
<divclass="span3">
Level 2
Level 2
</div>
</div>
<divclass="span5">
<divclass="span3">
Level 2
Level 2
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<divclass="span6">
<preclass="prettyprint linenums">
<preclass="prettyprint linenums">
<div class="row">
<div class="row">
<div class="span12">
<div class="span12">
Level 1 of column
Level 1 of column
<div class="row">
<div class="row">
<div class="span6">
<div class="span6">Level 2</div>
Level 2
<div class="span6">Level 2</div>
</div>
<div class="span6">
Level 2
</div>
</div>
</div>
</div>
</div>
</div>
</div>
...
@@ -307,56 +301,53 @@
...
@@ -307,56 +301,53 @@
</div>
</div>
</div>
</div>
<br>
<h2>Grid customization</h2>
<tableclass="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>
<divclass="row">
<divclass="row">
<divclass="span3">
<divclass="span4">
<h2>Roll your own grid</h2>
<h3>Variables in LESS</h3>
<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>
<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>
<divclass="span9">
<divclass="span4">
<h3>Inside the grid</h3>
<h3>How to customize</h3>
<p>The variables needed to modify the grid system currently all reside in <code>preboot.less</code>.</p>
<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 <ahref="#compiling">four ways documented to recompile</a>.</p>
<tableclass="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>
<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>
</section>
...
@@ -1928,7 +1919,7 @@ Lorem ipsum dolar sit amet illo error <a href="#" title="below">ipsum</a> verita
...
@@ -1928,7 +1919,7 @@ Lorem ipsum dolar sit amet illo error <a href="#" title="below">ipsum</a> verita
}
}
</pre>
</pre>
<h2>Compiling Less</h2>
<h2id="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>
<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>
