mirror of
https://github.com/twbs/bootstrap.git
synced 2022-11-09 12:25:43 -05:00
remake the box-size grid, nuke fluid grid docs, fix up examples, clean up form styles
This commit is contained in:
Mark Otto
parent
e27b1355b5
commit
0b122bc5c5
10 changed files with 238 additions and 1299 deletions
692
docs/assets/css/bootstrap-responsive.css
vendored
692
docs/assets/css/bootstrap-responsive.css
vendored
|
|
@ -92,8 +92,14 @@
|
|||
}
|
||||
|
||||
@media (min-width: 1200px) {
|
||||
.container,
|
||||
.navbar-fixed-top .container,
|
||||
.navbar-fixed-bottom .container {
|
||||
width: 1170px;
|
||||
}
|
||||
.row {
|
||||
margin-left: -30px;
|
||||
margin-right: -15px;
|
||||
margin-left: -15px;
|
||||
*zoom: 1;
|
||||
}
|
||||
.row:before,
|
||||
|
|
@ -108,324 +114,83 @@
|
|||
[class*="span"] {
|
||||
float: left;
|
||||
min-height: 1px;
|
||||
margin-left: 30px;
|
||||
}
|
||||
.container,
|
||||
.navbar-static-top .container,
|
||||
.navbar-fixed-top .container,
|
||||
.navbar-fixed-bottom .container {
|
||||
width: 1170px;
|
||||
}
|
||||
.span12 {
|
||||
width: 1170px;
|
||||
}
|
||||
.span11 {
|
||||
width: 1070px;
|
||||
}
|
||||
.span10 {
|
||||
width: 970px;
|
||||
}
|
||||
.span9 {
|
||||
width: 870px;
|
||||
}
|
||||
.span8 {
|
||||
width: 770px;
|
||||
}
|
||||
.span7 {
|
||||
width: 670px;
|
||||
}
|
||||
.span6 {
|
||||
width: 570px;
|
||||
}
|
||||
.span5 {
|
||||
width: 470px;
|
||||
}
|
||||
.span4 {
|
||||
width: 370px;
|
||||
}
|
||||
.span3 {
|
||||
width: 270px;
|
||||
}
|
||||
.span2 {
|
||||
width: 170px;
|
||||
}
|
||||
.span1 {
|
||||
width: 70px;
|
||||
}
|
||||
.offset12 {
|
||||
margin-left: 1230px;
|
||||
}
|
||||
.offset11 {
|
||||
margin-left: 1130px;
|
||||
}
|
||||
.offset10 {
|
||||
margin-left: 1030px;
|
||||
}
|
||||
.offset9 {
|
||||
margin-left: 930px;
|
||||
}
|
||||
.offset8 {
|
||||
margin-left: 830px;
|
||||
}
|
||||
.offset7 {
|
||||
margin-left: 730px;
|
||||
}
|
||||
.offset6 {
|
||||
margin-left: 630px;
|
||||
}
|
||||
.offset5 {
|
||||
margin-left: 530px;
|
||||
}
|
||||
.offset4 {
|
||||
margin-left: 430px;
|
||||
}
|
||||
.offset3 {
|
||||
margin-left: 330px;
|
||||
}
|
||||
.offset2 {
|
||||
margin-left: 230px;
|
||||
}
|
||||
.offset1 {
|
||||
margin-left: 130px;
|
||||
}
|
||||
.row-fluid {
|
||||
width: 100%;
|
||||
*zoom: 1;
|
||||
}
|
||||
.row-fluid:before,
|
||||
.row-fluid:after {
|
||||
display: table;
|
||||
line-height: 0;
|
||||
content: "";
|
||||
}
|
||||
.row-fluid:after {
|
||||
clear: both;
|
||||
}
|
||||
.row-fluid [class*="span"] {
|
||||
display: block;
|
||||
float: left;
|
||||
width: 100%;
|
||||
min-height: 30px;
|
||||
margin-left: 2.564102564102564%;
|
||||
*margin-left: 2.5109110747408616%;
|
||||
padding-right: 15px;
|
||||
padding-left: 15px;
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.row-fluid [class*="span"]:first-child {
|
||||
margin-left: 0;
|
||||
}
|
||||
.row-fluid .span12 {
|
||||
.span12 {
|
||||
width: 100%;
|
||||
*width: 99.94680851063829%;
|
||||
}
|
||||
.row-fluid .span11 {
|
||||
width: 91.45299145299145%;
|
||||
*width: 91.39979996362975%;
|
||||
.span11 {
|
||||
width: 91.66666666666666%;
|
||||
}
|
||||
.row-fluid .span10 {
|
||||
width: 82.90598290598291%;
|
||||
*width: 82.8527914166212%;
|
||||
.span10 {
|
||||
width: 83.33333333333334%;
|
||||
}
|
||||
.row-fluid .span9 {
|
||||
width: 74.35897435897436%;
|
||||
*width: 74.30578286961266%;
|
||||
.span9 {
|
||||
width: 75%;
|
||||
}
|
||||
.row-fluid .span8 {
|
||||
width: 65.81196581196582%;
|
||||
*width: 65.75877432260411%;
|
||||
.span8 {
|
||||
width: 66.66666666666666%;
|
||||
}
|
||||
.row-fluid .span7 {
|
||||
width: 57.26495726495726%;
|
||||
*width: 57.21176577559556%;
|
||||
.span7 {
|
||||
width: 58.333333333333336%;
|
||||
}
|
||||
.row-fluid .span6 {
|
||||
width: 48.717948717948715%;
|
||||
*width: 48.664757228587014%;
|
||||
.span6 {
|
||||
width: 50%;
|
||||
}
|
||||
.row-fluid .span5 {
|
||||
width: 40.17094017094017%;
|
||||
*width: 40.11774868157847%;
|
||||
.span5 {
|
||||
width: 41.66666666666667%;
|
||||
}
|
||||
.row-fluid .span4 {
|
||||
width: 31.623931623931625%;
|
||||
*width: 31.570740134569924%;
|
||||
.span4 {
|
||||
width: 33.33333333333333%;
|
||||
}
|
||||
.row-fluid .span3 {
|
||||
width: 23.076923076923077%;
|
||||
*width: 23.023731587561375%;
|
||||
.span3 {
|
||||
width: 25%;
|
||||
}
|
||||
.row-fluid .span2 {
|
||||
width: 14.52991452991453%;
|
||||
*width: 14.476723040552828%;
|
||||
.span2 {
|
||||
width: 16.666666666666664%;
|
||||
}
|
||||
.row-fluid .span1 {
|
||||
width: 5.982905982905983%;
|
||||
*width: 5.929714493544281%;
|
||||
.span1 {
|
||||
width: 8.333333333333332%;
|
||||
}
|
||||
.row-fluid .offset12 {
|
||||
margin-left: 105.12820512820512%;
|
||||
*margin-left: 105.02182214948171%;
|
||||
.offset12 {
|
||||
margin-left: 100%;
|
||||
}
|
||||
.row-fluid .offset12:first-child {
|
||||
margin-left: 102.56410256410257%;
|
||||
*margin-left: 102.45771958537915%;
|
||||
.offset11 {
|
||||
margin-left: 91.66666666666666%;
|
||||
}
|
||||
.row-fluid .offset11 {
|
||||
margin-left: 96.58119658119658%;
|
||||
*margin-left: 96.47481360247316%;
|
||||
.offset10 {
|
||||
margin-left: 83.33333333333334%;
|
||||
}
|
||||
.row-fluid .offset11:first-child {
|
||||
margin-left: 94.01709401709402%;
|
||||
*margin-left: 93.91071103837061%;
|
||||
.offset9 {
|
||||
margin-left: 75%;
|
||||
}
|
||||
.row-fluid .offset10 {
|
||||
margin-left: 88.03418803418803%;
|
||||
*margin-left: 87.92780505546462%;
|
||||
.offset8 {
|
||||
margin-left: 66.66666666666666%;
|
||||
}
|
||||
.row-fluid .offset10:first-child {
|
||||
margin-left: 85.47008547008548%;
|
||||
*margin-left: 85.36370249136206%;
|
||||
.offset7 {
|
||||
margin-left: 58.333333333333336%;
|
||||
}
|
||||
.row-fluid .offset9 {
|
||||
margin-left: 79.48717948717949%;
|
||||
*margin-left: 79.38079650845607%;
|
||||
.offset6 {
|
||||
margin-left: 50%;
|
||||
}
|
||||
.row-fluid .offset9:first-child {
|
||||
margin-left: 76.92307692307693%;
|
||||
*margin-left: 76.81669394435352%;
|
||||
.offset5 {
|
||||
margin-left: 41.66666666666667%;
|
||||
}
|
||||
.row-fluid .offset8 {
|
||||
margin-left: 70.94017094017094%;
|
||||
*margin-left: 70.83378796144753%;
|
||||
.offset4 {
|
||||
margin-left: 33.33333333333333%;
|
||||
}
|
||||
.row-fluid .offset8:first-child {
|
||||
margin-left: 68.37606837606839%;
|
||||
*margin-left: 68.26968539734497%;
|
||||
.offset3 {
|
||||
margin-left: 25%;
|
||||
}
|
||||
.row-fluid .offset7 {
|
||||
margin-left: 62.393162393162385%;
|
||||
*margin-left: 62.28677941443899%;
|
||||
.offset2 {
|
||||
margin-left: 16.666666666666664%;
|
||||
}
|
||||
.row-fluid .offset7:first-child {
|
||||
margin-left: 59.82905982905982%;
|
||||
*margin-left: 59.72267685033642%;
|
||||
}
|
||||
.row-fluid .offset6 {
|
||||
margin-left: 53.84615384615384%;
|
||||
*margin-left: 53.739770867430444%;
|
||||
}
|
||||
.row-fluid .offset6:first-child {
|
||||
margin-left: 51.28205128205128%;
|
||||
*margin-left: 51.175668303327875%;
|
||||
}
|
||||
.row-fluid .offset5 {
|
||||
margin-left: 45.299145299145295%;
|
||||
*margin-left: 45.1927623204219%;
|
||||
}
|
||||
.row-fluid .offset5:first-child {
|
||||
margin-left: 42.73504273504273%;
|
||||
*margin-left: 42.62865975631933%;
|
||||
}
|
||||
.row-fluid .offset4 {
|
||||
margin-left: 36.75213675213675%;
|
||||
*margin-left: 36.645753773413354%;
|
||||
}
|
||||
.row-fluid .offset4:first-child {
|
||||
margin-left: 34.18803418803419%;
|
||||
*margin-left: 34.081651209310785%;
|
||||
}
|
||||
.row-fluid .offset3 {
|
||||
margin-left: 28.205128205128204%;
|
||||
*margin-left: 28.0987452264048%;
|
||||
}
|
||||
.row-fluid .offset3:first-child {
|
||||
margin-left: 25.641025641025642%;
|
||||
*margin-left: 25.53464266230224%;
|
||||
}
|
||||
.row-fluid .offset2 {
|
||||
margin-left: 19.65811965811966%;
|
||||
*margin-left: 19.551736679396257%;
|
||||
}
|
||||
.row-fluid .offset2:first-child {
|
||||
margin-left: 17.094017094017094%;
|
||||
*margin-left: 16.98763411529369%;
|
||||
}
|
||||
.row-fluid .offset1 {
|
||||
margin-left: 11.11111111111111%;
|
||||
*margin-left: 11.004728132387708%;
|
||||
}
|
||||
.row-fluid .offset1:first-child {
|
||||
margin-left: 8.547008547008547%;
|
||||
*margin-left: 8.440625568285142%;
|
||||
}
|
||||
input,
|
||||
textarea,
|
||||
.uneditable-input {
|
||||
margin-left: 0;
|
||||
}
|
||||
.controls-row [class*="span"] + [class*="span"] {
|
||||
margin-left: 30px;
|
||||
}
|
||||
input.span12,
|
||||
textarea.span12,
|
||||
.uneditable-input.span12 {
|
||||
width: 1156px;
|
||||
}
|
||||
input.span11,
|
||||
textarea.span11,
|
||||
.uneditable-input.span11 {
|
||||
width: 1056px;
|
||||
}
|
||||
input.span10,
|
||||
textarea.span10,
|
||||
.uneditable-input.span10 {
|
||||
width: 956px;
|
||||
}
|
||||
input.span9,
|
||||
textarea.span9,
|
||||
.uneditable-input.span9 {
|
||||
width: 856px;
|
||||
}
|
||||
input.span8,
|
||||
textarea.span8,
|
||||
.uneditable-input.span8 {
|
||||
width: 756px;
|
||||
}
|
||||
input.span7,
|
||||
textarea.span7,
|
||||
.uneditable-input.span7 {
|
||||
width: 656px;
|
||||
}
|
||||
input.span6,
|
||||
textarea.span6,
|
||||
.uneditable-input.span6 {
|
||||
width: 556px;
|
||||
}
|
||||
input.span5,
|
||||
textarea.span5,
|
||||
.uneditable-input.span5 {
|
||||
width: 456px;
|
||||
}
|
||||
input.span4,
|
||||
textarea.span4,
|
||||
.uneditable-input.span4 {
|
||||
width: 356px;
|
||||
}
|
||||
input.span3,
|
||||
textarea.span3,
|
||||
.uneditable-input.span3 {
|
||||
width: 256px;
|
||||
}
|
||||
input.span2,
|
||||
textarea.span2,
|
||||
.uneditable-input.span2 {
|
||||
width: 156px;
|
||||
}
|
||||
input.span1,
|
||||
textarea.span1,
|
||||
.uneditable-input.span1 {
|
||||
width: 56px;
|
||||
.offset1 {
|
||||
margin-left: 8.333333333333332%;
|
||||
}
|
||||
.thumbnails {
|
||||
margin-left: -30px;
|
||||
|
|
@ -433,14 +198,12 @@
|
|||
.thumbnails > li {
|
||||
margin-left: 30px;
|
||||
}
|
||||
.row-fluid .thumbnails {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 768px) and (max-width: 979px) {
|
||||
.row {
|
||||
margin-left: -20px;
|
||||
margin-right: -10px;
|
||||
margin-left: -10px;
|
||||
*zoom: 1;
|
||||
}
|
||||
.row:before,
|
||||
|
|
@ -455,324 +218,83 @@
|
|||
[class*="span"] {
|
||||
float: left;
|
||||
min-height: 1px;
|
||||
margin-left: 20px;
|
||||
}
|
||||
.container,
|
||||
.navbar-static-top .container,
|
||||
.navbar-fixed-top .container,
|
||||
.navbar-fixed-bottom .container {
|
||||
width: 724px;
|
||||
}
|
||||
.span12 {
|
||||
width: 724px;
|
||||
}
|
||||
.span11 {
|
||||
width: 662px;
|
||||
}
|
||||
.span10 {
|
||||
width: 600px;
|
||||
}
|
||||
.span9 {
|
||||
width: 538px;
|
||||
}
|
||||
.span8 {
|
||||
width: 476px;
|
||||
}
|
||||
.span7 {
|
||||
width: 414px;
|
||||
}
|
||||
.span6 {
|
||||
width: 352px;
|
||||
}
|
||||
.span5 {
|
||||
width: 290px;
|
||||
}
|
||||
.span4 {
|
||||
width: 228px;
|
||||
}
|
||||
.span3 {
|
||||
width: 166px;
|
||||
}
|
||||
.span2 {
|
||||
width: 104px;
|
||||
}
|
||||
.span1 {
|
||||
width: 42px;
|
||||
}
|
||||
.offset12 {
|
||||
margin-left: 764px;
|
||||
}
|
||||
.offset11 {
|
||||
margin-left: 702px;
|
||||
}
|
||||
.offset10 {
|
||||
margin-left: 640px;
|
||||
}
|
||||
.offset9 {
|
||||
margin-left: 578px;
|
||||
}
|
||||
.offset8 {
|
||||
margin-left: 516px;
|
||||
}
|
||||
.offset7 {
|
||||
margin-left: 454px;
|
||||
}
|
||||
.offset6 {
|
||||
margin-left: 392px;
|
||||
}
|
||||
.offset5 {
|
||||
margin-left: 330px;
|
||||
}
|
||||
.offset4 {
|
||||
margin-left: 268px;
|
||||
}
|
||||
.offset3 {
|
||||
margin-left: 206px;
|
||||
}
|
||||
.offset2 {
|
||||
margin-left: 144px;
|
||||
}
|
||||
.offset1 {
|
||||
margin-left: 82px;
|
||||
}
|
||||
.row-fluid {
|
||||
width: 100%;
|
||||
*zoom: 1;
|
||||
}
|
||||
.row-fluid:before,
|
||||
.row-fluid:after {
|
||||
display: table;
|
||||
line-height: 0;
|
||||
content: "";
|
||||
}
|
||||
.row-fluid:after {
|
||||
clear: both;
|
||||
}
|
||||
.row-fluid [class*="span"] {
|
||||
display: block;
|
||||
float: left;
|
||||
width: 100%;
|
||||
min-height: 30px;
|
||||
margin-left: 2.7624309392265194%;
|
||||
*margin-left: 2.709239449864817%;
|
||||
padding-right: 10px;
|
||||
padding-left: 10px;
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.row-fluid [class*="span"]:first-child {
|
||||
margin-left: 0;
|
||||
}
|
||||
.row-fluid .span12 {
|
||||
.span12 {
|
||||
width: 100%;
|
||||
*width: 99.94680851063829%;
|
||||
}
|
||||
.row-fluid .span11 {
|
||||
width: 91.43646408839778%;
|
||||
*width: 91.38327259903608%;
|
||||
.span11 {
|
||||
width: 91.66666666666666%;
|
||||
}
|
||||
.row-fluid .span10 {
|
||||
width: 82.87292817679558%;
|
||||
*width: 82.81973668743387%;
|
||||
.span10 {
|
||||
width: 83.33333333333334%;
|
||||
}
|
||||
.row-fluid .span9 {
|
||||
width: 74.30939226519337%;
|
||||
*width: 74.25620077583166%;
|
||||
.span9 {
|
||||
width: 75%;
|
||||
}
|
||||
.row-fluid .span8 {
|
||||
width: 65.74585635359117%;
|
||||
*width: 65.69266486422946%;
|
||||
.span8 {
|
||||
width: 66.66666666666666%;
|
||||
}
|
||||
.row-fluid .span7 {
|
||||
width: 57.18232044198895%;
|
||||
*width: 57.12912895262725%;
|
||||
.span7 {
|
||||
width: 58.333333333333336%;
|
||||
}
|
||||
.row-fluid .span6 {
|
||||
width: 48.61878453038674%;
|
||||
*width: 48.56559304102504%;
|
||||
.span6 {
|
||||
width: 50%;
|
||||
}
|
||||
.row-fluid .span5 {
|
||||
width: 40.05524861878453%;
|
||||
*width: 40.00205712942283%;
|
||||
.span5 {
|
||||
width: 41.66666666666667%;
|
||||
}
|
||||
.row-fluid .span4 {
|
||||
width: 31.491712707182323%;
|
||||
*width: 31.43852121782062%;
|
||||
.span4 {
|
||||
width: 33.33333333333333%;
|
||||
}
|
||||
.row-fluid .span3 {
|
||||
width: 22.92817679558011%;
|
||||
*width: 22.87498530621841%;
|
||||
.span3 {
|
||||
width: 25%;
|
||||
}
|
||||
.row-fluid .span2 {
|
||||
width: 14.3646408839779%;
|
||||
*width: 14.311449394616199%;
|
||||
.span2 {
|
||||
width: 16.666666666666664%;
|
||||
}
|
||||
.row-fluid .span1 {
|
||||
width: 5.801104972375691%;
|
||||
*width: 5.747913483013988%;
|
||||
.span1 {
|
||||
width: 8.333333333333332%;
|
||||
}
|
||||
.row-fluid .offset12 {
|
||||
margin-left: 105.52486187845304%;
|
||||
*margin-left: 105.41847889972962%;
|
||||
.offset12 {
|
||||
margin-left: 100%;
|
||||
}
|
||||
.row-fluid .offset12:first-child {
|
||||
margin-left: 102.76243093922652%;
|
||||
*margin-left: 102.6560479605031%;
|
||||
.offset11 {
|
||||
margin-left: 91.66666666666666%;
|
||||
}
|
||||
.row-fluid .offset11 {
|
||||
margin-left: 96.96132596685082%;
|
||||
*margin-left: 96.8549429881274%;
|
||||
.offset10 {
|
||||
margin-left: 83.33333333333334%;
|
||||
}
|
||||
.row-fluid .offset11:first-child {
|
||||
margin-left: 94.1988950276243%;
|
||||
*margin-left: 94.09251204890089%;
|
||||
.offset9 {
|
||||
margin-left: 75%;
|
||||
}
|
||||
.row-fluid .offset10 {
|
||||
margin-left: 88.39779005524862%;
|
||||
*margin-left: 88.2914070765252%;
|
||||
.offset8 {
|
||||
margin-left: 66.66666666666666%;
|
||||
}
|
||||
.row-fluid .offset10:first-child {
|
||||
margin-left: 85.6353591160221%;
|
||||
*margin-left: 85.52897613729868%;
|
||||
.offset7 {
|
||||
margin-left: 58.333333333333336%;
|
||||
}
|
||||
.row-fluid .offset9 {
|
||||
margin-left: 79.8342541436464%;
|
||||
*margin-left: 79.72787116492299%;
|
||||
.offset6 {
|
||||
margin-left: 50%;
|
||||
}
|
||||
.row-fluid .offset9:first-child {
|
||||
margin-left: 77.07182320441989%;
|
||||
*margin-left: 76.96544022569647%;
|
||||
.offset5 {
|
||||
margin-left: 41.66666666666667%;
|
||||
}
|
||||
.row-fluid .offset8 {
|
||||
margin-left: 71.2707182320442%;
|
||||
*margin-left: 71.16433525332079%;
|
||||
.offset4 {
|
||||
margin-left: 33.33333333333333%;
|
||||
}
|
||||
.row-fluid .offset8:first-child {
|
||||
margin-left: 68.50828729281768%;
|
||||
*margin-left: 68.40190431409427%;
|
||||
.offset3 {
|
||||
margin-left: 25%;
|
||||
}
|
||||
.row-fluid .offset7 {
|
||||
margin-left: 62.70718232044199%;
|
||||
*margin-left: 62.600799341718584%;
|
||||
.offset2 {
|
||||
margin-left: 16.666666666666664%;
|
||||
}
|
||||
.row-fluid .offset7:first-child {
|
||||
margin-left: 59.94475138121547%;
|
||||
*margin-left: 59.838368402492065%;
|
||||
}
|
||||
.row-fluid .offset6 {
|
||||
margin-left: 54.14364640883978%;
|
||||
*margin-left: 54.037263430116376%;
|
||||
}
|
||||
.row-fluid .offset6:first-child {
|
||||
margin-left: 51.38121546961326%;
|
||||
*margin-left: 51.27483249088986%;
|
||||
}
|
||||
.row-fluid .offset5 {
|
||||
margin-left: 45.58011049723757%;
|
||||
*margin-left: 45.47372751851417%;
|
||||
}
|
||||
.row-fluid .offset5:first-child {
|
||||
margin-left: 42.81767955801105%;
|
||||
*margin-left: 42.71129657928765%;
|
||||
}
|
||||
.row-fluid .offset4 {
|
||||
margin-left: 37.01657458563536%;
|
||||
*margin-left: 36.91019160691196%;
|
||||
}
|
||||
.row-fluid .offset4:first-child {
|
||||
margin-left: 34.25414364640884%;
|
||||
*margin-left: 34.14776066768544%;
|
||||
}
|
||||
.row-fluid .offset3 {
|
||||
margin-left: 28.45303867403315%;
|
||||
*margin-left: 28.346655695309746%;
|
||||
}
|
||||
.row-fluid .offset3:first-child {
|
||||
margin-left: 25.69060773480663%;
|
||||
*margin-left: 25.584224756083227%;
|
||||
}
|
||||
.row-fluid .offset2 {
|
||||
margin-left: 19.88950276243094%;
|
||||
*margin-left: 19.783119783707537%;
|
||||
}
|
||||
.row-fluid .offset2:first-child {
|
||||
margin-left: 17.12707182320442%;
|
||||
*margin-left: 17.02068884448102%;
|
||||
}
|
||||
.row-fluid .offset1 {
|
||||
margin-left: 11.32596685082873%;
|
||||
*margin-left: 11.219583872105325%;
|
||||
}
|
||||
.row-fluid .offset1:first-child {
|
||||
margin-left: 8.56353591160221%;
|
||||
*margin-left: 8.457152932878806%;
|
||||
}
|
||||
input,
|
||||
textarea,
|
||||
.uneditable-input {
|
||||
margin-left: 0;
|
||||
}
|
||||
.controls-row [class*="span"] + [class*="span"] {
|
||||
margin-left: 20px;
|
||||
}
|
||||
input.span12,
|
||||
textarea.span12,
|
||||
.uneditable-input.span12 {
|
||||
width: 710px;
|
||||
}
|
||||
input.span11,
|
||||
textarea.span11,
|
||||
.uneditable-input.span11 {
|
||||
width: 648px;
|
||||
}
|
||||
input.span10,
|
||||
textarea.span10,
|
||||
.uneditable-input.span10 {
|
||||
width: 586px;
|
||||
}
|
||||
input.span9,
|
||||
textarea.span9,
|
||||
.uneditable-input.span9 {
|
||||
width: 524px;
|
||||
}
|
||||
input.span8,
|
||||
textarea.span8,
|
||||
.uneditable-input.span8 {
|
||||
width: 462px;
|
||||
}
|
||||
input.span7,
|
||||
textarea.span7,
|
||||
.uneditable-input.span7 {
|
||||
width: 400px;
|
||||
}
|
||||
input.span6,
|
||||
textarea.span6,
|
||||
.uneditable-input.span6 {
|
||||
width: 338px;
|
||||
}
|
||||
input.span5,
|
||||
textarea.span5,
|
||||
.uneditable-input.span5 {
|
||||
width: 276px;
|
||||
}
|
||||
input.span4,
|
||||
textarea.span4,
|
||||
.uneditable-input.span4 {
|
||||
width: 214px;
|
||||
}
|
||||
input.span3,
|
||||
textarea.span3,
|
||||
.uneditable-input.span3 {
|
||||
width: 152px;
|
||||
}
|
||||
input.span2,
|
||||
textarea.span2,
|
||||
.uneditable-input.span2 {
|
||||
width: 90px;
|
||||
}
|
||||
input.span1,
|
||||
textarea.span1,
|
||||
.uneditable-input.span1 {
|
||||
width: 28px;
|
||||
.offset1 {
|
||||
margin-left: 8.333333333333332%;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
409
docs/assets/css/bootstrap.css
vendored
409
docs/assets/css/bootstrap.css
vendored
|
|
@ -197,8 +197,15 @@ a:hover {
|
|||
border-radius: 500px;
|
||||
}
|
||||
|
||||
.container,
|
||||
.navbar-fixed-top .container,
|
||||
.navbar-fixed-bottom .container {
|
||||
width: 940px;
|
||||
}
|
||||
|
||||
.row {
|
||||
margin-left: -20px;
|
||||
margin-right: -10px;
|
||||
margin-left: -10px;
|
||||
*zoom: 1;
|
||||
}
|
||||
|
||||
|
|
@ -216,322 +223,107 @@ a:hover {
|
|||
[class*="span"] {
|
||||
float: left;
|
||||
min-height: 1px;
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
.container,
|
||||
.navbar-static-top .container,
|
||||
.navbar-fixed-top .container,
|
||||
.navbar-fixed-bottom .container {
|
||||
width: 940px;
|
||||
}
|
||||
|
||||
.span12 {
|
||||
width: 940px;
|
||||
}
|
||||
|
||||
.span11 {
|
||||
width: 860px;
|
||||
}
|
||||
|
||||
.span10 {
|
||||
width: 780px;
|
||||
}
|
||||
|
||||
.span9 {
|
||||
width: 700px;
|
||||
}
|
||||
|
||||
.span8 {
|
||||
width: 620px;
|
||||
}
|
||||
|
||||
.span7 {
|
||||
width: 540px;
|
||||
}
|
||||
|
||||
.span6 {
|
||||
width: 460px;
|
||||
}
|
||||
|
||||
.span5 {
|
||||
width: 380px;
|
||||
}
|
||||
|
||||
.span4 {
|
||||
width: 300px;
|
||||
}
|
||||
|
||||
.span3 {
|
||||
width: 220px;
|
||||
}
|
||||
|
||||
.span2 {
|
||||
width: 140px;
|
||||
}
|
||||
|
||||
.span1 {
|
||||
width: 60px;
|
||||
}
|
||||
|
||||
.offset12 {
|
||||
margin-left: 980px;
|
||||
}
|
||||
|
||||
.offset11 {
|
||||
margin-left: 900px;
|
||||
}
|
||||
|
||||
.offset10 {
|
||||
margin-left: 820px;
|
||||
}
|
||||
|
||||
.offset9 {
|
||||
margin-left: 740px;
|
||||
}
|
||||
|
||||
.offset8 {
|
||||
margin-left: 660px;
|
||||
}
|
||||
|
||||
.offset7 {
|
||||
margin-left: 580px;
|
||||
}
|
||||
|
||||
.offset6 {
|
||||
margin-left: 500px;
|
||||
}
|
||||
|
||||
.offset5 {
|
||||
margin-left: 420px;
|
||||
}
|
||||
|
||||
.offset4 {
|
||||
margin-left: 340px;
|
||||
}
|
||||
|
||||
.offset3 {
|
||||
margin-left: 260px;
|
||||
}
|
||||
|
||||
.offset2 {
|
||||
margin-left: 180px;
|
||||
}
|
||||
|
||||
.offset1 {
|
||||
margin-left: 100px;
|
||||
}
|
||||
|
||||
.row-fluid {
|
||||
width: 100%;
|
||||
*zoom: 1;
|
||||
}
|
||||
|
||||
.row-fluid:before,
|
||||
.row-fluid:after {
|
||||
display: table;
|
||||
line-height: 0;
|
||||
content: "";
|
||||
}
|
||||
|
||||
.row-fluid:after {
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.row-fluid [class*="span"] {
|
||||
display: block;
|
||||
float: left;
|
||||
width: 100%;
|
||||
min-height: 30px;
|
||||
margin-left: 2.127659574468085%;
|
||||
*margin-left: 2.074468085106383%;
|
||||
padding-right: 10px;
|
||||
padding-left: 10px;
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.row-fluid [class*="span"]:first-child {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.row-fluid .span12 {
|
||||
.span12 {
|
||||
width: 100%;
|
||||
*width: 99.94680851063829%;
|
||||
}
|
||||
|
||||
.row-fluid .span11 {
|
||||
width: 91.48936170212765%;
|
||||
*width: 91.43617021276594%;
|
||||
.span11 {
|
||||
width: 91.66666666666666%;
|
||||
}
|
||||
|
||||
.row-fluid .span10 {
|
||||
width: 82.97872340425532%;
|
||||
*width: 82.92553191489361%;
|
||||
.span10 {
|
||||
width: 83.33333333333334%;
|
||||
}
|
||||
|
||||
.row-fluid .span9 {
|
||||
width: 74.46808510638297%;
|
||||
*width: 74.41489361702126%;
|
||||
.span9 {
|
||||
width: 75%;
|
||||
}
|
||||
|
||||
.row-fluid .span8 {
|
||||
width: 65.95744680851064%;
|
||||
*width: 65.90425531914893%;
|
||||
.span8 {
|
||||
width: 66.66666666666666%;
|
||||
}
|
||||
|
||||
.row-fluid .span7 {
|
||||
width: 57.44680851063829%;
|
||||
*width: 57.39361702127659%;
|
||||
.span7 {
|
||||
width: 58.333333333333336%;
|
||||
}
|
||||
|
||||
.row-fluid .span6 {
|
||||
width: 48.93617021276595%;
|
||||
*width: 48.88297872340425%;
|
||||
.span6 {
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.row-fluid .span5 {
|
||||
width: 40.42553191489362%;
|
||||
*width: 40.37234042553192%;
|
||||
.span5 {
|
||||
width: 41.66666666666667%;
|
||||
}
|
||||
|
||||
.row-fluid .span4 {
|
||||
width: 31.914893617021278%;
|
||||
*width: 31.861702127659576%;
|
||||
.span4 {
|
||||
width: 33.33333333333333%;
|
||||
}
|
||||
|
||||
.row-fluid .span3 {
|
||||
width: 23.404255319148934%;
|
||||
*width: 23.351063829787233%;
|
||||
.span3 {
|
||||
width: 25%;
|
||||
}
|
||||
|
||||
.row-fluid .span2 {
|
||||
width: 14.893617021276595%;
|
||||
*width: 14.840425531914894%;
|
||||
.span2 {
|
||||
width: 16.666666666666664%;
|
||||
}
|
||||
|
||||
.row-fluid .span1 {
|
||||
width: 6.382978723404255%;
|
||||
*width: 6.329787234042553%;
|
||||
.span1 {
|
||||
width: 8.333333333333332%;
|
||||
}
|
||||
|
||||
.row-fluid .offset12 {
|
||||
margin-left: 104.25531914893617%;
|
||||
*margin-left: 104.14893617021275%;
|
||||
.offset12 {
|
||||
margin-left: 100%;
|
||||
}
|
||||
|
||||
.row-fluid .offset12:first-child {
|
||||
margin-left: 102.12765957446808%;
|
||||
*margin-left: 102.02127659574467%;
|
||||
.offset11 {
|
||||
margin-left: 91.66666666666666%;
|
||||
}
|
||||
|
||||
.row-fluid .offset11 {
|
||||
margin-left: 95.74468085106382%;
|
||||
*margin-left: 95.6382978723404%;
|
||||
.offset10 {
|
||||
margin-left: 83.33333333333334%;
|
||||
}
|
||||
|
||||
.row-fluid .offset11:first-child {
|
||||
margin-left: 93.61702127659574%;
|
||||
*margin-left: 93.51063829787232%;
|
||||
.offset9 {
|
||||
margin-left: 75%;
|
||||
}
|
||||
|
||||
.row-fluid .offset10 {
|
||||
margin-left: 87.23404255319149%;
|
||||
*margin-left: 87.12765957446807%;
|
||||
.offset8 {
|
||||
margin-left: 66.66666666666666%;
|
||||
}
|
||||
|
||||
.row-fluid .offset10:first-child {
|
||||
margin-left: 85.1063829787234%;
|
||||
*margin-left: 84.99999999999999%;
|
||||
.offset7 {
|
||||
margin-left: 58.333333333333336%;
|
||||
}
|
||||
|
||||
.row-fluid .offset9 {
|
||||
margin-left: 78.72340425531914%;
|
||||
*margin-left: 78.61702127659572%;
|
||||
.offset6 {
|
||||
margin-left: 50%;
|
||||
}
|
||||
|
||||
.row-fluid .offset9:first-child {
|
||||
margin-left: 76.59574468085106%;
|
||||
*margin-left: 76.48936170212764%;
|
||||
.offset5 {
|
||||
margin-left: 41.66666666666667%;
|
||||
}
|
||||
|
||||
.row-fluid .offset8 {
|
||||
margin-left: 70.2127659574468%;
|
||||
*margin-left: 70.10638297872339%;
|
||||
.offset4 {
|
||||
margin-left: 33.33333333333333%;
|
||||
}
|
||||
|
||||
.row-fluid .offset8:first-child {
|
||||
margin-left: 68.08510638297872%;
|
||||
*margin-left: 67.9787234042553%;
|
||||
.offset3 {
|
||||
margin-left: 25%;
|
||||
}
|
||||
|
||||
.row-fluid .offset7 {
|
||||
margin-left: 61.70212765957446%;
|
||||
*margin-left: 61.59574468085106%;
|
||||
.offset2 {
|
||||
margin-left: 16.666666666666664%;
|
||||
}
|
||||
|
||||
.row-fluid .offset7:first-child {
|
||||
margin-left: 59.574468085106375%;
|
||||
*margin-left: 59.46808510638297%;
|
||||
}
|
||||
|
||||
.row-fluid .offset6 {
|
||||
margin-left: 53.191489361702125%;
|
||||
*margin-left: 53.085106382978715%;
|
||||
}
|
||||
|
||||
.row-fluid .offset6:first-child {
|
||||
margin-left: 51.063829787234035%;
|
||||
*margin-left: 50.95744680851063%;
|
||||
}
|
||||
|
||||
.row-fluid .offset5 {
|
||||
margin-left: 44.68085106382979%;
|
||||
*margin-left: 44.57446808510638%;
|
||||
}
|
||||
|
||||
.row-fluid .offset5:first-child {
|
||||
margin-left: 42.5531914893617%;
|
||||
*margin-left: 42.4468085106383%;
|
||||
}
|
||||
|
||||
.row-fluid .offset4 {
|
||||
margin-left: 36.170212765957444%;
|
||||
*margin-left: 36.06382978723405%;
|
||||
}
|
||||
|
||||
.row-fluid .offset4:first-child {
|
||||
margin-left: 34.04255319148936%;
|
||||
*margin-left: 33.93617021276596%;
|
||||
}
|
||||
|
||||
.row-fluid .offset3 {
|
||||
margin-left: 27.659574468085104%;
|
||||
*margin-left: 27.5531914893617%;
|
||||
}
|
||||
|
||||
.row-fluid .offset3:first-child {
|
||||
margin-left: 25.53191489361702%;
|
||||
*margin-left: 25.425531914893618%;
|
||||
}
|
||||
|
||||
.row-fluid .offset2 {
|
||||
margin-left: 19.148936170212764%;
|
||||
*margin-left: 19.04255319148936%;
|
||||
}
|
||||
|
||||
.row-fluid .offset2:first-child {
|
||||
margin-left: 17.02127659574468%;
|
||||
*margin-left: 16.914893617021278%;
|
||||
}
|
||||
|
||||
.row-fluid .offset1 {
|
||||
margin-left: 10.638297872340425%;
|
||||
*margin-left: 10.53191489361702%;
|
||||
}
|
||||
|
||||
.row-fluid .offset1:first-child {
|
||||
margin-left: 8.51063829787234%;
|
||||
*margin-left: 8.404255319148938%;
|
||||
.offset1 {
|
||||
margin-left: 8.333333333333332%;
|
||||
}
|
||||
|
||||
[class*="span"].hide,
|
||||
|
|
@ -1188,86 +980,11 @@ textarea[class*="span"],
|
|||
display: inline-block;
|
||||
}
|
||||
|
||||
input,
|
||||
textarea,
|
||||
.uneditable-input {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.controls-row [class*="span"] + [class*="span"] {
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
input.span12,
|
||||
textarea.span12,
|
||||
.uneditable-input.span12 {
|
||||
width: 926px;
|
||||
}
|
||||
|
||||
input.span11,
|
||||
textarea.span11,
|
||||
.uneditable-input.span11 {
|
||||
width: 846px;
|
||||
}
|
||||
|
||||
input.span10,
|
||||
textarea.span10,
|
||||
.uneditable-input.span10 {
|
||||
width: 766px;
|
||||
}
|
||||
|
||||
input.span9,
|
||||
textarea.span9,
|
||||
.uneditable-input.span9 {
|
||||
width: 686px;
|
||||
}
|
||||
|
||||
input.span8,
|
||||
textarea.span8,
|
||||
.uneditable-input.span8 {
|
||||
width: 606px;
|
||||
}
|
||||
|
||||
input.span7,
|
||||
textarea.span7,
|
||||
.uneditable-input.span7 {
|
||||
width: 526px;
|
||||
}
|
||||
|
||||
input.span6,
|
||||
textarea.span6,
|
||||
.uneditable-input.span6 {
|
||||
width: 446px;
|
||||
}
|
||||
|
||||
input.span5,
|
||||
textarea.span5,
|
||||
.uneditable-input.span5 {
|
||||
width: 366px;
|
||||
}
|
||||
|
||||
input.span4,
|
||||
textarea.span4,
|
||||
.uneditable-input.span4 {
|
||||
width: 286px;
|
||||
}
|
||||
|
||||
input.span3,
|
||||
textarea.span3,
|
||||
.uneditable-input.span3 {
|
||||
width: 206px;
|
||||
}
|
||||
|
||||
input.span2,
|
||||
textarea.span2,
|
||||
.uneditable-input.span2 {
|
||||
width: 126px;
|
||||
}
|
||||
|
||||
input.span1,
|
||||
textarea.span1,
|
||||
.uneditable-input.span1 {
|
||||
width: 46px;
|
||||
input[class*="span"],
|
||||
select[class*="span"],
|
||||
textarea[class*="span"],
|
||||
.uneditable-input[class*="span"] {
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
.controls-row {
|
||||
|
|
@ -4322,7 +4039,7 @@ input[type="submit"].btn.btn-mini {
|
|||
.navbar-static-top .container,
|
||||
.navbar-fixed-top .container,
|
||||
.navbar-fixed-bottom .container {
|
||||
width: 940px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.navbar-fixed-top {
|
||||
|
|
|
|||
|
|
@ -87,7 +87,6 @@
|
|||
<ul class="nav nav-list bs-docs-sidenav">
|
||||
<li><a href="#global"><i class="icon-chevron-right"></i> Global styles</a></li>
|
||||
<li><a href="#gridSystem"><i class="icon-chevron-right"></i> Grid system</a></li>
|
||||
<li><a href="#fluidGridSystem"><i class="icon-chevron-right"></i> Fluid grid system</a></li>
|
||||
<li><a href="#layouts"><i class="icon-chevron-right"></i> Layouts</a></li>
|
||||
<li><a href="#responsive"><i class="icon-chevron-right"></i> Responsive design</a></li>
|
||||
</ul>
|
||||
|
|
@ -150,18 +149,21 @@
|
|||
<div class="span1">1</div>
|
||||
<div class="span1">1</div>
|
||||
<div class="span1">1</div>
|
||||
</div>
|
||||
<div class="row show-grid">
|
||||
<div class="span2">2</div>
|
||||
<div class="span3">3</div>
|
||||
<div class="span4">4</div>
|
||||
<div class="span1">1</div>
|
||||
<div class="span1">1</div>
|
||||
<div class="span1">1</div>
|
||||
</div>
|
||||
<div class="row show-grid">
|
||||
<div class="span4">4</div>
|
||||
<div class="span5">5</div>
|
||||
<div class="span4">4</div>
|
||||
<div class="span4">4</div>
|
||||
</div>
|
||||
<div class="row show-grid">
|
||||
<div class="span9">9</div>
|
||||
<div class="span6">6</div>
|
||||
<div class="span6">6</div>
|
||||
</div>
|
||||
<div class="row show-grid">
|
||||
<div class="span12">12</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -180,33 +182,34 @@
|
|||
<div class="bs-docs-grid">
|
||||
<div class="row show-grid">
|
||||
<div class="span4">4</div>
|
||||
<div class="span3 offset2">3 offset 2</div>
|
||||
<div class="span4 offset4">4 offset 4</div>
|
||||
</div><!-- /row -->
|
||||
<div class="row show-grid">
|
||||
<div class="span3 offset1">3 offset 1</div>
|
||||
<div class="span3 offset2">3 offset 2</div>
|
||||
<div class="span3 offset3">3 offset 3</div>
|
||||
<div class="span3 offset3">3 offset 3</div>
|
||||
</div><!-- /row -->
|
||||
<div class="row show-grid">
|
||||
<div class="span6 offset3">6 offset 3</div>
|
||||
<div class="span6 offset6">6 offset 6</div>
|
||||
</div><!-- /row -->
|
||||
</div>
|
||||
<pre class="prettyprint linenums">
|
||||
<div class="row">
|
||||
<div class="span4">...</div>
|
||||
<div class="span3 offset2">...</div>
|
||||
<div class="span4 offset4">...</div>
|
||||
</div>
|
||||
</pre>
|
||||
|
||||
|
||||
<h2>Nesting columns</h2>
|
||||
<p>To nest your content with the default grid, add a new <code>.row</code> and set of <code>.span*</code> columns within an existing <code>.span*</code> column. Nested rows should include a set of columns that add up to the number of columns of its parent.</p>
|
||||
<div class="row show-grid">
|
||||
<div class="span9">
|
||||
<div class="span12">
|
||||
Level 1 of column
|
||||
<div class="row show-grid">
|
||||
<div class="span6">
|
||||
Level 2
|
||||
</div>
|
||||
<div class="span3">
|
||||
<div class="span6">
|
||||
Level 2
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -217,116 +220,12 @@
|
|||
<div class="span9">
|
||||
Level 1 column
|
||||
<div class="row">
|
||||
<div class="span6">Level 2</div>
|
||||
<div class="span3">Level 2</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</pre>
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
<!-- Fluid grid system
|
||||
================================================== -->
|
||||
<section id="fluidGridSystem">
|
||||
<div class="page-header">
|
||||
<h1>Fluid grid system</h1>
|
||||
</div>
|
||||
|
||||
<h2>Live fluid grid example</h2>
|
||||
<p>The fluid grid system uses percents instead of pixels for column widths. It has the same responsive capabilities as our fixed grid system, ensuring proper proportions for key screen resolutions and devices.</p>
|
||||
<div class="bs-docs-grid">
|
||||
<div class="row-fluid show-grid">
|
||||
<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>
|
||||
<div class="row-fluid show-grid">
|
||||
<div class="span4">4</div>
|
||||
<div class="span4">4</div>
|
||||
<div class="span4">4</div>
|
||||
</div>
|
||||
<div class="row-fluid show-grid">
|
||||
<div class="span4">4</div>
|
||||
<div class="span8">8</div>
|
||||
</div>
|
||||
<div class="row-fluid show-grid">
|
||||
<div class="span6">6</div>
|
||||
<div class="span6">6</div>
|
||||
</div>
|
||||
<div class="row-fluid show-grid">
|
||||
<div class="span12">12</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3>Basic fluid grid HTML</h3>
|
||||
<p>Make any row "fluid" by changing <code>.row</code> to <code>.row-fluid</code>. The column classes stay the exact same, making it easy to flip between fixed and fluid grids.</p>
|
||||
<pre class="prettyprint linenums">
|
||||
<div class="row-fluid">
|
||||
<div class="span4">...</div>
|
||||
<div class="span8">...</div>
|
||||
</div>
|
||||
</pre>
|
||||
|
||||
<h2>Fluid offsetting</h2>
|
||||
<p>Operates the same way as the fixed grid system offsetting: add <code>.offset*</code> to any column to offset by that many columns.</p>
|
||||
<div class="bs-docs-grid">
|
||||
<div class="row-fluid show-grid">
|
||||
<div class="span4">4</div>
|
||||
<div class="span4 offset4">4 offset 4</div>
|
||||
</div><!-- /row -->
|
||||
<div class="row-fluid show-grid">
|
||||
<div class="span3 offset3">3 offset 3</div>
|
||||
<div class="span3 offset3">3 offset 3</div>
|
||||
</div><!-- /row -->
|
||||
<div class="row-fluid show-grid">
|
||||
<div class="span6 offset6">6 offset 6</div>
|
||||
</div><!-- /row -->
|
||||
</div>
|
||||
<pre class="prettyprint linenums">
|
||||
<div class="row-fluid">
|
||||
<div class="span4">...</div>
|
||||
<div class="span4 offset2">...</div>
|
||||
</div>
|
||||
</pre>
|
||||
|
||||
<h2>Fluid nesting</h2>
|
||||
<p>Nesting with fluid grids is a bit different: the number of nested columns should not match the parent's number of columns. Instead, each level of nested columns are reset because each row takes up 100% of the parent column.</p>
|
||||
<div class="row-fluid show-grid">
|
||||
<div class="span12">
|
||||
Fluid 12
|
||||
<div class="row-fluid show-grid">
|
||||
<div class="span6">
|
||||
Fluid 6
|
||||
</div>
|
||||
<div class="span6">
|
||||
Fluid 6
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<pre class="prettyprint linenums">
|
||||
<div class="row-fluid">
|
||||
<div class="span12">
|
||||
Level 1 of column
|
||||
<div class="row-fluid">
|
||||
<div class="span6">Level 2</div>
|
||||
<div class="span6">Level 2</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</pre>
|
||||
|
||||
</section>
|
||||
|
||||
|
||||
|
|
|
|||
137
docs/templates/pages/scaffolding.mustache
vendored
137
docs/templates/pages/scaffolding.mustache
vendored
|
|
@ -16,7 +16,6 @@
|
|||
<ul class="nav nav-list bs-docs-sidenav">
|
||||
<li><a href="#global"><i class="icon-chevron-right"></i> {{_i}}Global styles{{/i}}</a></li>
|
||||
<li><a href="#gridSystem"><i class="icon-chevron-right"></i> {{_i}}Grid system{{/i}}</a></li>
|
||||
<li><a href="#fluidGridSystem"><i class="icon-chevron-right"></i> {{_i}}Fluid grid system{{/i}}</a></li>
|
||||
<li><a href="#layouts"><i class="icon-chevron-right"></i> {{_i}}Layouts{{/i}}</a></li>
|
||||
<li><a href="#responsive"><i class="icon-chevron-right"></i> {{_i}}Responsive design{{/i}}</a></li>
|
||||
</ul>
|
||||
|
|
@ -79,18 +78,21 @@
|
|||
<div class="span1">1</div>
|
||||
<div class="span1">1</div>
|
||||
<div class="span1">1</div>
|
||||
</div>
|
||||
<div class="row show-grid">
|
||||
<div class="span2">2</div>
|
||||
<div class="span3">3</div>
|
||||
<div class="span4">4</div>
|
||||
<div class="span1">1</div>
|
||||
<div class="span1">1</div>
|
||||
<div class="span1">1</div>
|
||||
</div>
|
||||
<div class="row show-grid">
|
||||
<div class="span4">4</div>
|
||||
<div class="span5">5</div>
|
||||
<div class="span4">4</div>
|
||||
<div class="span4">4</div>
|
||||
</div>
|
||||
<div class="row show-grid">
|
||||
<div class="span9">9</div>
|
||||
<div class="span6">6</div>
|
||||
<div class="span6">6</div>
|
||||
</div>
|
||||
<div class="row show-grid">
|
||||
<div class="span12">12</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -109,33 +111,34 @@
|
|||
<div class="bs-docs-grid">
|
||||
<div class="row show-grid">
|
||||
<div class="span4">4</div>
|
||||
<div class="span3 offset2">3 offset 2</div>
|
||||
<div class="span4 offset4">4 offset 4</div>
|
||||
</div><!-- /row -->
|
||||
<div class="row show-grid">
|
||||
<div class="span3 offset1">3 offset 1</div>
|
||||
<div class="span3 offset2">3 offset 2</div>
|
||||
<div class="span3 offset3">3 offset 3</div>
|
||||
<div class="span3 offset3">3 offset 3</div>
|
||||
</div><!-- /row -->
|
||||
<div class="row show-grid">
|
||||
<div class="span6 offset3">6 offset 3</div>
|
||||
<div class="span6 offset6">6 offset 6</div>
|
||||
</div><!-- /row -->
|
||||
</div>
|
||||
<pre class="prettyprint linenums">
|
||||
<div class="row">
|
||||
<div class="span4">...</div>
|
||||
<div class="span3 offset2">...</div>
|
||||
<div class="span4 offset4">...</div>
|
||||
</div>
|
||||
</pre>
|
||||
|
||||
|
||||
<h2>{{_i}}Nesting columns{{/i}}</h2>
|
||||
<p>{{_i}}To nest your content with the default grid, add a new <code>.row</code> and set of <code>.span*</code> columns within an existing <code>.span*</code> column. Nested rows should include a set of columns that add up to the number of columns of its parent.{{/i}}</p>
|
||||
<div class="row show-grid">
|
||||
<div class="span9">
|
||||
<div class="span12">
|
||||
{{_i}}Level 1 of column{{/i}}
|
||||
<div class="row show-grid">
|
||||
<div class="span6">
|
||||
{{_i}}Level 2{{/i}}
|
||||
</div>
|
||||
<div class="span3">
|
||||
<div class="span6">
|
||||
{{_i}}Level 2{{/i}}
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -146,116 +149,12 @@
|
|||
<div class="span9">
|
||||
{{_i}}Level 1 column{{/i}}
|
||||
<div class="row">
|
||||
<div class="span6">{{_i}}Level 2{{/i}}</div>
|
||||
<div class="span3">{{_i}}Level 2{{/i}}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</pre>
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
<!-- Fluid grid system
|
||||
================================================== -->
|
||||
<section id="fluidGridSystem">
|
||||
<div class="page-header">
|
||||
<h1>{{_i}}Fluid grid system{{/i}}</h1>
|
||||
</div>
|
||||
|
||||
<h2>{{_i}}Live fluid grid example{{/i}}</h2>
|
||||
<p>{{_i}}The fluid grid system uses percents instead of pixels for column widths. It has the same responsive capabilities as our fixed grid system, ensuring proper proportions for key screen resolutions and devices.{{/i}}</p>
|
||||
<div class="bs-docs-grid">
|
||||
<div class="row-fluid show-grid">
|
||||
<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>
|
||||
<div class="row-fluid show-grid">
|
||||
<div class="span4">4</div>
|
||||
<div class="span4">4</div>
|
||||
<div class="span4">4</div>
|
||||
</div>
|
||||
<div class="row-fluid show-grid">
|
||||
<div class="span4">4</div>
|
||||
<div class="span8">8</div>
|
||||
</div>
|
||||
<div class="row-fluid show-grid">
|
||||
<div class="span6">6</div>
|
||||
<div class="span6">6</div>
|
||||
</div>
|
||||
<div class="row-fluid show-grid">
|
||||
<div class="span12">12</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3>{{_i}}Basic fluid grid HTML{{/i}}</h3>
|
||||
<p>{{_i}}Make any row "fluid" by changing <code>.row</code> to <code>.row-fluid</code>. The column classes stay the exact same, making it easy to flip between fixed and fluid grids.{{/i}}</p>
|
||||
<pre class="prettyprint linenums">
|
||||
<div class="row-fluid">
|
||||
<div class="span4">...</div>
|
||||
<div class="span8">...</div>
|
||||
</div>
|
||||
</pre>
|
||||
|
||||
<h2>{{_i}}Fluid offsetting{{/i}}</h2>
|
||||
<p>{{_i}}Operates the same way as the fixed grid system offsetting: add <code>.offset*</code> to any column to offset by that many columns.{{/i}}</p>
|
||||
<div class="bs-docs-grid">
|
||||
<div class="row-fluid show-grid">
|
||||
<div class="span4">4</div>
|
||||
<div class="span4 offset4">4 offset 4</div>
|
||||
</div><!-- /row -->
|
||||
<div class="row-fluid show-grid">
|
||||
<div class="span3 offset3">3 offset 3</div>
|
||||
<div class="span3 offset3">3 offset 3</div>
|
||||
</div><!-- /row -->
|
||||
<div class="row-fluid show-grid">
|
||||
<div class="span6 offset6">6 offset 6</div>
|
||||
</div><!-- /row -->
|
||||
</div>
|
||||
<pre class="prettyprint linenums">
|
||||
<div class="row-fluid">
|
||||
<div class="span4">...</div>
|
||||
<div class="span4 offset2">...</div>
|
||||
</div>
|
||||
</pre>
|
||||
|
||||
<h2>{{_i}}Fluid nesting{{/i}}</h2>
|
||||
<p>{{_i}}Nesting with fluid grids is a bit different: the number of nested columns should not match the parent's number of columns. Instead, each level of nested columns are reset because each row takes up 100% of the parent column.{{/i}}</p>
|
||||
<div class="row-fluid show-grid">
|
||||
<div class="span12">
|
||||
{{_i}}Fluid 12{{/i}}
|
||||
<div class="row-fluid show-grid">
|
||||
<div class="span6">
|
||||
{{_i}}Fluid 6{{/i}}
|
||||
</div>
|
||||
<div class="span6">
|
||||
{{_i}}Fluid 6{{/i}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<pre class="prettyprint linenums">
|
||||
<div class="row-fluid">
|
||||
<div class="span12">
|
||||
{{_i}}Level 1 of column{{/i}}
|
||||
<div class="row-fluid">
|
||||
<div class="span6">{{_i}}Level 2{{/i}}</div>
|
||||
<div class="span6">{{_i}}Level 2{{/i}}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</pre>
|
||||
|
||||
</section>
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -297,9 +297,12 @@ textarea[class*="span"],
|
|||
// GRID SIZING FOR INPUTS
|
||||
// ----------------------
|
||||
|
||||
// Grid sizes
|
||||
#grid > .input(@gridColumnWidth, @gridGutterWidth);
|
||||
|
||||
input[class*="span"],
|
||||
select[class*="span"],
|
||||
textarea[class*="span"],
|
||||
.uneditable-input[class*="span"] {
|
||||
height: 30px;
|
||||
}
|
||||
// Control row for multiple inputs per line
|
||||
.controls-row {
|
||||
.clearfix(); // Clear the float from controls
|
||||
|
|
|
|||
|
|
@ -3,11 +3,13 @@
|
|||
// --------------------------------------------------
|
||||
|
||||
|
||||
// Fixed (940px)
|
||||
#grid > .core(@gridColumnWidth, @gridGutterWidth);
|
||||
// Set the container width, and override it for fixed navbars in media queries
|
||||
.container,
|
||||
.navbar-fixed-top .container,
|
||||
.navbar-fixed-bottom .container { width: 940px; }
|
||||
|
||||
// Fluid (940px)
|
||||
#grid > .fluid(@fluidGridColumnWidth, @fluidGridGutterWidth);
|
||||
// Fixed (940px)
|
||||
#grid > .core(@gridColumnWidth, @gridGutterWidth, @gridRowWidth);
|
||||
|
||||
// Reset utility classes due to specificity
|
||||
[class*="span"].hide,
|
||||
|
|
|
|||
101
less/mixins.less
101
less/mixins.less
|
|
@ -556,7 +556,7 @@
|
|||
// The Grid
|
||||
#grid {
|
||||
|
||||
.core (@gridColumnWidth, @gridGutterWidth) {
|
||||
.core (@gridColumnWidth, @gridGutterWidth, @gridRowWidth) {
|
||||
|
||||
.spanX (@index) when (@index > 0) {
|
||||
(~".span@{index}") { .span(@index); }
|
||||
|
|
@ -571,112 +571,33 @@
|
|||
.offsetX (0) {}
|
||||
|
||||
.offset (@columns) {
|
||||
margin-left: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns + 1));
|
||||
margin-left: percentage(@columns / @gridColumns);
|
||||
}
|
||||
|
||||
.span (@columns) {
|
||||
width: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1));
|
||||
width: percentage(@columns / @gridColumns);
|
||||
}
|
||||
|
||||
.row {
|
||||
margin-left: @gridGutterWidth * -1;
|
||||
margin-left: @gridGutterWidth / -2;
|
||||
margin-right: @gridGutterWidth / -2;
|
||||
.clearfix();
|
||||
}
|
||||
|
||||
[class*="span"] {
|
||||
float: left;
|
||||
min-height: 1px; // prevent collapsing columns
|
||||
margin-left: @gridGutterWidth;
|
||||
min-height: 1px; // prevent column collapsing
|
||||
padding-left: @gridGutterWidth / 2;
|
||||
padding-right: @gridGutterWidth / 2;
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
// Set the container width, and override it for fixed navbars in media queries
|
||||
.container,
|
||||
.navbar-static-top .container,
|
||||
.navbar-fixed-top .container,
|
||||
.navbar-fixed-bottom .container { .span(@gridColumns); }
|
||||
|
||||
// generate .spanX and .offsetX
|
||||
.spanX (@gridColumns);
|
||||
.offsetX (@gridColumns);
|
||||
|
||||
}
|
||||
|
||||
.fluid (@fluidGridColumnWidth, @fluidGridGutterWidth) {
|
||||
|
||||
.spanX (@index) when (@index > 0) {
|
||||
(~".span@{index}") { .span(@index); }
|
||||
.spanX(@index - 1);
|
||||
}
|
||||
.spanX (0) {}
|
||||
|
||||
.offsetX (@index) when (@index > 0) {
|
||||
(~'.offset@{index}') { .offset(@index); }
|
||||
(~'.offset@{index}:first-child') { .offsetFirstChild(@index); }
|
||||
.offsetX(@index - 1);
|
||||
}
|
||||
.offsetX (0) {}
|
||||
|
||||
.offset (@columns) {
|
||||
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%);
|
||||
}
|
||||
|
||||
.offsetFirstChild (@columns) {
|
||||
margin-left: (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1)) + (@fluidGridGutterWidth);
|
||||
*margin-left: (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1)) - (.5 / @gridRowWidth * 100 * 1%) + @fluidGridGutterWidth - (.5 / @gridRowWidth * 100 * 1%);
|
||||
}
|
||||
|
||||
.span (@columns) {
|
||||
width: (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1));
|
||||
*width: (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1)) - (.5 / @gridRowWidth * 100 * 1%);
|
||||
}
|
||||
|
||||
.row-fluid {
|
||||
width: 100%;
|
||||
.clearfix();
|
||||
[class*="span"] {
|
||||
.input-block-level();
|
||||
float: left;
|
||||
margin-left: @fluidGridGutterWidth;
|
||||
*margin-left: @fluidGridGutterWidth - (.5 / @gridRowWidth * 100 * 1%);
|
||||
}
|
||||
[class*="span"]:first-child {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
// generate .spanX and .offsetX
|
||||
.spanX (@gridColumns);
|
||||
.offsetX (@gridColumns);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.input(@gridColumnWidth, @gridGutterWidth) {
|
||||
|
||||
.spanX (@index) when (@index > 0) {
|
||||
(~"input.span@{index}, textarea.span@{index}, .uneditable-input.span@{index}") { .span(@index); }
|
||||
.spanX(@index - 1);
|
||||
}
|
||||
.spanX (0) {}
|
||||
|
||||
.span(@columns) {
|
||||
width: ((@gridColumnWidth) * @columns) + (@gridGutterWidth * (@columns - 1)) - 14;
|
||||
}
|
||||
|
||||
input,
|
||||
textarea,
|
||||
.uneditable-input {
|
||||
margin-left: 0; // override margin-left from core grid system
|
||||
}
|
||||
|
||||
// Space grid-sized controls properly if multiple per line
|
||||
.controls-row [class*="span"] + [class*="span"] {
|
||||
margin-left: @gridGutterWidth;
|
||||
}
|
||||
|
||||
// generate .spanX
|
||||
.spanX (@gridColumns);
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,14 +5,15 @@
|
|||
|
||||
@media (min-width: 1200px) {
|
||||
|
||||
// Set the container width, and override it for fixed navbars in media queries
|
||||
.container,
|
||||
.navbar-fixed-top .container,
|
||||
.navbar-fixed-bottom .container {
|
||||
width: 1170px;
|
||||
}
|
||||
|
||||
// Fixed grid
|
||||
#grid > .core(@gridColumnWidth1200, @gridGutterWidth1200);
|
||||
|
||||
// Fluid grid
|
||||
#grid > .fluid(@fluidGridColumnWidth1200, @fluidGridGutterWidth1200);
|
||||
|
||||
// Input grid
|
||||
#grid > .input(@gridColumnWidth1200, @gridGutterWidth1200);
|
||||
#grid > .core(@gridColumnWidth1200, @gridGutterWidth1200, @gridRowWidth1200);
|
||||
|
||||
// Thumbnails
|
||||
.thumbnails {
|
||||
|
|
@ -21,8 +22,5 @@
|
|||
.thumbnails > li {
|
||||
margin-left: @gridGutterWidth1200;
|
||||
}
|
||||
.row-fluid .thumbnails {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,14 +6,6 @@
|
|||
@media (min-width: 768px) and (max-width: 979px) {
|
||||
|
||||
// Fixed grid
|
||||
#grid > .core(@gridColumnWidth768, @gridGutterWidth768);
|
||||
|
||||
// Fluid grid
|
||||
#grid > .fluid(@fluidGridColumnWidth768, @fluidGridGutterWidth768);
|
||||
|
||||
// Input grid
|
||||
#grid > .input(@gridColumnWidth768, @gridGutterWidth768);
|
||||
|
||||
// No need to reset .thumbnails here since it's the same @gridGutterWidth
|
||||
#grid > .core(@gridColumnWidth768, @gridGutterWidth768, @gridRowWidth768);
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -263,17 +263,3 @@
|
|||
@gridColumnWidth768: 42px;
|
||||
@gridGutterWidth768: 20px;
|
||||
@gridRowWidth768: (@gridColumns * @gridColumnWidth768) + (@gridGutterWidth768 * (@gridColumns - 1));
|
||||
|
||||
|
||||
// Fluid grid
|
||||
// -------------------------
|
||||
@fluidGridColumnWidth: percentage(@gridColumnWidth/@gridRowWidth);
|
||||
@fluidGridGutterWidth: percentage(@gridGutterWidth/@gridRowWidth);
|
||||
|
||||
// 1200px min
|
||||
@fluidGridColumnWidth1200: percentage(@gridColumnWidth1200/@gridRowWidth1200);
|
||||
@fluidGridGutterWidth1200: percentage(@gridGutterWidth1200/@gridRowWidth1200);
|
||||
|
||||
// 768px-979px
|
||||
@fluidGridColumnWidth768: percentage(@gridColumnWidth768/@gridRowWidth768);
|
||||
@fluidGridGutterWidth768: percentage(@gridGutterWidth768/@gridRowWidth768);
|
||||
|
|
|
|||
Loading…
Reference in a new issue