mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-23 21:53:25 +02:00
Code Issues Releases Wiki Activity

Merge branch '1.3-wip' of github.com:twitter/bootstrap into 1.3-wip

Browse Source 
Conflicts:
	bootstrap-1.3.0.css
This commit is contained in:
Jacob Thornton
2011-09-09 22:48:57 -07:00
parent 5f4e30ed1d 0b43bc9bb9
commit 79d5f90713
5 changed files with 129 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
docs/assets/css/docs.css
View File

@@ -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
-------------------------------------------------- */

140
docs/index.html
View File

@@ -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 &raquo;</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>