From: Mark Otto Date: Tue, 28 Aug 2012 20:33:06 +0000 (-0700) Subject: remake the box-size grid, nuke fluid grid docs, fix up examples, clean up form styles X-Git-Tag: v3.0.0-rc1~953 X-Git-Url: http://git.ipfire.org/gitweb.cgi?a=commitdiff_plain;h=0b122bc5c526724992036a8e286079188ade3b10;p=thirdparty%2Fbootstrap.git remake the box-size grid, nuke fluid grid docs, fix up examples, clean up form styles --- 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; + 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 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; + 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 a78b1b5b47..08d0dceb85 100644 --- a/docs/scaffolding.html +++ b/docs/scaffolding.html @@ -87,7 +87,6 @@ @@ -150,18 +149,21 @@
1
1
1
+
1
+
1
+
1
-
2
-
3
+
4
+
4
4
-
4
-
5
+
6
+
6
-
9
+
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
+
1
+
1
+
1
-
2
-
3
+
4
+
4
4
-
4
-
5
+
6
+
6
-
9
+
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) { - // 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 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);