diff --git a/docs/assets/css/bootstrap-responsive.css b/docs/assets/css/bootstrap-responsive.css index fcc4967600c56ccb9ad296e0817eeeb644a641ea..9b8a2e41e92cec9bd33e82fce5a7a1cca292d66e 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; + padding-right: 15px; + padding-left: 15px; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; } .span12 { - width: 1170px; + width: 100%; } .span11 { - width: 1070px; + width: 91.66666666666666%; } .span10 { - width: 970px; + width: 83.33333333333334%; } .span9 { - width: 870px; + width: 75%; } .span8 { - width: 770px; + width: 66.66666666666666%; } .span7 { - width: 670px; + width: 58.333333333333336%; } .span6 { - width: 570px; + width: 50%; } .span5 { - width: 470px; + width: 41.66666666666667%; } .span4 { - width: 370px; + width: 33.33333333333333%; } .span3 { - width: 270px; + width: 25%; } .span2 { - width: 170px; + width: 16.666666666666664%; } .span1 { - width: 70px; + width: 8.333333333333332%; } .offset12 { - margin-left: 1230px; + margin-left: 100%; } .offset11 { - margin-left: 1130px; + margin-left: 91.66666666666666%; } .offset10 { - margin-left: 1030px; + margin-left: 83.33333333333334%; } .offset9 { - margin-left: 930px; + margin-left: 75%; } .offset8 { - margin-left: 830px; + margin-left: 66.66666666666666%; } .offset7 { - margin-left: 730px; + margin-left: 58.333333333333336%; } .offset6 { - margin-left: 630px; + margin-left: 50%; } .offset5 { - margin-left: 530px; + margin-left: 41.66666666666667%; } .offset4 { - margin-left: 430px; + margin-left: 33.33333333333333%; } .offset3 { - margin-left: 330px; + margin-left: 25%; } .offset2 { - margin-left: 230px; + margin-left: 16.666666666666664%; } .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%; - -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 { - width: 100%; - *width: 99.94680851063829%; - } - .row-fluid .span11 { - width: 91.45299145299145%; - *width: 91.39979996362975%; - } - .row-fluid .span10 { - width: 82.90598290598291%; - *width: 82.8527914166212%; - } - .row-fluid .span9 { - width: 74.35897435897436%; - *width: 74.30578286961266%; - } - .row-fluid .span8 { - width: 65.81196581196582%; - *width: 65.75877432260411%; - } - .row-fluid .span7 { - width: 57.26495726495726%; - *width: 57.21176577559556%; - } - .row-fluid .span6 { - width: 48.717948717948715%; - *width: 48.664757228587014%; - } - .row-fluid .span5 { - width: 40.17094017094017%; - *width: 40.11774868157847%; - } - .row-fluid .span4 { - width: 31.623931623931625%; - *width: 31.570740134569924%; - } - .row-fluid .span3 { - width: 23.076923076923077%; - *width: 23.023731587561375%; - } - .row-fluid .span2 { - width: 14.52991452991453%; - *width: 14.476723040552828%; - } - .row-fluid .span1 { - width: 5.982905982905983%; - *width: 5.929714493544281%; - } - .row-fluid .offset12 { - margin-left: 105.12820512820512%; - *margin-left: 105.02182214948171%; - } - .row-fluid .offset12:first-child { - margin-left: 102.56410256410257%; - *margin-left: 102.45771958537915%; - } - .row-fluid .offset11 { - margin-left: 96.58119658119658%; - *margin-left: 96.47481360247316%; - } - .row-fluid .offset11:first-child { - margin-left: 94.01709401709402%; - *margin-left: 93.91071103837061%; - } - .row-fluid .offset10 { - margin-left: 88.03418803418803%; - *margin-left: 87.92780505546462%; - } - .row-fluid .offset10:first-child { - margin-left: 85.47008547008548%; - *margin-left: 85.36370249136206%; - } - .row-fluid .offset9 { - margin-left: 79.48717948717949%; - *margin-left: 79.38079650845607%; - } - .row-fluid .offset9:first-child { - margin-left: 76.92307692307693%; - *margin-left: 76.81669394435352%; - } - .row-fluid .offset8 { - margin-left: 70.94017094017094%; - *margin-left: 70.83378796144753%; - } - .row-fluid .offset8:first-child { - margin-left: 68.37606837606839%; - *margin-left: 68.26968539734497%; - } - .row-fluid .offset7 { - margin-left: 62.393162393162385%; - *margin-left: 62.28677941443899%; - } - .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; + 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; + padding-right: 10px; + padding-left: 10px; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; } .span12 { - width: 724px; + width: 100%; } .span11 { - width: 662px; + width: 91.66666666666666%; } .span10 { - width: 600px; + width: 83.33333333333334%; } .span9 { - width: 538px; + width: 75%; } .span8 { - width: 476px; + width: 66.66666666666666%; } .span7 { - width: 414px; + width: 58.333333333333336%; } .span6 { - width: 352px; + width: 50%; } .span5 { - width: 290px; + width: 41.66666666666667%; } .span4 { - width: 228px; + width: 33.33333333333333%; } .span3 { - width: 166px; + width: 25%; } .span2 { - width: 104px; + width: 16.666666666666664%; } .span1 { - width: 42px; + width: 8.333333333333332%; } .offset12 { - margin-left: 764px; + margin-left: 100%; } .offset11 { - margin-left: 702px; + margin-left: 91.66666666666666%; } .offset10 { - margin-left: 640px; + margin-left: 83.33333333333334%; } .offset9 { - margin-left: 578px; + margin-left: 75%; } .offset8 { - margin-left: 516px; + margin-left: 66.66666666666666%; } .offset7 { - margin-left: 454px; + margin-left: 58.333333333333336%; } .offset6 { - margin-left: 392px; + margin-left: 50%; } .offset5 { - margin-left: 330px; + margin-left: 41.66666666666667%; } .offset4 { - margin-left: 268px; + margin-left: 33.33333333333333%; } .offset3 { - margin-left: 206px; + margin-left: 25%; } .offset2 { - margin-left: 144px; + margin-left: 16.666666666666664%; } .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%; - -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 { - width: 100%; - *width: 99.94680851063829%; - } - .row-fluid .span11 { - width: 91.43646408839778%; - *width: 91.38327259903608%; - } - .row-fluid .span10 { - width: 82.87292817679558%; - *width: 82.81973668743387%; - } - .row-fluid .span9 { - width: 74.30939226519337%; - *width: 74.25620077583166%; - } - .row-fluid .span8 { - width: 65.74585635359117%; - *width: 65.69266486422946%; - } - .row-fluid .span7 { - width: 57.18232044198895%; - *width: 57.12912895262725%; - } - .row-fluid .span6 { - width: 48.61878453038674%; - *width: 48.56559304102504%; - } - .row-fluid .span5 { - width: 40.05524861878453%; - *width: 40.00205712942283%; - } - .row-fluid .span4 { - width: 31.491712707182323%; - *width: 31.43852121782062%; - } - .row-fluid .span3 { - width: 22.92817679558011%; - *width: 22.87498530621841%; - } - .row-fluid .span2 { - width: 14.3646408839779%; - *width: 14.311449394616199%; - } - .row-fluid .span1 { - width: 5.801104972375691%; - *width: 5.747913483013988%; - } - .row-fluid .offset12 { - margin-left: 105.52486187845304%; - *margin-left: 105.41847889972962%; - } - .row-fluid .offset12:first-child { - margin-left: 102.76243093922652%; - *margin-left: 102.6560479605031%; - } - .row-fluid .offset11 { - margin-left: 96.96132596685082%; - *margin-left: 96.8549429881274%; - } - .row-fluid .offset11:first-child { - margin-left: 94.1988950276243%; - *margin-left: 94.09251204890089%; - } - .row-fluid .offset10 { - margin-left: 88.39779005524862%; - *margin-left: 88.2914070765252%; - } - .row-fluid .offset10:first-child { - margin-left: 85.6353591160221%; - *margin-left: 85.52897613729868%; - } - .row-fluid .offset9 { - margin-left: 79.8342541436464%; - *margin-left: 79.72787116492299%; - } - .row-fluid .offset9:first-child { - margin-left: 77.07182320441989%; - *margin-left: 76.96544022569647%; - } - .row-fluid .offset8 { - margin-left: 71.2707182320442%; - *margin-left: 71.16433525332079%; - } - .row-fluid .offset8:first-child { - margin-left: 68.50828729281768%; - *margin-left: 68.40190431409427%; - } - .row-fluid .offset7 { - margin-left: 62.70718232044199%; - *margin-left: 62.600799341718584%; - } - .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; + margin-left: 8.333333333333332%; } } diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css index b863b1266dd9add0fdf82c0d3eae2bf52e35cd46..b3adee6662b15ecfe1e781afcaad6851bf80dd28 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; + padding-right: 10px; + padding-left: 10px; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; } .span12 { - width: 940px; + width: 100%; } .span11 { - width: 860px; + width: 91.66666666666666%; } .span10 { - width: 780px; + width: 83.33333333333334%; } .span9 { - width: 700px; + width: 75%; } .span8 { - width: 620px; + width: 66.66666666666666%; } .span7 { - width: 540px; + width: 58.333333333333336%; } .span6 { - width: 460px; + width: 50%; } .span5 { - width: 380px; + width: 41.66666666666667%; } .span4 { - width: 300px; + width: 33.33333333333333%; } .span3 { - width: 220px; + width: 25%; } .span2 { - width: 140px; + width: 16.666666666666664%; } .span1 { - width: 60px; + width: 8.333333333333332%; } .offset12 { - margin-left: 980px; + margin-left: 100%; } .offset11 { - margin-left: 900px; + margin-left: 91.66666666666666%; } .offset10 { - margin-left: 820px; + margin-left: 83.33333333333334%; } .offset9 { - margin-left: 740px; + margin-left: 75%; } .offset8 { - margin-left: 660px; + margin-left: 66.66666666666666%; } .offset7 { - margin-left: 580px; + margin-left: 58.333333333333336%; } .offset6 { - margin-left: 500px; + margin-left: 50%; } .offset5 { - margin-left: 420px; + margin-left: 41.66666666666667%; } .offset4 { - margin-left: 340px; + margin-left: 33.33333333333333%; } .offset3 { - margin-left: 260px; + margin-left: 25%; } .offset2 { - margin-left: 180px; + margin-left: 16.666666666666664%; } .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%; - -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 { - width: 100%; - *width: 99.94680851063829%; -} - -.row-fluid .span11 { - width: 91.48936170212765%; - *width: 91.43617021276594%; -} - -.row-fluid .span10 { - width: 82.97872340425532%; - *width: 82.92553191489361%; -} - -.row-fluid .span9 { - width: 74.46808510638297%; - *width: 74.41489361702126%; -} - -.row-fluid .span8 { - width: 65.95744680851064%; - *width: 65.90425531914893%; -} - -.row-fluid .span7 { - width: 57.44680851063829%; - *width: 57.39361702127659%; -} - -.row-fluid .span6 { - width: 48.93617021276595%; - *width: 48.88297872340425%; -} - -.row-fluid .span5 { - width: 40.42553191489362%; - *width: 40.37234042553192%; -} - -.row-fluid .span4 { - width: 31.914893617021278%; - *width: 31.861702127659576%; -} - -.row-fluid .span3 { - width: 23.404255319148934%; - *width: 23.351063829787233%; -} - -.row-fluid .span2 { - width: 14.893617021276595%; - *width: 14.840425531914894%; -} - -.row-fluid .span1 { - width: 6.382978723404255%; - *width: 6.329787234042553%; -} - -.row-fluid .offset12 { - margin-left: 104.25531914893617%; - *margin-left: 104.14893617021275%; -} - -.row-fluid .offset12:first-child { - margin-left: 102.12765957446808%; - *margin-left: 102.02127659574467%; -} - -.row-fluid .offset11 { - margin-left: 95.74468085106382%; - *margin-left: 95.6382978723404%; -} - -.row-fluid .offset11:first-child { - margin-left: 93.61702127659574%; - *margin-left: 93.51063829787232%; -} - -.row-fluid .offset10 { - margin-left: 87.23404255319149%; - *margin-left: 87.12765957446807%; -} - -.row-fluid .offset10:first-child { - margin-left: 85.1063829787234%; - *margin-left: 84.99999999999999%; -} - -.row-fluid .offset9 { - margin-left: 78.72340425531914%; - *margin-left: 78.61702127659572%; -} - -.row-fluid .offset9:first-child { - margin-left: 76.59574468085106%; - *margin-left: 76.48936170212764%; -} - -.row-fluid .offset8 { - margin-left: 70.2127659574468%; - *margin-left: 70.10638297872339%; -} - -.row-fluid .offset8:first-child { - margin-left: 68.08510638297872%; - *margin-left: 67.9787234042553%; -} - -.row-fluid .offset7 { - margin-left: 61.70212765957446%; - *margin-left: 61.59574468085106%; -} - -.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%; + 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 a78b1b5b47216e369b746a29a821ca0a9ca9bcdb..08d0dceb85074d86fd182a4b6cece1576eea61ae 100644 --- a/docs/scaffolding.html +++ b/docs/scaffolding.html @@ -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 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="span4">4</div> <div class="span4">4</div> </div> <div class="row show-grid"> - <div class="span4">4</div> - <div class="span5">5</div> + <div class="span6">6</div> + <div class="span6">6</div> </div> <div class="row show-grid"> - <div class="span9">9</div> + <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> diff --git a/docs/templates/pages/scaffolding.mustache b/docs/templates/pages/scaffolding.mustache index 3fb7841b1350b24da73c13082803ccf7a9ef3580..f687739b38372b02f1f11e95983303a72de7b50b 100644 --- a/docs/templates/pages/scaffolding.mustache +++ b/docs/templates/pages/scaffolding.mustache @@ -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 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="span4">4</div> <div class="span4">4</div> </div> <div class="row show-grid"> - <div class="span4">4</div> - <div class="span5">5</div> + <div class="span6">6</div> + <div class="span6">6</div> </div> <div class="row show-grid"> - <div class="span9">9</div> + <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> diff --git a/less/forms.less b/less/forms.less index 17fbaf857b31ae88c7ae5c7e6e3707a313e97a16..e1af6766a17d32b80458a59594b521c8150b94d2 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 750d20351498f75e2f3dec9e588bbcbc91645bb6..cab62ce5b115b53105059864495353246616bd5f 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 0aba0be63c03a3b5529aa133b755e6b9d12ecda7..3da17ffe6c8f91ede90cc983408240f352544671 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 4f35ba6ca23c34b892bec83977277b0d5043ea0b..8b909b8cdb2789f4a3d017520acdd0f4e73fb742 100644 --- a/less/responsive-1200px-min.less +++ b/less/responsive-1200px-min.less @@ -5,14 +5,15 @@ @media (min-width: 1200px) { - // Fixed grid - #grid > .core(@gridColumnWidth1200, @gridGutterWidth1200); - - // Fluid grid - #grid > .fluid(@fluidGridColumnWidth1200, @fluidGridGutterWidth1200); + // Set the container width, and override it for fixed navbars in media queries + .container, + .navbar-fixed-top .container, + .navbar-fixed-bottom .container { + width: 1170px; + } - // Input grid - #grid > .input(@gridColumnWidth1200, @gridGutterWidth1200); + // Fixed grid + #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 8e8c486a069d8b2c393f605162d1d76b9d7fd0fd..09636ccdb053bd6e5f73acbdd7a3d8875c6ee3bf 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 7d6efe00506a47f1fe81d6c468e359766b849679..82871de1ace83268c2fc1edaffef7dd71aa842f2 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);