mirror of
https://github.com/twbs/bootstrap.git
synced 2025-02-19 16:54:24 +01:00
Merge branch '1.3-wip' of github.com:twitter/bootstrap into 1.3-wip
Conflicts: bootstrap-1.3.0.css
This commit is contained in:
Jacob Thornton
commit
79d5f90713
6
bootstrap-1.3.0.css
vendored
6
bootstrap-1.3.0.css
vendored
@ -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: Fri Sep 9 20:23:37 PDT 2011
|
||||
* Date: Fri Sep 9 22:48:53 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).
|
||||
@ -2006,6 +2006,7 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner {
|
||||
box-shadow: inset 0 1px 0 #ffffff;
|
||||
zoom: 1;
|
||||
margin-bottom: 0;
|
||||
text-align: right;
|
||||
}
|
||||
.modal-footer:before, .modal-footer:after {
|
||||
display: table;
|
||||
@ -2015,8 +2016,7 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner {
|
||||
clear: both;
|
||||
}
|
||||
.modal-footer .btn {
|
||||
float: right;
|
||||
margin-left: 10px;
|
||||
margin-left: 5px;
|
||||
}
|
||||
.twipsy {
|
||||
display: block;
|
||||
|
||||
4
bootstrap-1.3.0.min.css
vendored
4
bootstrap-1.3.0.min.css
vendored
@ -277,9 +277,9 @@ button.btn::-moz-focus-inner,input[type=submit].btn::-moz-focus-inner{padding:0;
|
||||
.modal{position:fixed;top:50%;left:50%;z-index:2000;width:560px;margin:-250px 0 0 -250px;background-color:#ffffff;border:1px solid #999;border:1px solid rgba(0, 0, 0, 0.3);*border:1px solid #999;-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;-webkit-box-shadow:0 3px 7px rgba(0, 0, 0, 0.3);-moz-box-shadow:0 3px 7px rgba(0, 0, 0, 0.3);box-shadow:0 3px 7px rgba(0, 0, 0, 0.3);-webkit-background-clip:padding-box;-moz-background-clip:padding-box;background-clip:padding-box;}.modal .close{margin-top:7px;}
|
||||
.modal-header{border-bottom:1px solid #eee;padding:5px 15px;}
|
||||
.modal-body{padding:15px;}
|
||||
.modal-footer{background-color:#f5f5f5;padding:14px 15px 15px;border-top:1px solid #ddd;-webkit-border-radius:0 0 6px 6px;-moz-border-radius:0 0 6px 6px;border-radius:0 0 6px 6px;-webkit-box-shadow:inset 0 1px 0 #ffffff;-moz-box-shadow:inset 0 1px 0 #ffffff;box-shadow:inset 0 1px 0 #ffffff;zoom:1;margin-bottom:0;}.modal-footer:before,.modal-footer:after{display:table;content:"";}
|
||||
.modal-footer{background-color:#f5f5f5;padding:14px 15px 15px;border-top:1px solid #ddd;-webkit-border-radius:0 0 6px 6px;-moz-border-radius:0 0 6px 6px;border-radius:0 0 6px 6px;-webkit-box-shadow:inset 0 1px 0 #ffffff;-moz-box-shadow:inset 0 1px 0 #ffffff;box-shadow:inset 0 1px 0 #ffffff;zoom:1;margin-bottom:0;text-align:right;}.modal-footer:before,.modal-footer:after{display:table;content:"";}
|
||||
.modal-footer:after{clear:both;}
|
||||
.modal-footer .btn{float:right;margin-left:10px;}
|
||||
.modal-footer .btn{margin-left:5px;}
|
||||
.twipsy{display:block;position:absolute;visibility:visible;padding:5px;font-size:11px;z-index:1000;filter:alpha(opacity=80);-khtml-opacity:0.8;-moz-opacity:0.8;opacity:0.8;}.twipsy.above .twipsy-arrow{bottom:0;left:50%;margin-left:-5px;border-left:5px solid transparent;border-right:5px solid transparent;border-top:5px solid #000000;}
|
||||
.twipsy.left .twipsy-arrow{top:50%;right:0;margin-top:-5px;border-top:5px solid transparent;border-bottom:5px solid transparent;border-left:5px solid #000000;}
|
||||
.twipsy.below .twipsy-arrow{top:0;left:50%;margin-left:-5px;border-left:5px solid transparent;border-right:5px solid transparent;border-bottom:5px solid #000000;}
|
||||
|
||||
@ -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
140
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>
|
||||
|
||||
@ -771,9 +771,9 @@ input[type=submit].btn {
|
||||
.box-shadow(inset 0 1px 0 #fff);
|
||||
.clearfix();
|
||||
margin-bottom: 0;
|
||||
text-align: right;
|
||||
.btn {
|
||||
float: right;
|
||||
margin-left: 10px;
|
||||
margin-left: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user