clones/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2024-09-25 04:27:13 +00:00
Code Issues Packages Projects 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
Show Stats 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;
margin-left: 20px;
}
.container {
.container,
.navbar-fixed-top .container,
.navbar-fixed-bottom .container {
width: 724px;
}
.span12 {
@ -545,7 +547,9 @@
float: left;
margin-left: 30px;
}
.container {
.container,
.navbar-fixed-top .container,
.navbar-fixed-bottom .container {
width: 1170px;
}
.span12 {

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

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

16
docs/download.html
View File

@ -276,11 +276,27 @@
<input type="text" class="span3" placeholder="60px">
<label>@gridGutterWidth</label>
<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>
<label>@fluidGridColumnWidth</label>
<input type="text" class="span3" placeholder="6.382978723%">
<label>@fluidGridGutterWidth</label>
<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>
<label>@sansFontFamily</label>

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

@ -199,11 +199,27 @@
<input type="text" class="span3" placeholder="60px">
<label>@gridGutterWidth</label>
<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>
<label>@fluidGridColumnWidth</label>
<input type="text" class="span3" placeholder="6.382978723%">
<label>@fluidGridGutterWidth</label>
<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>
<label>@sansFontFamily</label>

4
less/mixins.less
View File

@ -618,7 +618,9 @@
}
// 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
.spanX (@gridColumns);

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

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

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

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

18
less/variables.less
View File

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