mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-09-02 01:42:36 +02:00
Code Issues Releases Wiki Activity

create vars for responsive grid values, fixed and fluid, and document them in the customizer

Browse Source
This commit is contained in:
Mark Otto
2012-06-20 23:46:51 -07:00
parent 59153205b3
commit 160fe7ca59
8 changed files with 71 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -215,7 +215,9 @@
float: left; float: left;
margin-left: 20px; margin-left: 20px;
} }
.container { .container,
.navbar-fixed-top .container,
.navbar-fixed-bottom .container {
width: 724px; width: 724px;
} }
.span12 { .span12 {
@@ -545,7 +547,9 @@
float: left; float: left;
margin-left: 30px; margin-left: 30px;
} }
.container { .container,
.navbar-fixed-top .container,
.navbar-fixed-bottom .container {
width: 1170px; width: 1170px;
} }
.span12 { .span12 {

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

@@ -194,7 +194,9 @@ a:hover {
margin-left: 20px; margin-left: 20px;
} }
.container { .container,
.navbar-fixed-top .container,
.navbar-fixed-bottom .container {
width: 940px; width: 940px;
} }

16
docs/download.html
View File

@@ -276,11 +276,27 @@
<input type="text" class="span3" placeholder="60px"> <input type="text" class="span3" placeholder="60px">
<label>@gridGutterWidth</label> <label>@gridGutterWidth</label>
<input type="text" class="span3" placeholder="20px"> <input type="text" class="span3" placeholder="20px">
<label>@gridColumnWidth1200</label>
<input type="text" class="span3" placeholder="70px">
<label>@gridGutterWidth1200</label>
<input type="text" class="span3" placeholder="30px">
<label>@gridColumnWidth768</label>
<input type="text" class="span3" placeholder="42px">
<label>@gridGutterWidth768</label>
<input type="text" class="span3" placeholder="20px">
<h3>Fluid grid system</h3> <h3>Fluid grid system</h3>
<label>@fluidGridColumnWidth</label> <label>@fluidGridColumnWidth</label>
<input type="text" class="span3" placeholder="6.382978723%"> <input type="text" class="span3" placeholder="6.382978723%">
<label>@fluidGridGutterWidth</label> <label>@fluidGridGutterWidth</label>
<input type="text" class="span3" placeholder="2.127659574%"> <input type="text" class="span3" placeholder="2.127659574%">
<label>@fluidGridColumnWidth1200</label>
<input type="text" class="span3" placeholder="5.982905983%">
<label>@fluidGridGutterWidth1200</label>
<input type="text" class="span3" placeholder="2.564102564%">
<label>@fluidGridColumnWidth768</label>
<input type="text" class="span3" placeholder="5.801104972%">
<label>@fluidGridGutterWidth768</label>
<input type="text" class="span3" placeholder="2.762430939%">
<h3>Typography</h3> <h3>Typography</h3>
<label>@sansFontFamily</label> <label>@sansFontFamily</label>

16
docs/templates/pages/download.mustache vendored
View File

@@ -199,11 +199,27 @@
<input type="text" class="span3" placeholder="60px"> <input type="text" class="span3" placeholder="60px">
<label>@gridGutterWidth</label> <label>@gridGutterWidth</label>
<input type="text" class="span3" placeholder="20px"> <input type="text" class="span3" placeholder="20px">
<label>@gridColumnWidth1200</label>
<input type="text" class="span3" placeholder="70px">
<label>@gridGutterWidth1200</label>
<input type="text" class="span3" placeholder="30px">
<label>@gridColumnWidth768</label>
<input type="text" class="span3" placeholder="42px">
<label>@gridGutterWidth768</label>
<input type="text" class="span3" placeholder="20px">
<h3>{{_i}}Fluid grid system{{/i}}</h3> <h3>{{_i}}Fluid grid system{{/i}}</h3>
<label>@fluidGridColumnWidth</label> <label>@fluidGridColumnWidth</label>
<input type="text" class="span3" placeholder="6.382978723%"> <input type="text" class="span3" placeholder="6.382978723%">
<label>@fluidGridGutterWidth</label> <label>@fluidGridGutterWidth</label>
<input type="text" class="span3" placeholder="2.127659574%"> <input type="text" class="span3" placeholder="2.127659574%">
<label>@fluidGridColumnWidth1200</label>
<input type="text" class="span3" placeholder="5.982905983%">
<label>@fluidGridGutterWidth1200</label>
<input type="text" class="span3" placeholder="2.564102564%">
<label>@fluidGridColumnWidth768</label>
<input type="text" class="span3" placeholder="5.801104972%">
<label>@fluidGridGutterWidth768</label>
<input type="text" class="span3" placeholder="2.762430939%">
<h3>{{_i}}Typography{{/i}}</h3> <h3>{{_i}}Typography{{/i}}</h3>
<label>@sansFontFamily</label> <label>@sansFontFamily</label>

6
less/mixins.less
View File

@@ -618,7 +618,9 @@
} }
// Set the container width, and override it for fixed navbars in media queries // Set the container width, and override it for fixed navbars in media queries
.container { .span(@gridColumns); } .container,
.navbar-fixed-top .container,
.navbar-fixed-bottom .container { .span(@gridColumns); }
// generate .spanX and .offsetX // generate .spanX and .offsetX
.spanX (@gridColumns); .spanX (@gridColumns);
@@ -645,7 +647,7 @@
margin-left: (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1)) + (@fluidGridGutterWidth*2); margin-left: (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1)) + (@fluidGridGutterWidth*2);
*margin-left: (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1)) - (.5 / @gridRowWidth * 100 * 1%) + (@fluidGridGutterWidth*2) - (.5 / @gridRowWidth * 100 * 1%); *margin-left: (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1)) - (.5 / @gridRowWidth * 100 * 1%) + (@fluidGridGutterWidth*2) - (.5 / @gridRowWidth * 100 * 1%);
} }
.offsetFirstChild (@columns) { .offsetFirstChild (@columns) {
margin-left: (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1)) + (@fluidGridGutterWidth); margin-left: (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1)) + (@fluidGridGutterWidth);
*margin-left: (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1)) - (.5 / @gridRowWidth * 100 * 1%) + @fluidGridGutterWidth - (.5 / @gridRowWidth * 100 * 1%); *margin-left: (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1)) - (.5 / @gridRowWidth * 100 * 1%) + @fluidGridGutterWidth - (.5 / @gridRowWidth * 100 * 1%);

