diff --git a/docs/assets/css/bootstrap-responsive.css b/docs/assets/css/bootstrap-responsive.css index fcc4967600..9b8a2e41e9 100644 --- a/docs/assets/css/bootstrap-responsive.css +++ b/docs/assets/css/bootstrap-responsive.css @@ -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%; } } diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css index b863b1266d..b3adee6662 100644 --- a/docs/assets/css/bootstrap.css +++ b/docs/assets/css/bootstrap.css @@ -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 { diff --git a/docs/scaffolding.html b/docs/scaffolding.html index a78b1b5b47..08d0dceb85 100644 --- a/docs/scaffolding.html +++ b/docs/scaffolding.html @@ -87,7 +87,6 @@ @@ -150,18 +149,21 @@
1
1
1
- -
-
2
-
3
-
4
+
1
+
1
+
1
4
-
5
+
4
+
4
-
9
+
6
+
6
+
+
+
12
@@ -180,33 +182,34 @@
4
-
3 offset 2
+
4 offset 4
-
3 offset 1
-
3 offset 2
+
3 offset 3
+
3 offset 3
-
6 offset 3
+
6 offset 6
 <div class="row">
   <div class="span4">...</div>
-  <div class="span3 offset2">...</div>
+  <div class="span4 offset4">...</div>
 </div>
+

Nesting columns

To nest your content with the default grid, add a new .row and set of .span* columns within an existing .span* column. Nested rows should include a set of columns that add up to the number of columns of its parent.

-
+
Level 1 of column
Level 2
-
+
Level 2
@@ -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> - - - - - - -
-
-

Fluid grid system

-
- -

Live fluid grid example

-

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.

-
-
-
1
-
1
-
1
-
1
-
1
-
1
-
1
-
1
-
1
-
1
-
1
-
1
-
-
-
4
-
4
-
4
-
-
-
4
-
8
-
-
-
6
-
6
-
-
-
12
-
-
- -

Basic fluid grid HTML

-

Make any row "fluid" by changing .row to .row-fluid. The column classes stay the exact same, making it easy to flip between fixed and fluid grids.

-
-<div class="row-fluid">
-  <div class="span4">...</div>
-  <div class="span8">...</div>
-</div>
-
- -

Fluid offsetting

-

Operates the same way as the fixed grid system offsetting: add .offset* to any column to offset by that many columns.

-
-
-
4
-
4 offset 4
-
-
-
3 offset 3
-
3 offset 3
-
-
-
6 offset 6
-
-
-
-<div class="row-fluid">
-  <div class="span4">...</div>
-  <div class="span4 offset2">...</div>
-</div>
-
- -

Fluid nesting

-

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.

-
-
- Fluid 12 -
-
- Fluid 6 -
-
- Fluid 6 -
-
-
-
-
-<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>
-
diff --git a/docs/templates/pages/scaffolding.mustache b/docs/templates/pages/scaffolding.mustache index 3fb7841b13..f687739b38 100644 --- a/docs/templates/pages/scaffolding.mustache +++ b/docs/templates/pages/scaffolding.mustache @@ -16,7 +16,6 @@ @@ -79,18 +78,21 @@
1
1
1
-
-
-
2
-
3
-
4
+
1
+
1
+
1
4
-
5
+
4
+
4
-
9
+
6
+
6
+
+
+
12
@@ -109,33 +111,34 @@
4
-
3 offset 2
+
4 offset 4
-
3 offset 1
-
3 offset 2
+
3 offset 3
+
3 offset 3
-
6 offset 3
+
6 offset 6
 <div class="row">
   <div class="span4">...</div>
-  <div class="span3 offset2">...</div>
+  <div class="span4 offset4">...</div>
 </div>
+

{{_i}}Nesting columns{{/i}}

{{_i}}To nest your content with the default grid, add a new .row and set of .span* columns within an existing .span* column. Nested rows should include a set of columns that add up to the number of columns of its parent.{{/i}}

-
+
{{_i}}Level 1 of column{{/i}}
{{_i}}Level 2{{/i}}
-
+
{{_i}}Level 2{{/i}}
@@ -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> - - - - - - -
-
-

{{_i}}Fluid grid system{{/i}}

-
- -

{{_i}}Live fluid grid example{{/i}}

-

{{_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}}

-
-
-
1
-
1
-
1
-
1
-
1
-
1
-
1
-
1
-
1
-
1
-
1
-
1
-
-
-
4
-
4
-
4
-
-
-
4
-
8
-
-
-
6
-
6
-
-
-
12
-
-
- -

{{_i}}Basic fluid grid HTML{{/i}}

-

{{_i}}Make any row "fluid" by changing .row to .row-fluid. The column classes stay the exact same, making it easy to flip between fixed and fluid grids.{{/i}}

-
-<div class="row-fluid">
-  <div class="span4">...</div>
-  <div class="span8">...</div>
-</div>
-
- -

{{_i}}Fluid offsetting{{/i}}

-

{{_i}}Operates the same way as the fixed grid system offsetting: add .offset* to any column to offset by that many columns.{{/i}}

-
-
-
4
-
4 offset 4
-
-
-
3 offset 3
-
3 offset 3
-
-
-
6 offset 6
-
-
-
-<div class="row-fluid">
-  <div class="span4">...</div>
-  <div class="span4 offset2">...</div>
-</div>
-
- -

{{_i}}Fluid nesting{{/i}}

-

{{_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}}

-
-
- {{_i}}Fluid 12{{/i}} -
-
- {{_i}}Fluid 6{{/i}} -
-
- {{_i}}Fluid 6{{/i}} -
-
-
-
-
-<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>
-
diff --git a/less/forms.less b/less/forms.less index 17fbaf857b..e1af6766a1 100644 --- a/less/forms.less +++ b/less/forms.less @@ -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 diff --git a/less/grid.less b/less/grid.less index 750d203514..cab62ce5b1 100644 --- a/less/grid.less +++ b/less/grid.less @@ -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, diff --git a/less/mixins.less b/less/mixins.less index 0aba0be63c..3da17ffe6c 100644 --- a/less/mixins.less +++ b/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); - - } - } diff --git a/less/responsive-1200px-min.less b/less/responsive-1200px-min.less index 4f35ba6ca2..8b909b8cdb 100644 --- a/less/responsive-1200px-min.less +++ b/less/responsive-1200px-min.less @@ -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; - } } diff --git a/less/responsive-768px-979px.less b/less/responsive-768px-979px.less index 8e8c486a06..09636ccdb0 100644 --- a/less/responsive-768px-979px.less +++ b/less/responsive-768px-979px.less @@ -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); } diff --git a/less/variables.less b/less/variables.less index 7d6efe0050..82871de1ac 100644 --- a/less/variables.less +++ b/less/variables.less @@ -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);