mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-12 00:24:03 +02:00
Code Issues Releases Wiki Activity

few tweaks to responsive stuff, updated docs for grid system (still needs copy editing)

Browse Source
This commit is contained in:
Mark Otto
2011-10-16 23:04:31 -07:00
parent c62a0239bd
commit e7d2218b20
8 changed files with 177 additions and 212 deletions
Download Patch File Download Diff File Expand all files Collapse all files

165
docs/index.html
View File

@@ -86,7 +86,7 @@
<h4>Feature highlights</h4>
<ul>
<li><span>&times;</span> Built on LESS</li>
<li><span>&times;</span> Complete styleguide</li>
<li><span>&times;</span> Complete styleguide docs</li>
<li><span>&times;</span> Fully responsive design</li>
<li><span>&times;</span> Small footprint (7kb gzipped)</li>
<li><span>&times;</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">
&lt;div class="row"&gt;
&lt;div class="span6"&gt;
...
&lt;/div&gt;
&lt;div class="span10"&gt;
...
&lt;/div&gt;
&lt;/div&gt;
</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">
&lt;div class="row"&gt;
&lt;div class="span4"&gt;...&lt;/div&gt;
&lt;div class="span8"&gt;...&lt;/div&gt;
&lt;/div&gt;
</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">
&lt;div class="row"&gt;
&lt;div class="span12"&gt;
Level 1 of column
&lt;div class="row"&gt;
&lt;div class="span6"&gt;
Level 2
&lt;/div&gt;
&lt;div class="span6"&gt;
Level 2
&lt;/div&gt;
&lt;div class="span6"&gt;Level 2&lt;/div&gt;
&lt;div class="span6"&gt;Level 2&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
@@ -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">