github/bootstrap
1
1
Fork 0
mirror of https://github.com/jasny/bootstrap.git synced 2026-04-24 03:00:49 -04:00
Code Issues Packages Projects Releases Wiki Activity

overhaul grid mixins and variables, standardize fluid grid system and enable it across responsive layouts

Browse Source
This commit is contained in:
Mark Otto
2012-01-30 00:39:44 -08:00
parent 2ba1b01f8d
commit ae7f94eeff
21 changed files with 429 additions and 408 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
docs/assets/bootstrap.zip
View File

Binary file not shown.

198
docs/assets/css/bootstrap-responsive.css vendored
View File

@@ -83,7 +83,7 @@
.row {
margin-left: 0;
}
.row > [class*="span"] {
.row > [class*="span"], .row-fluid > [class*="span"] {
float: none;
display: block;
width: auto;
@@ -91,10 +91,20 @@
}
}
@media (min-width: 768px) and (max-width: 940px) {
.container {
width: 724px;
padding-left: 20px;
padding-right: 20px;
.row {
margin-left: -20px;
*zoom: 1;
}
.row:before, .row:after {
display: table;
content: "";
}
.row:after {
clear: both;
}
[class*="span"] {
float: left;
margin-left: 20px;
}
.span1 {
width: 42px;
@@ -129,7 +139,7 @@
.span11 {
width: 662px;
}
.span12 {
.span12, .container {
width: 724px;
}
.offset1 {
@@ -166,48 +176,94 @@
margin-left: 702px;
}
.row-fluid {
width: 102.76243093919337%;
margin-left: -2.762430939%;
width: 100%;
*zoom: 1;
}
.row-fluid:before, .row-fluid:after {
display: table;
content: "";
}
.row-fluid:after {
clear: both;
}
.row-fluid [class*="span"] {
float: left;
margin-left: 2.762430939%;
}
.row-fluid [class*="span"]:first-child {
margin-left: 0;
}
.row-fluid .span1 {
width: 5.6451612899588115%;
width: 5.801104972%;
}
.row-fluid .span2 {
width: 13.978494622708812%;
width: 14.364640883%;
}
.row-fluid .span3 {
width: 22.31182795545881%;
width: 22.928176794%;
}
.row-fluid .span4 {
width: 30.64516128820881%;
width: 31.491712705%;
}
.row-fluid .span5 {
width: 38.97849462095881%;
width: 40.055248616%;
}
.row-fluid .span6 {
width: 47.311827953708814%;
width: 48.618784527%;
}
.row-fluid .span7 {
width: 55.645161286458816%;
width: 57.182320438000005%;
}
.row-fluid .span8 {
width: 63.97849461920882%;
width: 65.74585634900001%;
}
.row-fluid .span9 {
width: 72.31182795195882%;
width: 74.30939226%;
}
.row-fluid .span10 {
width: 80.64516128470882%;
width: 82.87292817100001%;
}
.row-fluid .span11 {
width: 88.97849461745884%;
width: 91.436464082%;
}
.row-fluid .span12 {
width: 97.31182795020881%;
width: 99.999999993%;
}
input.span1, textarea.span1, .uneditable-input.span1 {
width: 32px;
}
input.span2, textarea.span2, .uneditable-input.span2 {
width: 94px;
}
input.span3, textarea.span3, .uneditable-input.span3 {
width: 156px;
}
input.span4, textarea.span4, .uneditable-input.span4 {
width: 218px;
}
input.span5, textarea.span5, .uneditable-input.span5 {
width: 280px;
}
input.span6, textarea.span6, .uneditable-input.span6 {
width: 342px;
}
input.span7, textarea.span7, .uneditable-input.span7 {
width: 404px;
}
input.span8, textarea.span8, .uneditable-input.span8 {
width: 466px;
}
input.span9, textarea.span9, .uneditable-input.span9 {
width: 528px;
}
input.span10, textarea.span10, .uneditable-input.span10 {
width: 590px;
}
input.span11, textarea.span11, .uneditable-input.span11 {
width: 652px;
}
input.span12, textarea.span12, .uneditable-input.span12 {
width: 714px;
}
}
@media (max-width: 940px) {
@@ -316,19 +372,19 @@
}
}
@media (min-width: 1200px) {
.thumbnails {
margin-left: -30px;
}
.thumbnails > li {
margin-left: 30px;
}
.container {
width: 1170px;
}
.row {
margin-left: -30px;
*zoom: 1;
}
.row:before, .row:after {
display: table;
content: "";
}
.row:after {
clear: both;
}
[class*="span"] {
float: left;
margin-left: 30px;
}
.span1 {
@@ -364,7 +420,7 @@
.span11 {
width: 1070px;
}
.span12 {
.span12, .container {
width: 1170px;
}
.offset1 {
@@ -401,47 +457,99 @@
margin-left: 1130px;
}
.row-fluid {
width: 102.56143440326584%;
margin-left: -2.56%;
width: 100%;
*zoom: 1;
}
.row-fluid:before, .row-fluid:after {
display: table;
content: "";
}
.row-fluid:after {
clear: both;
}
.row-fluid [class*="span"] {
float: left;
margin-left: 2.56%;
margin-left: 2.564102564%;
}
.row-fluid [class*="span"]:first-child {
margin-left: 0;
}
.row-fluid .span1 {
width: 5.832601732615312%;
width: 5.982905983%;
}
.row-fluid .span2 {
width: 14.16126839928198%;
width: 14.529914530000001%;
}
.row-fluid .span3 {
width: 22.489935065948643%;
width: 23.076923077%;
}
.row-fluid .span4 {
width: 30.818601732615313%;
width: 31.623931624%;
}
.row-fluid .span5 {
width: 39.14726839928198%;
width: 40.170940171000005%;
}
.row-fluid .span6 {
width: 47.47593506594863%;
width: 48.717948718%;
}
.row-fluid .span7 {
width: 55.8046017326153%;
width: 57.264957265%;
}
.row-fluid .span8 {
width: 64.13326839928197%;
width: 65.81196581200001%;
}
.row-fluid .span9 {
width: 72.46193506594864%;
width: 74.358974359%;
}
.row-fluid .span10 {
width: 80.7906017326153%;
width: 82.905982906%;
}
.row-fluid .span11 {
width: 89.11926839928198%;
width: 91.45299145300001%;
}
.row-fluid .span12 {
width: 97.44793506594864%;
width: 100%;
}
input.span1, textarea.span1, .uneditable-input.span1 {
width: 60px;
}
input.span2, textarea.span2, .uneditable-input.span2 {
width: 160px;
}
input.span3, textarea.span3, .uneditable-input.span3 {
width: 260px;
}
input.span4, textarea.span4, .uneditable-input.span4 {
width: 360px;
}
input.span5, textarea.span5, .uneditable-input.span5 {
width: 460px;
}
input.span6, textarea.span6, .uneditable-input.span6 {
width: 560px;
}
input.span7, textarea.span7, .uneditable-input.span7 {
width: 660px;
}
input.span8, textarea.span8, .uneditable-input.span8 {
width: 760px;
}
input.span9, textarea.span9, .uneditable-input.span9 {
width: 860px;
}
input.span10, textarea.span10, .uneditable-input.span10 {
width: 960px;
}
input.span11, textarea.span11, .uneditable-input.span11 {
width: 1060px;
}
input.span12, textarea.span12, .uneditable-input.span12 {
width: 1160px;
}
.thumbnails {
margin-left: -30px;
}
.thumbnails > li {
margin-left: 30px;
}
}

78
docs/assets/css/bootstrap.css vendored
View File

@@ -126,7 +126,7 @@ a:hover {
margin-left: 20px;
}
.span1 {
width: 59.99999999999999px;
width: 60px;
}
.span2 {
width: 140px;
@@ -158,7 +158,7 @@ a:hover {
.span11 {
width: 860px;
}
.span12 {
.span12, .container {
width: 940px;
}
.offset1 {
@@ -195,48 +195,58 @@ a:hover {
margin-left: 900px;
}
.row-fluid {
width: 102.12765957421277%;
margin-left: -2.127659574%;
width: 100%;
*zoom: 1;
}
.row-fluid:before, .row-fluid:after {
display: table;
content: "";
}
.row-fluid:after {
clear: both;
}
.row-fluid [class*="span"] {
float: left;
margin-left: 2.127659574%;
}
.row-fluid [class*="span"]:first-child {
margin-left: 0;
}
.row-fluid .span1 {
width: 6.249999999619791%;
width: 6.382978723%;
}
.row-fluid .span2 {
width: 14.58333333211979%;
width: 14.89361702%;
}
.row-fluid .span3 {
width: 22.91666666461979%;
width: 23.404255317%;
}
.row-fluid .span4 {
width: 31.24999999711979%;
width: 31.914893614%;
}
.row-fluid .span5 {
width: 39.58333332961979%;
width: 40.425531911%;
}
.row-fluid .span6 {
width: 47.91666666211979%;
width: 48.93617020799999%;
}
.row-fluid .span7 {
width: 56.24999999461979%;
width: 57.446808505%;
}
.row-fluid .span8 {
width: 64.58333332711977%;
width: 65.95744680199999%;
}
.row-fluid .span9 {
width: 72.91666665961978%;
width: 74.468085099%;
}
.row-fluid .span10 {
width: 81.24999999211977%;
width: 82.97872339599999%;
}
.row-fluid .span11 {
width: 89.58333332461977%;
width: 91.489361693%;
}
.row-fluid .span12 {
width: 97.91666665711978%;
width: 99.99999998999999%;
}
.container {
width: 940px;
@@ -708,42 +718,6 @@ input.span11, textarea.span11, .uneditable-input.span11 {
input.span12, textarea.span12, .uneditable-input.span12 {
width: 930px;
}
select.span1 {
width: 70px;
}
select.span2 {
width: 150px;
}
select.span3 {
width: 230px;
}
select.span4 {
width: 310px;
}
select.span5 {
width: 390px;
}
select.span6 {
width: 470px;
}
select.span7 {
width: 550px;
}
select.span8 {
width: 630px;
}
select.span9 {
width: 710px;
}
select.span10 {
width: 790px;
}
select.span11 {
width: 870px;
}
select.span12 {
width: 950px;
}
input[disabled],
select[disabled],
textarea[disabled],

1
docs/assets/css/docs.css
View File

@@ -553,6 +553,7 @@ form.well {
}
/* For input sizes, make them display block */
.docs-input-sizes select,
.docs-input-sizes input[type=text] {
display: block;
margin-bottom: 9px;

25
docs/base-css.html
View File

@@ -62,6 +62,10 @@
<li class="">
<a href="./download.html">Customize</a>
</li>
<li class="vertical-divider"></li>
<li class="">
<a href="./examples.html">Examples</a>
</li>
</ul>
</div>
</div>
@@ -1078,6 +1082,27 @@ For example, &lt;code&gt;section&lt;/code&gt; should be wrapped as inline.
<input class="span1" type="text" placeholder=".span1">
<input class="span2" type="text" placeholder=".span2">
<input class="span3" type="text" placeholder=".span3">
<select class="span1">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
<select class="span2">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
<select class="span3">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
<p class="help-block">Use the same <code>.span*</code> classes from the grid system for input sizes.</p>
</div>
</div>

4
docs/components.html
View File

@@ -62,6 +62,10 @@
<li class="">
<a href="./download.html">Customize</a>
</li>
<li class="vertical-divider"></li>
<li class="">
<a href="./examples.html">Examples</a>
</li>
</ul>
</div>
</div>

4
docs/download.html
View File

@@ -62,6 +62,10 @@
<li class="active">
<a href="./download.html">Customize</a>
</li>
<li class="vertical-divider"></li>
<li class="">
<a href="./examples.html">Examples</a>
</li>
</ul>
</div>
</div>

4
docs/examples.html
View File

@@ -62,6 +62,10 @@
<li class="">
<a href="./download.html">Customize</a>
</li>
<li class="vertical-divider"></li>
<li class="active">
<a href="./examples.html">Examples</a>
</li>
</ul>
</div>
</div>

4
docs/index.html
View File

@@ -62,6 +62,10 @@
<li class="">
<a href="./download.html">Customize</a>
</li>
<li class="vertical-divider"></li>
<li class="">
<a href="./examples.html">Examples</a>
</li>
</ul>
</div>
</div>

4
docs/javascript.html
View File

@@ -62,6 +62,10 @@
<li class="">
<a href="./download.html">Customize</a>
</li>
<li class="vertical-divider"></li>
<li class="">
<a href="./examples.html">Examples</a>
</li>
</ul>
</div>
</div>

4
docs/less.html
View File

@@ -62,6 +62,10 @@
<li class="">
<a href="./download.html">Customize</a>
</li>
<li class="vertical-divider"></li>
<li class="">
<a href="./examples.html">Examples</a>
</li>
</ul>
</div>
</div>

4
docs/scaffolding.html
View File

@@ -62,6 +62,10 @@
<li class="">
<a href="./download.html">Customize</a>
</li>
<li class="vertical-divider"></li>
<li class="">
<a href="./examples.html">Examples</a>
</li>
</ul>
</div>
</div>

4
docs/templates/layout.mustache vendored
View File

@@ -62,6 +62,10 @@
<li class="{{download}}">
<a href="./download.html">{{_i}}Customize{{/i}}</a>
</li>
<li class="vertical-divider"></li>
<li class="{{examples}}">
<a href="./examples.html">{{_i}}Examples{{/i}}</a>
</li>
</ul>
</div>
</div>

21
docs/templates/pages/base-css.mustache vendored
View File

@@ -1006,6 +1006,27 @@
<input class="span1" type="text" placeholder=".span1">
<input class="span2" type="text" placeholder=".span2">
<input class="span3" type="text" placeholder=".span3">
<select class="span1">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
<select class="span2">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
<select class="span3">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
<p class="help-block">{{_i}}Use the same <code>.span*</code> classes from the grid system for input sizes.{{/i}}</p>
</div>
</div>

4
docs/upgrading.html
View File

@@ -62,6 +62,10 @@
<li class="">
<a href="./download.html">Customize</a>
</li>
<li class="vertical-divider"></li>
<li class="">
<a href="./examples.html">Examples</a>
</li>
</ul>
</div>
</div>