Skip to content

B
bootstrap
Commit f0ed383e authored by Roberto - phproberto's avatar Roberto - phproberto
Browse files
Options

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

parents 83846ba0 71310577
Show whitespace changes
Inline Side-by-side
Showing with 8696 additions and 8561 deletions
docs/assets/css/bootstrap-responsive.css
View file @ f0ed383e
......@@ -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;
......
docs/assets/css/bootstrap.css
View file @ f0ed383e
......@@ -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,112 +4746,102 @@ input[type="submit"].btn.btn-mini {
margin-right: 10px;
}
.popover-title {
padding: 8px 14px;
margin: 0;
font-size: 14px;
font-weight: normal;
line-height: 18px;
background-color: #f5f5f5;
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;
}
.popover-content {
padding: 9px 14px;
}
.popover-content p,
.popover-content ul,
.popover-content ol {
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: 10px solid #cccccc;
border-top: 10px solid rgba(0, 0, 0, 0.2);
border-right: 10px solid transparent;
border-left: 10px solid transparent;
border-top-color: #ffffff;
border-width: 10px 10px 0;
}
.popover.top .arrow:after {
bottom: 1px;
left: -9px;
border-top: 9px solid #ffffff;
border-right: 9px solid transparent;
border-left: 9px solid transparent;
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-top: 10px solid transparent;
border-right: 10px solid #cccccc;
border-right: 10px solid rgba(0, 0, 0, 0.2);
border-bottom: 10px solid transparent;
border-right-color: #ffffff;
border-width: 10px 10px 10px 0;
}
.popover.right .arrow:after {
bottom: -9px;
left: 1px;
border-top: 9px solid transparent;
border-right: 9px solid #ffffff;
border-bottom: 9px solid transparent;
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-right: 10px solid transparent;
border-bottom: 10px solid #cccccc;
border-bottom: 10px solid rgba(0, 0, 0, 0.2);
border-left: 10px solid transparent;
border-bottom-color: #f5f5f5;
border-width: 0 10px 10px;
}
.popover.bottom .arrow:after {
top: 1px;
left: -9px;
border-right: 9px solid transparent;
border-bottom: 9px solid #f5f5f5;
border-left: 9px solid transparent;
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-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-left: 10px solid #cccccc;
border-left: 10px solid rgba(0, 0, 0, 0.2);
border-left-color: #ffffff;
border-width: 10px 0 10px 10px;
}
.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;
font-size: 14px;
font-weight: normal;
line-height: 18px;
background-color: #f5f5f5;
border-bottom: 1px solid #e5e5e5;
-webkit-border-radius: 5px 5px 0 0;
-moz-border-radius: 5px 5px 0 0;
border-radius: 5px 5px 0 0;
}
.popover-content {
padding: 9px 14px;
}
.popover-content p,
.popover-content ul,
.popover-content ol {
margin-bottom: 0;
right: -1px;
bottom: -11px;
border-left-color: rgba(0, 0, 0, 0.2);
border-width: 11px 0 11px 11px;
}
.thumbnails {
......@@ -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);
}
......
docs/assets/css/docs.css
View file @ f0ed383e
......@@ -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;
}
......
docs/base-css.html
View file @ f0ed383e
......@@ -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">
......@@ -103,9 +94,9 @@
<!-- Typography
================================================== -->
<section id="typography">
<!-- Typography
================================================== -->
<section id="typography">
<div class="page-header">
<h1>Typography <small>Headings, paragraphs, lists, and other inline type elements</small></h1>
</div>
......@@ -159,9 +150,9 @@
<div class="bs-docs-example">
<p>The following snippet of text is <em>rendered as italicized text</em>.</p>
</div>
<pre class="prettyprint">
&lt;em&gt;rendered as italicized text&lt;/em&gt;
</pre>
<pre class="prettyprint">
&lt;em&gt;rendered as italicized text&lt;/em&gt;
</pre>
<p><span class="label label-info">Heads up!</span> Feel free to use <code>&lt;b&gt;</code> and <code>&lt;i&gt;</code> in HTML5. <code>&lt;b&gt;</code> is meant to highlight words or phrases without conveying additional importance while <code>&lt;i&gt;</code> is mostly for voice, technical terms, etc.</p>
......@@ -404,13 +395,13 @@
<span class="label label-info">Heads up!</span>
Horizontal description lists will truncate terms that are too long to fit in the left column fix <code>text-overflow</code>. In narrower viewports, they will change to the default stacked layout.
</p>
</section>
</section>
<!-- Code
================================================== -->
<section id="code">
<!-- Code
================================================== -->
<section id="code">
<div class="page-header">
<h1>Code <small>Inline and block code snippets</small></h1>
</div>
......@@ -433,13 +424,13 @@ For example, &lt;code&gt;section&lt;/code&gt; should be wrapped as inline.
</pre>
<p><strong>Note:</strong> Be sure to keep code within <code>&lt;pre&gt;</code> tags as close to the left as possible; it will render all tabs.</p>
<p>You may optionally add the <code>.pre-scrollable</code> class which will set a max-height of 350px and provide a y-axis scrollbar.</p>
</section>
</section>
<!-- Tables
================================================== -->
<section id="tables">
<!-- Tables
================================================== -->
<section id="tables">
<div class="page-header">
<h1>Tables <small>For, you guessed it, tabular data</small></h1>
</div>
......@@ -747,13 +738,13 @@ For example, &lt;code&gt;section&lt;/code&gt; should be wrapped as inline.
&lt;/table&gt;
</pre>
</section>
</section>
<!-- Forms
================================================== -->
<section id="forms">
<!-- Forms
================================================== -->
<section id="forms">
<div class="page-header">
<h1>Forms</h1>
</div>
......@@ -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>
......@@ -1247,13 +1290,13 @@ For example, &lt;code&gt;section&lt;/code&gt; should be wrapped as inline.
&lt;/div&gt;
</pre>
</section>
</section>
<!-- Buttons
================================================== -->
<section id="buttons">
<!-- Buttons
================================================== -->
<section id="buttons">
<div class="page-header">
<h1>Buttons</h1>
</div>
......@@ -1368,12 +1411,12 @@ For example, &lt;code&gt;section&lt;/code&gt; should be wrapped as inline.
<h2>One class, multiple tags</h2>
<p>Use the <code>.btn</code> class on an <code>&lt;a&gt;</code>, <code>&lt;button&gt;</code>, or <code>&lt;input&gt;</code> element.</p>
<form class="bs-docs-example">
<form class="bs-docs-example">
<a class="btn" href="">Link</a>
<button class="btn" type="submit">Button</button>
<input class="btn" type="button" value="Input">
<input class="btn" type="submit" value="Submit">
</form>
</form>
<pre class="prettyprint linenums">
&lt;a class="btn" href=""&gt;Link&lt;/a&gt;
&lt;button class="btn" type="submit"&gt;
......@@ -1386,13 +1429,13 @@ For example, &lt;code&gt;section&lt;/code&gt; should be wrapped as inline.
</pre>
<p>As a best practice, try to match the element for you context to ensure matching cross-browser rendering. If you have an <code>input</code>, use an <code>&lt;input type="submit"&gt;</code> for your button.</p>
</section>
</section>
<!-- Icons
================================================== -->
<section id="icons">
<!-- Icons
================================================== -->
<section id="icons">
<div class="page-header">
<h1>Icons <small>Graciously provided by <a href="http://glyphicons.com" target="_blank">Glyphicons</a></small></h1>
</div>
......@@ -1621,10 +1664,13 @@ For example, &lt;code&gt;section&lt;/code&gt; should be wrapped as inline.
</div>
</form>
</section>
</section>
</div>
</div>
</div>
<!-- Footer
================================================== -->
......
docs/components.html
View file @ f0ed383e
......@@ -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">
......@@ -128,9 +102,9 @@
<!-- Dropdowns
================================================== -->
<section id="dropdowns">
<!-- Dropdowns
================================================== -->
<section id="dropdowns">
<div class="page-header">
<h1>Dropdown menus</h1>
</div>
......@@ -205,14 +179,14 @@
<p>...</p>
</section>
</section>
<!-- Button Groups
================================================== -->
<section id="buttonGroups">
<!-- Button Groups
================================================== -->
<section id="buttonGroups">
<div class="page-header">
<h1>Button groups</h1>
</div>
......@@ -290,13 +264,13 @@
<h4>Dropdowns in button groups</h4>
<p><span class="label label-info">Heads up!</span> Buttons with dropdowns must be individually wrapped in their own <code>.btn-group</code> within a <code>.btn-toolbar</code> for proper rendering.</p>
</section>
</section>
<!-- Split button dropdowns
================================================== -->
<section id="buttonDropdowns">
<!-- Split button dropdowns
================================================== -->
<section id="buttonDropdowns">
<div class="page-header">
<h1>Button dropdown menus</h1>
</div>
......@@ -625,13 +599,13 @@
&lt;/div&gt;
</pre>
</section>
</section>
<!-- Nav, Tabs, & Pills
================================================== -->
<section id="navs">
<!-- Nav, Tabs, & Pills
================================================== -->
<section id="navs">
<div class="page-header">
<h1>Nav: tabs, pills, and lists</small></h1>
</div>
......@@ -850,7 +824,7 @@
&lt;li class="divider"&gt;&lt;/li&gt;
...
&lt;/ul&gt;
</pre>
</pre>
<hr class="bs-docs-separator">
......@@ -1005,13 +979,13 @@
&lt;/div&gt;
</pre>
</section>
</section>
<!-- Navbar
================================================== -->
<section id="navbar">
<!-- Navbar
================================================== -->
<section id="navbar">
<div class="page-header">
<h1>Navbar</h1>
</div>
......@@ -1307,13 +1281,13 @@
</div><!-- /navbar -->
</div>
</section>
</section>
<!-- Breadcrumbs
================================================== -->
<section id="breadcrumbs">
<!-- Breadcrumbs
================================================== -->
<section id="breadcrumbs">
<div class="page-header">
<h1>Breadcrumbs <small></small></h1>
</div>
......@@ -1342,13 +1316,13 @@
&lt;/ul&gt;
</pre>
</section>
</section>
<!-- Pagination
================================================== -->
<section id="pagination">
<!-- Pagination
================================================== -->
<section id="pagination">
<div class="page-header">
<h1>Pagination <small>Two options for paging through content</small></h1>
</div>
......@@ -1513,13 +1487,13 @@
&lt;/ul&gt;
</pre>
</section>
</section>
<!-- Labels
================================================== -->
<section id="labels">
<!-- Labels
================================================== -->
<section id="labels">
<div class="page-header">
<h1>Inline labels <small>Label and annotate text</small></h1>
</div>
......@@ -1581,13 +1555,13 @@
</tr>
</tbody>
</table>
</section>
</section>
<!-- Badges
================================================== -->
<section id="badges">
<!-- Badges
================================================== -->
<section id="badges">
<div class="page-header">
<h1>Badges <small>Indicators and unread counts</small></h1>
</div>
......@@ -1674,13 +1648,13 @@
</tbody>
</table>
</section>
</section>
<!-- Typographic components
================================================== -->
<section id="typography">
<!-- Typographic components
================================================== -->
<section id="typography">
<div class="page-header">
<h1>Typographic components <small>Page header and hero unit for segmenting content</small></h1>
</div>
......@@ -1719,13 +1693,13 @@
&lt;/div&gt;
</pre>
</section>
</section>
<!-- Thumbnails
================================================== -->
<section id="thumbnails">
<!-- Thumbnails
================================================== -->
<section id="thumbnails">
<div class="page-header">
<h1>Thumbnails <small>Grids of images, videos, text, and more</small></h1>
</div>
......@@ -1869,13 +1843,13 @@
</li>
</ul>
</section>
</section>
<!-- Alerts
================================================== -->
<section id="alerts">
<!-- Alerts
================================================== -->
<section id="alerts">
<div class="page-header">
<h1>Alerts <small>Styles for success, warning, and error messages</small></h1>
</div>
......@@ -1975,13 +1949,13 @@
&lt;/div&gt;
</pre>
</section>
</section>
<!-- Progress bars
================================================== -->
<section id="progress">
<!-- Progress bars
================================================== -->
<section id="progress">
<div class="page-header">
<h1>Progress bars <small>For loading, redirecting, or action status</small></h1>
</div>
......@@ -2103,15 +2077,15 @@
<p>Progress bars use CSS3 gradients, transitions, and animations to achieve all their effects. These features are not supported in IE7-9 or older versions of Firefox.</p>
<p>Opera and IE do not support animations at this time.</p>
</section>
</section>
<!-- Miscellaneous
================================================== -->
<section id="misc">
<!-- Miscellaneous
================================================== -->
<section id="misc">
<div class="page-header">
<h1>Miscellaneous <small>Lightweight utility components</small></h1>
</div>
......@@ -2214,7 +2188,9 @@ class="clearfix"
}
</pre>
</section>
</section>
</div>
</div>
......
docs/extend.html
View file @ f0ed383e
......@@ -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">
<!-- BUILT WITH LESS
================================================== -->
<section id="built-with-less">
<div class="page-header">
<h1>Built with LESS</h1>
</div>
......@@ -101,22 +107,13 @@
<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>
</section>
<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>
<!-- COMPILING LESS AND BOOTSTRAP
================================================== -->
<section id="compiling">
<!-- COMPILING LESS AND BOOTSTRAP
================================================== -->
<section id="compiling">
<div class="page-header">
<h1>Compiling Bootstrap with LESS</h1>
</div>
......@@ -157,7 +154,23 @@
<h4><a href="http://wearekiss.com/simpless" target="_blank">Simpless</a></h4>
<p>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>.</p>
</section>
</section>
<!-- Static assets
================================================== -->
<section id="static-assets">
<div class="page-header">
<h1>Use as static assets</h1>
</div>
<p>...</p>
</section>
</div>
</div>
<!-- Footer
......
docs/javascript.html
View file @ f0ed383e
......@@ -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,10 +101,9 @@
<!-- Overview
================================================== -->
<section id="overview">
<!-- Overview
================================================== -->
<section id="overview">
<div class="page-header">
<h1>Javascript in Bootstrap</h1>
</div>
......@@ -136,13 +119,13 @@
</section>
</section>
<!-- Transitions
================================================== -->
<section id="transitions">
<!-- Transitions
================================================== -->
<section id="transitions">
<div class="page-header">
<h1>Transitions <small>bootstrap-transition.js</small></h1>
</div>
......@@ -157,13 +140,13 @@
<li>Sliding carousel panes</li>
</ul>
</section>
</section>
<!-- Modal
================================================== -->
<section id="modals">
<!-- Modal
================================================== -->
<section id="modals">
<div class="page-header">
<h1>Modals <small>bootstrap-modal.js</small></h1>
</div>
......@@ -313,7 +296,7 @@
<td>path</td>
<td>false</td>
<td><p>If a remote url is provided, content will be loaded via jQuery's <code>load</code> method and injected into the <code>.modal-body</code>. If you're using the data api, you may alternatively use the <code>href</code> tag to specify the remote source. An example of this is shown below:</p>
<pre class="prettyprint linenums"><code>&lt;a data-toggle="modal" href="remote.html" data-target="#modal"&gt;click me&lt;/a&gt;</code></pre></td>
<pre class="prettyprint linenums"><code>&lt;a data-toggle="modal" href="remote.html" data-target="#modal"&gt;click me&lt;/a&gt;</code></pre></td>
</tr>
</tbody>
</table>
......@@ -366,13 +349,13 @@ $('#myModal').modal({
$('#myModal').on('hidden', function () {
// do something…
})</pre>
</section>
</section>
<!-- Dropdown
================================================== -->
<section id="dropdowns">
<!-- Dropdown
================================================== -->
<section id="dropdowns">
<div class="page-header">
<h1>Dropdowns <small>bootstrap-dropdown.js</small></h1>
</div>
......@@ -502,13 +485,13 @@ $('#myModal').on('hidden', function () {
<h3>Methods</h3>
<h4>$().dropdown()</h4>
<p>A programatic api for activating menus for a given navbar or tabbed navigation.</p>
</section>
</section>
<!-- ScrollSpy
================================================== -->
<section id="scrollspy">
<!-- ScrollSpy
================================================== -->
<section id="scrollspy">
<div class="page-header">
<h1>ScrollSpy <small>bootstrap-scrollspy.js</small></h1>
</div>
......@@ -617,13 +600,13 @@ $('[data-spy="scroll"]').each(function () {
</tr>
</tbody>
</table>
</section>
</section>
<!-- Tabs
================================================== -->
<section id="tabs">
<!-- Tabs
================================================== -->
<section id="tabs">
<div class="page-header">
<h1>Togglable tabs <small>bootstrap-tab.js</small></h1>
</div>
......@@ -738,12 +721,12 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
e.target // activated tab
e.relatedTarget // previous tab
})</pre>
</section>
</section>
<!-- Tooltips
================================================== -->
<section id="tooltips">
<!-- Tooltips
================================================== -->
<section id="tooltips">
<div class="page-header">
<h1>Tooltips <small>bootstrap-tooltip.js</small></h1>
</div>
......@@ -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">
......@@ -832,9 +825,9 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
<h3>Markup</h3>
<p>For performance reasons, the Tooltip and Popover data-apis are opt in. If you would like to use them just specify a selector option.</p>
<pre class="prettyprint linenums">
&lt;a href="#" rel="tooltip" title="first tooltip"&gt;hover over me&lt;/a&gt;
</pre>
<pre class="prettyprint linenums">
&lt;a href="#" rel="tooltip" title="first tooltip"&gt;hover over me&lt;/a&gt;
</pre>
<h3>Methods</h3>
<h4>$().tooltip(options)</h4>
......@@ -851,20 +844,19 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
<h4>.tooltip('destroy')</h4>
<p>Destroys an element's tooltip.</p>
<pre class="prettyprint linenums">$('#element').tooltip('destroy')</pre>
</section>
</section>
<!-- Popovers
================================================== -->
<section id="popovers">
<!-- Popovers
================================================== -->
<section id="popovers">
<div class="page-header">
<h1>Popovers <small>bootstrap-popover.js</small></h1>
</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>
......@@ -1007,13 +999,13 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
<h4>.popover('destroy')</h4>
<p>Destroys an element's popover.</p>
<pre class="prettyprint linenums">$('#element').popover('destroy')</pre>
</section>
</section>
<!-- Alert
================================================== -->
<section id="alerts">
<!-- Alert
================================================== -->
<section id="alerts">
<div class="page-header">
<h1>Alert messages <small>bootstrap-alert.js</small></h1>
</div>
......@@ -1083,13 +1075,13 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
$('#my-alert').bind('closed', function () {
// do something…
})</pre>
</section>
</section>
<!-- Buttons
================================================== -->
<section id="buttons">
<!-- Buttons
================================================== -->
<section id="buttons">
<div class="page-header">
<h1>Buttons <small>bootstrap-button.js</small></h1>
</div>
......@@ -1189,13 +1181,13 @@ $('#my-alert').bind('closed', function () {
&lt;script&gt;
$('.btn').button('complete')
&lt;/script&gt;</pre>
</section>
</section>
<!-- Collapse
================================================== -->
<section id="collapse">
<!-- Collapse
================================================== -->
<section id="collapse">
<div class="page-header">
<h1>Collapse <small>bootstrap-collapse.js</small></h1>
</div>
......@@ -1345,13 +1337,13 @@ $('#myCollapsible').collapse({
$('#myCollapsible').on('hidden', function () {
// do something…
})</pre>
</section>
</section>
<!-- Carousel
================================================== -->
<section id="carousel">
================================================== -->
<section id="carousel">
<div class="page-header">
<h1>Carousel <small>bootstrap-carousel.js</small></h1>
</div>
......@@ -1485,13 +1477,13 @@ $('.carousel').carousel({
</tr>
</tbody>
</table>
</section>
</section>
<!-- Typeahead
================================================== -->
<section id="typeahead">
<!-- Typeahead
================================================== -->
<section id="typeahead">
<div class="page-header">
<h1>Typeahead <small>bootstrap-typeahead.js</small></h1>
</div>
......@@ -1567,13 +1559,13 @@ $('.carousel').carousel({
<h3>Methods</h3>
<h4>.typeahead(options)</h4>
<p>Initializes an input with a typeahead.</p>
</section>
</section>
<!-- Affix
================================================== -->
<section id="affix">
<!-- Affix
================================================== -->
<section id="affix">
<div class="page-header">
<h1>
Affix
......@@ -1589,10 +1581,13 @@ $('.carousel').carousel({
<pre class="prettyprint linenums">
...
</pre>
</section>
</section>
</div>
</div>
</div>
<!-- Footer
================================================== -->
......
docs/scaffolding.html
View file @ f0ed383e
......@@ -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">
......@@ -103,9 +94,9 @@
<!-- Global Bootstrap settings
================================================== -->
<section id="global">
<!-- Global Bootstrap settings
================================================== -->
<section id="global">
<div class="page-header">
<h1>Global styles <small>for CSS reset, typography, and links</small></h1>
</div>
......@@ -132,14 +123,14 @@
<h2>Reset via Normalize</h2>
<p>With Bootstrap 2, the old reset block has been dropped in favor of <a href="http://necolas.github.com/normalize.css/" target="_blank">Normalize.css</a>, a project by <a href="http://twitter.com/necolas" target="_blank">Nicolas Gallagher</a> that also powers the <a href="http://html5boilerplate.com" target="_blank">HTML5 Boilerplate</a>. While we use much of Normalize within our <strong>reset.less</strong>, we have removed some elements specifically for Bootstrap.</p>
</section>
</section>
<!-- Grid system
================================================== -->
<section id="gridSystem">
<!-- Grid system
================================================== -->
<section id="gridSystem">
<div class="page-header">
<h1>Default grid system <small>12 columns with a responsive twist</small></h1>
</div>
......@@ -237,13 +228,13 @@
&lt;/div&gt;
&lt;/div&gt;
</pre>
</section>
</section>
<!-- Fluid grid system
================================================== -->
<section id="fluidGridSystem">
<!-- Fluid grid system
================================================== -->
<section id="fluidGridSystem">
<div class="page-header">
<h1>Fluid grid system <small>12 responsive, percent-based columns</small></h1>
</div>
......@@ -341,13 +332,13 @@
&lt;/div&gt;
</pre>
</section>
</section>
<!-- Customizaton
================================================== -->
<section id="gridCustomization">
<!-- Customizaton
================================================== -->
<section id="gridCustomization">
<div class="page-header">
<h1>Grid customization</h1>
</div>
......@@ -397,13 +388,13 @@
<h2>Staying responsive</h2>
<p>Customization of the grid only works at the default level, the 940px grid. To maintain the responsive aspects of Bootstrap, you'll also have to manually customize the grids in <strong>responsive.less</strong> until a future update improves this.</p>
</section>
</section>
<!-- Layouts (Default and fluid)
================================================== -->
<section id="layouts">
<!-- Layouts (Default and fluid)
================================================== -->
<section id="layouts">
<div class="page-header">
<h1>Layouts <small>Basic templates to create webpages</small></h1>
</div>
......@@ -439,14 +430,14 @@
&lt;/div&gt;
&lt;/div&gt;
</pre>
</section>
</section>
<!-- Responsive design
================================================== -->
<section id="responsive">
<!-- Responsive design
================================================== -->
<section id="responsive">
<div class="page-header">
<h1>Responsive design <small>Media queries for various devices and resolutions</small></h1>
</div>
......@@ -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>
......@@ -597,10 +588,13 @@
<li>Desktop<span class="hidden-desktop">&#10004; Desktop</span></li>
</ul>
</section>
</section>
</div>
</div>
</div>
<!-- Footer
================================================== -->
......
docs/templates/pages/base-css.mustache
View file @ f0ed383e
<!-- 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">
......@@ -33,9 +24,9 @@
<!-- Typography
================================================== -->
<section id="typography">
<!-- Typography
================================================== -->
<section id="typography">
<div class="page-header">
<h1>{{_i}}Typography <small>Headings, paragraphs, lists, and other inline type elements</small>{{/i}}</h1>
</div>
......@@ -94,9 +85,9 @@
<div class="bs-docs-example">
<p>The following snippet of text is <em>rendered as italicized text</em>.</p>
</div>
<pre class="prettyprint">
&lt;em&gt;rendered as italicized text&lt;/em&gt;
</pre>
<pre class="prettyprint">
&lt;em&gt;rendered as italicized text&lt;/em&gt;
</pre>
<p><span class="label label-info">{{_i}}Heads up!{{/i}}</span> {{_i}}Feel free to use <code>&lt;b&gt;</code> and <code>&lt;i&gt;</code> in HTML5. <code>&lt;b&gt;</code> is meant to highlight words or phrases without conveying additional importance while <code>&lt;i&gt;</code> is mostly for voice, technical terms, etc.{{/i}}</p>
......@@ -342,13 +333,13 @@
<span class="label label-info">{{_i}}Heads up!{{/i}}</span>
{{_i}}Horizontal description lists will truncate terms that are too long to fit in the left column fix <code>text-overflow</code>. In narrower viewports, they will change to the default stacked layout.{{/i}}
</p>
</section>
</section>
<!-- Code
================================================== -->
<section id="code">
<!-- Code
================================================== -->
<section id="code">
<div class="page-header">
<h1>{{_i}}Code{{/i}} <small>{{_i}}Inline and block code snippets{{/i}}</small></h1>
</div>
......@@ -371,13 +362,13 @@
</pre>
<p>{{_i}}<strong>Note:</strong> Be sure to keep code within <code>&lt;pre&gt;</code> tags as close to the left as possible; it will render all tabs.{{/i}}</p>
<p>{{_i}}You may optionally add the <code>.pre-scrollable</code> class which will set a max-height of 350px and provide a y-axis scrollbar.{{/i}}</p>
</section>
</section>
<!-- Tables
================================================== -->
<section id="tables">
<!-- Tables
================================================== -->
<section id="tables">
<div class="page-header">
<h1>{{_i}}Tables <small>For, you guessed it, tabular data</small>{{/i}}</h1>
</div>
......@@ -685,13 +676,13 @@
&lt;/table&gt;
</pre>
</section>
</section>
<!-- Forms
================================================== -->
<section id="forms">
<!-- Forms
================================================== -->
<section id="forms">
<div class="page-header">
<h1>{{_i}}Forms{{/i}}</h1>
</div>
......@@ -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>
......@@ -1185,13 +1228,13 @@
&lt;/div&gt;
</pre>
</section>
</section>
<!-- Buttons
================================================== -->
<section id="buttons">
<!-- Buttons
================================================== -->
<section id="buttons">
<div class="page-header">
<h1>{{_i}}Buttons{{/i}}</h1>
</div>
......@@ -1306,12 +1349,12 @@
<h2>{{_i}}One class, multiple tags{{/i}}</h2>
<p>{{_i}}Use the <code>.btn</code> class on an <code>&lt;a&gt;</code>, <code>&lt;button&gt;</code>, or <code>&lt;input&gt;</code> element.{{/i}}</p>
<form class="bs-docs-example">
<form class="bs-docs-example">
<a class="btn" href="">{{_i}}Link{{/i}}</a>
<button class="btn" type="submit">{{_i}}Button{{/i}}</button>
<input class="btn" type="button" value="{{_i}}Input{{/i}}">
<input class="btn" type="submit" value="{{_i}}Submit{{/i}}">
</form>
</form>
<pre class="prettyprint linenums">
&lt;a class="btn" href=""&gt;{{_i}}Link{{/i}}&lt;/a&gt;
&lt;button class="btn" type="submit"&gt;
......@@ -1324,13 +1367,13 @@
</pre>
<p>{{_i}}As a best practice, try to match the element for you context to ensure matching cross-browser rendering. If you have an <code>input</code>, use an <code>&lt;input type="submit"&gt;</code> for your button.{{/i}}</p>
</section>
</section>
<!-- Icons
================================================== -->
<section id="icons">
<!-- Icons
================================================== -->
<section id="icons">
<div class="page-header">
<h1>{{_i}}Icons <small>Graciously provided by <a href="http://glyphicons.com" target="_blank">Glyphicons</a></small>{{/i}}</h1>
</div>
......@@ -1559,7 +1602,9 @@
</div>
</form>
</section>
</section>
</div>
</div>
\ No newline at end of file
</div>{{! /span9 }}
</div>{{! row}}
docs/templates/pages/components.mustache
View file @ f0ed383e
<!-- 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">
......@@ -58,9 +32,9 @@
<!-- Dropdowns
================================================== -->
<section id="dropdowns">
<!-- Dropdowns
================================================== -->
<section id="dropdowns">
<div class="page-header">
<h1>{{_i}}Dropdown menus{{/i}}</h1>
</div>
......@@ -135,14 +109,14 @@
<p>{{_i}}...{{/i}}</p>
</section>
</section>
<!-- Button Groups
================================================== -->
<section id="buttonGroups">
<!-- Button Groups
================================================== -->
<section id="buttonGroups">
<div class="page-header">
<h1>{{_i}}Button groups{{/i}}</h1>
</div>
......@@ -220,13 +194,13 @@
<h4>{{_i}}Dropdowns in button groups{{/i}}</h4>
<p><span class="label label-info">{{_i}}Heads up!{{/i}}</span> {{_i}}Buttons with dropdowns must be individually wrapped in their own <code>.btn-group</code> within a <code>.btn-toolbar</code> for proper rendering.{{/i}}</p>
</section>
</section>
<!-- Split button dropdowns
================================================== -->
<section id="buttonDropdowns">
<!-- Split button dropdowns
================================================== -->
<section id="buttonDropdowns">
<div class="page-header">
<h1>{{_i}}Button dropdown menus{{/i}}</h1>
</div>
......@@ -555,13 +529,13 @@
&lt;/div&gt;
</pre>
</section>
</section>
<!-- Nav, Tabs, & Pills
================================================== -->
<section id="navs">
<!-- Nav, Tabs, & Pills
================================================== -->
<section id="navs">
<div class="page-header">
<h1>{{_i}}Nav: tabs, pills, and lists{{/i}}</small></h1>
</div>
......@@ -780,7 +754,7 @@
&lt;li class="divider"&gt;&lt;/li&gt;
...
&lt;/ul&gt;
</pre>
</pre>
<hr class="bs-docs-separator">
......@@ -935,13 +909,13 @@
&lt;/div&gt;
</pre>
</section>
</section>
<!-- Navbar
================================================== -->
<section id="navbar">
<!-- Navbar
================================================== -->
<section id="navbar">
<div class="page-header">
<h1>{{_i}}Navbar{{/i}}</h1>
</div>
......@@ -1237,13 +1211,13 @@
</div><!-- /navbar -->
</div>{{! /example }}
</section>
</section>
<!-- Breadcrumbs
================================================== -->
<section id="breadcrumbs">
<!-- Breadcrumbs
================================================== -->
<section id="breadcrumbs">
<div class="page-header">
<h1>{{_i}}Breadcrumbs{{/i}} <small></small></h1>
</div>
......@@ -1272,13 +1246,13 @@
&lt;/ul&gt;
</pre>
</section>
</section>
<!-- Pagination
================================================== -->
<section id="pagination">
<!-- Pagination
================================================== -->
<section id="pagination">
<div class="page-header">
<h1>{{_i}}Pagination{{/i}} <small>{{_i}}Two options for paging through content{{/i}}</small></h1>
</div>
......@@ -1443,13 +1417,13 @@
&lt;/ul&gt;
</pre>
</section>
</section>
<!-- Labels
================================================== -->
<section id="labels">
<!-- Labels
================================================== -->
<section id="labels">
<div class="page-header">
<h1>{{_i}}Inline labels{{/i}} <small>{{_i}}Label and annotate text{{/i}}</small></h1>
</div>
......@@ -1511,13 +1485,13 @@
</tr>
</tbody>
</table>
</section>
</section>
<!-- Badges
================================================== -->
<section id="badges">
<!-- Badges
================================================== -->
<section id="badges">
<div class="page-header">
<h1>{{_i}}Badges{{/i}} <small>{{_i}}Indicators and unread counts{{/i}}</small></h1>
</div>
......@@ -1604,13 +1578,13 @@
</tbody>
</table>
</section>
</section>
<!-- Typographic components
================================================== -->
<section id="typography">
<!-- Typographic components
================================================== -->
<section id="typography">
<div class="page-header">
<h1>{{_i}}Typographic components{{/i}} <small>{{_i}}Page header and hero unit for segmenting content{{/i}}</small></h1>
</div>
......@@ -1649,13 +1623,13 @@
&lt;/div&gt;
</pre>
</section>
</section>
<!-- Thumbnails
================================================== -->
<section id="thumbnails">
<!-- Thumbnails
================================================== -->
<section id="thumbnails">
<div class="page-header">
<h1>{{_i}}Thumbnails{{/i}} <small>{{_i}}Grids of images, videos, text, and more{{/i}}</small></h1>
</div>
......@@ -1799,13 +1773,13 @@
</li>
</ul>
</section>
</section>
<!-- Alerts
================================================== -->
<section id="alerts">
<!-- Alerts
================================================== -->
<section id="alerts">
<div class="page-header">
<h1>{{_i}}Alerts{{/i}} <small>{{_i}}Styles for success, warning, and error messages{{/i}}</small></h1>
</div>
......@@ -1905,13 +1879,13 @@
&lt;/div&gt;
</pre>
</section>
</section>
<!-- Progress bars
================================================== -->
<section id="progress">
<!-- Progress bars
================================================== -->
<section id="progress">
<div class="page-header">
<h1>{{_i}}Progress bars{{/i}} <small>{{_i}}For loading, redirecting, or action status{{/i}}</small></h1>
</div>
......@@ -2033,15 +2007,15 @@
<p>{{_i}}Progress bars use CSS3 gradients, transitions, and animations to achieve all their effects. These features are not supported in IE7-9 or older versions of Firefox.{{/i}}</p>
<p>{{_i}}Opera and IE do not support animations at this time.{{/i}}</p>
</section>
</section>
<!-- Miscellaneous
================================================== -->
<section id="misc">
<!-- Miscellaneous
================================================== -->
<section id="misc">
<div class="page-header">
<h1>{{_i}}Miscellaneous{{/i}} <small>{{_i}}Lightweight utility components{{/i}}</small></h1>
</div>
......@@ -2144,7 +2118,9 @@ class="clearfix"
}
</pre>
</section>
</section>
</div>
</div>
</div>{{! /span9 }}
</div>{{! row}}
docs/templates/pages/extend.mustache
View file @ f0ed383e
<!-- 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">
<!-- BUILT WITH LESS
================================================== -->
<section id="built-with-less">
<div class="page-header">
<h1>{{_i}}Built with LESS{{/i}}</h1>
</div>
......@@ -31,22 +37,13 @@
<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>
</section>
<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>
<!-- COMPILING LESS AND BOOTSTRAP
================================================== -->
<section id="compiling">
<!-- COMPILING LESS AND BOOTSTRAP
================================================== -->
<section id="compiling">
<div class="page-header">
<h1>{{_i}}Compiling Bootstrap with LESS{{/i}}</h1>
</div>
......@@ -87,4 +84,20 @@
<h4><a href="http://wearekiss.com/simpless" target="_blank">Simpless</a></h4>
<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>
</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}}
docs/templates/pages/javascript.mustache
View file @ f0ed383e
<!-- 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,10 +31,9 @@
<!-- Overview
================================================== -->
<section id="overview">
<!-- Overview
================================================== -->
<section id="overview">
<div class="page-header">
<h1>{{_i}}Javascript in Bootstrap{{/i}}</h1>
</div>
......@@ -67,13 +50,13 @@
{{! Thought: consider porting much of the JS readme here? }}
</section>
</section>
<!-- Transitions
================================================== -->
<section id="transitions">
<!-- Transitions
================================================== -->
<section id="transitions">
<div class="page-header">
<h1>{{_i}}Transitions{{/i}} <small>bootstrap-transition.js</small></h1>
</div>
......@@ -89,13 +72,13 @@
</ul>
{{! Ideas: include docs for .fade.in, .slide.in, etc }}
</section>
</section>
<!-- Modal
================================================== -->
<section id="modals">
<!-- Modal
================================================== -->
<section id="modals">
<div class="page-header">
<h1>{{_i}}Modals{{/i}} <small>bootstrap-modal.js</small></h1>
</div>
......@@ -245,7 +228,7 @@
<td>{{_i}}path{{/i}}</td>
<td>{{_i}}false{{/i}}</td>
<td><p>{{_i}}If a remote url is provided, content will be loaded via jQuery's <code>load</code> method and injected into the <code>.modal-body</code>. If you're using the data api, you may alternatively use the <code>href</code> tag to specify the remote source. An example of this is shown below:{{/i}}</p>
<pre class="prettyprint linenums"><code>&lt;a data-toggle="modal" href="remote.html" data-target="#modal"&gt;click me&lt;/a&gt;</code></pre></td>
<pre class="prettyprint linenums"><code>&lt;a data-toggle="modal" href="remote.html" data-target="#modal"&gt;click me&lt;/a&gt;</code></pre></td>
</tr>
</tbody>
</table>
......@@ -298,13 +281,13 @@ $('#myModal').modal({
$('#myModal').on('hidden', function () {
// {{_i}}do something…{{/i}}
})</pre>
</section>
</section>
<!-- Dropdown
================================================== -->
<section id="dropdowns">
<!-- Dropdown
================================================== -->
<section id="dropdowns">
<div class="page-header">
<h1>{{_i}}Dropdowns{{/i}} <small>bootstrap-dropdown.js</small></h1>
</div>
......@@ -434,13 +417,13 @@ $('#myModal').on('hidden', function () {
<h3>{{_i}}Methods{{/i}}</h3>
<h4>$().dropdown()</h4>
<p>{{_i}}A programatic api for activating menus for a given navbar or tabbed navigation.{{/i}}</p>
</section>
</section>
<!-- ScrollSpy
================================================== -->
<section id="scrollspy">
<!-- ScrollSpy
================================================== -->
<section id="scrollspy">
<div class="page-header">
<h1>{{_i}}ScrollSpy{{/i}} <small>bootstrap-scrollspy.js</small></h1>
</div>
......@@ -549,13 +532,13 @@ $('[data-spy="scroll"]').each(function () {
</tr>
</tbody>
</table>
</section>
</section>
<!-- Tabs
================================================== -->
<section id="tabs">
<!-- Tabs
================================================== -->
<section id="tabs">
<div class="page-header">
<h1>{{_i}}Togglable tabs{{/i}} <small>bootstrap-tab.js</small></h1>
</div>
......@@ -670,12 +653,12 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
e.target // activated tab
e.relatedTarget // previous tab
})</pre>
</section>
</section>
<!-- Tooltips
================================================== -->
<section id="tooltips">
<!-- Tooltips
================================================== -->
<section id="tooltips">
<div class="page-header">
<h1>{{_i}}Tooltips{{/i}} <small>bootstrap-tooltip.js</small></h1>
</div>
......@@ -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">
......@@ -764,9 +757,9 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
<h3>{{_i}}Markup{{/i}}</h3>
<p>{{_i}}For performance reasons, the Tooltip and Popover data-apis are opt in. If you would like to use them just specify a selector option.{{/i}}</p>
<pre class="prettyprint linenums">
&lt;a href="#" rel="tooltip" title="{{_i}}first tooltip{{/i}}"&gt;{{_i}}hover over me{{/i}}&lt;/a&gt;
</pre>
<pre class="prettyprint linenums">
&lt;a href="#" rel="tooltip" title="{{_i}}first tooltip{{/i}}"&gt;{{_i}}hover over me{{/i}}&lt;/a&gt;
</pre>
<h3>{{_i}}Methods{{/i}}</h3>
<h4>$().tooltip({{_i}}options{{/i}})</h4>
......@@ -783,20 +776,19 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
<h4>.tooltip('destroy')</h4>
<p>{{_i}}Destroys an element's tooltip.{{/i}}</p>
<pre class="prettyprint linenums">$('#element').tooltip('destroy')</pre>
</section>
</section>
<!-- Popovers
================================================== -->
<section id="popovers">
<!-- Popovers
================================================== -->
<section id="popovers">
<div class="page-header">
<h1>{{_i}}Popovers{{/i}} <small>bootstrap-popover.js</small></h1>
</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>
......@@ -939,13 +931,13 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
<h4>.popover('destroy')</h4>
<p>{{_i}}Destroys an element's popover.{{/i}}</p>
<pre class="prettyprint linenums">$('#element').popover('destroy')</pre>
</section>
</section>
<!-- Alert
================================================== -->
<section id="alerts">
<!-- Alert
================================================== -->
<section id="alerts">
<div class="page-header">
<h1>{{_i}}Alert messages{{/i}} <small>bootstrap-alert.js</small></h1>
</div>
......@@ -1015,13 +1007,13 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
$('#my-alert').bind('closed', function () {
// {{_i}}do something…{{/i}}
})</pre>
</section>
</section>
<!-- Buttons
================================================== -->
<section id="buttons">
<!-- Buttons
================================================== -->
<section id="buttons">
<div class="page-header">
<h1>{{_i}}Buttons{{/i}} <small>bootstrap-button.js</small></h1>
</div>
......@@ -1121,13 +1113,13 @@ $('#my-alert').bind('closed', function () {
&lt;script&gt;
$('.btn').button('complete')
&lt;/script&gt;</pre>
</section>
</section>
<!-- Collapse
================================================== -->
<section id="collapse">
<!-- Collapse
================================================== -->
<section id="collapse">
<div class="page-header">
<h1>{{_i}}Collapse{{/i}} <small>bootstrap-collapse.js</small></h1>
</div>
......@@ -1277,13 +1269,13 @@ $('#myCollapsible').collapse({
$('#myCollapsible').on('hidden', function () {
// {{_i}}do something…{{/i}}
})</pre>
</section>
</section>
<!-- Carousel
================================================== -->
<section id="carousel">
================================================== -->
<section id="carousel">
<div class="page-header">
<h1>{{_i}}Carousel{{/i}} <small>bootstrap-carousel.js</small></h1>
</div>
......@@ -1417,13 +1409,13 @@ $('.carousel').carousel({
</tr>
</tbody>
</table>
</section>
</section>
<!-- Typeahead
================================================== -->
<section id="typeahead">
<!-- Typeahead
================================================== -->
<section id="typeahead">
<div class="page-header">
<h1>{{_i}}Typeahead{{/i}} <small>bootstrap-typeahead.js</small></h1>
</div>
......@@ -1499,13 +1491,13 @@ $('.carousel').carousel({
<h3>{{_i}}Methods{{/i}}</h3>
<h4>.typeahead({{_i}}options{{/i}})</h4>
<p>{{_i}}Initializes an input with a typeahead.{{/i}}</p>
</section>
</section>
<!-- Affix
================================================== -->
<section id="affix">
<!-- Affix
================================================== -->
<section id="affix">
<div class="page-header">
<h1>
{{_i}}Affix{{/i}}
......@@ -1521,7 +1513,9 @@ $('.carousel').carousel({
<pre class="prettyprint linenums">
...
</pre>
</section>
</section>
</div>
</div>
\ No newline at end of file
</div>{{! /span9 }}
</div>{{! row}}
docs/templates/pages/scaffolding.mustache
View file @ f0ed383e
<!-- 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">
......@@ -33,9 +24,9 @@
<!-- Global Bootstrap settings
================================================== -->
<section id="global">
<!-- Global Bootstrap settings
================================================== -->
<section id="global">
<div class="page-header">
<h1>{{_i}}Global styles <small>for CSS reset, typography, and links</small>{{/i}}</h1>
</div>
......@@ -62,14 +53,14 @@
<h2>{{_i}}Reset via Normalize{{/i}}</h2>
<p>{{_i}}With Bootstrap 2, the old reset block has been dropped in favor of <a href="http://necolas.github.com/normalize.css/" target="_blank">Normalize.css</a>, a project by <a href="http://twitter.com/necolas" target="_blank">Nicolas Gallagher</a> that also powers the <a href="http://html5boilerplate.com" target="_blank">HTML5 Boilerplate</a>. While we use much of Normalize within our <strong>reset.less</strong>, we have removed some elements specifically for Bootstrap.{{/i}}</p>
</section>
</section>
<!-- Grid system
================================================== -->
<section id="gridSystem">
<!-- Grid system
================================================== -->
<section id="gridSystem">
<div class="page-header">
<h1>{{_i}}Default grid system <small>12 columns with a responsive twist</small>{{/i}}</h1>
</div>
......@@ -167,13 +158,13 @@
&lt;/div&gt;
&lt;/div&gt;
</pre>
</section>
</section>
<!-- Fluid grid system
================================================== -->
<section id="fluidGridSystem">
<!-- Fluid grid system
================================================== -->
<section id="fluidGridSystem">
<div class="page-header">
<h1>{{_i}}Fluid grid system <small>12 responsive, percent-based columns</small>{{/i}}</h1>
</div>
......@@ -271,13 +262,13 @@
&lt;/div&gt;
</pre>
</section>
</section>
<!-- Customizaton
================================================== -->
<section id="gridCustomization">
<!-- Customizaton
================================================== -->
<section id="gridCustomization">
<div class="page-header">
<h1>{{_i}}Grid customization{{/i}}</h1>
</div>
......@@ -327,13 +318,13 @@
<h2>{{_i}}Staying responsive{{/i}}</h2>
<p>{{_i}}Customization of the grid only works at the default level, the 940px grid. To maintain the responsive aspects of Bootstrap, you'll also have to manually customize the grids in <strong>responsive.less</strong> until a future update improves this.{{/i}}</p>
</section>
</section>
<!-- Layouts (Default and fluid)
================================================== -->
<section id="layouts">
<!-- Layouts (Default and fluid)
================================================== -->
<section id="layouts">
<div class="page-header">
<h1>{{_i}}Layouts <small>Basic templates to create webpages</small>{{/i}}</h1>
</div>
......@@ -369,14 +360,14 @@
&lt;/div&gt;
&lt;/div&gt;
</pre>
</section>
</section>
<!-- Responsive design
================================================== -->
<section id="responsive">
<!-- Responsive design
================================================== -->
<section id="responsive">
<div class="page-header">
<h1>{{_i}}Responsive design <small>Media queries for various devices and resolutions</small>{{/i}}</h1>
</div>
......@@ -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>
......@@ -531,7 +522,9 @@
<li>{{_i}}Desktop{{/i}}<span class="hidden-desktop">&#10004; {{_i}}Desktop{{/i}}</span></li>
</ul>
</section>
</section>
</div>
</div>
\ No newline at end of file
</div>{{! /span9 }}
</div>{{! row}}
less/buttons.less
View file @ f0ed383e
......@@ -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,
......
less/forms.less
View file @ f0ed383e
......@@ -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
......
less/mixins.less
View file @ f0ed383e
......@@ -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);
......
less/navbar.less
View file @ f0ed383e
......@@ -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;
}
......
less/popovers.less
View file @ f0ed383e
......@@ -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;
}
}
}
less/responsive-767px-max.less
View file @ f0ed383e
......@@ -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"] {
......
less/scaffolding.less
View file @ f0ed383e
......@@ -4,7 +4,7 @@
// Body reset
// ----------
// -------------------------
body {
margin: 0;
......@@ -17,7 +17,7 @@ body {
// Links
// -----
// -------------------------
a {
color: @linkColor;
......
less/tooltip.less
View file @ f0ed383e
......@@ -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;
}
}
less/variables.less
View file @ f0ed383e
......@@ -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
// --------------------------------------------------
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment