rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-03-15 15:29:22 +01:00
Code Issues Actions Packages Releases Activity

Merge branch '1.3-wip' of github.com:twitter/bootstrap into 1.3-wip

Browse Source
This commit is contained in:
Jacob Thornton 2011-09-11 20:09:20 -07:00
commit e255b4f51d
7 changed files with 339 additions and 209 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

169
bootstrap-1.3.0.css vendored
View File

@ -6,7 +6,7 @@
* http://www.apache.org/licenses/LICENSE-2.0 * http://www.apache.org/licenses/LICENSE-2.0
* *
* Designed and built with all the love in the world @twitter by @mdo and @fat. * Designed and built with all the love in the world @twitter by @mdo and @fat.
* Date: Sat Sep 10 22:46:48 PDT 2011 * Date: Sun Sep 11 19:59:57 PDT 2011
*/ */
/* Reset.less /* Reset.less
* Props to Eric Meyer (meyerweb.com) for his CSS reset file. We're using an adapted version here that cuts out some of the reset HTML elements we will never need here (i.e., dfn, samp, etc). * Props to Eric Meyer (meyerweb.com) for his CSS reset file. We're using an adapted version here that cuts out some of the reset HTML elements we will never need here (i.e., dfn, samp, etc).
@ -374,129 +374,129 @@ a:hover {
.row:after { .row:after {
clear: both; clear: both;
} }
.row [class*="span"] { [class*="span"] {
display: inline; display: inline;
float: left; float: left;
margin-left: 20px; margin-left: 20px;
} }
.row .span1 { .span1 {
width: 40px; width: 40px;
} }
.row .span2 { .span2 {
width: 100px; width: 100px;
} }
.row .span3 { .span3 {
width: 160px; width: 160px;
} }
.row .span4 { .span4 {
width: 220px; width: 220px;
} }
.row .span5 { .span5 {
width: 280px; width: 280px;
} }
.row .span6 { .span6 {
width: 340px; width: 340px;
} }
.row .span7 { .span7 {
width: 400px; width: 400px;
} }
.row .span8 { .span8 {
width: 460px; width: 460px;
} }
.row .span9 { .span9 {
width: 520px; width: 520px;
} }
.row .span10 { .span10 {
width: 580px; width: 580px;
} }
.row .span11 { .span11 {
width: 640px; width: 640px;
} }
.row .span12 { .span12 {
width: 700px; width: 700px;
} }
.row .span13 { .span13 {
width: 760px; width: 760px;
} }
.row .span14 { .span14 {
width: 820px; width: 820px;
} }
.row .span15 { .span15 {
width: 880px; width: 880px;
} }
.row .span16 { .span16 {
width: 940px; width: 940px;
} }
.row .span17 { .span17 {
width: 1000px; width: 1000px;
} }
.row .span18 { .span18 {
width: 1060px; width: 1060px;
} }
.row .span19 { .span19 {
width: 1120px; width: 1120px;
} }
.row .span20 { .span20 {
width: 1180px; width: 1180px;
} }
.row .span21 { .span21 {
width: 1240px; width: 1240px;
} }
.row .span22 { .span22 {
width: 1300px; width: 1300px;
} }
.row .span23 { .span23 {
width: 1360px; width: 1360px;
} }
.row .span24 { .span24 {
width: 1420px; width: 1420px;
} }
.row .offset1 { .offset1 {
margin-left: 80px; margin-left: 80px;
} }
.row .offset2 { .offset2 {
margin-left: 140px; margin-left: 140px;
} }
.row .offset3 { .offset3 {
margin-left: 200px; margin-left: 200px;
} }
.row .offset4 { .offset4 {
margin-left: 260px; margin-left: 260px;
} }
.row .offset5 { .offset5 {
margin-left: 320px; margin-left: 320px;
} }
.row .offset6 { .offset6 {
margin-left: 380px; margin-left: 380px;
} }
.row .offset7 { .offset7 {
margin-left: 440px; margin-left: 440px;
} }
.row .offset8 { .offset8 {
margin-left: 500px; margin-left: 500px;
} }
.row .offset9 { .offset9 {
margin-left: 560px; margin-left: 560px;
} }
.row .offset10 { .offset10 {
margin-left: 620px; margin-left: 620px;
} }
.row .offset11 { .offset11 {
margin-left: 680px; margin-left: 680px;
} }
.row .offset12 { .offset12 {
margin-left: 740px; margin-left: 740px;
} }
.row .span-one-third { .span-one-third {
width: 300px; width: 300px;
} }
.row .span-two-thirds { .span-two-thirds {
width: 620px; width: 620px;
} }
.row .offset-one-third { .offset-one-third {
margin-left: 340px; margin-left: 340px;
} }
.row .offset-two-thirds { .offset-two-thirds {
margin-left: 660px; margin-left: 660px;
} }
/* Typography.less /* Typography.less
@ -692,13 +692,13 @@ fieldset legend {
padding-left: 150px; padding-left: 150px;
font-size: 19.5px; font-size: 19.5px;
line-height: 1; line-height: 1;
*margin: 0 0 5px 145px; color: #404040;
*padding: 0 0 5px 145px;
/* IE6-7 */ /* IE6-7 */
*line-height: 1.5; *line-height: 1.5;
/* IE6-7 */ /* IE6-7 */
color: #404040;
} }
form .clearfix { form .clearfix {
margin-bottom: 18px; margin-bottom: 18px;
@ -771,6 +771,9 @@ input[type=button], input[type=reset], input[type=submit] {
select, input[type=file] { select, input[type=file] {
height: 27px; height: 27px;
line-height: 27px; line-height: 27px;
*margin-top: 4px;
/* For IE7, add top margin to align select with labels */
} }
textarea { textarea {
height: auto; height: auto;
@ -880,6 +883,70 @@ select.xxlarge {
textarea.xxlarge { textarea.xxlarge {
overflow-y: auto; overflow-y: auto;
} }
input.span1, textarea.span1, select.span1 {
width: 30px;
margin-left: 0;
}
input.span2, textarea.span2, select.span2 {
width: 90px;
margin-left: 0;
}
input.span3, textarea.span3, select.span3 {
width: 150px;
margin-left: 0;
}
input.span4, textarea.span4, select.span4 {
width: 210px;
margin-left: 0;
}
input.span5, textarea.span5, select.span5 {
width: 270px;
margin-left: 0;
}
input.span6, textarea.span6, select.span6 {
width: 330px;
margin-left: 0;
}
input.span7, textarea.span7, select.span7 {
width: 390px;
margin-left: 0;
}
input.span8, textarea.span8, select.span8 {
width: 450px;
margin-left: 0;
}
input.span9, textarea.span9, select.span9 {
width: 510px;
margin-left: 0;
}
input.span10, textarea.span10, select.span10 {
width: 570px;
margin-left: 0;
}
input.span11, textarea.span11, select.span11 {
width: 630px;
margin-left: 0;
}
input.span12, textarea.span12, select.span12 {
width: 690px;
margin-left: 0;
}
input.span13, textarea.span13, select.span13 {
width: 750px;
margin-left: 0;
}
input.span14, textarea.span14, select.span14 {
width: 810px;
margin-left: 0;
}
input.span15, textarea.span15, select.span15 {
width: 870px;
margin-left: 0;
}
input.span16, textarea.span16, select.span16 {
width: 930px;
margin-left: 0;
}
input[disabled], input[disabled],
select[disabled], select[disabled],
textarea[disabled], textarea[disabled],
@ -1237,10 +1304,10 @@ table .headerSortUp.purple, table .headerSortDown.purple {
color: #ffffff; color: #ffffff;
text-decoration: none; text-decoration: none;
} }
.topbar .brand, .topbar h3 { .topbar h3 {
position: relative; position: relative;
} }
.topbar .brand a, .topbar h3 a { .topbar h3 a, .topbar .brand {
float: left; float: left;
display: block; display: block;
padding: 8px 20px 12px; padding: 8px 20px 12px;
@ -2252,7 +2319,7 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner {
.media-grid li { .media-grid li {
display: inline; display: inline;
} }
.media-grid .thumbnail { .media-grid a {
float: left; float: left;
padding: 4px; padding: 4px;
margin: 0 0 20px 20px; margin: 0 0 20px 20px;
@ -2264,12 +2331,12 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner {
-moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075); -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075);
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075); box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075);
} }
.media-grid .thumbnail:hover { .media-grid a img {
display: block;
}
.media-grid a:hover {
border-color: #0069d6; border-color: #0069d6;
-webkit-box-shadow: 0 1px 4px rgba(0, 105, 214, 0.25); -webkit-box-shadow: 0 1px 4px rgba(0, 105, 214, 0.25);
-moz-box-shadow: 0 1px 4px rgba(0, 105, 214, 0.25); -moz-box-shadow: 0 1px 4px rgba(0, 105, 214, 0.25);
box-shadow: 0 1px 4px rgba(0, 105, 214, 0.25); box-shadow: 0 1px 4px rgba(0, 105, 214, 0.25);
} }
.media-grid img {
display: block;
}

109
bootstrap-1.3.0.min.css vendored
View File

@ -42,47 +42,47 @@ a{color:#0069d6;text-decoration:none;line-height:inherit;font-weight:inherit;}a:
.pull-left{float:left;} .pull-left{float:left;}
.row{zoom:1;margin-left:-20px;}.row:before,.row:after{display:table;content:"";zoom:1;*display:inline;} .row{zoom:1;margin-left:-20px;}.row:before,.row:after{display:table;content:"";zoom:1;*display:inline;}
.row:after{clear:both;} .row:after{clear:both;}
.row [class*="span"]{display:inline;float:left;margin-left:20px;} [class*="span"]{display:inline;float:left;margin-left:20px;}
.row .span1{width:40px;} .span1{width:40px;}
.row .span2{width:100px;} .span2{width:100px;}
.row .span3{width:160px;} .span3{width:160px;}
.row .span4{width:220px;} .span4{width:220px;}
.row .span5{width:280px;} .span5{width:280px;}
.row .span6{width:340px;} .span6{width:340px;}
.row .span7{width:400px;} .span7{width:400px;}
.row .span8{width:460px;} .span8{width:460px;}
.row .span9{width:520px;} .span9{width:520px;}
.row .span10{width:580px;} .span10{width:580px;}
.row .span11{width:640px;} .span11{width:640px;}
.row .span12{width:700px;} .span12{width:700px;}
.row .span13{width:760px;} .span13{width:760px;}
.row .span14{width:820px;} .span14{width:820px;}
.row .span15{width:880px;} .span15{width:880px;}
.row .span16{width:940px;} .span16{width:940px;}
.row .span17{width:1000px;} .span17{width:1000px;}
.row .span18{width:1060px;} .span18{width:1060px;}
.row .span19{width:1120px;} .span19{width:1120px;}
.row .span20{width:1180px;} .span20{width:1180px;}
.row .span21{width:1240px;} .span21{width:1240px;}
.row .span22{width:1300px;} .span22{width:1300px;}
.row .span23{width:1360px;} .span23{width:1360px;}
.row .span24{width:1420px;} .span24{width:1420px;}
.row .offset1{margin-left:80px;} .offset1{margin-left:80px;}
.row .offset2{margin-left:140px;} .offset2{margin-left:140px;}
.row .offset3{margin-left:200px;} .offset3{margin-left:200px;}
.row .offset4{margin-left:260px;} .offset4{margin-left:260px;}
.row .offset5{margin-left:320px;} .offset5{margin-left:320px;}
.row .offset6{margin-left:380px;} .offset6{margin-left:380px;}
.row .offset7{margin-left:440px;} .offset7{margin-left:440px;}
.row .offset8{margin-left:500px;} .offset8{margin-left:500px;}
.row .offset9{margin-left:560px;} .offset9{margin-left:560px;}
.row .offset10{margin-left:620px;} .offset10{margin-left:620px;}
.row .offset11{margin-left:680px;} .offset11{margin-left:680px;}
.row .offset12{margin-left:740px;} .offset12{margin-left:740px;}
.row .span-one-third{width:300px;} .span-one-third{width:300px;}
.row .span-two-thirds{width:620px;} .span-two-thirds{width:620px;}
.row .offset-one-third{margin-left:340px;} .offset-one-third{margin-left:340px;}
.row .offset-two-thirds{margin-left:660px;} .offset-two-thirds{margin-left:660px;}
p{font-size:13px;font-weight:normal;line-height:18px;margin-bottom:9px;}p small{font-size:11px;color:#bfbfbf;} p{font-size:13px;font-weight:normal;line-height:18px;margin-bottom:9px;}p small{font-size:11px;color:#bfbfbf;}
h1,h2,h3,h4,h5,h6{font-weight:bold;color:#404040;}h1 small,h2 small,h3 small,h4 small,h5 small,h6 small{color:#bfbfbf;} h1,h2,h3,h4,h5,h6{font-weight:bold;color:#404040;}h1 small,h2 small,h3 small,h4 small,h5 small,h6 small{color:#bfbfbf;}
h1{margin-bottom:18px;font-size:30px;line-height:36px;}h1 small{font-size:18px;} h1{margin-bottom:18px;font-size:30px;line-height:36px;}h1 small{font-size:18px;}
@ -112,7 +112,7 @@ code,pre{padding:0 3px 2px;font-family:Monaco, Andale Mono, Courier New, monospa
code{background-color:#fee9cc;color:rgba(0, 0, 0, 0.75);padding:1px 3px;} code{background-color:#fee9cc;color:rgba(0, 0, 0, 0.75);padding:1px 3px;}
pre{background-color:#f5f5f5;display:block;padding:8.5px;margin:0 0 18px;line-height:18px;font-size:12px;border:1px solid #ccc;border:1px solid rgba(0, 0, 0, 0.15);-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;white-space:pre;white-space:pre-wrap;word-wrap:break-word;} pre{background-color:#f5f5f5;display:block;padding:8.5px;margin:0 0 18px;line-height:18px;font-size:12px;border:1px solid #ccc;border:1px solid rgba(0, 0, 0, 0.15);-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;white-space:pre;white-space:pre-wrap;word-wrap:break-word;}
form{margin-bottom:18px;} form{margin-bottom:18px;}
fieldset{margin-bottom:18px;padding-top:18px;}fieldset legend{display:block;padding-left:150px;font-size:19.5px;line-height:1;*margin:0 0 5px 145px;*line-height:1.5;color:#404040;} fieldset{margin-bottom:18px;padding-top:18px;}fieldset legend{display:block;padding-left:150px;font-size:19.5px;line-height:1;color:#404040;*padding:0 0 5px 145px;*line-height:1.5;}
form .clearfix{margin-bottom:18px;} form .clearfix{margin-bottom:18px;}
label,input,select,textarea{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:13px;font-weight:normal;line-height:normal;} label,input,select,textarea{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:13px;font-weight:normal;line-height:normal;}
label{padding-top:6px;font-size:13px;line-height:18px;float:left;width:130px;text-align:right;color:#404040;} label{padding-top:6px;font-size:13px;line-height:18px;float:left;width:130px;text-align:right;color:#404040;}
@ -122,7 +122,7 @@ input,textarea,select,.uneditable-input{display:inline-block;width:210px;height:
input[type=checkbox],input[type=radio]{width:auto;height:auto;padding:0;margin:3px 0;*margin-top:0;line-height:normal;border:none;} input[type=checkbox],input[type=radio]{width:auto;height:auto;padding:0;margin:3px 0;*margin-top:0;line-height:normal;border:none;}
input[type=file]{background-color:#fff;padding:initial;border:initial;line-height:initial;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;} input[type=file]{background-color:#fff;padding:initial;border:initial;line-height:initial;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;}
input[type=button],input[type=reset],input[type=submit]{width:auto;height:auto;} input[type=button],input[type=reset],input[type=submit]{width:auto;height:auto;}
select,input[type=file]{height:27px;line-height:27px;} select,input[type=file]{height:27px;line-height:27px;*margin-top:4px;}
textarea{height:auto;} textarea{height:auto;}
.uneditable-input{background-color:#fff;display:block;border-color:#eee;-webkit-box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.025);-moz-box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.025);box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.025);cursor:not-allowed;} .uneditable-input{background-color:#fff;display:block;border-color:#eee;-webkit-box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.025);-moz-box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.025);box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.025);cursor:not-allowed;}
:-moz-placeholder{color:#bfbfbf;} :-moz-placeholder{color:#bfbfbf;}
@ -140,6 +140,22 @@ form div.error .input-prepend span.add-on,form div.error .input-append span.add-
.input-xlarge,input.xlarge,textarea.xlarge,select.xlarge{width:270px;} .input-xlarge,input.xlarge,textarea.xlarge,select.xlarge{width:270px;}
.input-xxlarge,input.xxlarge,textarea.xxlarge,select.xxlarge{width:530px;} .input-xxlarge,input.xxlarge,textarea.xxlarge,select.xxlarge{width:530px;}
textarea.xxlarge{overflow-y:auto;} textarea.xxlarge{overflow-y:auto;}
input.span1,textarea.span1,select.span1{width:30px;margin-left:0;}
input.span2,textarea.span2,select.span2{width:90px;margin-left:0;}
input.span3,textarea.span3,select.span3{width:150px;margin-left:0;}
input.span4,textarea.span4,select.span4{width:210px;margin-left:0;}
input.span5,textarea.span5,select.span5{width:270px;margin-left:0;}
input.span6,textarea.span6,select.span6{width:330px;margin-left:0;}
input.span7,textarea.span7,select.span7{width:390px;margin-left:0;}
input.span8,textarea.span8,select.span8{width:450px;margin-left:0;}
input.span9,textarea.span9,select.span9{width:510px;margin-left:0;}
input.span10,textarea.span10,select.span10{width:570px;margin-left:0;}
input.span11,textarea.span11,select.span11{width:630px;margin-left:0;}
input.span12,textarea.span12,select.span12{width:690px;margin-left:0;}
input.span13,textarea.span13,select.span13{width:750px;margin-left:0;}
input.span14,textarea.span14,select.span14{width:810px;margin-left:0;}
input.span15,textarea.span15,select.span15{width:870px;margin-left:0;}
input.span16,textarea.span16,select.span16{width:930px;margin-left:0;}
input[disabled],select[disabled],textarea[disabled],input[readonly],select[readonly],textarea[readonly]{background-color:#f5f5f5;border-color:#ddd;cursor:not-allowed;} input[disabled],select[disabled],textarea[disabled],input[readonly],select[readonly],textarea[readonly]{background-color:#f5f5f5;border-color:#ddd;cursor:not-allowed;}
.actions{background:#f5f5f5;margin-top:18px;margin-bottom:18px;padding:17px 20px 18px 150px;border-top:1px solid #ddd;-webkit-border-radius:0 0 3px 3px;-moz-border-radius:0 0 3px 3px;border-radius:0 0 3px 3px;}.actions .secondary-action{float:right;}.actions .secondary-action a{line-height:30px;}.actions .secondary-action a:hover{text-decoration:underline;} .actions{background:#f5f5f5;margin-top:18px;margin-bottom:18px;padding:17px 20px 18px 150px;border-top:1px solid #ddd;-webkit-border-radius:0 0 3px 3px;-moz-border-radius:0 0 3px 3px;border-radius:0 0 3px 3px;}.actions .secondary-action{float:right;}.actions .secondary-action a{line-height:30px;}.actions .secondary-action a:hover{text-decoration:underline;}
.help-inline,.help-block{font-size:11px;line-height:18px;color:#bfbfbf;} .help-inline,.help-block{font-size:11px;line-height:18px;color:#bfbfbf;}
@ -199,7 +215,8 @@ table .purple{color:#7a43b6;border-bottom-color:#7a43b6;}
table .headerSortUp.purple,table .headerSortDown.purple{background-color:#e2d5f0;} table .headerSortUp.purple,table .headerSortDown.purple{background-color:#e2d5f0;}
.topbar{height:40px;position:fixed;top:0;left:0;right:0;z-index:10000;overflow:visible;}.topbar a{color:#bfbfbf;text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);} .topbar{height:40px;position:fixed;top:0;left:0;right:0;z-index:10000;overflow:visible;}.topbar a{color:#bfbfbf;text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);}
.topbar a:hover,.topbar ul .active>a{background-color:#333;background-color:rgba(255, 255, 255, 0.05);color:#ffffff;text-decoration:none;} .topbar a:hover,.topbar ul .active>a{background-color:#333;background-color:rgba(255, 255, 255, 0.05);color:#ffffff;text-decoration:none;}
.topbar .brand,.topbar h3{position:relative;}.topbar .brand a,.topbar h3 a{float:left;display:block;padding:8px 20px 12px;margin-left:-20px;color:#ffffff;font-size:20px;font-weight:200;line-height:1;} .topbar h3{position:relative;}
.topbar h3 a,.topbar .brand{float:left;display:block;padding:8px 20px 12px;margin-left:-20px;color:#ffffff;font-size:20px;font-weight:200;line-height:1;}
.topbar p{margin:0;line-height:40px;}.topbar p a:hover{background-color:transparent;} .topbar p{margin:0;line-height:40px;}.topbar p a:hover{background-color:transparent;}
.topbar form{float:left;margin:5px 0 0 0;position:relative;filter:alpha(opacity=100);-khtml-opacity:1;-moz-opacity:1;opacity:1;} .topbar form{float:left;margin:5px 0 0 0;position:relative;filter:alpha(opacity=100);-khtml-opacity:1;-moz-opacity:1;opacity:1;}
.topbar form.pull-right{float:right;} .topbar form.pull-right{float:right;}
@ -308,5 +325,5 @@ button.btn::-moz-focus-inner,input[type=submit].btn::-moz-focus-inner{padding:0;
.media-grid{margin-left:-20px;margin-bottom:0;zoom:1;}.media-grid:before,.media-grid:after{display:table;content:"";zoom:1;*display:inline;} .media-grid{margin-left:-20px;margin-bottom:0;zoom:1;}.media-grid:before,.media-grid:after{display:table;content:"";zoom:1;*display:inline;}
.media-grid:after{clear:both;} .media-grid:after{clear:both;}
.media-grid li{display:inline;} .media-grid li{display:inline;}
.media-grid .thumbnail{float:left;padding:4px;margin:0 0 20px 20px;border:1px solid #ddd;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-box-shadow:0 1px 1px rgba(0, 0, 0, 0.075);-moz-box-shadow:0 1px 1px rgba(0, 0, 0, 0.075);box-shadow:0 1px 1px rgba(0, 0, 0, 0.075);}.media-grid .thumbnail:hover{border-color:#0069d6;-webkit-box-shadow:0 1px 4px rgba(0, 105, 214, 0.25);-moz-box-shadow:0 1px 4px rgba(0, 105, 214, 0.25);box-shadow:0 1px 4px rgba(0, 105, 214, 0.25);} .media-grid a{float:left;padding:4px;margin:0 0 20px 20px;border:1px solid #ddd;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-box-shadow:0 1px 1px rgba(0, 0, 0, 0.075);-moz-box-shadow:0 1px 1px rgba(0, 0, 0, 0.075);box-shadow:0 1px 1px rgba(0, 0, 0, 0.075);}.media-grid a img{display:block;}
.media-grid img{display:block;} .media-grid a:hover{border-color:#0069d6;-webkit-box-shadow:0 1px 4px rgba(0, 105, 214, 0.25);-moz-box-shadow:0 1px 4px rgba(0, 105, 214, 0.25);box-shadow:0 1px 4px rgba(0, 105, 214, 0.25);}

5
docs/assets/css/docs.css
View File

@ -203,7 +203,6 @@ section > .row {
/* Render mini layout previews /* Render mini layout previews
-------------------------------------------------- */ -------------------------------------------------- */
.diagram,
.mini-layout { .mini-layout {
border: 1px solid #ddd; border: 1px solid #ddd;
-webkit-border-radius: 6px; -webkit-border-radius: 6px;
@ -213,10 +212,6 @@ section > .row {
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.075); -moz-box-shadow: 0 1px 2px rgba(0,0,0,.075);
box-shadow: 0 1px 2px rgba(0,0,0,.075); box-shadow: 0 1px 2px rgba(0,0,0,.075);
} }
.diagram {
height: 140px;
padding: 4px;
}
.mini-layout { .mini-layout {
height: 340px; height: 340px;
margin-bottom: 20px; margin-bottom: 20px;

99
docs/index.html
View File

@ -40,7 +40,7 @@
<div class="topbar"> <div class="topbar">
<div class="topbar-inner"> <div class="topbar-inner">
<div class="container"> <div class="container">
<h3><a href="#">Bootstrap</a></h3> <a class="brand" href="#">Bootstrap</a>
<ul class="nav"> <ul class="nav">
<li class="active"><a href="#overview">Overview</a></li> <li class="active"><a href="#overview">Overview</a></li>
<li><a href="#about">About</a></li> <li><a href="#about">About</a></li>
@ -151,18 +151,17 @@
<div class="span12"> <div class="span12">
<h3>Quick-start examples</h3> <h3>Quick-start examples</h3>
<p>Need some quick templates? Check out these basic examples we've put together:</p> <p>Need some quick templates? Check out these basic examples we've put together:</p>
<ul class="media-grid">
<div class="row"> <li>
<div class="span4"> <a href="../examples/hero.html"><img src="assets/img/example-diagram-01.png" alt="Simple three-column layout with hero unit"></a>
<a href="../examples/hero.html"><img src="assets/img/example-diagram-01.png" class="diagram" alt="Simple three-column layout with hero unit"></a> </li>
</div> <li>
<div class="span4"> <a href="../examples/fluid.html"><img src="assets/img/example-diagram-02.png" alt="Fluid layout with static sidebar"></a>
<a href="../examples/fluid.html"><img src="assets/img/example-diagram-02.png" class="diagram" alt="Fluid layout with static sidebar"></a> </li>
</div> <li>
<div class="span4"> <a href="../examples/container-app.html"><img src="assets/img/example-diagram-03.png" alt="Simple hanging container for apps"></a>
<a href="../examples/container-app.html"><img src="assets/img/example-diagram-03.png" class="diagram" alt="Simple hanging container for apps"></a> </li>
</div> </ul>
</div>
</div> </div>
<div class="span4"> <div class="span4">
<h3>Theming Bootstrap</h3> <h3>Theming Bootstrap</h3>
@ -717,59 +716,59 @@
<h4>Large</h4> <h4>Large</h4>
<ul class="media-grid"> <ul class="media-grid">
<li> <li>
<a class="thumbnail" href="#"> <a href="#">
<img src="http://placehold.it/330x230" alt=""> <img class="thumbnail" src="http://placehold.it/330x230" alt="">
</a> </a>
</li> </li>
<li> <li>
<a class="thumbnail" href="#"> <a href="#">
<img src="http://placehold.it/330x230" alt=""> <img class="thumbnail" src="http://placehold.it/330x230" alt="">
</a> </a>
</li> </li>
</ul> </ul>
<h4>Medium</h4> <h4>Medium</h4>
<ul class="media-grid"> <ul class="media-grid">
<li> <li>
<a class="thumbnail" href="#"> <a href="#">
<img src="http://placehold.it/210x150" alt=""> <img class="thumbnail" src="http://placehold.it/210x150" alt="">
</a> </a>
</li> </li>
<li> <li>
<a class="thumbnail" href="#"> <a href="#">
<img src="http://placehold.it/210x150" alt=""> <img class="thumbnail" src="http://placehold.it/210x150" alt="">
</a> </a>
</li> </li>
<li> <li>
<a class="thumbnail" href="#"> <a href="#">
<img src="http://placehold.it/210x150" alt=""> <img class="thumbnail" src="http://placehold.it/210x150" alt="">
</a> </a>
</li> </li>
<li> <li>
<a class="thumbnail" href="#"> <a href="#">
<img src="http://placehold.it/210x150" alt=""> <img class="thumbnail" src="http://placehold.it/210x150" alt="">
</a> </a>
</li> </li>
<li> <li>
<a class="thumbnail" href="#"> <a href="#">
<img src="http://placehold.it/210x150" alt=""> <img class="thumbnail" src="http://placehold.it/210x150" alt="">
</a> </a>
</li> </li>
</ul> </ul>
<h4>Small</h4> <h4>Small</h4>
<ul class="media-grid"> <ul class="media-grid">
<li> <li>
<a class="thumbnail" href="#"> <a href="#">
<img src="http://placehold.it/90x90" alt=""> <img class="thumbnail" src="http://placehold.it/90x90" alt="">
</a> </a>
</li> </li>
<li> <li>
<a class="thumbnail" href="#"> <a href="#">
<img src="http://placehold.it/90x90" alt=""> <img class="thumbnail" src="http://placehold.it/90x90" alt="">
</a> </a>
</li> </li>
<li> <li>
<a class="thumbnail" href="#"> <a href="#">
<img src="http://placehold.it/90x90" alt=""> <img class="thumbnail" src="http://placehold.it/90x90" alt="">
</a> </a>
</li> </li>
</ul> </ul>
@ -1186,11 +1185,34 @@
</div> </div>
</div><!-- /row --> </div><!-- /row -->
<div class="row">
<div class="span4">
<h2>Form field sizes</h2>
<p>Customize any form <code>input</code>, <code>select</code>, or <code>textarea</code> width by adding just a few classes to your markup.</p>
<p>As of v1.3.0, we have added the grid-based sizing classes for form elements. <strong>Please use the these over the existing <code>.mini</code>, <code>.small</code>, etc classes.</strong></p>
</div>
<div class="span12">
<form action="">
<div class="clearfix"><input class="span2" id="" name="" type="text" placeholder=".span2" /></div>
<div class="clearfix"><input class="span3" id="" name="" type="text" placeholder=".span3" /></div>
<div class="clearfix"><input class="span4" id="" name="" type="text" placeholder=".span4" /></div>
<div class="clearfix"><input class="span5" id="" name="" type="text" placeholder=".span5" /></div>
<div class="clearfix"><input class="span6" id="" name="" type="text" placeholder=".span6" /></div>
<div class="clearfix"><input class="span7" id="" name="" type="text" placeholder=".span7" /></div>
<div class="clearfix"><input class="span8" id="" name="" type="text" placeholder=".span8" /></div>
<div class="clearfix"><input class="span9" id="" name="" type="text" placeholder=".span9" /></div>
<div class="clearfix"><input class="span10" id="" name="" type="text" placeholder=".span10" /></div>
<div class="clearfix"><input class="span11" id="" name="" type="text" placeholder=".span11" /></div>
<div class="clearfix"><input class="span12" id="" name="" type="text" placeholder=".span12" /></div>
</form>
</div>
</div>
<div class="row"> <div class="row">
<div class="span4"> <div class="span4">
<h2>Buttons</h2> <h2>Buttons</h2>
<p>As a convention, buttons are used for actions while links are used for objects. For instance, "Download" could be a button and "recent activity" could be a link.</p> <p>As a convention, buttons are used for actions while links are used for objects. For instance, "Download" could be a button and "recent activity" could be a link.</p>
<p>All buttons default to a light gray style, but a number of functional classes can be applied for different color styles. These classes include a blue <code>.primary</code> class, a light-blue <code>.info</code> class, a green <code>.success</code> class, and a red <code>.danger</code> class. Plus, rolling your own styles is easy peasy.</p> <p>All buttons default to a light gray style, but a number of functional classes can be applied for different color styles. These classes include a blue <code>.primary</code> class, a light-blue <code>.info</code> class, a green <code>.success</code> class, and a red <code>.danger</code> class.</p>
</div> </div>
<div class="span12"> <div class="span12">
<h3>Example buttons</h3> <h3>Example buttons</h3>
@ -1764,7 +1786,7 @@ Lorem ipsum dolar sit amet illo error <a href="#" title="below">ipsum</a> verita
<h2>Compiling Less</h2> <h2>Compiling Less</h2>
<p>After modifying the <code>.less</code> files in /lib/, you'll need to recompile them in order to regenerate the bootstrap-*.*.*.css and bootstrap-*.*.*.min.css files. If you're submitting a pull request to GitHub, you must always recompile.</p> <p>After modifying the <code>.less</code> files in /lib/, you'll need to recompile them in order to regenerate the bootstrap-*.*.*.css and bootstrap-*.*.*.min.css files. If you're submitting a pull request to GitHub, you must always recompile.</p>
<h3>Ways to compile</h3> <h3>Ways to compile</h3>
<table> <table class="zebra-striped">
<thead> <thead>
<tr> <tr>
<th style="width: 120px;">Method</th> <th style="width: 120px;">Method</th>
@ -1772,7 +1794,6 @@ Lorem ipsum dolar sit amet illo error <a href="#" title="below">ipsum</a> verita
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr>
<tr> <tr>
<td>Node with makefile</td> <td>Node with makefile</td>
<td> <td>
@ -1784,7 +1805,7 @@ Lorem ipsum dolar sit amet illo error <a href="#" title="below">ipsum</a> verita
</tr> </tr>
<td>Javascript</td> <td>Javascript</td>
<td> <td>
<p><a href="http://lesscss.org/">Download the latest Less.js</a> and include the path to it (and your Bootstrap code) in the <code>head</code>.</p> <p><a href="http://lesscss.org/">Download the latest Less.js</a> and include the path to it (and Bootstrap) in the <code>head</code>.</p>
<pre class="prettyprint"> <pre class="prettyprint">
&lt;link rel="stylesheet/less" href="/path/to/bootstrap.less"&gt; &lt;link rel="stylesheet/less" href="/path/to/bootstrap.less"&gt;
&lt;script src="/path/to/less.js"&gt;&lt;/script&gt; &lt;script src="/path/to/less.js"&gt;&lt;/script&gt;
@ -1795,9 +1816,9 @@ Lorem ipsum dolar sit amet illo error <a href="#" title="below">ipsum</a> verita
<tr> <tr>
<td>Command line</td> <td>Command line</td>
<td> <td>
<p>If you already have the less command line tool installed you can simply run the following command:</p> <p>If you already have the less command line tool installed, simply run the following command:</p>
<pre>$ lessc ./lib/bootstrap.less > bootstrap-1.3.0.css</pre> <pre>$ lessc ./lib/bootstrap.less > bootstrap-1.3.0.css</pre>
<p>Be sure to include the <code>--compress</code> flag in that command if you're trying to save some bytes! <p>Be sure to include <code>--compress</code> in that command if you're trying to save some bytes!</p>
</td> </td>
</tr> </tr>
<tr> <tr>

36
lib/forms.less
View File

@ -19,9 +19,9 @@ fieldset {
padding-left: 150px; padding-left: 150px;
font-size: @basefont * 1.5; font-size: @basefont * 1.5;
line-height: 1; line-height: 1;
*margin: 0 0 5px 145px; /* IE6-7 */
*line-height: 1.5; /* IE6-7 */
color: @grayDark; color: @grayDark;
*padding: 0 0 5px 145px; /* IE6-7 */
*line-height: 1.5; /* IE6-7 */
} }
} }
@ -105,8 +105,9 @@ input[type=submit] {
select, select,
input[type=file] { input[type=file] {
height: @baseline * 1.5; height: @baseline * 1.5; // In IE7, the height of the select element cannot be changed by height, only font-size
line-height: @baseline * 1.5; line-height: @baseline * 1.5;
*margin-top: 4px; /* For IE7, add top margin to align select with labels */
} }
textarea { textarea {
@ -183,6 +184,7 @@ form div.error {
} }
// Form element sizes // Form element sizes
// TODO v2: remove duplication here and just stick to .input-[size] in light of adding .spanN sizes
.input-mini, .input-mini,
input.mini, input.mini,
textarea.mini, textarea.mini,
@ -223,6 +225,34 @@ textarea.xxlarge {
overflow-y: auto; overflow-y: auto;
} }
// Grid style input sizes
// This is a duplication of the main grid .columns() mixin, but subtracts 10px to account for input padding and border
.formColumns(@columnSpan: 1) {
width: ((@gridColumnWidth - 10) * @columnSpan) + ((@gridColumnWidth - 10) * (@columnSpan - 1));
margin-left: 0;
}
input,
textarea,
select {
// Default columns
&.span1 { .formColumns(1); }
&.span2 { .formColumns(2); }
&.span3 { .formColumns(3); }
&.span4 { .formColumns(4); }
&.span5 { .formColumns(5); }
&.span6 { .formColumns(6); }
&.span7 { .formColumns(7); }
&.span8 { .formColumns(8); }
&.span9 { .formColumns(9); }
&.span10 { .formColumns(10); }
&.span11 { .formColumns(11); }
&.span12 { .formColumns(12); }
&.span13 { .formColumns(13); }
&.span14 { .formColumns(14); }
&.span15 { .formColumns(15); }
&.span16 { .formColumns(16); }
}
// Disabled and read-only inputs // Disabled and read-only inputs
input[disabled], input[disabled],
select[disabled], select[disabled],

14
lib/patterns.less
View File

@ -33,10 +33,11 @@
// Website name // Website name
// h3 left for backwards compatibility // h3 left for backwards compatibility
.brand,
h3 { h3 {
position: relative; position: relative;
a { }
h3 a,
.brand {
float: left; float: left;
display: block; display: block;
padding: 8px 20px 12px; padding: 8px 20px 12px;
@ -46,7 +47,6 @@
font-weight: 200; font-weight: 200;
line-height: 1; line-height: 1;
} }
}
// Plain text in topbar // Plain text in topbar
p { p {
@ -941,19 +941,19 @@ input[type=submit].btn {
li { li {
display: inline; display: inline;
} }
.thumbnail { a {
float: left; float: left;
padding: 4px; padding: 4px;
margin: 0 0 20px 20px; margin: 0 0 20px 20px;
border: 1px solid #ddd; border: 1px solid #ddd;
.border-radius(4px); .border-radius(4px);
.box-shadow(0 1px 1px rgba(0,0,0,.075)); .box-shadow(0 1px 1px rgba(0,0,0,.075));
img {
display: block;
}
&:hover { &:hover {
border-color: @linkColor; border-color: @linkColor;
.box-shadow(0 1px 4px rgba(0,105,214,.25)); .box-shadow(0 1px 4px rgba(0,105,214,.25));
} }
} }
img {
display: block;
}
} }

2
lib/scaffolding.less
View File

@ -79,6 +79,7 @@ a {
.row { .row {
.clearfix(); .clearfix();
margin-left: -1 * @gridGutterWidth; margin-left: -1 * @gridGutterWidth;
}
// Find all .span# classes within .row and give them the necessary properties for grid columns (supported by all browsers back to IE7) // Find all .span# classes within .row and give them the necessary properties for grid columns (supported by all browsers back to IE7)
// Credit to @dhg for the idea // Credit to @dhg for the idea
@ -133,4 +134,3 @@ a {
.span-two-thirds { width: 620px; } .span-two-thirds { width: 620px; }
.offset-one-third { margin-left: 340px; } .offset-one-third { margin-left: 340px; }
.offset-two-thirds { margin-left: 660px; } .offset-two-thirds { margin-left: 660px; }
}