diff options
Diffstat (limited to 'docs')
| -rw-r--r-- | docs/assets/css/docs.css | 14 | ||||
| -rw-r--r-- | docs/index.html | 140 |
2 files changed, 122 insertions, 32 deletions
diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css index b8ac95c42..536446c23 100644 --- a/docs/assets/css/docs.css +++ b/docs/assets/css/docs.css @@ -111,6 +111,10 @@ section > .row { margin-bottom: 9px; color: #333; } +.quickstart .current-version, +.quickstart .current-version a { + color: #999; +} .quickstart h6 { color: #999; } @@ -142,15 +146,21 @@ section > .row { } .show-grid [class*="span"] { background-color: #eee; + background-color: rgba(0,0,0,.1); text-align: center; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; - height: 30px; + min-height: 30px; line-height: 30px; } .show-grid:hover [class*="span"] { - background: rgba(0, 0, 0, 0.25); + background-color: #ddd; + background-color: rgba(0,0,0,.2); +} +.show-grid .show-grid { + margin-top: 0; + margin-bottom: 0; } /* Render mini layout previews -------------------------------------------------- */ diff --git a/docs/index.html b/docs/index.html index 4a3f1a8c4..ab66d968c 100644 --- a/docs/index.html +++ b/docs/index.html @@ -97,6 +97,7 @@ <h6>Fork on GitHub</h6> <p>Download, fork, pull, file issues, and more with the official Bootstrap repo on Github.</p> <p><a target="_blank" href="https://github.com/twitter/bootstrap" class="btn primary">Bootstrap on GitHub »</a></p> + <p class="current-version">Currently <a href="https://github.com/twitter/bootstrap/wiki/Changelog">v1.2.0</a></p> </div> </div><!-- /row --> </div> @@ -196,22 +197,22 @@ </div> </div><!-- /row --> <div class="row show-grid" title="16 column layout"> - <div class="span1 column">1</div> - <div class="span1 column">1</div> - <div class="span1 column">1</div> - <div class="span1 column">1</div> - <div class="span1 column">1</div> - <div class="span1 column">1</div> - <div class="span1 column">1</div> - <div class="span1 column">1</div> - <div class="span1 column">1</div> - <div class="span1 column">1</div> - <div class="span1 column">1</div> - <div class="span1 column">1</div> - <div class="span1 column">1</div> - <div class="span1 column">1</div> - <div class="span1 column">1</div> - <div class="span1 column">1</div> + <div class="span1">1</div> + <div class="span1">1</div> + <div class="span1">1</div> + <div class="span1">1</div> + <div class="span1">1</div> + <div class="span1">1</div> + <div class="span1">1</div> + <div class="span1">1</div> + <div class="span1">1</div> + <div class="span1">1</div> + <div class="span1">1</div> + <div class="span1">1</div> + <div class="span1">1</div> + <div class="span1">1</div> + <div class="span1">1</div> + <div class="span1">1</div> </div><!-- /row --> <div class="row show-grid" title="8 column layout"> <div class="span2">2</div> @@ -238,13 +239,13 @@ <div class="span4">4</div> </div><!-- /row --> <div class="row show-grid" title="Default three column layout"> - <div class="span-one-third column">1/3</div> - <div class="span-one-third column">1/3</div> - <div class="span-one-third column">1/3</div> + <div class="span-one-third">1/3</div> + <div class="span-one-third">1/3</div> + <div class="span-one-third">1/3</div> </div><!-- /row --> <div class="row show-grid" title="One-third and two-thirds layout"> - <div class="span-one-third column">1/3</div> - <div class="span-two-thirds column">2/3</div> + <div class="span-one-third">1/3</div> + <div class="span-two-thirds">2/3</div> </div><!-- /row --> <div class="row show-grid" title="Irregular three column layout"> <div class="span4">4</div> @@ -262,25 +263,104 @@ <div class="row show-grid" title="Unnecessary single column layout"> <div class="span16">16</div> </div><!-- /row --> - <h4>Offsetting columns</h4> + + <br> + + <h2>Offsetting columns</h2> <div class="row show-grid"> <div class="span4">4</div> - <div class="span8 columns offset4">8 offset 4</div> + <div class="span8 offset4">8 offset 4</div> </div><!-- /row --> <div class="row show-grid"> - <div class="span-one-third columns offset-two-thirds">1/3 offset 2/3s</div> + <div class="span-one-third offset-two-thirds">1/3 offset 2/3s</div> </div><!-- /row --> <div class="row show-grid"> - <div class="span4 columns offset4">4 offset 4</div> - <div class="span4 columns offset4">4 offset 4</div> + <div class="span4 offset4">4 offset 4</div> + <div class="span4 offset4">4 offset 4</div> </div><!-- /row --> <div class="row show-grid"> - <div class="span5 columns offset3">5 offset 3</div> - <div class="span5 columns offset3">5 offset 3</div> + <div class="span5 offset3">5 offset 3</div> + <div class="span5 offset3">5 offset 3</div> </div><!-- /row --> <div class="row show-grid"> - <div class="span10 columns offset6">10 offset 6</div> + <div class="span10 offset6">10 offset 6</div> </div><!-- /row --> + + <br> + + <div class="row"> + <div class="span4"> + <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="span12"> + <h4>Example of nested columns</h4> + <div class="row show-grid"> + <div class="span12"> + Level 1 of column + <div class="row show-grid"> + <div class="span6"> + Level 2 + </div> + <div class="span6"> + Level 2 + </div> + </div> + </div> + </div> + </div> + </div> + + <br> + + <div class="row"> + <div class="span4"> + <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> + <div class="span12"> + <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">@gridColumns: 24; +@gridColumnWidth: 20px; +@gridGutterWidth: 20px;</pre> + <p>Once recompiled, you'll be set!</p> + </div> + </div> </section> @@ -1256,8 +1336,8 @@ <p>One fine body…</p> </div> <div class="modal-footer"> - <a href="#" class="btn primary">Primary</a> <a href="#" class="btn secondary">Secondary</a> + <a href="#" class="btn primary">Primary</a> </div> </div> </div> |