rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-01-28 20:52:21 +01:00
Code Issues Actions Packages Releases Activity

Merge branch '2.1.0-wip' of https://github.com/twitter/bootstrap into respclasses

Browse Source
This commit is contained in:
Roberto - phproberto 2012-07-11 01:31:44 +02:00
commit f0ed383e51
22 changed files with 8545 additions and 8410 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
docs/assets/css/bootstrap-responsive.css vendored
View File

@ -362,6 +362,9 @@
.uneditable-input {
margin-left: 0;
}
.controls-row [class*="span"] + [class*="span"] {
margin-left: 30px;
}
input.span12,
textarea.span12,
.uneditable-input.span12 {
@ -704,6 +707,9 @@
.uneditable-input {
margin-left: 0;
}
.controls-row [class*="span"] + [class*="span"] {
margin-left: 20px;
}
input.span12,
textarea.span12,
.uneditable-input.span12 {
@ -798,6 +804,9 @@
.thumbnails {
margin-left: 0;
}
.thumbnails > li {
float: none;
}
[class*="span"],
.row-fluid [class*="span"] {
display: block;

453
docs/assets/css/bootstrap.css vendored
View File

@ -851,7 +851,7 @@ legend {
display: block;
width: 100%;
padding: 0;
margin-bottom: 30px;
margin-bottom: 20px;
font-size: 21px;
line-height: 40px;
color: #333333;
@ -1143,6 +1143,10 @@ textarea,
margin-left: 0;
}
.controls-row [class*="span"] + [class*="span"] {
margin-left: 20px;
}
input.span12,
textarea.span12,
.uneditable-input.span12 {
@ -1215,6 +1219,25 @@ textarea.span1,
width: 50px;
}
.controls-row {
*zoom: 1;
}
.controls-row:before,
.controls-row:after {
display: table;
line-height: 0;
content: "";
}
.controls-row:after {
clear: both;
}
.controls-row [class*="span"] {
float: left;
}
input[disabled],
select[disabled],
textarea[disabled],
@ -1385,19 +1408,19 @@ select:focus:required:invalid:focus {
*zoom: 1;
}
.input-prepend,
.input-append {
.input-append,
.input-prepend {
margin-bottom: 5px;
font-size: 0;
white-space: nowrap;
}
.input-prepend input,
.input-append input,
.input-prepend select,
.input-prepend input,
.input-append select,
.input-prepend .uneditable-input,
.input-append .uneditable-input {
.input-prepend select,
.input-append .uneditable-input,
.input-prepend .uneditable-input {
position: relative;
margin-bottom: 0;
*margin-left: 0;
@ -1408,17 +1431,17 @@ select:focus:required:invalid:focus {
border-radius: 0 3px 3px 0;
}
.input-prepend input:focus,
.input-append input:focus,
.input-prepend select:focus,
.input-prepend input:focus,
.input-append select:focus,
.input-prepend .uneditable-input:focus,
.input-append .uneditable-input:focus {
.input-prepend select:focus,
.input-append .uneditable-input:focus,
.input-prepend .uneditable-input:focus {
z-index: 2;
}
.input-prepend .add-on,
.input-append .add-on {
.input-append .add-on,
.input-prepend .add-on {
display: inline-block;
width: auto;
height: 20px;
@ -1434,18 +1457,18 @@ select:focus:required:invalid:focus {
border: 1px solid #ccc;
}
.input-prepend .add-on,
.input-append .add-on,
.input-prepend .btn,
.input-append .btn {
.input-prepend .add-on,
.input-append .btn,
.input-prepend .btn {
margin-left: -1px;
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
}
.input-prepend .active,
.input-append .active {
.input-append .active,
.input-prepend .active {
background-color: #a9dba9;
border-color: #46a546;
}
@ -1501,7 +1524,7 @@ select:focus:required:invalid:focus {
border-radius: 0 3px 3px 0;
}
input.search-query {
.search-query {
padding-right: 14px;
padding-right: 4px \9;
padding-left: 14px;
@ -1514,6 +1537,39 @@ input.search-query {
border-radius: 14px;
}
/* Allow for input prepend/append in search forms */
.form-search .input-append .search-query,
.form-search .input-prepend .search-query {
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
}
.form-search .input-append .search-query {
-webkit-border-radius: 14px 0 0 14px;
-moz-border-radius: 14px 0 0 14px;
border-radius: 14px 0 0 14px;
}
.form-search .input-append .btn {
-webkit-border-radius: 0 14px 14px 0;
-moz-border-radius: 0 14px 14px 0;
border-radius: 0 14px 14px 0;
}
.form-search .input-prepend .search-query {
-webkit-border-radius: 0 14px 14px 0;
-moz-border-radius: 0 14px 14px 0;
border-radius: 0 14px 14px 0;
}
.form-search .input-prepend .btn {
-webkit-border-radius: 14px 0 0 14px;
-moz-border-radius: 14px 0 0 14px;
border-radius: 14px 0 0 14px;
}
.form-search input,
.form-inline input,
.form-horizontal input,
@ -2740,7 +2796,7 @@ button.close {
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#e6e6e6));
background-image: -webkit-linear-gradient(top, #ffffff, #e6e6e6);
background-image: -o-linear-gradient(top, #ffffff, #e6e6e6);
background-image: linear-gradient(top, #ffffff, #e6e6e6);
background-image: linear-gradient(to bottom, #ffffff, #e6e6e6);
background-image: -moz-linear-gradient(top, #ffffff, #e6e6e6);
background-repeat: repeat-x;
border: 1px solid #cccccc;
@ -2764,6 +2820,7 @@ button.close {
.btn.active,
.btn.disabled,
.btn[disabled] {
color: #333333;
background-color: #e6e6e6;
*background-color: #d9d9d9;
}
@ -2849,22 +2906,6 @@ button.close {
line-height: 16px;
}
.btn-primary,
.btn-primary:hover,
.btn-warning,
.btn-warning:hover,
.btn-danger,
.btn-danger:hover,
.btn-success,
.btn-success:hover,
.btn-info,
.btn-info:hover,
.btn-inverse,
.btn-inverse:hover {
color: #ffffff;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
}
.btn-primary.active,
.btn-warning.active,
.btn-danger.active,
@ -2880,12 +2921,14 @@ button.close {
}
.btn-primary {
color: #ffffff;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
background-color: #006dcc;
*background-color: #0044cc;
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0044cc));
background-image: -webkit-linear-gradient(top, #0088cc, #0044cc);
background-image: -o-linear-gradient(top, #0088cc, #0044cc);
background-image: linear-gradient(top, #0088cc, #0044cc);
background-image: linear-gradient(to bottom, #0088cc, #0044cc);
background-image: -moz-linear-gradient(top, #0088cc, #0044cc);
background-repeat: repeat-x;
border-color: #0044cc #0044cc #002a80;
@ -2899,6 +2942,7 @@ button.close {
.btn-primary.active,
.btn-primary.disabled,
.btn-primary[disabled] {
color: #ffffff;
background-color: #0044cc;
*background-color: #003bb3;
}
@ -2909,12 +2953,14 @@ button.close {
}
.btn-warning {
color: #ffffff;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
background-color: #faa732;
*background-color: #f89406;
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#fbb450), to(#f89406));
background-image: -webkit-linear-gradient(top, #fbb450, #f89406);
background-image: -o-linear-gradient(top, #fbb450, #f89406);
background-image: linear-gradient(top, #fbb450, #f89406);
background-image: linear-gradient(to bottom, #fbb450, #f89406);
background-image: -moz-linear-gradient(top, #fbb450, #f89406);
background-repeat: repeat-x;
border-color: #f89406 #f89406 #ad6704;
@ -2928,6 +2974,7 @@ button.close {
.btn-warning.active,
.btn-warning.disabled,
.btn-warning[disabled] {
color: #ffffff;
background-color: #f89406;
*background-color: #df8505;
}
@ -2938,12 +2985,14 @@ button.close {
}
.btn-danger {
color: #ffffff;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
background-color: #da4f49;
*background-color: #bd362f;
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ee5f5b), to(#bd362f));
background-image: -webkit-linear-gradient(top, #ee5f5b, #bd362f);
background-image: -o-linear-gradient(top, #ee5f5b, #bd362f);
background-image: linear-gradient(top, #ee5f5b, #bd362f);
background-image: linear-gradient(to bottom, #ee5f5b, #bd362f);
background-image: -moz-linear-gradient(top, #ee5f5b, #bd362f);
background-repeat: repeat-x;
border-color: #bd362f #bd362f #802420;
@ -2957,6 +3006,7 @@ button.close {
.btn-danger.active,
.btn-danger.disabled,
.btn-danger[disabled] {
color: #ffffff;
background-color: #bd362f;
*background-color: #a9302a;
}
@ -2967,12 +3017,14 @@ button.close {
}
.btn-success {
color: #ffffff;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
background-color: #5bb75b;
*background-color: #51a351;
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#62c462), to(#51a351));
background-image: -webkit-linear-gradient(top, #62c462, #51a351);
background-image: -o-linear-gradient(top, #62c462, #51a351);
background-image: linear-gradient(top, #62c462, #51a351);
background-image: linear-gradient(to bottom, #62c462, #51a351);
background-image: -moz-linear-gradient(top, #62c462, #51a351);
background-repeat: repeat-x;
border-color: #51a351 #51a351 #387038;
@ -2986,6 +3038,7 @@ button.close {
.btn-success.active,
.btn-success.disabled,
.btn-success[disabled] {
color: #ffffff;
background-color: #51a351;
*background-color: #499249;
}
@ -2996,12 +3049,14 @@ button.close {
}
.btn-info {
color: #ffffff;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
background-color: #49afcd;
*background-color: #2f96b4;
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#5bc0de), to(#2f96b4));
background-image: -webkit-linear-gradient(top, #5bc0de, #2f96b4);
background-image: -o-linear-gradient(top, #5bc0de, #2f96b4);
background-image: linear-gradient(top, #5bc0de, #2f96b4);
background-image: linear-gradient(to bottom, #5bc0de, #2f96b4);
background-image: -moz-linear-gradient(top, #5bc0de, #2f96b4);
background-repeat: repeat-x;
border-color: #2f96b4 #2f96b4 #1f6377;
@ -3015,6 +3070,7 @@ button.close {
.btn-info.active,
.btn-info.disabled,
.btn-info[disabled] {
color: #ffffff;
background-color: #2f96b4;
*background-color: #2a85a0;
}
@ -3025,12 +3081,14 @@ button.close {
}
.btn-inverse {
color: #ffffff;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
background-color: #363636;
*background-color: #222222;
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#444444), to(#222222));
background-image: -webkit-linear-gradient(top, #444444, #222222);
background-image: -o-linear-gradient(top, #444444, #222222);
background-image: linear-gradient(top, #444444, #222222);
background-image: linear-gradient(to bottom, #444444, #222222);
background-image: -moz-linear-gradient(top, #444444, #222222);
background-repeat: repeat-x;
border-color: #222222 #222222 #000000;
@ -3044,6 +3102,7 @@ button.close {
.btn-inverse.active,
.btn-inverse.disabled,
.btn-inverse[disabled] {
color: #ffffff;
background-color: #222222;
*background-color: #151515;
}
@ -3775,7 +3834,7 @@ input[type="submit"].btn.btn-mini {
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#222222), to(#111111));
background-image: -webkit-linear-gradient(top, #222222, #111111);
background-image: -o-linear-gradient(top, #222222, #111111);
background-image: linear-gradient(top, #222222, #111111);
background-image: linear-gradient(to bottom, #222222, #111111);
background-repeat: repeat-x;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
@ -3828,7 +3887,7 @@ input[type="submit"].btn.btn-mini {
.navbar .btn,
.navbar .btn-group {
margin-top: 5px;
margin-top: 6px;
}
.navbar .btn-group .btn {
@ -3855,11 +3914,12 @@ input[type="submit"].btn.btn-mini {
.navbar-form select,
.navbar-form .radio,
.navbar-form .checkbox {
margin-top: 5px;
margin-top: 6px;
}
.navbar-form input,
.navbar-form select {
.navbar-form select,
.navbar-form .btn {
display: inline-block;
margin-bottom: 0;
}
@ -4044,12 +4104,14 @@ input[type="submit"].btn.btn-mini {
padding: 7px 10px;
margin-right: 5px;
margin-left: 5px;
color: #ffffff;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
background-color: #0e0e0e;
*background-color: #040404;
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#151515), to(#040404));
background-image: -webkit-linear-gradient(top, #151515, #040404);
background-image: -o-linear-gradient(top, #151515, #040404);
background-image: linear-gradient(top, #151515, #040404);
background-image: linear-gradient(to bottom, #151515, #040404);
background-image: -moz-linear-gradient(top, #151515, #040404);
background-repeat: repeat-x;
border-color: #040404 #040404 #000000;
@ -4066,6 +4128,7 @@ input[type="submit"].btn.btn-mini {
.navbar .btn-navbar.active,
.navbar .btn-navbar.disabled,
.navbar .btn-navbar[disabled] {
color: #ffffff;
background-color: #040404;
*background-color: #000000;
}
@ -4178,7 +4241,7 @@ input[type="submit"].btn.btn-mini {
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#f1f1f1));
background-image: -webkit-linear-gradient(top, #ffffff, #f1f1f1);
background-image: -o-linear-gradient(top, #ffffff, #f1f1f1);
background-image: linear-gradient(top, #ffffff, #f1f1f1);
background-image: linear-gradient(to bottom, #ffffff, #f1f1f1);
background-image: -moz-linear-gradient(top, #ffffff, #f1f1f1);
background-repeat: repeat-x;
border: 1px solid #e5e5e5;
@ -4281,7 +4344,7 @@ input[type="submit"].btn.btn-mini {
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#f5f5f5));
background-image: -webkit-linear-gradient(top, #ffffff, #f5f5f5);
background-image: -o-linear-gradient(top, #ffffff, #f5f5f5);
background-image: linear-gradient(top, #ffffff, #f5f5f5);
background-image: linear-gradient(to bottom, #ffffff, #f5f5f5);
background-repeat: repeat-x;
border: 1px solid #ddd;
-webkit-border-radius: 3px;
@ -4579,91 +4642,19 @@ input[type="submit"].btn.btn-mini {
}
.tooltip.top {
margin-top: -2px;
margin-top: -3px;
}
.tooltip.right {
margin-left: 2px;
margin-left: 3px;
}
.tooltip.bottom {
margin-top: 2px;
margin-top: 3px;
}
.tooltip.left {
margin-left: -2px;
}
.tooltip.top .tooltip-arrow {
bottom: -10px;
left: 50%;
margin-left: -10px;
border-top: 10px solid #cccccc;
border-top: 10px solid rgba(0, 0, 0, 0.2);
border-right: 10px solid transparent;
border-left: 10px solid transparent;
}
.tooltip.top .tooltip-arrow:after {
bottom: 1px;
left: -9px;
border-top: 9px solid #ffffff;
border-right: 9px solid transparent;
border-left: 9px solid transparent;
}
.tooltip.left .tooltip-arrow {
top: 50%;
right: -10px;
margin-top: -10px;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-left: 10px solid #cccccc;
border-left: 10px solid rgba(0, 0, 0, 0.2);
}
.tooltip.left .tooltip-arrow:after {
right: 1px;
bottom: -9px;
border-top: 9px solid transparent;
border-bottom: 9px solid transparent;
border-left: 9px solid #ffffff;
}
.tooltip.bottom .tooltip-arrow {
top: -10px;
left: 50%;
margin-left: -10px;
border-right: 10px solid transparent;
border-bottom: 10px solid #cccccc;
border-bottom: 10px solid rgba(0, 0, 0, 0.2);
border-left: 10px solid transparent;
}
.tooltip.bottom .tooltip-arrow:after {
top: 1px;
left: -9px;
border-right: 9px solid transparent;
border-bottom: 9px solid #f5f5f5;
border-left: 9px solid transparent;
}
.tooltip.right .tooltip-arrow {
top: 50%;
left: -10px;
margin-top: -10px;
border-top: 10px solid transparent;
border-right: 10px solid #cccccc;
border-right: 10px solid rgba(0, 0, 0, 0.2);
border-bottom: 10px solid transparent;
}
.tooltip.right .tooltip-arrow:after {
bottom: -9px;
left: 1px;
border-top: 9px solid transparent;
border-right: 9px solid #ffffff;
border-bottom: 9px solid transparent;
margin-left: -3px;
}
.tooltip-inner {
@ -4682,6 +4673,40 @@ input[type="submit"].btn.btn-mini {
position: absolute;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
}
.tooltip.top .tooltip-arrow {
bottom: 0;
left: 50%;
margin-left: -5px;
border-top-color: #000000;
border-width: 5px 5px 0;
}
.tooltip.right .tooltip-arrow {
top: 50%;
left: 0;
margin-top: -5px;
border-right-color: #000000;
border-width: 5px 5px 5px 0;
}
.tooltip.left .tooltip-arrow {
top: 50%;
right: 0;
margin-top: -5px;
border-left-color: #000000;
border-width: 5px 0 5px 5px;
}
.tooltip.bottom .tooltip-arrow {
top: 0;
left: 50%;
margin-left: -5px;
border-bottom-color: #000000;
border-width: 0 5px 5px;
}
.popover {
@ -4690,7 +4715,7 @@ input[type="submit"].btn.btn-mini {
left: 0;
z-index: 1010;
display: none;
width: 218px;
width: 238px;
background-color: #fff;
border: 1px solid #ccc;
border: 1px solid rgba(0, 0, 0, 0.2);
@ -4721,99 +4746,14 @@ input[type="submit"].btn.btn-mini {
margin-right: 10px;
}
.popover.top .arrow {
bottom: -10px;
left: 50%;
margin-left: -10px;
border-top: 10px solid #cccccc;
border-top: 10px solid rgba(0, 0, 0, 0.2);
border-right: 10px solid transparent;
border-left: 10px solid transparent;
}
.popover.top .arrow:after {
bottom: 1px;
left: -9px;
border-top: 9px solid #ffffff;
border-right: 9px solid transparent;
border-left: 9px solid transparent;
}
.popover.right .arrow {
top: 50%;
left: -10px;
margin-top: -10px;
border-top: 10px solid transparent;
border-right: 10px solid #cccccc;
border-right: 10px solid rgba(0, 0, 0, 0.2);
border-bottom: 10px solid transparent;
}
.popover.right .arrow:after {
bottom: -9px;
left: 1px;
border-top: 9px solid transparent;
border-right: 9px solid #ffffff;
border-bottom: 9px solid transparent;
}
.popover.bottom .arrow {
top: -10px;
left: 50%;
margin-left: -10px;
border-right: 10px solid transparent;
border-bottom: 10px solid #cccccc;
border-bottom: 10px solid rgba(0, 0, 0, 0.2);
border-left: 10px solid transparent;
}
.popover.bottom .arrow:after {
top: 1px;
left: -9px;
border-right: 9px solid transparent;
border-bottom: 9px solid #f5f5f5;
border-left: 9px solid transparent;
}
.popover.left .arrow {
top: 50%;
right: -10px;
margin-top: -10px;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-left: 10px solid #cccccc;
border-left: 10px solid rgba(0, 0, 0, 0.2);
}
.popover.left .arrow:after {
right: 1px;
bottom: -9px;
border-top: 9px solid transparent;
border-bottom: 9px solid transparent;
border-left: 9px solid #ffffff;
}
.popover .arrow {
position: absolute;
width: 0;
height: 0;
}
.popover .arrow:after {
position: absolute;
display: inline-block;
width: 0;
height: 0;
content: "";
}
.popover-title {
padding: 8px 14px;
margin: 0;
font-size: 14px;
font-weight: normal;
line-height: 18px;
background-color: #f5f5f5;
border-bottom: 1px solid #e5e5e5;
border-bottom: 1px solid #dcdcdc;
-webkit-border-radius: 5px 5px 0 0;
-moz-border-radius: 5px 5px 0 0;
border-radius: 5px 5px 0 0;
@ -4829,6 +4769,81 @@ input[type="submit"].btn.btn-mini {
margin-bottom: 0;
}
.popover .arrow,
.popover .arrow:after {
position: absolute;
display: inline-block;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
}
.popover .arrow:after {
z-index: -1;
content: "";
}
.popover.top .arrow {
bottom: -10px;
left: 50%;
margin-left: -10px;
border-top-color: #ffffff;
border-width: 10px 10px 0;
}
.popover.top .arrow:after {
bottom: -1px;
left: -11px;
border-top-color: rgba(0, 0, 0, 0.2);
border-width: 11px 11px 0;
}
.popover.right .arrow {
top: 50%;
left: -10px;
margin-top: -10px;
border-right-color: #ffffff;
border-width: 10px 10px 10px 0;
}
.popover.right .arrow:after {
bottom: -11px;
left: -1px;
border-right-color: rgba(0, 0, 0, 0.2);
border-width: 11px 11px 11px 0;
}
.popover.bottom .arrow {
top: -10px;
left: 50%;
margin-left: -10px;
border-bottom-color: #f5f5f5;
border-width: 0 10px 10px;
}
.popover.bottom .arrow:after {
top: -1px;
left: -11px;
border-bottom-color: rgba(0, 0, 0, 0.2);
border-width: 0 11px 11px;
}
.popover.left .arrow {
top: 50%;
right: -10px;
margin-top: -10px;
border-left-color: #ffffff;
border-width: 10px 0 10px 10px;
}
.popover.left .arrow:after {
right: -1px;
bottom: -11px;
border-left-color: rgba(0, 0, 0, 0.2);
border-width: 11px 0 11px 11px;
}
.thumbnails {
margin-left: -20px;
list-style: none;
@ -5025,7 +5040,7 @@ a.badge:hover {
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#f5f5f5), to(#f9f9f9));
background-image: -webkit-linear-gradient(top, #f5f5f5, #f9f9f9);
background-image: -o-linear-gradient(top, #f5f5f5, #f9f9f9);
background-image: linear-gradient(top, #f5f5f5, #f9f9f9);
background-image: linear-gradient(to bottom, #f5f5f5, #f9f9f9);
background-repeat: repeat-x;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
@ -5047,7 +5062,7 @@ a.badge:hover {
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#149bdf), to(#0480be));
background-image: -webkit-linear-gradient(top, #149bdf, #0480be);
background-image: -o-linear-gradient(top, #149bdf, #0480be);
background-image: linear-gradient(top, #149bdf, #0480be);
background-image: linear-gradient(to bottom, #149bdf, #0480be);
background-image: -moz-linear-gradient(top, #149bdf, #0480be);
background-repeat: repeat-x;
filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ff149bdf', endColorstr='#ff0480be', GradientType=0);
@ -5090,7 +5105,7 @@ a.badge:hover {
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ee5f5b), to(#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-image: linear-gradient(to bottom, #ee5f5b, #c43c35);
background-repeat: repeat-x;
filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ffee5f5b', endColorstr='#ffc43c35', GradientType=0);
}
@ -5110,7 +5125,7 @@ a.badge:hover {
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#62c462), to(#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-image: linear-gradient(to bottom, #62c462, #57a957);
background-repeat: repeat-x;
filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ff62c462', endColorstr='#ff57a957', GradientType=0);
}
@ -5130,7 +5145,7 @@ a.badge:hover {
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#5bc0de), to(#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-image: linear-gradient(to bottom, #5bc0de, #339bb9);
background-repeat: repeat-x;
filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ff5bc0de', endColorstr='#ff339bb9', GradientType=0);
}
@ -5150,7 +5165,7 @@ a.badge:hover {
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#fbb450), to(#f89406));
background-image: -webkit-linear-gradient(top, #fbb450, #f89406);
background-image: -o-linear-gradient(top, #fbb450, #f89406);
background-image: linear-gradient(top, #fbb450, #f89406);
background-image: linear-gradient(to bottom, #fbb450, #f89406);
background-repeat: repeat-x;
filter: progid:dximagetransform.microsoft.gradient(startColorstr='#fffbb450', endColorstr='#fff89406', GradientType=0);
}

15
docs/assets/css/docs.css
View File

@ -598,6 +598,17 @@ form.bs-docs-example {
line-height: 18px;
}
/* Tooltips */
.bs-docs-tooltip-examples {
text-align: center;
margin: 0 0 10px;
list-style: none;
}
.bs-docs-tooltip-examples li {
display: inline;
padding: 0 10px;
}
/* Popovers */
.bs-docs-example-popover {
padding-bottom: 24px;
@ -607,8 +618,8 @@ form.bs-docs-example {
position: relative;
display: block;
float: left;
width: 210px;
margin: 10px;
width: 260px;
margin: 20px;
}

76
docs/base-css.html
View File

@ -68,26 +68,17 @@
<div class="container">
<!-- Masthead
<!-- Subhead
================================================== -->
<header class="jumbotron subhead" id="overview">
<h1>Base CSS</h1>
<p class="lead">On top of the scaffolding, basic HTML elements are styled and enhanced with extensible classes to provide a fresh, consistent look and feel.</p>
<div class="navbar navbar-subnav">
<div class="navbar-inner">
<ul class="nav">
<li><a href="#typography">Typography</a></li>
<li><a href="#code">Code</a></li>
<li><a href="#tables">Tables</a></li>
<li><a href="#forms">Forms</a></li>
<li><a href="#buttons">Buttons</a></li>
<li><a href="#icons">Icons by Glyphicons</a></li>
</ul>
</div>
</div>
</header>
<!-- Docs nav
================================================== -->
<div class="row">
<div class="span3 bs-docs-sidebar">
<ul class="nav nav-list bs-docs-sidenav">
@ -761,6 +752,7 @@ For example, &lt;code&gt;section&lt;/code&gt; should be wrapped as inline.
<h2>Default styles</h2>
<p>Individual form controls receive styling, but without any required base class on the <code>&lt;form&gt;</code> or large changes in markup. Results in stacked, left-aligned labels on top of form controls.</p>
<form class="bs-docs-example">
<legend>Legend</legend>
<label>Label name</label>
<input type="text" placeholder="Type something…">
<p class="help-block">Example block-level help text here.</p>
@ -831,6 +823,7 @@ For example, &lt;code&gt;section&lt;/code&gt; should be wrapped as inline.
<li>Wrap any associated controls in <code>.controls</code> for proper alignment</li>
</ul>
<form class="bs-docs-example form-horizontal">
<legend>Legend</legend>
<div class="control-group">
<label class="control-label" for="">Email</label>
<div class="controls">
@ -1068,13 +1061,31 @@ For example, &lt;code&gt;section&lt;/code&gt; should be wrapped as inline.
&lt;div class="input-append"&gt;
&lt;input class="span2" id="appendedInputButtons" size="16" type="text"&gt;&lt;button class="btn" type="button"&gt;Search&lt;/button&gt;&lt;button class="btn" type="button"&gt;Options&lt;/button&gt;
&lt;/div&gt;
</pre>
<h4>Search form</h4>
<form class="bs-docs-example form-search">
<div class="input-append">
<input type="text" class="span2 search-query">
<button type="submit" class="btn">Search</button>
</div>
<div class="input-prepend">
<button type="submit" class="btn">Search</button>
<input type="text" class="span2 search-query">
</div>
</form>
<pre class="prettyprint linenums">
&lt;form class="form-search"&gt;
&lt;input type="text" class="span2 search-query"&gt;
&lt;button type="submit" class="btn"&gt;Search&lt;/button&gt;
&lt;/form&gt;
</pre>
<h3>Control sizing</h3>
<p>Use relative sizing classes like <code>.input-large</code> or match your inputs to the grid column sizes using <code>.span*</code> classes.</p>
<h4>Relative sizing</h4>
<form class="bs-docs-example">
<form class="bs-docs-example" style="padding-bottom: 15px;">
<div class="controls docs-input-sizes">
<input class="input-mini" type="text" placeholder=".input-mini">
<input class="input-small" type="text" placeholder=".input-small">
@ -1092,10 +1103,13 @@ For example, &lt;code&gt;section&lt;/code&gt; should be wrapped as inline.
&lt;input class="input-xlarge" type="text"&gt;
&lt;input class="input-xxlarge" type="text"&gt;
</pre>
<p>
<span class="label label-info">Heads up!</span> In future versions, we'll be altering the use of these relative input classes to match our button sizes. For example, <code>.input-large</code> will increase the padding and font-size of an input.
</p>
<h4>Grid sizing</h4>
<p>Use <code>.span1</code> to <code>.span12</code> for inputs that match the same sizes of the grid columns.</p>
<form class="bs-docs-example">
<form class="bs-docs-example" style="padding-bottom: 15px;">
<div class="controls docs-input-sizes">
<input class="span1" type="text" placeholder=".span1">
<input class="span2" type="text" placeholder=".span2">
@ -1127,6 +1141,35 @@ For example, &lt;code&gt;section&lt;/code&gt; should be wrapped as inline.
&lt;input class="span1" type="text"&gt;
&lt;input class="span2" type="text"&gt;
&lt;input class="span3" type="text"&gt;
</pre>
<p>For multiple grid inputs per line, <strong>use the <code>.controls-row</code> modifier class for proper spacing</strong>. It floats the inputs to collapse white-space, sets the proper margins, and the clears the float.</p>
<form class="bs-docs-example" style="padding-bottom: 15px;">
<div class="controls">
<input class="span5" type="text" placeholder=".span5">
</div>
<div class="controls controls-row">
<input class="span4" type="text" placeholder=".span4">
<input class="span1" type="text" placeholder=".span1">
</div>
<div class="controls controls-row">
<input class="span3" type="text" placeholder=".span3">
<input class="span2" type="text" placeholder=".span2">
</div>
<div class="controls controls-row">
<input class="span2" type="text" placeholder=".span2">
<input class="span3" type="text" placeholder=".span3">
</div>
<div class="controls controls-row">
<input class="span1" type="text" placeholder=".span1">
<input class="span4" type="text" placeholder=".span4">
</div>
</form>
<pre class="prettyprint linenums">
&lt;div class="controls controls-row"&gt;
&lt;input class="span4" type="text" placeholder=".span4"&gt;
&lt;input class="span1" type="text" placeholder=".span1"&gt;
&lt;/div&gt;
</pre>
<h3>Uneditable inputs</h3>
@ -1623,9 +1666,12 @@ For example, &lt;code&gt;section&lt;/code&gt; should be wrapped as inline.
</section>
</div>
</div>
<!-- Footer
================================================== -->
<footer class="footer">

38
docs/components.html
View File

@ -68,43 +68,17 @@
<div class="container">
<!-- Masthead
<!-- Subhead
================================================== -->
<header class="jumbotron subhead" id="overview">
<h1>Components</h1>
<p class="lead">Dozens of reusable components are built into Bootstrap to provide navigation, alerts, popovers, and much more.</p>
<div class="navbar navbar-subnav">
<div class="navbar-inner">
<ul class="nav">
<li><a href="#dropdowns">Dropdowns</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Buttons <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#buttonGroups">Button groups</a></li>
<li><a href="#buttonDropdowns">Button dropdowns</a></li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Nav <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#navs">Nav, tabs, pills</a></li>
<li><a href="#navbar">Navbar</a></li>
<li><a href="#breadcrumbs">Breadcrumbs</a></li>
<li><a href="#pagination">Pagination</a></li>
</ul>
</li>
<li><a href="#labels">Labels</a></li>
<li><a href="#badges">Badges</a></li>
<li><a href="#typography">Typography</a></li>
<li><a href="#thumbnails">Thumbnails</a></li>
<li><a href="#alerts">Alerts</a></li>
<li><a href="#progress">Progress bars</a></li>
<li><a href="#misc">Misc</a></li>
</ul>
</div>
</div>
</header>
<!-- Docs nav
================================================== -->
<div class="row">
<div class="span3 bs-docs-sidebar">
<ul class="nav nav-list bs-docs-sidenav">
@ -2216,6 +2190,8 @@ class="clearfix"
</section>
</div>
</div>

49
docs/extend.html
View File

@ -68,26 +68,32 @@
<div class="container">
<!-- Masthead
<!-- Subhead
================================================== -->
<header class="jumbotron subhead" id="overview">
<h1>Extending Bootstrap</h1>
<p class="lead">Extend Bootstrap with <a href="http://lesscss.org" target="_blank">LESS</a>, a CSS preprocessor, to take advantage of the variables, mixins, and more used to build Bootstrap's CSS.</p>
<div class="navbar navbar-subnav">
<div class="navbar-inner">
<ul class="nav">
<li><a href="#builtWith">Built with Less</a></li>
<p class="lead">Extend Bootstrap to take advantage of included styles and components, as well as LESS variables and mixins.</p>
</header>
<!-- Docs nav
================================================== -->
<div class="row">
<div class="span3 bs-docs-sidebar">
<ul class="nav nav-list bs-docs-sidenav">
<li><a href="#built-with-less">Built with LESS</a></li>
<li><a href="#compiling">Compiling Bootstrap</a></li>
<li><a href="#static-assets">Use as static assets</a></li>
</ul>
</div>
</div>
</header>
<div class="span9">
<!-- BUILT WITH LESS
================================================== -->
<section id="builtWith">
<section id="built-with-less">
<div class="page-header">
<h1>Built with LESS</h1>
</div>
@ -101,15 +107,6 @@
<h3>Learn more</h3>
<img style="float: right; height: 36px;" src="assets/img/less-logo-large.png" alt="LESS CSS">
<p>Visit the official website at <a href="http://lesscss.org">http://lesscss.org</a> to learn more.</p>
<h3><a href="#variables">Variables</a></h3>
<p>Managing colors and pixel values in CSS can be a bit of a pain, usually full of copy and paste. Not with LESS though&mdash;assign colors or pixel values as variables and change them once.</p>
<h3><a href="#mixins">Mixins</a></h3>
<p>Those three border-radius declarations you need to make in regular ol' CSS? Now they're down to one line with the help of mixins, snippets of code you can reuse anywhere.</p>
<h3>Operations</h3>
<p>Make your grid, leading, and more super flexible by doing the math on the fly with operations. Multiply, divide, add, and subtract your way to CSS sanity.</p>
</section>
@ -160,6 +157,22 @@
</section>
<!-- Static assets
================================================== -->
<section id="static-assets">
<div class="page-header">
<h1>Use as static assets</h1>
</div>
<p>...</p>
</section>
</div>
</div>
<!-- Footer
================================================== -->
<footer class="footer">

43
docs/javascript.html
View File

@ -68,33 +68,17 @@
<div class="container">
<!-- Masthead
<!-- Subhead
================================================== -->
<header class="jumbotron subhead" id="overview">
<h1>Javascript for Bootstrap</h1>
<p class="lead">Bring Bootstrap's components to life&mdash;now with 12 custom <a href="http://jquery.com/" target="_blank">jQuery</a> plugins.
<div class="navbar navbar-subnav">
<div class="navbar-inner">
<ul class="nav">
<li><a href="#transitions">Transitions</a></li>
<li><a href="#modals">Modal</a></li>
<li><a href="#dropdowns">Dropdown</a></li>
<li><a href="#scrollspy">Scrollspy</a></li>
<li><a href="#tabs">Tab</a></li>
<li><a href="#tooltips">Tooltip</a></li>
<li><a href="#popovers">Popover</a></li>
<li><a href="#alerts">Alert</a></li>
<li><a href="#buttons">Button</a></li>
<li><a href="#collapse">Collapse</a></li>
<li><a href="#carousel">Carousel</a></li>
<li><a href="#typeahead">Typeahead</a></li>
<li><a href="#affix">Affix</a></li>
</ul>
</div>
</div>
</header>
<!-- Docs nav
================================================== -->
<div class="row">
<div class="span3 bs-docs-sidebar">
<ul class="nav nav-list bs-docs-sidenav">
@ -117,7 +101,6 @@
<!-- Overview
================================================== -->
<section id="overview">
@ -753,10 +736,20 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
<p>Inspired by the excellent jQuery.tipsy plugin written by Jason Frame; Tooltips are an updated version, which don't rely on images, use CSS3 for animations, and data-attributes for local title storage.</p>
<p>Hover over the links below to see tooltips:</p>
<div class="bs-docs-example tooltip-demo">
<p class="muted" style="margin-bottom: 0;">Tight pants next level keffiyeh <a href="#" rel="tooltip" title="first tooltip">you probably</a> haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown. Farm-to-table seitan, mcsweeney's fixie sustainable quinoa 8-bit american apparel <a href="#" rel="tooltip" title="Another tooltip">have a</a> terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, four loko mcsweeney's cleanse vegan chambray. A really ironic artisan <a href="#" rel="tooltip" title="Another one here too">whatever keytar</a>, scenester farm-to-table banksy Austin <a href="#" rel="tooltip" title="The last tip!">twitter handle</a> freegan cred raw denim single-origin coffee viral.
<p class="muted" style="margin-bottom: 0;">Tight pants next level keffiyeh <a href="#" rel="tooltip" title="Default tooltip">you probably</a> haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown. Farm-to-table seitan, mcsweeney's fixie sustainable quinoa 8-bit american apparel <a href="#" rel="tooltip" title="Another tooltip">have a</a> terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, four loko mcsweeney's cleanse vegan chambray. A really ironic artisan <a href="#" rel="tooltip" title="Another one here too">whatever keytar</a>, scenester farm-to-table banksy Austin <a href="#" rel="tooltip" title="The last tip!">twitter handle</a> freegan cred raw denim single-origin coffee viral.
</p>
</div>
<h3>Four directions</h3>
<div class="bs-docs-example tooltip-demo">
<ul class="bs-docs-tooltip-examples">
<li><a href="#" rel="tooltip" data-placement="top" title="Tooltip on top">Tooltip on top</a></li>
<li><a href="#" rel="tooltip" data-placement="right" title="Tooltip on right">Tooltip on right</a></li>
<li><a href="#" rel="tooltip" data-placement="bottom" title="Tooltip on bottom">Tooltip on bottom</a></li>
<li><a href="#" rel="tooltip" data-placement="left" title="Tooltip on left">Tooltip on left</a></li>
</ul>
</div>
<hr class="bs-docs-separator">
@ -863,8 +856,7 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
</div>
<h2>Examples</h2>
<p>Add small overlays of content, like those on the iPad, to any element for housing secondary information. Hover over the button to trigger the popover.</p>
<p class="muted"><strong>*</strong> Requires <a href="#tooltips">Tooltip</a> to be included</p>
<p>Add small overlays of content, like those on the iPad, to any element for housing secondary information. Hover over the button to trigger the popover. <strong>Requires <a href="#tooltips">Tooltip</a> to be included.</strong></p>
<h3>Static popover</h3>
<p>Four options are available: top, right, bottom, and left aligned.</p>
@ -1591,9 +1583,12 @@ $('.carousel').carousel({
</pre>
</section>
</div>
</div>
<!-- Footer
================================================== -->
<footer class="footer">

26
docs/scaffolding.html
View File

@ -68,26 +68,17 @@
<div class="container">
<!-- Masthead
<!-- Subhead
================================================== -->
<header class="jumbotron subhead" id="overview">
<h1>Scaffolding</h1>
<p class="lead">Bootstrap is built on a responsive 12-column grid. We've also included fixed- and fluid-width layouts based on that system.</p>
<div class="navbar navbar-subnav">
<div class="navbar-inner">
<ul class="nav">
<li><a href="#global">Global styles</a></li>
<li><a href="#gridSystem">Grid system</a></li>
<li><a href="#fluidGridSystem">Fluid grid system</a></li>
<li><a href="#gridCustomization">Customizing</a></li>
<li><a href="#layouts">Layouts</a></li>
<li><a href="#responsive">Responsive design</a></li>
</ul>
</div>
</div>
</header>
<!-- Docs nav
================================================== -->
<div class="row">
<div class="span3 bs-docs-sidebar">
<ul class="nav nav-list bs-docs-sidenav">
@ -532,9 +523,9 @@
<thead>
<tr>
<th>Class</th>
<th>Phones <small>480px and below</small></th>
<th>Tablets <small>767px and below</small></th>
<th>Desktops <small>768px and above</small></th>
<th>Phones <small>767px and below</small></th>
<th>Tablets <small>979px to 768px</small></th>
<th>Desktops <small>Default</small></th>
</tr>
</thead>
<tbody>
@ -599,9 +590,12 @@
</section>
</div>
</div>
<!-- Footer
================================================== -->
<footer class="footer">

79
docs/templates/pages/base-css.mustache vendored
View File

@ -1,23 +1,14 @@
<!-- Masthead
<!-- Subhead
================================================== -->
<header class="jumbotron subhead" id="overview">
<h1>{{_i}}Base CSS{{/i}}</h1>
<p class="lead">{{_i}}On top of the scaffolding, basic HTML elements are styled and enhanced with extensible classes to provide a fresh, consistent look and feel.{{/i}}</p>
<div class="navbar navbar-subnav">
<div class="navbar-inner">
<ul class="nav">
<li><a href="#typography">{{_i}}Typography{{/i}}</a></li>
<li><a href="#code">{{_i}}Code{{/i}}</a></li>
<li><a href="#tables">{{_i}}Tables{{/i}}</a></li>
<li><a href="#forms">{{_i}}Forms{{/i}}</a></li>
<li><a href="#buttons">{{_i}}Buttons{{/i}}</a></li>
<li><a href="#icons">{{_i}}Icons by Glyphicons{{/i}}</a></li>
</ul>
</div>
</div>
</header>
<!-- Docs nav
================================================== -->
<div class="row">
<div class="span3 bs-docs-sidebar">
<ul class="nav nav-list bs-docs-sidenav">
@ -699,6 +690,7 @@
<h2>{{_i}}Default styles{{/i}}</h2>
<p>{{_i}}Individual form controls receive styling, but without any required base class on the <code>&lt;form&gt;</code> or large changes in markup. Results in stacked, left-aligned labels on top of form controls.{{/i}}</p>
<form class="bs-docs-example">
<legend>Legend</legend>
<label>{{_i}}Label name{{/i}}</label>
<input type="text" placeholder="{{_i}}Type something…{{/i}}">
<p class="help-block">{{_i}}Example block-level help text here.{{/i}}</p>
@ -769,6 +761,7 @@
<li>{{_i}}Wrap any associated controls in <code>.controls</code> for proper alignment{{/i}}</li>
</ul>
<form class="bs-docs-example form-horizontal">
<legend>Legend</legend>
<div class="control-group">
<label class="control-label" for="">{{_i}}Email{{/i}}</label>
<div class="controls">
@ -1006,13 +999,31 @@
&lt;div class="input-append"&gt;
&lt;input class="span2" id="appendedInputButtons" size="16" type="text"&gt;&lt;button class="btn" type="button"&gt;Search&lt;/button&gt;&lt;button class="btn" type="button"&gt;Options&lt;/button&gt;
&lt;/div&gt;
</pre>
<h4>{{_i}}Search form{{/i}}</h4>
<form class="bs-docs-example form-search">
<div class="input-append">
<input type="text" class="span2 search-query">
<button type="submit" class="btn">{{_i}}Search{{/i}}</button>
</div>
<div class="input-prepend">
<button type="submit" class="btn">{{_i}}Search{{/i}}</button>
<input type="text" class="span2 search-query">
</div>
</form>{{! /example }}
<pre class="prettyprint linenums">
&lt;form class="form-search"&gt;
&lt;input type="text" class="span2 search-query"&gt;
&lt;button type="submit" class="btn"&gt;{{_i}}Search{{/i}}&lt;/button&gt;
&lt;/form&gt;
</pre>
<h3>{{_i}}Control sizing{{/i}}</h3>
<p>{{_i}}Use relative sizing classes like <code>.input-large</code> or match your inputs to the grid column sizes using <code>.span*</code> classes.{{/i}}</p>
<h4>{{_i}}Relative sizing{{/i}}</h4>
<form class="bs-docs-example">
<form class="bs-docs-example" style="padding-bottom: 15px;">
<div class="controls docs-input-sizes">
<input class="input-mini" type="text" placeholder=".input-mini">
<input class="input-small" type="text" placeholder=".input-small">
@ -1030,10 +1041,13 @@
&lt;input class="input-xlarge" type="text"&gt;
&lt;input class="input-xxlarge" type="text"&gt;
</pre>
<p>
<span class="label label-info">{{_i}}Heads up!{{/i}}</span> In future versions, we'll be altering the use of these relative input classes to match our button sizes. For example, <code>.input-large</code> will increase the padding and font-size of an input.
</p>
<h4>{{_i}}Grid sizing{{/i}}</h4>
<p>{{_i}}Use <code>.span1</code> to <code>.span12</code> for inputs that match the same sizes of the grid columns.{{/i}}</p>
<form class="bs-docs-example">
<form class="bs-docs-example" style="padding-bottom: 15px;">
<div class="controls docs-input-sizes">
<input class="span1" type="text" placeholder=".span1">
<input class="span2" type="text" placeholder=".span2">
@ -1065,6 +1079,35 @@
&lt;input class="span1" type="text"&gt;
&lt;input class="span2" type="text"&gt;
&lt;input class="span3" type="text"&gt;
</pre>
<p>{{_i}}For multiple grid inputs per line, <strong>use the <code>.controls-row</code> modifier class for proper spacing</strong>. It floats the inputs to collapse white-space, sets the proper margins, and the clears the float.{{/i}}</p>
<form class="bs-docs-example" style="padding-bottom: 15px;">
<div class="controls">
<input class="span5" type="text" placeholder=".span5">
</div>
<div class="controls controls-row">
<input class="span4" type="text" placeholder=".span4">
<input class="span1" type="text" placeholder=".span1">
</div>
<div class="controls controls-row">
<input class="span3" type="text" placeholder=".span3">
<input class="span2" type="text" placeholder=".span2">
</div>
<div class="controls controls-row">
<input class="span2" type="text" placeholder=".span2">
<input class="span3" type="text" placeholder=".span3">
</div>
<div class="controls controls-row">
<input class="span1" type="text" placeholder=".span1">
<input class="span4" type="text" placeholder=".span4">
</div>
</form>
<pre class="prettyprint linenums">
&lt;div class="controls controls-row"&gt;
&lt;input class="span4" type="text" placeholder=".span4"&gt;
&lt;input class="span1" type="text" placeholder=".span1"&gt;
&lt;/div&gt;
</pre>
<h3>{{_i}}Uneditable inputs{{/i}}</h3>
@ -1561,5 +1604,7 @@
</section>
</div>
</div>
</div>{{! /span9 }}
</div>{{! row}}

42
docs/templates/pages/components.mustache vendored
View File

@ -1,40 +1,14 @@
<!-- Masthead
<!-- Subhead
================================================== -->
<header class="jumbotron subhead" id="overview">
<h1>{{_i}}Components{{/i}}</h1>
<p class="lead">{{_i}}Dozens of reusable components are built into Bootstrap to provide navigation, alerts, popovers, and much more.{{/i}}</p>
<div class="navbar navbar-subnav">
<div class="navbar-inner">
<ul class="nav">
<li><a href="#dropdowns">{{_i}}Dropdowns{{/i}}</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">{{_i}}Buttons{{/i}} <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#buttonGroups">{{_i}}Button groups{{/i}}</a></li>
<li><a href="#buttonDropdowns">{{_i}}Button dropdowns{{/i}}</a></li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">{{_i}}Nav{{/i}} <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#navs">{{_i}}Nav, tabs, pills{{/i}}</a></li>
<li><a href="#navbar">{{_i}}Navbar{{/i}}</a></li>
<li><a href="#breadcrumbs">{{_i}}Breadcrumbs{{/i}}</a></li>
<li><a href="#pagination">{{_i}}Pagination{{/i}}</a></li>
</ul>
</li>
<li><a href="#labels">{{_i}}Labels{{/i}}</a></li>
<li><a href="#badges">{{_i}}Badges{{/i}}</a></li>
<li><a href="#typography">{{_i}}Typography{{/i}}</a></li>
<li><a href="#thumbnails">{{_i}}Thumbnails{{/i}}</a></li>
<li><a href="#alerts">{{_i}}Alerts{{/i}}</a></li>
<li><a href="#progress">{{_i}}Progress bars{{/i}}</a></li>
<li><a href="#misc">{{_i}}Misc{{/i}}</a></li>
</ul>
</div>
</div>
</header>
<!-- Docs nav
================================================== -->
<div class="row">
<div class="span3 bs-docs-sidebar">
<ul class="nav nav-list bs-docs-sidenav">
@ -2146,5 +2120,7 @@ class="clearfix"
</section>
</div>
</div>
</div>{{! /span9 }}
</div>{{! row}}

49
docs/templates/pages/extend.mustache vendored
View File

@ -1,23 +1,29 @@
<!-- Masthead
<!-- Subhead
================================================== -->
<header class="jumbotron subhead" id="overview">
<h1>{{_i}}Extending Bootstrap{{/i}}</h1>
<p class="lead">{{_i}}Extend Bootstrap with <a href="http://lesscss.org" target="_blank">LESS</a>, a CSS preprocessor, to take advantage of the variables, mixins, and more used to build Bootstrap's CSS.{{/i}}</p>
<div class="navbar navbar-subnav">
<div class="navbar-inner">
<ul class="nav">
<li><a href="#builtWith">{{_i}}Built with Less{{/i}}</a></li>
<p class="lead">{{_i}}Extend Bootstrap to take advantage of included styles and components, as well as LESS variables and mixins.{{/i}}</p>
</header>
<!-- Docs nav
================================================== -->
<div class="row">
<div class="span3 bs-docs-sidebar">
<ul class="nav nav-list bs-docs-sidenav">
<li><a href="#built-with-less">{{_i}}Built with LESS{{/i}}</a></li>
<li><a href="#compiling">{{_i}}Compiling Bootstrap{{/i}}</a></li>
<li><a href="#static-assets">{{_i}}Use as static assets{{/i}}</a></li>
</ul>
</div>
</div>
</header>
<div class="span9">
<!-- BUILT WITH LESS
================================================== -->
<section id="builtWith">
<section id="built-with-less">
<div class="page-header">
<h1>{{_i}}Built with LESS{{/i}}</h1>
</div>
@ -31,15 +37,6 @@
<h3>{{_i}}Learn more{{/i}}</h3>
<img style="float: right; height: 36px;" src="assets/img/less-logo-large.png" alt="LESS CSS">
<p>{{_i}}Visit the official website at <a href="http://lesscss.org">http://lesscss.org</a> to learn more.{{/i}}</p>
<h3><a href="#variables">{{_i}}Variables{{/i}}</a></h3>
<p>{{_i}}Managing colors and pixel values in CSS can be a bit of a pain, usually full of copy and paste. Not with LESS though&mdash;assign colors or pixel values as variables and change them once.{{/i}}</p>
<h3><a href="#mixins">{{_i}}Mixins{{/i}}</a></h3>
<p>{{_i}}Those three border-radius declarations you need to make in regular ol' CSS? Now they're down to one line with the help of mixins, snippets of code you can reuse anywhere.{{/i}}</p>
<h3>{{_i}}Operations{{/i}}</h3>
<p>{{_i}}Make your grid, leading, and more super flexible by doing the math on the fly with operations. Multiply, divide, add, and subtract your way to CSS sanity.{{/i}}</p>
</section>
@ -88,3 +85,19 @@
<p>{{_i}}Mac, Linux, and PC app for drag and drop compiling of LESS files. Plus, the <a href="https://github.com/Paratron/SimpLESS" target="_blank">source code is on GitHub</a>.{{/i}}</p>
</section>
<!-- Static assets
================================================== -->
<section id="static-assets">
<div class="page-header">
<h1>{{_i}}Use as static assets{{/i}}</h1>
</div>
<p>...</p>
</section>
</div>{{! /span9 }}
</div>{{! row}}

46
docs/templates/pages/javascript.mustache vendored
View File

@ -1,30 +1,14 @@
<!-- Masthead
<!-- Subhead
================================================== -->
<header class="jumbotron subhead" id="overview">
<h1>{{_i}}Javascript for Bootstrap{{/i}}</h1>
<p class="lead">{{_i}}Bring Bootstrap's components to life&mdash;now with 12 custom <a href="http://jquery.com/" target="_blank">jQuery</a> plugins.{{/i}}
<div class="navbar navbar-subnav">
<div class="navbar-inner">
<ul class="nav">
<li><a href="#transitions">{{_i}}Transitions{{/i}}</a></li>
<li><a href="#modals">{{_i}}Modal{{/i}}</a></li>
<li><a href="#dropdowns">{{_i}}Dropdown{{/i}}</a></li>
<li><a href="#scrollspy">{{_i}}Scrollspy{{/i}}</a></li>
<li><a href="#tabs">{{_i}}Tab{{/i}}</a></li>
<li><a href="#tooltips">{{_i}}Tooltip{{/i}}</a></li>
<li><a href="#popovers">{{_i}}Popover{{/i}}</a></li>
<li><a href="#alerts">{{_i}}Alert{{/i}}</a></li>
<li><a href="#buttons">{{_i}}Button{{/i}}</a></li>
<li><a href="#collapse">{{_i}}Collapse{{/i}}</a></li>
<li><a href="#carousel">{{_i}}Carousel{{/i}}</a></li>
<li><a href="#typeahead">{{_i}}Typeahead{{/i}}</a></li>
<li><a href="#affix">{{_i}}Affix{{/i}}</a></li>
</ul>
</div>
</div>
</header>
<!-- Docs nav
================================================== -->
<div class="row">
<div class="span3 bs-docs-sidebar">
<ul class="nav nav-list bs-docs-sidenav">
@ -47,7 +31,6 @@
<!-- Overview
================================================== -->
<section id="overview">
@ -685,10 +668,20 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
<p>{{_i}}Inspired by the excellent jQuery.tipsy plugin written by Jason Frame; Tooltips are an updated version, which don't rely on images, use CSS3 for animations, and data-attributes for local title storage.{{/i}}</p>
<p>{{_i}}Hover over the links below to see tooltips:{{/i}}</p>
<div class="bs-docs-example tooltip-demo">
<p class="muted" style="margin-bottom: 0;">{{_i}}Tight pants next level keffiyeh <a href="#" rel="tooltip" title="first tooltip">you probably</a> haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown. Farm-to-table seitan, mcsweeney's fixie sustainable quinoa 8-bit american apparel <a href="#" rel="tooltip" title="Another tooltip">have a</a> terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, four loko mcsweeney's cleanse vegan chambray. A really ironic artisan <a href="#" rel="tooltip" title="Another one here too">whatever keytar</a>, scenester farm-to-table banksy Austin <a href="#" rel="tooltip" title="The last tip!">twitter handle</a> freegan cred raw denim single-origin coffee viral.{{/i}}
<p class="muted" style="margin-bottom: 0;">{{_i}}Tight pants next level keffiyeh <a href="#" rel="tooltip" title="Default tooltip">you probably</a> haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown. Farm-to-table seitan, mcsweeney's fixie sustainable quinoa 8-bit american apparel <a href="#" rel="tooltip" title="Another tooltip">have a</a> terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, four loko mcsweeney's cleanse vegan chambray. A really ironic artisan <a href="#" rel="tooltip" title="Another one here too">whatever keytar</a>, scenester farm-to-table banksy Austin <a href="#" rel="tooltip" title="The last tip!">twitter handle</a> freegan cred raw denim single-origin coffee viral.{{/i}}
</p>
</div>{{! /example }}
<h3>{{_i}}Four directions{{/i}}</h3>
<div class="bs-docs-example tooltip-demo">
<ul class="bs-docs-tooltip-examples">
<li><a href="#" rel="tooltip" data-placement="top" title="Tooltip on top">Tooltip on top</a></li>
<li><a href="#" rel="tooltip" data-placement="right" title="Tooltip on right">Tooltip on right</a></li>
<li><a href="#" rel="tooltip" data-placement="bottom" title="Tooltip on bottom">Tooltip on bottom</a></li>
<li><a href="#" rel="tooltip" data-placement="left" title="Tooltip on left">Tooltip on left</a></li>
</ul>
</div>{{! /example }}
<hr class="bs-docs-separator">
@ -795,8 +788,7 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
</div>
<h2>{{_i}}Examples{{/i}}</h2>
<p>{{_i}}Add small overlays of content, like those on the iPad, to any element for housing secondary information. Hover over the button to trigger the popover.{{/i}}</p>
<p class="muted"><strong>*</strong> {{_i}}Requires <a href="#tooltips">Tooltip</a> to be included{{/i}}</p>
<p>{{_i}}Add small overlays of content, like those on the iPad, to any element for housing secondary information. Hover over the button to trigger the popover. <strong>Requires <a href="#tooltips">Tooltip</a> to be included.</strong>{{/i}}</p>
<h3>{{_i}}Static popover{{/i}}</h3>
<p>{{_i}}Four options are available: top, right, bottom, and left aligned.{{/i}}</p>
@ -1523,5 +1515,7 @@ $('.carousel').carousel({
</pre>
</section>
</div>
</div>
</div>{{! /span9 }}
</div>{{! row}}

29
docs/templates/pages/scaffolding.mustache vendored
View File

@ -1,23 +1,14 @@
<!-- Masthead
<!-- Subhead
================================================== -->
<header class="jumbotron subhead" id="overview">
<h1>{{_i}}Scaffolding{{/i}}</h1>
<p class="lead">{{_i}}Bootstrap is built on a responsive 12-column grid. We've also included fixed- and fluid-width layouts based on that system.{{/i}}</p>
<div class="navbar navbar-subnav">
<div class="navbar-inner">
<ul class="nav">
<li><a href="#global">{{_i}}Global styles{{/i}}</a></li>
<li><a href="#gridSystem">{{_i}}Grid system{{/i}}</a></li>
<li><a href="#fluidGridSystem">{{_i}}Fluid grid system{{/i}}</a></li>
<li><a href="#gridCustomization">{{_i}}Customizing{{/i}}</a></li>
<li><a href="#layouts">{{_i}}Layouts{{/i}}</a></li>
<li><a href="#responsive">{{_i}}Responsive design{{/i}}</a></li>
</ul>
</div>
</div>
</header>
<!-- Docs nav
================================================== -->
<div class="row">
<div class="span3 bs-docs-sidebar">
<ul class="nav nav-list bs-docs-sidenav">
@ -466,9 +457,9 @@
<thead>
<tr>
<th>{{_i}}Class{{/i}}</th>
<th>{{_i}}Phones <small>480px and below</small>{{/i}}</th>
<th>{{_i}}Tablets <small>767px and below</small>{{/i}}</th>
<th>{{_i}}Desktops <small>768px and above</small>{{/i}}</th>
<th>{{_i}}Phones <small>767px and below</small>{{/i}}</th>
<th>{{_i}}Tablets <small>979px to 768px</small>{{/i}}</th>
<th>{{_i}}Desktops <small>Default</small>{{/i}}</th>
</tr>
</thead>
<tbody>
@ -533,5 +524,7 @@
</section>
</div>
</div>
</div>{{! /span9 }}
</div>{{! row}}

21
less/buttons.less
View File

@ -15,12 +15,10 @@
font-size: 13px;
line-height: 20px;
*line-height: 20px;
color: @grayDark;
text-align: center;
text-shadow: 0 1px 1px rgba(255,255,255,.75);
vertical-align: middle;
cursor: pointer;
.buttonBackground(@btnBackground, @btnBackgroundHighlight);
.buttonBackground(@btnBackground, @btnBackgroundHighlight, @grayDark, 0 1px 1px rgba(255,255,255,.75));
border: 1px solid @btnBorder;
*border: 0; // Remove the border to prevent IE7's black border on input:focus
border-bottom-color: darken(@btnBorder, 10%);
@ -105,23 +103,6 @@
// Alternate buttons
// --------------------------------------------------
// Set text color
// -------------------------
.btn-primary,
.btn-primary:hover,
.btn-warning,
.btn-warning:hover,
.btn-danger,
.btn-danger:hover,
.btn-success,
.btn-success:hover,
.btn-info,
.btn-info:hover,
.btn-inverse,
.btn-inverse:hover {
color: @white;
text-shadow: 0 -1px 0 rgba(0,0,0,.25);
}
// Provide *some* extra contrast for those who can get it
.btn-primary.active,
.btn-warning.active,

39
less/forms.less
View File

@ -22,7 +22,7 @@ legend {
display: block;
width: 100%;
padding: 0;
margin-bottom: @baseLineHeight * 1.5;
margin-bottom: @baseLineHeight;
font-size: @baseFontSize * 1.5;
line-height: @baseLineHeight * 2;
color: @grayDark;
@ -290,8 +290,18 @@ textarea[class*="span"],
// GRID SIZING FOR INPUTS
// ----------------------
// Grid sizes
#grid > .input(@gridColumnWidth, @gridGutterWidth);
// Control row for multiple inputs per line
.controls-row {
.clearfix(); // Clear the float from controls
}
.controls-row [class*="span"] {
float: left; // Float to collapse white-space for proper grid alignment
}
// DISABLED STATE
@ -389,8 +399,8 @@ select:focus:required:invalid {
// ------------
// Allow us to put symbols and text within the input field for a cleaner look
.input-prepend,
.input-append {
.input-append,
.input-prepend {
margin-bottom: 5px;
font-size: 0;
white-space: nowrap; // Prevent span and input from separating
@ -479,15 +489,34 @@ select:focus:required:invalid {
// SEARCH FORM
// -----------
input.search-query {
.search-query {
padding-right: 14px;
padding-right: 4px \9;
padding-left: 14px;
padding-left: 4px \9; /* IE7-8 doesn't have border-radius, so don't indent the padding */
margin-bottom: 0; // remove the default margin on all inputs
margin-bottom: 0; // Remove the default margin on all inputs
.border-radius(14px);
}
/* Allow for input prepend/append in search forms */
.form-search .input-append .search-query,
.form-search .input-prepend .search-query {
.border-radius(0); // Override due to specificity
}
.form-search .input-append .search-query {
.border-radius(14px 0 0 14px)
}
.form-search .input-append .btn {
.border-radius(0 14px 14px 0)
}
.form-search .input-prepend .search-query {
.border-radius(0 14px 14px 0)
}
.form-search .input-prepend .btn {
.border-radius(14px 0 0 14px)
}
// HORIZONTAL & VERTICAL FORMS

84
less/mixins.less
View File

@ -389,7 +389,9 @@
}
// Gradient Bar Colors for buttons and alerts
.gradientBar(@primaryColor, @secondaryColor) {
.gradientBar(@primaryColor, @secondaryColor, @textColor: #fff, @textShadow: 0 -1px 0 rgba(0,0,0,.25)) {
color: @textColor;
text-shadow: @textShadow;
#gradient > .vertical(@primaryColor, @secondaryColor);
border-color: @secondaryColor @secondaryColor darken(@secondaryColor, 15%);
border-color: rgba(0,0,0,.1) rgba(0,0,0,.1) fadein(rgba(0,0,0,.1), 15%);
@ -481,14 +483,15 @@
// Button backgrounds
// ------------------
.buttonBackground(@startColor, @endColor) {
.buttonBackground(@startColor, @endColor, @textColor: #fff, @textShadow: 0 -1px 0 rgba(0,0,0,.25)) {
// gradientBar will set the background to a pleasing blend of these, to support IE<=9
.gradientBar(@startColor, @endColor);
.gradientBar(@startColor, @endColor, @textColor, @textShadow);
*background-color: @endColor; /* Darken IE7 buttons by default so they stand out more given they won't have borders */
.reset-filter();
// in these cases the gradient won't cover the background, so we override
&:hover, &:active, &.active, &.disabled, &[disabled] {
color: @textColor;
background-color: @endColor;
*background-color: darken(@endColor, 5%);
}
@ -508,75 +511,7 @@
margin-top: (@navbarHeight - @elementHeight) / 2;
}
// Popover arrows
// -------------------------
// For tipsies and popovers
#popoverArrow {
.top(@arrowWidth: 10px, @color: rgba(0,0,0,.2)) {
bottom: -@arrowWidth;
left: 50%;
margin-left: -@arrowWidth;
border-left: @arrowWidth solid transparent;
border-right: @arrowWidth solid transparent;
border-top: @arrowWidth solid #ccc;
border-top: @arrowWidth solid @color;
&:after {
border-left: @arrowWidth - 1 solid transparent;
border-right: @arrowWidth - 1 solid transparent;
border-top: @arrowWidth - 1 solid #fff;
bottom: 1px;
left: -@arrowWidth + 1;
}
}
.right(@arrowWidth: 10px, @color: rgba(0,0,0,.2)) {
top: 50%;
left: -@arrowWidth;
margin-top: -@arrowWidth;
border-top: @arrowWidth solid transparent;
border-bottom: @arrowWidth solid transparent;
border-right: @arrowWidth solid #ccc;
border-right: @arrowWidth solid @color;
&:after {
border-top: @arrowWidth - 1 solid transparent;
border-bottom: @arrowWidth - 1 solid transparent;
border-right: @arrowWidth - 1 solid #fff;
bottom: -@arrowWidth + 1;
left: 1px;
}
}
.bottom(@arrowWidth: 10px, @color: rgba(0,0,0,.2)) {
top: -@arrowWidth;
left: 50%;
margin-left: -@arrowWidth;
border-left: @arrowWidth solid transparent;
border-right: @arrowWidth solid transparent;
border-bottom: @arrowWidth solid #ccc;
border-bottom: @arrowWidth solid @color;
&:after {
border-left: @arrowWidth - 1 solid transparent;
border-right: @arrowWidth - 1 solid transparent;
border-bottom: @arrowWidth - 1 solid #f5f5f5;
top: 1px;
left: -@arrowWidth + 1;
}
}
.left(@arrowWidth: 10px, @color: rgba(0,0,0,.2)) {
top: 50%;
right: -@arrowWidth;
margin-top: -@arrowWidth;
border-top: @arrowWidth solid transparent;
border-bottom: @arrowWidth solid transparent;
border-left: @arrowWidth solid #ccc;
border-left: @arrowWidth solid @color;
&:after {
border-top: @arrowWidth - 1 solid transparent;
border-bottom: @arrowWidth - 1 solid transparent;
border-left: @arrowWidth - 1 solid #fff;
bottom: -@arrowWidth + 1;
right: 1px;
}
}
}
// Grid System
// -----------
@ -721,6 +656,11 @@
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);

7
less/navbar.less
View File

@ -72,7 +72,7 @@
// Buttons in navbar
.btn,
.btn-group {
.navbarVerticalAlign(30px); // Vertically center in navbar
.navbarVerticalAlign(28px); // Vertically center in navbar
}
.btn-group .btn {
margin: 0; // then undo the margin here so we don't accidentally double it
@ -87,10 +87,11 @@
select,
.radio,
.checkbox {
.navbarVerticalAlign(30px); // Vertically center in navbar
.navbarVerticalAlign(28px); // Vertically center in navbar
}
input,
select {
select,
.btn {
display: inline-block;
margin-bottom: 0;
}

96
less/popovers.less
View File

@ -9,7 +9,7 @@
left: 0;
z-index: @zindexPopover;
display: none;
width: 218px;
width: 238px;
background-color: #fff;
-webkit-background-clip: padding-box;
-moz-background-clip: padding;
@ -25,34 +25,16 @@
&.bottom { margin-top: 10px; }
&.left { margin-right: 10px; }
// Call the mixin for the arrows
&.top .arrow { #popoverArrow > .top(); }
&.right .arrow { #popoverArrow > .right(); }
&.bottom .arrow { #popoverArrow > .bottom(); }
&.left .arrow { #popoverArrow > .left(); }
// Common arrow styles
.arrow {
position: absolute;
width: 0;
height: 0;
&:after {
position: absolute;
display: inline-block;
width: 0;
height: 0;
content: "";
}
}
}
.popover-title {
margin: 0; // reset heading margin
padding: 8px 14px;
font-size: 14px;
font-weight: normal;
line-height: 18px;
background-color: #f5f5f5;
border-bottom: 1px solid #e5e5e5;
background-color: @popoverTitleBackground;
border-bottom: 1px solid darken(@popoverTitleBackground, 10%);
.border-radius(5px 5px 0 0);
}
@ -62,3 +44,73 @@
margin-bottom: 0;
}
}
// Arrows
.popover .arrow,
.popover .arrow:after {
position: absolute;
display: inline-block;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
}
.popover .arrow:after {
content: "";
z-index: -1;
}
.popover {
&.top .arrow {
bottom: -@popoverArrowWidth;
left: 50%;
margin-left: -@popoverArrowWidth;
border-width: @popoverArrowWidth @popoverArrowWidth 0;
border-top-color: @popoverArrowColor;
&:after {
border-width: @popoverArrowOuterWidth @popoverArrowOuterWidth 0;
border-top-color: @popoverArrowOuterColor;
bottom: -1px;
left: -@popoverArrowOuterWidth;
}
}
&.right .arrow {
top: 50%;
left: -@popoverArrowWidth;
margin-top: -@popoverArrowWidth;
border-width: @popoverArrowWidth @popoverArrowWidth @popoverArrowWidth 0;
border-right-color: @popoverArrowColor;
&:after {
border-width: @popoverArrowOuterWidth @popoverArrowOuterWidth @popoverArrowOuterWidth 0;
border-right-color: @popoverArrowOuterColor;
bottom: -@popoverArrowOuterWidth;
left: -1px;
}
}
&.bottom .arrow {
top: -@popoverArrowWidth;
left: 50%;
margin-left: -@popoverArrowWidth;
border-width: 0 @popoverArrowWidth @popoverArrowWidth;
border-bottom-color: @popoverTitleBackground;
&:after {
border-width: 0 @popoverArrowOuterWidth @popoverArrowOuterWidth;
border-bottom-color: @popoverArrowOuterColor;
top: -1px;
left: -@popoverArrowOuterWidth;
}
}
&.left .arrow {
top: 50%;
right: -@popoverArrowWidth;
margin-top: -@popoverArrowWidth;
border-width: @popoverArrowWidth 0 @popoverArrowWidth @popoverArrowWidth;
border-left-color: @popoverArrowColor;
&:after {
border-width: @popoverArrowOuterWidth 0 @popoverArrowOuterWidth @popoverArrowOuterWidth;
border-left-color: @popoverArrowOuterColor;
bottom: -@popoverArrowOuterWidth;
right: -1px;
}
}
}

3
less/responsive-767px-max.less
View File

@ -51,6 +51,9 @@
.thumbnails {
margin-left: 0;
}
.thumbnails > li {
float: none;
}
// Make all grid-sized elements block level again
[class*="span"],
.row-fluid [class*="span"] {

4
less/scaffolding.less
View File

@ -4,7 +4,7 @@
// Body reset
// ----------
// -------------------------
body {
margin: 0;
@ -17,7 +17,7 @@ body {
// Links
// -----
// -------------------------
a {
color: @linkColor;

53
less/tooltip.less
View File

@ -3,6 +3,7 @@
// --------------------------------------------------
// Base class
.tooltip {
position: absolute;
z-index: @zindexTooltip;
@ -12,26 +13,58 @@
font-size: 11px;
.opacity(0);
&.in { .opacity(80); }
&.top { margin-top: -2px; }
&.right { margin-left: 2px; }
&.bottom { margin-top: 2px; }
&.left { margin-left: -2px; }
&.top .tooltip-arrow { #popoverArrow > .top(); }
&.left .tooltip-arrow { #popoverArrow > .left(); }
&.bottom .tooltip-arrow { #popoverArrow > .bottom(); }
&.right .tooltip-arrow { #popoverArrow > .right(); }
&.top { margin-top: -3px; }
&.right { margin-left: 3px; }
&.bottom { margin-top: 3px; }
&.left { margin-left: -3px; }
}
// Wrapper for the tooltip content
.tooltip-inner {
max-width: 200px;
padding: 3px 8px;
color: @white;
color: @tooltipColor;
text-align: center;
text-decoration: none;
background-color: @black;
background-color: @tooltipBackground;
.border-radius(4px);
}
// Arrows
.tooltip-arrow {
position: absolute;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
}
.tooltip {
&.top .tooltip-arrow {
bottom: 0;
left: 50%;
margin-left: -@tooltipArrowWidth;
border-width: @tooltipArrowWidth @tooltipArrowWidth 0;
border-top-color: @tooltipArrowColor;
}
&.right .tooltip-arrow {
top: 50%;
left: 0;
margin-top: -@tooltipArrowWidth;
border-width: @tooltipArrowWidth @tooltipArrowWidth @tooltipArrowWidth 0;
border-right-color: @tooltipArrowColor;
}
&.left .tooltip-arrow {
top: 50%;
right: 0;
margin-top: -@tooltipArrowWidth;
border-width: @tooltipArrowWidth 0 @tooltipArrowWidth @tooltipArrowWidth;
border-left-color: @tooltipArrowColor;
}
&.bottom .tooltip-arrow {
top: 0;
left: 50%;
margin-left: -@tooltipArrowWidth;
border-width: 0 @tooltipArrowWidth @tooltipArrowWidth;
border-bottom-color: @tooltipArrowColor;
}
}

16
less/variables.less
View File

@ -198,6 +198,22 @@
@infoBorder: darken(spin(@infoBackground, -10), 7%);
// Tooltips and popovers
// -------------------------
@tooltipColor: #fff;
@tooltipBackground: #000;
@tooltipArrowWidth: 5px;
@tooltipArrowColor: @tooltipBackground;
@popoverArrowWidth: 10px;
@popoverArrowColor: #fff;
@popoverTitleBackground: #f5f5f5;
// Special enhancement for popovers
@popoverArrowOuterWidth: @popoverArrowWidth + 1;
@popoverArrowOuterColor: rgba(0,0,0,.2);
// GRID
// --------------------------------------------------