kotovalexarian-likes-github
/
twbs--bootstrap
mirror of https://github.com/twbs/bootstrap.git
1
0
Fork 0
Code Releases Activity

massive docs update, mostly to all our new forms, and to the buttons

This commit is contained in:
Mark Otto 2012-01-05 21:43:28 -08:00
parent 90e3a706ba
commit c56e9d2d35
8 changed files with 340 additions and 234 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

52
bootstrap.css vendored
View File

@ -6,7 +6,7 @@
* http://www.apache.org/licenses/LICENSE-2.0
*
* Designed and built with all the love in the world @twitter by @mdo and @fat.
* Date: Thu Jan 5 15:48:31 PST 2012
* Date: Thu Jan 5 21:43:09 PST 2012
*/
html, body {
margin: 0;
@ -261,7 +261,6 @@ a:hover {
clear: both;
}
[class*="span"] {
display: inline;
float: left;
margin-left: 20px;
}
@ -555,10 +554,11 @@ input,
textarea,
select,
.uneditable-input {
display: inline-block;
display: block;
width: 210px;
height: 18px;
padding: 4px;
margin-bottom: 9px;
font-size: 13px;
line-height: 18px;
color: #555555;
@ -670,7 +670,6 @@ input.span1,
textarea.span1,
select.span1,
.uneditable-input.span1 {
display: inline-block;
float: none;
width: 50px;
margin-left: 0;
@ -679,7 +678,6 @@ input.span2,
textarea.span2,
select.span2,
.uneditable-input.span2 {
display: inline-block;
float: none;
width: 130px;
margin-left: 0;
@ -688,7 +686,6 @@ input.span3,
textarea.span3,
select.span3,
.uneditable-input.span3 {
display: inline-block;
float: none;
width: 210px;
margin-left: 0;
@ -697,7 +694,6 @@ input.span4,
textarea.span4,
select.span4,
.uneditable-input.span4 {
display: inline-block;
float: none;
width: 290px;
margin-left: 0;
@ -706,7 +702,6 @@ input.span5,
textarea.span5,
select.span5,
.uneditable-input.span5 {
display: inline-block;
float: none;
width: 370px;
margin-left: 0;
@ -715,7 +710,6 @@ input.span6,
textarea.span6,
select.span6,
.uneditable-input.span6 {
display: inline-block;
float: none;
width: 450px;
margin-left: 0;
@ -724,7 +718,6 @@ input.span7,
textarea.span7,
select.span7,
.uneditable-input.span7 {
display: inline-block;
float: none;
width: 530px;
margin-left: 0;
@ -733,7 +726,6 @@ input.span8,
textarea.span8,
select.span8,
.uneditable-input.span8 {
display: inline-block;
float: none;
width: 610px;
margin-left: 0;
@ -742,7 +734,6 @@ input.span9,
textarea.span9,
select.span9,
.uneditable-input.span9 {
display: inline-block;
float: none;
width: 690px;
margin-left: 0;
@ -751,7 +742,6 @@ input.span10,
textarea.span10,
select.span10,
.uneditable-input.span10 {
display: inline-block;
float: none;
width: 770px;
margin-left: 0;
@ -760,7 +750,6 @@ input.span11,
textarea.span11,
select.span11,
.uneditable-input.span11 {
display: inline-block;
float: none;
width: 850px;
margin-left: 0;
@ -769,7 +758,6 @@ input.span12,
textarea.span12,
select.span12,
.uneditable-input.span12 {
display: inline-block;
float: none;
width: 930px;
margin-left: 0;
@ -778,7 +766,6 @@ input.span13,
textarea.span13,
select.span13,
.uneditable-input.span13 {
display: inline-block;
float: none;
width: 1010px;
margin-left: 0;
@ -787,7 +774,6 @@ input.span14,
textarea.span14,
select.span14,
.uneditable-input.span14 {
display: inline-block;
float: none;
width: 1090px;
margin-left: 0;
@ -796,7 +782,6 @@ input.span15,
textarea.span15,
select.span15,
.uneditable-input.span15 {
display: inline-block;
float: none;
width: 1170px;
margin-left: 0;
@ -805,7 +790,6 @@ input.span16,
textarea.span16,
select.span16,
.uneditable-input.span16 {
display: inline-block;
float: none;
width: 1250px;
margin-left: 0;
@ -890,13 +874,13 @@ textarea[readonly] {
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.025);
cursor: not-allowed;
}
:-moz-placeholder {
input:-moz-placeholder {
color: #999999;
}
::-webkit-input-placeholder {
input::-webkit-input-placeholder {
color: #999999;
}
.help-text {
.help-block {
margin-top: 5px;
margin-bottom: 0;
color: #999999;
@ -911,11 +895,8 @@ textarea[readonly] {
display: inline;
padding-left: 5px;
}
.help-block {
display: block;
max-width: 600px;
}
.input-prepend, .input-append {
margin-bottom: 5px;
zoom: 1;
}
.input-prepend:before,
@ -977,10 +958,27 @@ textarea[readonly] {
border-radius: 0 3px 3px 0;
}
.search-form .search-query {
padding-left: 14px;
padding-right: 14px;
-webkit-border-radius: 14px;
-moz-border-radius: 14px;
border-radius: 14px;
}
.search-form input,
.inline-form input,
.horizontal-form input,
.search-form textarea,
.inline-form textarea,
.horizontal-form textarea,
.search-form select,
.inline-form select,
.horizontal-form select,
.search-form .uneditable-input,
.inline-form .uneditable-input,
.horizontal-form .uneditable-input {
display: inline-block;
margin-bottom: 0;
}
.control-group {
margin-bottom: 18px;
}
@ -2554,7 +2552,7 @@ i {
}
.btn {
display: inline-block;
padding: 5px 14px 6px;
padding: 5px 10px 6px;
font-size: 13px;
line-height: normal;
color: #333;

50
bootstrap.min.css vendored
View File

@ -37,7 +37,7 @@ a{font-weight:inherit;line-height:inherit;color:#0088cc;text-decoration:none;}a:
.show{display:block;}
.row{margin-left:-20px;zoom:1;}.row:before,.row:after{display:table;*display:inline;content:"";zoom:1;}
.row:after{clear:both;}
[class*="span"]{display:inline;float:left;margin-left:20px;}
[class*="span"]{float:left;margin-left:20px;}
.span1{width:60px;}
.span2{width:140px;}
.span3{width:220px;}
@ -95,7 +95,7 @@ form{margin-bottom:18px;}
legend{display:block;width:100%;margin-bottom:27px;font-size:19.5px;line-height:36px;color:#333333;border-bottom:1px solid #eee;}
label,input,select,textarea{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:normal;font-weight:13px;line-height:18px;}
label{display:block;margin-bottom:5px;color:#333333;}
input,textarea,select,.uneditable-input{display:inline-block;width:210px;height:18px;padding:4px;font-size:13px;line-height:18px;color:#555555;border:1px solid #ccc;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;}
input,textarea,select,.uneditable-input{display:block;width:210px;height:18px;padding:4px;margin-bottom:9px;font-size:13px;line-height:18px;color:#555555;border:1px solid #ccc;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;}
input[type=image],input[type=checkbox],input[type=radio]{width:auto;height:auto;padding:0;margin:3px 0;*margin-top:0;line-height:normal;border:none;cursor:pointer;}
input[type=file]{padding:initial;line-height:initial;border:initial;background-color:#ffffff;background-color: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;}
@ -116,22 +116,22 @@ input[type=file]:focus,input[type=checkbox]:focus,select:focus{-webkit-box-shado
.input-large{width:210px;}
.input-xlarge{width:270px;}
.input-xxlarge{width:530px;}
input.span1,textarea.span1,select.span1,.uneditable-input.span1{display:inline-block;float:none;width:50px;margin-left:0;}
input.span2,textarea.span2,select.span2,.uneditable-input.span2{display:inline-block;float:none;width:130px;margin-left:0;}
input.span3,textarea.span3,select.span3,.uneditable-input.span3{display:inline-block;float:none;width:210px;margin-left:0;}
input.span4,textarea.span4,select.span4,.uneditable-input.span4{display:inline-block;float:none;width:290px;margin-left:0;}
input.span5,textarea.span5,select.span5,.uneditable-input.span5{display:inline-block;float:none;width:370px;margin-left:0;}
input.span6,textarea.span6,select.span6,.uneditable-input.span6{display:inline-block;float:none;width:450px;margin-left:0;}
input.span7,textarea.span7,select.span7,.uneditable-input.span7{display:inline-block;float:none;width:530px;margin-left:0;}
input.span8,textarea.span8,select.span8,.uneditable-input.span8{display:inline-block;float:none;width:610px;margin-left:0;}
input.span9,textarea.span9,select.span9,.uneditable-input.span9{display:inline-block;float:none;width:690px;margin-left:0;}
input.span10,textarea.span10,select.span10,.uneditable-input.span10{display:inline-block;float:none;width:770px;margin-left:0;}
input.span11,textarea.span11,select.span11,.uneditable-input.span11{display:inline-block;float:none;width:850px;margin-left:0;}
input.span12,textarea.span12,select.span12,.uneditable-input.span12{display:inline-block;float:none;width:930px;margin-left:0;}
input.span13,textarea.span13,select.span13,.uneditable-input.span13{display:inline-block;float:none;width:1010px;margin-left:0;}
input.span14,textarea.span14,select.span14,.uneditable-input.span14{display:inline-block;float:none;width:1090px;margin-left:0;}
input.span15,textarea.span15,select.span15,.uneditable-input.span15{display:inline-block;float:none;width:1170px;margin-left:0;}
input.span16,textarea.span16,select.span16,.uneditable-input.span16{display:inline-block;float:none;width:1250px;margin-left:0;}
input.span1,textarea.span1,select.span1,.uneditable-input.span1{float:none;width:50px;margin-left:0;}
input.span2,textarea.span2,select.span2,.uneditable-input.span2{float:none;width:130px;margin-left:0;}
input.span3,textarea.span3,select.span3,.uneditable-input.span3{float:none;width:210px;margin-left:0;}
input.span4,textarea.span4,select.span4,.uneditable-input.span4{float:none;width:290px;margin-left:0;}
input.span5,textarea.span5,select.span5,.uneditable-input.span5{float:none;width:370px;margin-left:0;}
input.span6,textarea.span6,select.span6,.uneditable-input.span6{float:none;width:450px;margin-left:0;}
input.span7,textarea.span7,select.span7,.uneditable-input.span7{float:none;width:530px;margin-left:0;}
input.span8,textarea.span8,select.span8,.uneditable-input.span8{float:none;width:610px;margin-left:0;}
input.span9,textarea.span9,select.span9,.uneditable-input.span9{float:none;width:690px;margin-left:0;}
input.span10,textarea.span10,select.span10,.uneditable-input.span10{float:none;width:770px;margin-left:0;}
input.span11,textarea.span11,select.span11,.uneditable-input.span11{float:none;width:850px;margin-left:0;}
input.span12,textarea.span12,select.span12,.uneditable-input.span12{float:none;width:930px;margin-left:0;}
input.span13,textarea.span13,select.span13,.uneditable-input.span13{float:none;width:1010px;margin-left:0;}
input.span14,textarea.span14,select.span14,.uneditable-input.span14{float:none;width:1090px;margin-left:0;}
input.span15,textarea.span15,select.span15,.uneditable-input.span15{float:none;width:1170px;margin-left:0;}
input.span16,textarea.span16,select.span16,.uneditable-input.span16{float:none;width:1250px;margin-left:0;}
input[disabled],select[disabled],textarea[disabled],input[readonly],select[readonly],textarea[readonly]{background-color:#f5f5f5;border-color:#ddd;cursor:not-allowed;}
.control-group.error>label,.control-group.error .help-block,.control-group.error .help-inline{color:#b94a48;}
.control-group.error input,.control-group.error textarea{color:#b94a48;border-color:#ee5f5b;}.control-group.error input:focus,.control-group.error textarea:focus{border-color:#e9322d;-webkit-box-shadow:0 0 6px #f8b9b7;-moz-box-shadow:0 0 6px #f8b9b7;box-shadow:0 0 6px #f8b9b7;}
@ -144,12 +144,11 @@ input[disabled],select[disabled],textarea[disabled],input[readonly],select[reado
.control-group.success .input-prepend .add-on,.control-group.success .input-append .add-on{color:#468847;background-color:#bcddbc;border-color:#468847;}
.form-actions{padding:17px 20px 18px;margin-top:18px;margin-bottom:18px;background-color:#f5f5f5;border-top:1px solid #ddd;}
.uneditable-input{display:block;background-color:#ffffff;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:#999999;}
::-webkit-input-placeholder{color:#999999;}
.help-text{margin-top:5px;margin-bottom:0;color:#999999;}
input:-moz-placeholder{color:#999999;}
input::-webkit-input-placeholder{color:#999999;}
.help-block{margin-top:5px;margin-bottom:0;color:#999999;}
.help-inline{*position:relative;*top:-5px;display:inline;padding-left:5px;}
.help-block{display:block;max-width:600px;}
.input-prepend,.input-append{zoom:1;}.input-prepend:before,.input-append:before,.input-prepend:after,.input-append:after{display:table;*display:inline;content:"";zoom:1;}
.input-prepend,.input-append{margin-bottom:5px;zoom:1;}.input-prepend:before,.input-append:before,.input-prepend:after,.input-append:after{display:table;*display:inline;content:"";zoom:1;}
.input-prepend:after,.input-append:after{clear:both;}
.input-prepend input,.input-append input{-webkit-border-radius:0 3px 3px 0;-moz-border-radius:0 3px 3px 0;border-radius:0 3px 3px 0;}
.input-prepend .add-on,.input-append .add-on{float:left;display:block;width:auto;min-width:16px;height:18px;margin-right:-1px;padding:4px 4px 4px 5px;font-weight:normal;line-height:18px;color:#999999;text-align:center;text-shadow:0 1px 0 #ffffff;background-color:#f5f5f5;border:1px solid #ccc;-webkit-border-radius:3px 0 0 3px;-moz-border-radius:3px 0 0 3px;border-radius:3px 0 0 3px;}
@ -157,7 +156,8 @@ input[disabled],select[disabled],textarea[disabled],input[readonly],select[reado
.input-prepend .add-on{*margin-top:1px;}
.input-append input{float:left;-webkit-border-radius:3px 0 0 3px;-moz-border-radius:3px 0 0 3px;border-radius:3px 0 0 3px;}
.input-append .add-on{margin-right:0;margin-left:-1px;-webkit-border-radius:0 3px 3px 0;-moz-border-radius:0 3px 3px 0;border-radius:0 3px 3px 0;}
.search-form .search-query{-webkit-border-radius:14px;-moz-border-radius:14px;border-radius:14px;}
.search-form .search-query{padding-left:14px;padding-right:14px;-webkit-border-radius:14px;-moz-border-radius:14px;border-radius:14px;}
.search-form input,.inline-form input,.horizontal-form input,.search-form textarea,.inline-form textarea,.horizontal-form textarea,.search-form select,.inline-form select,.horizontal-form select,.search-form .uneditable-input,.inline-form .uneditable-input,.horizontal-form .uneditable-input{display:inline-block;margin-bottom:0;}
.control-group{margin-bottom:18px;}
.control-group>label{font-weight:bold;}
.horizontal-form .control-group>label{float:left;width:130px;padding-top:5px;text-align:right;}
@ -394,7 +394,7 @@ i{background-image:url(docs/assets/img/glyphicons-halflings-sprite.png);backgrou
.btn.danger,.alert-message.danger,.btn.error,.alert-message.error{background-color:#c43c35;background-image:-khtml-gradient(linear, left top, left bottom, from(#ee5f5b), to(#c43c35));background-image:-moz-linear-gradient(top, #ee5f5b, #c43c35);background-image:-ms-linear-gradient(top, #ee5f5b, #c43c35);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #ee5f5b), color-stop(100%, #c43c35));background-image:-webkit-linear-gradient(top, #ee5f5b, #c43c35);background-image:-o-linear-gradient(top, #ee5f5b, #c43c35);background-image:linear-gradient(top, #ee5f5b, #c43c35);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ee5f5b', endColorstr='#c43c35', GradientType=0);border-color:#c43c35 #c43c35 #882a25;border-color:rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);}
.btn.success,.alert-message.success{background-color:#57a957;background-image:-khtml-gradient(linear, left top, left bottom, from(#62c462), to(#57a957));background-image:-moz-linear-gradient(top, #62c462, #57a957);background-image:-ms-linear-gradient(top, #62c462, #57a957);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #62c462), color-stop(100%, #57a957));background-image:-webkit-linear-gradient(top, #62c462, #57a957);background-image:-o-linear-gradient(top, #62c462, #57a957);background-image:linear-gradient(top, #62c462, #57a957);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#62c462', endColorstr='#57a957', GradientType=0);border-color:#57a957 #57a957 #3d773d;border-color:rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);}
.btn.info,.alert-message.info{background-color:#339bb9;background-image:-khtml-gradient(linear, left top, left bottom, from(#5bc0de), to(#339bb9));background-image:-moz-linear-gradient(top, #5bc0de, #339bb9);background-image:-ms-linear-gradient(top, #5bc0de, #339bb9);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #5bc0de), color-stop(100%, #339bb9));background-image:-webkit-linear-gradient(top, #5bc0de, #339bb9);background-image:-o-linear-gradient(top, #5bc0de, #339bb9);background-image:linear-gradient(top, #5bc0de, #339bb9);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#5bc0de', endColorstr='#339bb9', GradientType=0);border-color:#339bb9 #339bb9 #22697d;border-color:rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);}
.btn{display:inline-block;padding:5px 14px 6px;font-size:13px;line-height:normal;color:#333;text-shadow:0 1px 1px rgba(255, 255, 255, 0.75);background-color:#e6e6e6;background-image:-webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), color-stop(25%, #ffffff), to(#e6e6e6));background-image:-webkit-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);background-image:-moz-linear-gradient(top, #ffffff, #ffffff 25%, #e6e6e6);background-image:-ms-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);background-image:-o-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);background-image:linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);background-repeat:no-repeat;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#e6e6e6', GradientType=0);border:1px solid #ccc;border-bottom-color:#bbb;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.2),0 1px 2px rgba(0, 0, 0, 0.05);-moz-box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.2),0 1px 2px rgba(0, 0, 0, 0.05);box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.2),0 1px 2px rgba(0, 0, 0, 0.05);cursor:pointer;-webkit-transition:0.1s linear all;-moz-transition:0.1s linear all;-ms-transition:0.1s linear all;-o-transition:0.1s linear all;transition:0.1s linear all;}.btn:hover{color:#333333;text-decoration:none;background-position:0 -15px;}
.btn{display:inline-block;padding:5px 10px 6px;font-size:13px;line-height:normal;color:#333;text-shadow:0 1px 1px rgba(255, 255, 255, 0.75);background-color:#e6e6e6;background-image:-webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), color-stop(25%, #ffffff), to(#e6e6e6));background-image:-webkit-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);background-image:-moz-linear-gradient(top, #ffffff, #ffffff 25%, #e6e6e6);background-image:-ms-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);background-image:-o-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);background-image:linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);background-repeat:no-repeat;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#e6e6e6', GradientType=0);border:1px solid #ccc;border-bottom-color:#bbb;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.2),0 1px 2px rgba(0, 0, 0, 0.05);-moz-box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.2),0 1px 2px rgba(0, 0, 0, 0.05);box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.2),0 1px 2px rgba(0, 0, 0, 0.05);cursor:pointer;-webkit-transition:0.1s linear all;-moz-transition:0.1s linear all;-ms-transition:0.1s linear all;-o-transition:0.1s linear all;transition:0.1s linear all;}.btn:hover{color:#333333;text-decoration:none;background-position:0 -15px;}
.btn:focus{outline:1px dotted #666;}
.btn.primary{color:#ffffff;text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);background-color:#0064cd;background-image:-khtml-gradient(linear, left top, left bottom, from(#049cdb), to(#0064cd));background-image:-moz-linear-gradient(top, #049cdb, #0064cd);background-image:-ms-linear-gradient(top, #049cdb, #0064cd);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #049cdb), color-stop(100%, #0064cd));background-image:-webkit-linear-gradient(top, #049cdb, #0064cd);background-image:-o-linear-gradient(top, #049cdb, #0064cd);background-image:linear-gradient(top, #049cdb, #0064cd);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#049cdb', endColorstr='#0064cd', GradientType=0);border-color:#0064cd #0064cd #003f81;border-color:rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);}
.btn.active,.btn:active{-webkit-box-shadow:inset 0 2px 4px rgba(0, 0, 0, 0.25),0 1px 2px rgba(0, 0, 0, 0.05);-moz-box-shadow:inset 0 2px 4px rgba(0, 0, 0, 0.25),0 1px 2px rgba(0, 0, 0, 0.05);box-shadow:inset 0 2px 4px rgba(0, 0, 0, 0.25),0 1px 2px rgba(0, 0, 0, 0.05);}

44
docs/assets/css/docs.css
View File

@ -36,11 +36,13 @@ body > .navbar-fixed .brand:hover {
/* Space out sub-sections more
-------------------------------------------------- */
.page-header {
margin: 36px 0 18px;
margin: 45px 0 18px;
border-bottom: 1px solid #eee;
}
.page-header h1 {
margin-bottom: 9px;
margin-bottom: 17px;
font-size: 36px;
line-height: 1;
}
@ -327,10 +329,6 @@ pre.prettyprint {
overflow: hidden;
}
.well form {
margin-bottom: 0;
}
.browser-support {
max-width: 100%;
}
@ -356,6 +354,40 @@ h2 + table {
position: relative;
}
/* Remove bottom margin on example forms in wells */
form.well {
margin-bottom: 0;
}
/* Tighten up spacing */
.well hr {
margin: 18px 0;
}
/* Form docs for horizontal forms */
.form-docs {
padding-left: 10px;
}
.form-docs h3,
.form-docs p,
.form-docs li {
color: #777;
}
.form-docs hr {
margin: 18px 0;
}
/* Fake the :focus state to demo it */
.focused {
border-color: rgba(82,168,236,.8);
-webkit-box-shadow: inset 0 1px 3px rgba(0,0,0,.1), 0 0 8px rgba(82,168,236,.6);
-moz-box-shadow: inset 0 1px 3px rgba(0,0,0,.1), 0 0 8px rgba(82,168,236,.6);
box-shadow: inset 0 1px 3px rgba(0,0,0,.1), 0 0 8px rgba(82,168,236,.6);
outline: 0;
}
/* Icons
------------------------- */
.the-icons {

8
docs/assets/js/application.js
View File

@ -9,10 +9,10 @@ $(function(){
// ==============================================
// Set a timeout...
setTimeout(function(){
// Hide the address bar!
window.scrollTo(0, 1);
}, 0);
// setTimeout(function(){
// // Hide the address bar!
// window.scrollTo(0, 1);
// }, 0);
// Docs topbar nav

385
docs/base-css.html
View File

@ -593,6 +593,9 @@
<table>
...
&lt;/table&gt;</pre>
<br>
<h3>2. Striped table</h3>
<p>Get a little fancy with your tables by adding zebra-striping&mdash;just add the <code>.striped-table</code> class.</p>
<table class="striped-table">
@ -630,6 +633,9 @@
&lt;table class="striped-table"&gt;
...
&lt;/table&gt;</pre>
<br>
<h3>3. Bordered table</h3>
<p>Add borders around the entire table and between each row, plus a bit of rounded corners for aesthetic purposes.</p>
<p><span class="label">Note</span> Bordered tables do not work well with <code>rowspan</code> due to somewhat hacky CSS applied to the tables. Sorry about that!</p>
@ -671,6 +677,9 @@
&lt;table class="bordered-table"&gt;
...
&lt;/table&gt;</pre>
<br>
<h3>4. Condensed table</h3>
<p>Make your tables more compact by adding the <code>.condensed-table</code> class to cut table cell padding in half (from 10px to 5px).</p>
<table class="condensed-table">
@ -707,6 +716,9 @@
&lt;table class="condensed-table"&gt;
...
&lt;/table&gt;</pre>
<br>
<h3>5. Striped table w/ TableSorter.js</h3>
<p>Taking the previous example, we improve the usefulness of our tables by providing sorting functionality via <a href="http://jquery.com">jQuery</a> and the <a href="http://tablesorter.com/docs/">Tablesorter</a> plugin. <strong>Click any column’s header to change the sort.</strong></p>
<table class="striped-table" id="sortTableExample">
@ -760,54 +772,32 @@
<div class="page-header">
<h1>Forms</h1>
</div>
<!--
Types of forms
default (stacked)
horizontal (change the class)
search
inline
Form elements
form
fieldset
legend
label
input
text (password, email, etc)
radio
checkbox
textarea
rows
select
single
multiple
size
Custom form elements
Input prepend and append (for @ and $)
checkbox and radio lists
Explaining the default Bootstrap form structure
Bulletproofing our forms means adding a bit of extra structure and providing more classes for customization and event handling
Form vertical and horizontal forms, we require a wrapping element.
we suggest a fieldset
but could be anthing so long as it uses the proper class
Form states
warning
error
success
-->
<div class="row">
<div class="span4">
<h3>Flexible markup and styles</h3>
<p>The best part about forms in Bootstrap is that all your inputs and controls look great no matter how you build them in your markup. No superfluous HTML is required, but we provide the patterns for those who require it.</p>
<div class="row">
<div class="span4">
<h2>Flexible HTML and CSS</h2>
<p>The best part about forms in Bootstrap is that all your inputs and controls look great no matter how you build them in your markup. No superfluous HTML is required, but we provide the patterns for those who require it.</p>
<p>More complicated layouts come with succinct and scalable classes for easy styling and event binding, so you're covered at every step.</p>
</div>
<div class="span4">
<h2>Four layouts included</h2>
<p>Bootstrap comes with support for four types of form layouts:</p>
<ul>
<li>Vertical (default)</li>
<li>Search</li>
<li>Inline</li>
<li>Horizontal</li>
</ul>
<p>Different types of form layouts require some changes to markup, but the controls themselves remain and behave the same.</p>
</div>
<div class="span4">
<h2>Control states and more</h2>
<p>Bootstrap's forms include styles for all the base form controls like input, textarea, and select you'd expect. But it also comes with a number of custom components like appended and prepended inputs and support for lists of checkboxes.</p>
<p>States like error, warning, and success are included for each type of form control. Also included are styles for disabled controls.</p>
</div>
</div>
<div class="span4">
</div>
</div>
<h2>Four types of forms</h2>
<p>Bootstrap provides simple markup and styles for four styles of common web forms.</p>
<table class="bordered-table striped-table">
<thead>
<tr>
@ -823,7 +813,7 @@ Form states
<td>Stacked, left-aligned labels over controls</td>
</tr>
<tr>
<th>Horiztonal</th>
<th>Horizontal</th>
<td><code>.horizontal-form</code></td>
<td>Float left, right-aligned labels on same line as controls</td>
</tr>
@ -841,78 +831,60 @@ Form states
</table>
<h2>Example forms <small>using just form controls, no extra markup</small></h2>
<div class="row">
<div class="span4">
<h3>Why four types</h3>
<p>With Bootstrap 2, we completely recoded our forms to allow for simple base styles and improved namespacing on labels and controls. To address the many uses of forms, we've included some base styles to help get you started.</p>
<h3>Basic form</h3>
<p>With v2.0, we have lighter and smarter defaults for form styles. No extra markup, just form controls.</p>
<form class="well">
<label>Label name</label>
<input type="text" class="span3" placeholder="Type something...">
<label class="checkbox">
<input type="checkbox"> Check me out
</label>
<button type="submit" class="btn">Submit</button>
</form>
</div>
<div class="span4">
<h3>Vertical or horizontal</h3>
<p>Our default form styles are now vertical, not horizontal. This makes it easier to customize bare-bones forms, as well as forms in tricker situations like sign-up, modals, etc. <strong>They share the same exact markup; just swap the class.</strong></p>
<h3>Search form</h3>
<p>Reflecting default WebKit styles, just add <code>.search-form</code> for extra rounded search fields.</p>
<form class="well search-form">
<input type="text" class="input-medium search-query">
<button type="submit" class="btn">Search</button>
</form>
</div>
<div class="span4">
<h3>Inline form</h3>
<p>Inputs are block level to start. For <code>.inline-form</code> and <code>.horizontal-form</code>, we use inline-block.</p>
<form class="well search-form">
<input type="text" class="input-small" placeholder="Email">
<input type="password" class="input-small" placeholder="Password">
<button type="submit" class="btn">Go</button>
</form>
</div>
</div><!-- /row -->
<br>
<h2>Horizontal forms</h2>
<div class="row">
<div class="span3">
<h2>Search form</h2>
</div>
<div class="span9">
<div class="well">
<form class="search-form">
<input type="text" class="search-query">
<button type="submit" class="btn">Search</button>
</form>
</div><!--/well-->
</div>
</div><!-- /row -->
<div class="row">
<div class="span3">
<h2>Inline form</h2>
</div>
<div class="span9">
<div class="well">
<form class="inline-form">
<h4>Some directional text</h4>
<p>And maybe some kind of optional supporting text right here.</p>
<input type="text" class="input-medium">
<input type="text" class="input-medium">
<input type="text" class="input-medium">
<button type="submit" class="btn">Search</button>
</form>
</div><!--/well-->
</div>
</div><!-- /row -->
<div class="row">
<div class="span3">
<h2>Horizontal form</h2>
</div>
<div class="span9">
<div class="span8">
<form class="horizontal-form">
<legend>Example form section</legend>
<legend>Controls Bootstrap supports</legend>
<fieldset class="control-group">
<label class="control-label" for="input01">Text input</label>
<div class="controls">
<input type="text" class="xlarge" name="input01">
<p class="help-text">Help text here. Be sure to fill this out like so, or else!</p>
<p class="help-block">In addition to freeform text, any HTML5 text-based input appears like so.</p>
</div>
</fieldset>
<fieldset class="control-group">
<label class="control-label" for="prependedInput">Prepended text</label>
<label class="control-label" for="optionsCheckbox">Checkbox</label>
<div class="controls">
<div class="input-prepend">
<span class="add-on">@</span>
<input class="input-small" id="prependedInput" name="prependedInput" size="16" type="text">
</div>
<p class="help-block">Here's some help text</p>
</div>
</fieldset>
<fieldset class="control-group">
<label class="control-label" for="appendedInput">Appended text</label>
<div class="controls">
<div class="input-append">
<input class="input-small" id="appendedInput" name="appendedInput" size="16" type="text">
<span class="add-on">.00</span>
</div>
<p class="help-block">Here's more help text</p>
<label class="checkbox">
<input type="checkbox" name="optionsCheckbox" value="option1">
Option one is this and that&mdash;be sure to include why it’s great
</label>
</div>
</fieldset>
<fieldset class="control-group">
@ -939,23 +911,69 @@ Form states
</select>
</div>
</fieldset>
<legend>Example form section</legend>
<fieldset class="control-group">
<label class="control-label" for="fileInput">File input</label>
<div class="controls">
<input class="input-file" id="fileInput" name="fileInput" type="file">
</div>
</fieldset>
<fieldset class="control-group">
<label class="control-label" for="textarea">Textarea</label>
<div class="controls">
<textarea class="input-xlarge" name="textarea" id="textarea" rows="3"></textarea>
</div>
</fieldset>
<fieldset class="form-actions">
<button type="submit" class="btn primary">Save changes</button>
<button type="reset" class="btn">Cancel</button>
</fieldset>
</form>
</div>
<div class="span4">
<div class="form-docs">
<h3>What's included</h3>
<p>Shown on the left are all the default form controls we support. Here's the bulleted list:</p>
<ul>
<li>text inputs (text, password, email, etc)</li>
<li>checkbox</li>
<li>radio</li>
<li>select</li>
<li>multiple select</li>
<li>file input</li>
<li>textarea</li>
</ul>
<hr>
<h3>New defaults with v2.0</h3>
<p>Up to v1.4, Bootstrap's default form styles used the horizontal layout. With Bootstrap 2, we removed that constraint to have smarter, more scalable defaults for any form.</p>
</div>
</div>
</div>
<br>
<div class="row">
<div class="span8">
<form class="horizontal-form">
<legend>Form control states</legend>
<fieldset class="control-group">
<label class="control-label" for="fileInput">Disabled input</label>
<label class="control-label" for="focusedInput">Focused input</label>
<div class="controls">
<input class="input-xlarge disabled" id="disabledInput" name="disabledInput" size="30" type="text" placeholder="Disabled input here... carry on." disabled>
<input class="input-xlarge focused" id="focusedInput" name="focusedInput" type="text" value="This is focused...">
</div>
</fieldset>
<fieldset class="control-group">
<label class="control-label" for="fileInput">File input</label>
<label class="control-label" for="disabledInput">Disabled input</label>
<div class="controls">
<input class="input-file" id="fileInput" name="fileInput" type="file">
<input class="input-xlarge disabled" id="disabledInput" name="disabledInput" type="text" placeholder="Disabled input here..." disabled>
</div>
</fieldset>
<fieldset class="control-group">
<label class="control-label" for="optionsCheckbox">Disabled checkbox</label>
<div class="controls">
<label class="checkbox">
<input type="checkbox" name="optionsCheckbox" value="option1" disabled>
This is a disabled checkbox
</label>
</div>
</fieldset>
<fieldset class="control-group warning">
@ -979,6 +997,54 @@ Form states
<span class="help-inline">Woohoo!</span>
</div>
</fieldset>
<fieldset class="form-actions">
<button type="submit" class="btn primary">Save changes</button>
<button type="reset" class="btn">Cancel</button>
</fieldset>
</form>
</div>
<div class="span4">
<div class="form-docs">
<h3>Redesigned browser states</h3>
<p>Bootstrap features styles for browser-supported focused and <code>disabled</code> states. We remove the default Webkit <code>outline</code> and apply a <code>box-shadow</code> in it's place for <code>:focus</code>.</p>
<hr>
<h3>Form validation</h3>
<p>It also includes validation styles for errors, warnings, and success. To use, add the a class to the surrounding <code>.control-group</code>.</p>
<pre class="prettyprint">
&lt;fieldset class="control-group error"&gt;
...
&lt;/fieldset&gt;
</pre>
</div>
</div>
</div>
<br>
<div class="row">
<div class="span8">
<form class="horizontal-form">
<legend>Extending form controls</legend>
<fieldset class="control-group">
<label class="control-label" for="prependedInput">Prepended text</label>
<div class="controls">
<div class="input-prepend">
<span class="add-on">@</span>
<input class="input-small" id="prependedInput" name="prependedInput" size="16" type="text">
</div>
<p class="help-block">Here's some help text</p>
</div>
</fieldset>
<fieldset class="control-group">
<label class="control-label" for="appendedInput">Appended text</label>
<div class="controls">
<div class="input-append">
<input class="input-small" id="appendedInput" name="appendedInput" size="16" type="text">
<span class="add-on">.00</span>
</div>
<p class="help-block">Here's more help text</p>
</div>
</fieldset>
<fieldset class="control-group">
<label class="control-label" for="optionsCheckboxes">Checkboxes</label>
<div class="controls">
@ -994,10 +1060,6 @@ Form states
<input type="checkbox" name="optionsCheckboxes" value="option3">
Option three can&mdash;yes, you guessed it&mdash;also be checked and included in form results
</label>
<label class="checkbox">
<input type="checkbox" name="optionsCheckboxes" value="option4">
Option four cannot be checked as it is disabled
</label>
<p class="help-text"><strong>Note:</strong> Labels surround all the options for much larger click areas and a more usable form.</p>
</div>
</fieldset>
@ -1010,49 +1072,7 @@ Form states
</label>
<label class="radio">
<input type="radio" name="optionsRadios" value="option2">
Option two can is something else and selecting it will deselect options 1
</label>
<p class="help-text"><strong>Note:</strong> Labels surround all the options for much larger click areas and a more usable form.</p>
</div>
</fieldset>
<fieldset class="form-actions">
<button type="submit" class="btn primary">Save changes</button>
<button type="reset" class="btn">Cancel</button>
</fieldset>
</form>
</div>
</div><!-- /row -->
<div class="row">
<div class="span3">
<h2>Vertical form</h2>
</div>
<div class="span9">
<form class="vertical-form">
<legend>Example form</legend>
<fieldset class="control-group">
<label class="control-label" for="input01">Label</label>
<div class="controls">
<input type="text" class="xlarge" name="input01">
<p class="help-text">Be sure to fill this out like so, or else!</p>
</div>
</fieldset>
<fieldset class="control-group">
<label class="control-label" for="select01">Label</label>
<div class="controls">
<select name="select01"></select>
</div>
</fieldset>
<fieldset class="control-group">
<label class="control-label" for="input02">Label</label>
<div class="controls">
<label class="checkbox">
<input type="checkbox"> Something something something something something
</label>
<label class="checkbox">
<input type="checkbox"> Something something something something
</label>
<label class="checkbox">
<input type="checkbox"> Something something something
Option two can is something else and selecting it will deselect option one
</label>
</div>
</fieldset>
@ -1062,11 +1082,24 @@ Form states
</fieldset>
</form>
</div>
<div class="span4">
<div class="form-docs">
<h3>Prepend &amp; append inputs</h3>
<p>Input groups&mdash;with appended or prepended text&mdash;provide an easy way to give more context for your inputs. Great examples include the @ sign for Twitter usernames or $ for finances.</p>
<hr>
<h3>Checkboxes and radios</h3>
<p>Up to v1.4, Bootstrap required extra markup around checkboxes and radios to stack them. Now, it's a simple matter of repeating the <code>&lt;label class="checkbox"&gt;</code> that wraps the <code>&lt;input type="checkbox"&gt;</code>.</p>
</div>
</div>
</div><!-- /row -->
</section>
<h2>Buttons</h2>
<section id="buttons">
<div class="page-header">
<h1>Buttons</h1>
</div>
<table class="bordered-table striped-table">
<thead>
<tr>
@ -1084,7 +1117,7 @@ Form states
<tr>
<td><a class="btn primary" href="#">Primary</a></td>
<td><code>.primary</code></td>
<td>Makes button blue for more visual weight to indicate the primary action in a set of buttons</td>
<td>Provides extra visual weight and identifies the primary action in a set of buttons</td>
</tr>
<tr>
<td><a class="btn info" href="#">Info</a></td>
@ -1094,12 +1127,12 @@ Form states
<tr>
<td><a class="btn success" href="#">Success</a></td>
<td><code>.success</code></td>
<td>Used to indicate a successful or positive action will be taken</td>
<td>Indicates a successful or positive action</td>
</tr>
<tr>
<td><a class="btn danger" href="#">Danger</a></td>
<td><code>.danger</code></td>
<td>Used to indicate a dangerous or potentially negative action will be taken</td>
<td>Indicates a dangerous or potentially negative action</td>
</tr>
</tbody>
</table>
@ -1296,6 +1329,9 @@ Form states
<i class="asterisk"></i>
</div>
</div>
<div class="span2">
<p class="muted">Light red background color is only used to show the dimensions of the icons in the docs.</p>
</div>
</div>
<br>
@ -1328,7 +1364,38 @@ Form states
</div>
<h3>Examples</h3>
<p><a class="btn" href="#"><i class="check"></i> Button</a></p>
<div class="row">
<div class="span4">
<p>Use them in buttons, or in button groups for a toolbar style presentation.</p>
<p>
<a class="btn" href="#"><i class="refresh"></i> Refresh</a>
<a class="btn" href="#"><i class="cog"></i> Settings</a>
</p>
<div class="btn-toolbar">
<div class="btn-group">
<a class="btn" href="#"><i class="font"></i></a>
<a class="btn" href="#"><i class="bold"></i></a>
<a class="btn" href="#"><i class="italic"></i></a>
</div>
<div class="btn-group">
<a class="btn" href="#"><i class="align-left"></i></a>
<a class="btn" href="#"><i class="align-center"></i></a>
<a class="btn" href="#"><i class="align-right"></i></a>
<a class="btn" href="#"><i class="align-justify"></i></a>
</div>
</div>
</div>
<div class="span3">
<p>Or, use them in navigation.</p>
<div class="well side-nav">
<ul class="nav-group">
<li class="active"><a class="nav-item" href="#"><i class="home"></i> Home</a></li>
<li><a class="nav-item" href="#"><i class="book"></i> Library</a></li>
<li><a class="nav-item" href="#"><i class="cog"></i> Settings</a></li>
</ul>
</div>
</div>
</div>
</section>

2
lib/buttons.less
View File

@ -35,7 +35,7 @@
.btn {
// Button Base
display: inline-block;
padding: 5px 14px 6px;
padding: 5px 10px 6px;
font-size: @baseFontSize;
line-height: normal;
color: #333;

32
lib/forms.less
View File

@ -42,10 +42,11 @@ input,
textarea,
select,
.uneditable-input {
display: inline-block;
display: block;
width: 210px;
height: @baseLineHeight;
padding: 4px;
margin-bottom: 9px;
font-size: @baseFontSize;
line-height: @baseLineHeight;
color: @gray;
@ -177,7 +178,6 @@ select:focus {
// 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) {
display: inline-block;
float: none;
width: ((@gridColumnWidth) * @columnSpan) + (@gridGutterWidth * (@columnSpan - 1)) - 10;
margin-left: 0;
@ -224,6 +224,7 @@ textarea[readonly] {
// FORM FIELD FEEDBACK STATES
// --------------------------
@ -289,10 +290,10 @@ textarea[readonly] {
}
// Placeholder text gets special styles; can't be bundled together though for some reason
:-moz-placeholder {
input:-moz-placeholder {
color: @grayLight;
}
::-webkit-input-placeholder {
input::-webkit-input-placeholder {
color: @grayLight;
}
@ -301,7 +302,7 @@ textarea[readonly] {
// HELP TEXT
// ---------
.help-text {
.help-block {
margin-top: 5px;
margin-bottom: 0;
color: @grayLight;
@ -314,12 +315,6 @@ textarea[readonly] {
padding-left: 5px;
}
// Big blocks of help text
.help-block {
display: block;
max-width: 600px;
}
// INPUT GROUPS
@ -328,6 +323,7 @@ textarea[readonly] {
// Allow us to put symbols and text within the input field for a cleaner look
.input-prepend,
.input-append {
margin-bottom: 5px;
.clearfix(); // Clear the float to prevent wrapping
input {
.border-radius(0 3px 3px 0);
@ -377,6 +373,8 @@ textarea[readonly] {
// -----------
.search-form .search-query {
padding-left: 14px;
padding-right: 14px;
.border-radius(14px);
}
@ -388,6 +386,18 @@ textarea[readonly] {
// Common properties
// -----------------
.search-form,
.inline-form,
.horizontal-form {
input,
textarea,
select,
.uneditable-input {
display: inline-block;
margin-bottom: 0;
}
}
// Margin to space out fieldsets
.control-group {
margin-bottom: @baseLineHeight;

1
lib/mixins.less
View File

@ -98,7 +98,6 @@
// Necessary grid styles for every column to make them appear next to each other horizontally
.gridColumn() {
display: inline;
float: left;
margin-left: @gridGutterWidth;
}