10
less/responsive-1200px-min.less
View File

@@ -4,20 +4,20 @@
@media (min-width: 1200px) { @media (min-width: 1200px) {
// Fixed grid // Fixed grid
#grid > .core(70px, 30px); #grid > .core(@gridColumnWidth1200, @gridGutterWidth1200);
// Fluid grid // Fluid grid
#grid > .fluid(5.982905983%, 2.564102564%); #grid > .fluid(@fluidGridColumnWidth1200, @fluidGridGutterWidth1200);
// Input grid // Input grid
#grid > .input(70px, 30px); #grid > .input(@gridColumnWidth1200, @gridGutterWidth1200);
// Thumbnails // Thumbnails
.thumbnails { .thumbnails {
margin-left: -30px; margin-left: -@gridGutterWidth1200;
} }
.thumbnails > li { .thumbnails > li {
margin-left: 30px; margin-left: @gridGutterWidth1200;
} }
.row-fluid .thumbnails { .row-fluid .thumbnails {
margin-left: 0; margin-left: 0;

6
less/responsive-768px-979px.less
View File

@@ -4,13 +4,13 @@
@media (min-width: 768px) and (max-width: 979px) { @media (min-width: 768px) and (max-width: 979px) {
// Fixed grid // Fixed grid
#grid > .core(42px, 20px); #grid > .core(@gridColumnWidth768, @gridGutterWidth768);
// Fluid grid // Fluid grid
#grid > .fluid(5.801104972%, 2.762430939%); #grid > .fluid(@fluidGridColumnWidth768, @fluidGridGutterWidth768);
// Input grid // Input grid
#grid > .input(42px, 20px); #grid > .input(@gridColumnWidth768, @gridGutterWidth768);
// No need to reset .thumbnails here since it's the same @gridGutterWidth // No need to reset .thumbnails here since it's the same @gridGutterWidth

18
less/variables.less
View File

@@ -198,6 +198,7 @@
// GRID // GRID
// -------------------------------------------------- // --------------------------------------------------
// Default 940px grid // Default 940px grid
// ------------------------- // -------------------------
@gridColumns: 12; @gridColumns: 12;
@@ -205,7 +206,24 @@
@gridGutterWidth: 20px; @gridGutterWidth: 20px;
@gridRowWidth: (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1)); @gridRowWidth: (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1));
// 1200px min
@gridColumnWidth1200: 70px;
@gridGutterWidth1200: 30px;
// 768px-979px
@gridColumnWidth768: 42px;
@gridGutterWidth768: 20px;
// Fluid grid // Fluid grid
// ------------------------- // -------------------------
@fluidGridColumnWidth: 6.382978723%; @fluidGridColumnWidth: 6.382978723%;
@fluidGridGutterWidth: 2.127659574%; @fluidGridGutterWidth: 2.127659574%;
// 1200px min
@fluidGridColumnWidth1200: 5.982905983%;
@fluidGridGutterWidth1200: 2.564102564%;
// 768px-979px
@fluidGridColumnWidth768: 5.801104972%;
@fluidGridGutterWidth768: 2.762430939%;