rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-02-19 16:54:24 +01:00
Code Issues Actions Packages Releases Activity

Merge branch '2.0.1-wip'

Browse Source
This commit is contained in:
Jacob Thornton 2012-02-16 22:41:02 -08:00
commit 03e6dc66c2
70 changed files with 1730 additions and 906 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
README.md
View File

@ -62,12 +62,10 @@ Developers
We have included a makefile with convenience methods for working with the Bootstrap library.
+ **build** - `make`
This will run the less compiler on the bootstrap lib and regenerate the docs dir.
The lessc compiler is required for this command to run.
Runs the LESS compiler to rebuild the `/less` files and compiles the docs pages. Requires lessc and uglify-js. <a href="http://twitter.github.com/bootstrap/less.html#compiling">Read more in our docs &raquo;</a>
+ **watch** - `make watch`
This is a convenience method for watching your less files and automatically building them whenever you save.
Watchr is required for this command to run.
This is a convenience method for watching just Less files and automatically building them whenever you save. Requires the Watchr gem.
Authors

BIN
docs/assets/bootstrap.zip
View File

Binary file not shown.

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

@ -7,6 +7,16 @@
*
* Designed and built with all the love in the world @twitter by @mdo and @fat.
*/
.clearfix {
*zoom: 1;
}
.clearfix:before, .clearfix:after {
display: table;
content: "";
}
.clearfix:after {
clear: both;
}
.hidden {
display: none;
visibility: hidden;
@ -25,7 +35,7 @@
.uneditable-input {
display: block;
width: 100%;
height: 28px;
min-height: 28px;
/* Make inputs at least the height of their button counterpart */
/* Makes inputs behave like true block-level elements */
@ -84,7 +94,7 @@
position: static;
}
}
@media (max-width: 768px) {
@media (max-width: 767px) {
.container {
width: auto;
padding: 0 20px;
@ -102,7 +112,7 @@
margin: 0;
}
}
@media (min-width: 768px) and (max-width: 980px) {
@media (min-width: 768px) and (max-width: 979px) {
.row {
margin-left: -20px;
*zoom: 1;
@ -205,40 +215,40 @@
.row-fluid > [class*="span"]:first-child {
margin-left: 0;
}
.row-fluid .span1 {
.row-fluid > .span1 {
width: 5.801104972%;
}
.row-fluid .span2 {
.row-fluid > .span2 {
width: 14.364640883%;
}
.row-fluid .span3 {
.row-fluid > .span3 {
width: 22.928176794%;
}
.row-fluid .span4 {
.row-fluid > .span4 {
width: 31.491712705%;
}
.row-fluid .span5 {
.row-fluid > .span5 {
width: 40.055248616%;
}
.row-fluid .span6 {
.row-fluid > .span6 {
width: 48.618784527%;
}
.row-fluid .span7 {
.row-fluid > .span7 {
width: 57.182320438000005%;
}
.row-fluid .span8 {
.row-fluid > .span8 {
width: 65.74585634900001%;
}
.row-fluid .span9 {
.row-fluid > .span9 {
width: 74.30939226%;
}
.row-fluid .span10 {
.row-fluid > .span10 {
width: 82.87292817100001%;
}
.row-fluid .span11 {
.row-fluid > .span11 {
width: 91.436464082%;
}
.row-fluid .span12 {
.row-fluid > .span12 {
width: 99.999999993%;
}
input.span1, textarea.span1, .uneditable-input.span1 {
@ -278,7 +288,7 @@
width: 714px;
}
}
@media (max-width: 980px) {
@media (max-width: 979px) {
body {
padding-top: 0;
}
@ -314,6 +324,10 @@
.navbar .nav > .divider-vertical {
display: none;
}
.navbar .nav .nav-header {
color: #999999;
text-shadow: none;
}
.navbar .nav > li > a, .navbar .dropdown-menu a {
padding: 6px 15px;
font-weight: bold;
@ -486,40 +500,40 @@
.row-fluid > [class*="span"]:first-child {
margin-left: 0;
}
.row-fluid .span1 {
.row-fluid > .span1 {
width: 5.982905983%;
}
.row-fluid .span2 {
.row-fluid > .span2 {
width: 14.529914530000001%;
}
.row-fluid .span3 {
.row-fluid > .span3 {
width: 23.076923077%;
}
.row-fluid .span4 {
.row-fluid > .span4 {
width: 31.623931624%;
}
.row-fluid .span5 {
.row-fluid > .span5 {
width: 40.170940171000005%;
}
.row-fluid .span6 {
.row-fluid > .span6 {
width: 48.717948718%;
}
.row-fluid .span7 {
.row-fluid > .span7 {
width: 57.264957265%;
}
.row-fluid .span8 {
.row-fluid > .span8 {
width: 65.81196581200001%;
}
.row-fluid .span9 {
.row-fluid > .span9 {
width: 74.358974359%;
}
.row-fluid .span10 {
.row-fluid > .span10 {
width: 82.905982906%;
}
.row-fluid .span11 {
.row-fluid > .span11 {
width: 91.45299145300001%;
}
.row-fluid .span12 {
.row-fluid > .span12 {
width: 100%;
}
input.span1, textarea.span1, .uneditable-input.span1 {

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

@ -33,7 +33,7 @@ html {
-ms-text-size-adjust: 100%;
}
a:focus {
outline: thin dotted;
outline: thin dotted #333;
outline: 5px auto -webkit-focus-ring-color;
outline-offset: -2px;
}
@ -94,6 +94,16 @@ textarea {
overflow: auto;
vertical-align: top;
}
.clearfix {
*zoom: 1;
}
.clearfix:before, .clearfix:after {
display: table;
content: "";
}
.clearfix:after {
clear: both;
}
body {
margin: 0;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
@ -212,40 +222,40 @@ a:hover {
.row-fluid > [class*="span"]:first-child {
margin-left: 0;
}
.row-fluid .span1 {
.row-fluid > .span1 {
width: 6.382978723%;
}
.row-fluid .span2 {
.row-fluid > .span2 {
width: 14.89361702%;
}
.row-fluid .span3 {
.row-fluid > .span3 {
width: 23.404255317%;
}
.row-fluid .span4 {
.row-fluid > .span4 {
width: 31.914893614%;
}
.row-fluid .span5 {
.row-fluid > .span5 {
width: 40.425531911%;
}
.row-fluid .span6 {
.row-fluid > .span6 {
width: 48.93617020799999%;
}
.row-fluid .span7 {
.row-fluid > .span7 {
width: 57.446808505%;
}
.row-fluid .span8 {
.row-fluid > .span8 {
width: 65.95744680199999%;
}
.row-fluid .span9 {
.row-fluid > .span9 {
width: 74.468085099%;
}
.row-fluid .span10 {
.row-fluid > .span10 {
width: 82.97872339599999%;
}
.row-fluid .span11 {
.row-fluid > .span11 {
width: 91.489361693%;
}
.row-fluid .span12 {
.row-fluid > .span12 {
width: 99.99999998999999%;
}
.container {
@ -374,7 +384,7 @@ ol {
li {
line-height: 18px;
}
ul.unstyled {
ul.unstyled, ol.unstyled {
margin-left: 0;
list-style: none;
}
@ -393,7 +403,7 @@ dd {
hr {
margin: 18px 0;
border: 0;
border-top: 1px solid #e5e5e5;
border-top: 1px solid #eeeeee;
border-bottom: 1px solid #ffffff;
}
strong {
@ -488,13 +498,20 @@ pre {
white-space: pre;
white-space: pre-wrap;
word-break: break-all;
word-wrap: break-word;
}
pre.prettyprint {
margin-bottom: 18px;
}
pre code {
padding: 0;
color: inherit;
background-color: transparent;
border: 0;
}
.pre-scrollable {
max-height: 340px;
overflow-y: scroll;
}
form {
margin: 0 0 18px;
@ -515,16 +532,25 @@ legend {
border: 0;
border-bottom: 1px solid #eee;
}
legend small {
font-size: 13.5px;
color: #999999;
}
label,
input,
button,
select,
textarea {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 13px;
font-weight: normal;
line-height: 18px;
}
input,
button,
select,
textarea {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
label {
display: block;
margin-bottom: 5px;
@ -563,13 +589,19 @@ input[type="image"], input[type="checkbox"], input[type="radio"] {
/* IE7 */
line-height: normal;
border: 0;
cursor: pointer;
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
border: 0 \9;
/* IE9 and down */
}
input[type="image"] {
border: 0;
}
input[type="file"] {
width: auto;
padding: initial;
line-height: initial;
border: initial;
@ -592,6 +624,9 @@ select, input[type="file"] {
line-height: 28px;
}
input[type="file"] {
line-height: 18px \9;
}
select {
width: 220px;
background-color: #ffffff;
@ -622,15 +657,13 @@ input[type="hidden"] {
}
.radio.inline, .checkbox.inline {
display: inline-block;
padding-top: 5px;
margin-bottom: 0;
vertical-align: middle;
}
.radio.inline + .radio.inline, .checkbox.inline + .checkbox.inline {
margin-left: 10px;
}
.controls > .radio.inline:first-child, .controls > .checkbox.inline:first-child {
padding-top: 0;
}
input, textarea {
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
@ -648,14 +681,17 @@ input:focus, textarea:focus {
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
outline: 0;
outline: thin dotted \9;
/* IE6-8 */
/* IE6-9 */
}
input[type="file"]:focus, input[type="checkbox"]:focus, select:focus {
input[type="file"]:focus,
input[type="radio"]:focus,
input[type="checkbox"]:focus,
select:focus {
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
outline: thin dotted;
outline: thin dotted #333;
outline: 5px auto -webkit-focus-ring-color;
outline-offset: -2px;
}
@ -817,6 +853,7 @@ input:focus:required:invalid:focus, textarea:focus:required:invalid:focus, selec
color: #999999;
}
.help-block {
display: block;
margin-top: 5px;
margin-bottom: 0;
color: #999999;
@ -898,6 +935,7 @@ input:focus:required:invalid:focus, textarea:focus:required:invalid:focus, selec
border-radius: 3px 0 0 3px;
}
.input-append .uneditable-input {
border-left-color: #eee;
border-right-color: #ccc;
}
.input-append .add-on {
@ -939,6 +977,9 @@ input:focus:required:invalid:focus, textarea:focus:required:invalid:focus, selec
display: inline-block;
margin-bottom: 0;
}
.form-search .hide, .form-inline .hide, .form-horizontal .hide {
display: none;
}
.form-search label,
.form-inline label,
.form-search .input-append,
@ -953,10 +994,17 @@ input:focus:required:invalid:focus, textarea:focus:required:invalid:focus, selec
.form-inline .input-prepend .add-on {
vertical-align: middle;
}
.form-search .radio,
.form-inline .radio,
.form-search .checkbox,
.form-inline .checkbox {
margin-bottom: 0;
vertical-align: middle;
}
.control-group {
margin-bottom: 9px;
}
.form-horizontal legend + .control-group {
legend + .control-group {
margin-top: 18px;
-webkit-margin-top-collapse: separate;
}
@ -971,7 +1019,7 @@ input:focus:required:invalid:focus, textarea:focus:required:invalid:focus, selec
.form-horizontal .control-group:after {
clear: both;
}
.form-horizontal .control-group > label {
.form-horizontal .control-label {
float: left;
width: 140px;
padding-top: 5px;
@ -996,14 +1044,14 @@ table {
padding: 8px;
line-height: 18px;
text-align: left;
vertical-align: top;
border-top: 1px solid #ddd;
}
.table th {
font-weight: bold;
vertical-align: bottom;
}
.table td {
vertical-align: top;
.table thead th {
vertical-align: bottom;
}
.table thead:first-child tr th, .table thead:first-child tr td {
border-top: 0;
@ -1054,6 +1102,9 @@ table {
.table-striped tbody tr:nth-child(odd) td, .table-striped tbody tr:nth-child(odd) th {
background-color: #f9f9f9;
}
.table tbody tr:hover td, .table tbody tr:hover th {
background-color: #f5f5f5;
}
table .span1 {
float: none;
width: 44px;
@ -1114,21 +1165,22 @@ table .span12 {
width: 924px;
margin-left: 0;
}
[class^="icon-"] {
[class^="icon-"], [class*=" icon-"] {
display: inline-block;
width: 14px;
height: 14px;
line-height: 14px;
vertical-align: text-top;
background-image: url(../img/glyphicons-halflings.png);
background-image: url("../img/glyphicons-halflings.png");
background-position: 14px 14px;
background-repeat: no-repeat;
*margin-right: .3em;
}
[class^="icon-"]:last-child {
[class^="icon-"]:last-child, [class*=" icon-"]:last-child {
*margin-left: 0;
}
.icon-white {
background-image: url(../img/glyphicons-halflings-white.png);
background-image: url("../img/glyphicons-halflings-white.png");
}
.icon-glass {
background-position: 0 0;
@ -1529,7 +1581,6 @@ table .span12 {
float: left;
display: none;
min-width: 160px;
max-width: 220px;
_width: 160px;
padding: 4px 0;
margin: 0;
@ -1658,20 +1709,25 @@ table .span12 {
.btn {
display: inline-block;
padding: 4px 10px 4px;
margin-bottom: 0;
font-size: 13px;
line-height: 18px;
color: #333333;
text-align: center;
text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
background-color: #fafafa;
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), color-stop(25%, #ffffff), to(#e6e6e6));
background-image: -webkit-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
background-image: -moz-linear-gradient(top, #ffffff, #ffffff 25%, #e6e6e6);
background-image: -ms-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
background-image: -o-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
background-image: linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
background-repeat: no-repeat;
vertical-align: middle;
background-color: #f5f5f5;
background-image: -moz-linear-gradient(top, #ffffff, #e6e6e6);
background-image: -ms-linear-gradient(top, #ffffff, #e6e6e6);
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-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#e6e6e6', GradientType=0);
border-color: #e6e6e6 #e6e6e6 #bfbfbf;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
border: 1px solid #ccc;
border-bottom-color: #bbb;
-webkit-border-radius: 4px;
@ -1681,8 +1737,19 @@ table .span12 {
-moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
cursor: pointer;
filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
*margin-left: .3em;
}
.btn:hover,
.btn:active,
.btn.active,
.btn.disabled,
.btn[disabled] {
background-color: #e6e6e6;
}
.btn:active, .btn.active {
background-color: #cccccc \9;
}
.btn:first-child {
*margin-left: 0;
}
@ -1698,7 +1765,7 @@ table .span12 {
transition: background-position 0.1s linear;
}
.btn:focus {
outline: thin dotted;
outline: thin dotted #333;
outline: 5px auto -webkit-focus-ring-color;
outline-offset: -2px;
}
@ -1709,7 +1776,6 @@ table .span12 {
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
background-color: #e6e6e6;
background-color: #d9d9d9 \9;
color: rgba(0, 0, 0, 0.5);
outline: 0;
}
.btn.disabled, .btn[disabled] {
@ -1730,7 +1796,7 @@ table .span12 {
-moz-border-radius: 5px;
border-radius: 5px;
}
.btn-large .icon {
.btn-large [class^="icon-"] {
margin-top: 1px;
}
.btn-small {
@ -1738,9 +1804,14 @@ table .span12 {
font-size: 11px;
line-height: 16px;
}
.btn-small .icon {
.btn-small [class^="icon-"] {
margin-top: -1px;
}
.btn-mini {
padding: 2px 6px;
font-size: 11px;
line-height: 14px;
}
.btn-primary,
.btn-primary:hover,
.btn-warning,
@ -1750,7 +1821,9 @@ table .span12 {
.btn-success,
.btn-success:hover,
.btn-info,
.btn-info:hover {
.btn-info:hover,
.btn-inverse,
.btn-inverse:hover {
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
color: #ffffff;
}
@ -1758,7 +1831,8 @@ table .span12 {
.btn-warning.active,
.btn-danger.active,
.btn-success.active,
.btn-info.active {
.btn-info.active,
.btn-dark.active {
color: rgba(255, 255, 255, 0.75);
}
.btn-primary {
@ -1881,6 +1955,30 @@ table .span12 {
.btn-info:active, .btn-info.active {
background-color: #24748c \9;
}
.btn-inverse {
background-color: #393939;
background-image: -moz-linear-gradient(top, #454545, #262626);
background-image: -ms-linear-gradient(top, #454545, #262626);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#454545), to(#262626));
background-image: -webkit-linear-gradient(top, #454545, #262626);
background-image: -o-linear-gradient(top, #454545, #262626);
background-image: linear-gradient(top, #454545, #262626);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#454545', endColorstr='#262626', GradientType=0);
border-color: #262626 #262626 #000000;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
}
.btn-inverse:hover,
.btn-inverse:active,
.btn-inverse.active,
.btn-inverse.disabled,
.btn-inverse[disabled] {
background-color: #262626;
}
.btn-inverse:active, .btn-inverse.active {
background-color: #0c0c0c \9;
}
button.btn, input[type="submit"].btn {
*padding-top: 2px;
*padding-bottom: 2px;
@ -2013,7 +2111,8 @@ button.btn.small, input[type="submit"].btn.small {
.btn-primary .caret,
.btn-danger .caret,
.btn-info .caret,
.btn-success .caret {
.btn-success .caret,
.btn-inverse .caret {
border-top-color: #ffffff;
opacity: 0.75;
filter: alpha(opacity=75);
@ -2086,27 +2185,31 @@ button.btn.small, input[type="submit"].btn.small {
text-decoration: none;
background-color: #eeeeee;
}
.nav .nav-header {
display: block;
padding: 3px 15px;
font-size: 11px;
font-weight: bold;
line-height: 18px;
color: #999999;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
text-transform: uppercase;
}
.nav li + .nav-header {
margin-top: 9px;
}
.nav-list {
padding-left: 14px;
padding-right: 14px;
margin-bottom: 0;
}
.nav-list > li > a, .nav-list .nav-header {
display: block;
padding: 3px 15px;
margin-left: -15px;
margin-right: -15px;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
}
.nav-list .nav-header {
font-size: 11px;
font-weight: bold;
line-height: 18px;
color: #999999;
text-transform: uppercase;
}
.nav-list > li + .nav-header {
margin-top: 9px;
.nav-list > li > a {
padding: 3px 15px;
}
.nav-list .active > a, .nav-list .active > a:hover {
color: #ffffff;
@ -2256,6 +2359,9 @@ button.btn.small, input[type="submit"].btn.small {
.tabbable:after {
clear: both;
}
.tab-content {
overflow: hidden;
}
.tabs-below .nav-tabs, .tabs-right .nav-tabs, .tabs-left .nav-tabs {
border-bottom: 0;
}
@ -2451,6 +2557,13 @@ button.btn.small, input[type="submit"].btn.small {
.navbar-form input[type="image"], .navbar-form input[type="checkbox"], .navbar-form input[type="radio"] {
margin-top: 3px;
}
.navbar-form .input-append, .navbar-form .input-prepend {
margin-top: 6px;
white-space: nowrap;
}
.navbar-form .input-append input, .navbar-form .input-prepend input {
margin-top: 0;
}
.navbar-search {
position: relative;
float: left;
@ -2544,7 +2657,6 @@ button.btn.small, input[type="submit"].btn.small {
color: #ffffff;
text-decoration: none;
background-color: #222222;
background-color: rgba(0, 0, 0, 0.5);
}
.navbar .divider-vertical {
height: 40px;
@ -2631,7 +2743,7 @@ button.btn.small, input[type="submit"].btn.small {
box-shadow: inset 0 1px 0 #ffffff;
}
.breadcrumb li {
display: inline;
display: inline-block;
text-shadow: 0 1px 0 #ffffff;
}
.breadcrumb .divider {
@ -2810,6 +2922,9 @@ button.btn.small, input[type="submit"].btn.small {
.modal-body {
padding: 15px;
}
.modal-body .modal-form {
margin-bottom: 0;
}
.modal-footer {
padding: 14px 15px 15px;
margin-bottom: 0;
@ -3045,28 +3160,44 @@ a.thumbnail:hover {
padding: 9px;
}
.label {
padding: 1px 3px 2px;
font-size: 9.75px;
padding: 2px 4px 3px;
font-size: 11.049999999999999px;
font-weight: bold;
color: #ffffff;
text-transform: uppercase;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
background-color: #999999;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
.label:hover {
color: #ffffff;
text-decoration: none;
}
.label-important {
background-color: #b94a48;
}
.label-important:hover {
background-color: #953b39;
}
.label-warning {
background-color: #f89406;
}
.label-warning:hover {
background-color: #c67605;
}
.label-success {
background-color: #468847;
}
.label-success:hover {
background-color: #356635;
}
.label-info {
background-color: #3a87ad;
}
.label-info:hover {
background-color: #2d6987;
}
@-webkit-keyframes progress-bar-stripes {
from {
background-position: 0 0;

26
docs/assets/css/docs.css
View File

@ -181,7 +181,7 @@ hr.soften {
top: 40px;
left: 0;
right: 0;
z-index: 1030;
z-index: 1020; /* 10 less than .navbar-fixed to prevent any overlap */
border-color: #d5d5d5;
border-width: 0 0 1px; /* drop the border on the fixed edges */
-webkit-border-radius: 0;
@ -190,6 +190,7 @@ hr.soften {
-webkit-box-shadow: inset 0 1px 0 #fff, 0 1px 5px rgba(0,0,0,.1);
-moz-box-shadow: inset 0 1px 0 #fff, 0 1px 5px rgba(0,0,0,.1);
box-shadow: inset 0 1px 0 #fff, 0 1px 5px rgba(0,0,0,.1);
filter: progid:DXImageTransform.Microsoft.gradient(enabled=false); /* IE6-9 */
}
.subnav-fixed .nav {
width: 938px;
@ -481,9 +482,6 @@ hr.soften {
/* Misc
-------------------------------------------------- */
pre.prettyprint {
overflow: hidden;
}
.browser-support {
max-width: 100%;
@ -546,28 +544,12 @@ form.well {
/* Icons
------------------------- */
.the-icons {
margin-bottom: 18px;
}
.the-icons i {
display: block;
margin-bottom: 5px;
margin-left: 0;
list-style: none;
}
.the-icons i:hover {
background-color: rgba(255,0,0,.25);
}
.the-icons i:after {
display: block;
content: attr(class);
font-style: normal;
margin-left: 20px;
width: 140px;
}
#javascript input[type=checkbox] {
position: relative;
top: -1px;
display: inline;
margin-left: 6px;
}
/* Eaxmples page
------------------------- */

11
docs/assets/js/bootstrap-alert.js vendored
View File

@ -51,11 +51,14 @@
$parent.length || ($parent = $this.hasClass('alert') ? $this : $this.parent())
$parent.removeClass('in')
$parent
.trigger('close')
.removeClass('in')
function removeElement() {
$parent.remove()
$parent.trigger('closed')
$parent
.trigger('closed')
.remove()
}
$.support.transition && $parent.hasClass('fade') ?
@ -88,4 +91,4 @@
$('body').on('click.alert.data-api', dismiss, Alert.prototype.close)
})
}( window.jQuery )
}( window.jQuery );

4
docs/assets/js/bootstrap-button.js vendored
View File

@ -91,8 +91,8 @@
$(function () {
$('body').on('click.button.data-api', '[data-toggle^=button]', function ( e ) {
$(e.target).button('toggle')
$(e.currentTarget).button('toggle')
})
})
}( window.jQuery )
}( window.jQuery );

5
docs/assets/js/bootstrap-carousel.js vendored
View File

@ -61,6 +61,7 @@
, pause: function () {
clearInterval(this.interval)
this.interval = null
return this
}
@ -82,6 +83,8 @@
, fallback = type == 'next' ? 'first' : 'last'
, that = this
if (!$next.length) return
this.sliding = true
isCycling && this.pause()
@ -151,4 +154,4 @@
})
})
}( window.jQuery )
}( window.jQuery );

2
docs/assets/js/bootstrap-collapse.js vendored
View File

@ -133,4 +133,4 @@
})
})
}( window.jQuery )
}( window.jQuery );

2
docs/assets/js/bootstrap-dropdown.js vendored
View File

@ -89,4 +89,4 @@
$('body').on('click.dropdown.data-api', toggle, Dropdown.prototype.toggle)
})
}( window.jQuery )
}( window.jQuery );

4
docs/assets/js/bootstrap-modal.js vendored
View File

@ -177,7 +177,7 @@
return this.each(function () {
var $this = $(this)
, data = $this.data('modal')
, options = $.extend({}, $.fn.modal.defaults, typeof option == 'object' && option)
, options = $.extend({}, $.fn.modal.defaults, $this.data(), typeof option == 'object' && option)
if (!data) $this.data('modal', (data = new Modal(this, options)))
if (typeof option == 'string') data[option]()
else if (options.show) data.show()
@ -207,4 +207,4 @@
})
})
}( window.jQuery )
}( window.jQuery );

2
docs/assets/js/bootstrap-popover.js vendored
View File

@ -92,4 +92,4 @@
, template: '<div class="popover"><div class="arrow"></div><div class="popover-inner"><h3 class="popover-title"></h3><div class="popover-content"><p></p></div></div></div>'
})
}( window.jQuery )
}( window.jQuery );

2
docs/assets/js/bootstrap-scrollspy.js vendored
View File

@ -122,4 +122,4 @@
})
})
}( window.jQuery )
}( window.jQuery );

2
docs/assets/js/bootstrap-tab.js vendored
View File

@ -127,4 +127,4 @@
})
})
}( window.jQuery )
}( window.jQuery );

2
docs/assets/js/bootstrap-tooltip.js vendored
View File

@ -267,4 +267,4 @@
, template: '<div class="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>'
}
}( window.jQuery )
}( window.jQuery );

4
docs/assets/js/bootstrap-transition.js vendored
View File

@ -47,5 +47,5 @@
})()
})
}( window.jQuery )
}( window.jQuery );

2
docs/assets/js/bootstrap-typeahead.js vendored
View File

@ -268,4 +268,4 @@
})
})
}( window.jQuery )
}( window.jQuery );

437
docs/base-css.html
View File

@ -7,17 +7,17 @@
<meta name="description" content="">
<meta name="author" content="">
<!-- Le HTML5 shim, for IE6-8 support of HTML elements -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!-- Le styles -->
<link href="assets/css/bootstrap.css" rel="stylesheet">
<link href="assets/css/bootstrap-responsive.css" rel="stylesheet">
<link href="assets/css/docs.css" rel="stylesheet">
<link href="assets/js/google-code-prettify/prettify.css" rel="stylesheet">
<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!-- Le fav and touch icons -->
<link rel="shortcut icon" href="assets/ico/favicon.ico">
<link rel="apple-touch-icon" href="assets/ico/apple-touch-icon.png">
@ -375,7 +375,7 @@ For example, &lt;code&gt;section&lt;/code&gt; should be wrapped as inline.
</div><!--/span-->
<div class="span4">
<h2>Basic block</h2>
<p>Use <code>&lt;pre&gt;</code> for multiple lines of code. Be sure to turn any carets into their unicode characters for proper rendering.</p>
<p>Use <code>&lt;pre&gt;</code> for multiple lines of code. Be sure to escape any angle brackets in the code for proper rendering.</p>
<pre>
&lt;p&gt;Sample text here...&lt;/p&gt;
</pre>
@ -385,6 +385,7 @@ For example, &lt;code&gt;section&lt;/code&gt; should be wrapped as inline.
&lt;/pre&gt;
</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>
</div><!--/span-->
<div class="span4">
<h2>Google Prettify</h2>
@ -530,7 +531,7 @@ For example, &lt;code&gt;section&lt;/code&gt; should be wrapped as inline.
<td>
<code>.table-bordered</code>
</td>
<td>Rounds corners and adds outter border</td>
<td>Rounds corners and adds outer border</td>
</tr>
<tr>
<td>Zebra-stripe</td>
@ -852,9 +853,9 @@ For example, &lt;code&gt;section&lt;/code&gt; should be wrapped as inline.
<h2>Example forms <small>using just form controls, no extra markup</small></h2>
<h3>Basic form</h3>
<div class="row">
<div class="span3">
<h3>Basic form</h3>
<p>With v2.0, we have lighter and smarter defaults for form styles. No extra markup, just form controls.</p>
</div>
<div class="span9">
@ -866,11 +867,22 @@ For example, &lt;code&gt;section&lt;/code&gt; should be wrapped as inline.
</label>
<button type="submit" class="btn">Submit</button>
</form>
<pre class="prettyprint linenums">
&lt;form class="well"&gt;
&lt;label&gt;Label name&lt;/label&gt;
&lt;input type="text" class="span3" placeholder="Type something…"&gt;
&lt;span class="help-inline"&gt;Associated help text!&lt;/span&gt;
&lt;label class="checkbox"&gt;
&lt;input type="checkbox"&gt; Check me out
&lt;/label&gt;
&lt;button type="submit" class="btn"&gt;Submit&lt;/button&gt;
&lt;/form&gt;
</pre>
</div>
</div> <!-- /row -->
<h3>Search form</h3>
<div class="row">
<div class="span3">
<h3>Search form</h3>
<p>Reflecting default WebKit styles, just add <code>.form-search</code> for extra rounded search fields.</p>
</div>
<div class="span9">
@ -878,19 +890,35 @@ For example, &lt;code&gt;section&lt;/code&gt; should be wrapped as inline.
<input type="text" class="input-medium search-query">
<button type="submit" class="btn">Search</button>
</form>
<pre class="prettyprint linenums">
&lt;form class="well form-search"&gt;
&lt;input type="text" class="input-medium search-query"&gt;
&lt;button type="submit" class="btn"&gt;Search&lt;/button&gt;
&lt;/form&gt;
</pre>
</div>
</div> <!-- /row -->
<h3>Inline form</h3>
<div class="row">
<div class="span3">
<h3>Inline form</h3>
<p>Inputs are block level to start. For <code>.form-inline</code> and <code>.form-horizontal</code>, we use inline-block.</p>
</div>
<div class="span9">
<form class="well form-search">
<form class="well form-inline">
<input type="text" class="input-small" placeholder="Email">
<input type="password" class="input-small" placeholder="Password">
<button type="submit" class="btn">Go</button>
<label class="checkbox">
<input type="checkbox"> Remember?
</label>
<button type="submit" class="btn">Sign in</button>
</form>
<pre class="prettyprint linenums">
&lt;form class="well form-inline"&gt;
&lt;input type="text" class="input-small" placeholder="Email"&gt;
&lt;input type="password" class="input-small" placeholder="Password"&gt;
&lt;button type="submit" class="btn"&gt;Go&lt;/button&gt;
&lt;/form&gt;
</pre>
</div>
</div><!-- /row -->
@ -956,10 +984,26 @@ For example, &lt;code&gt;section&lt;/code&gt; should be wrapped as inline.
</div>
<div class="form-actions">
<button type="submit" class="btn btn-primary">Save changes</button>
<button type="reset" class="btn">Cancel</button>
<button class="btn">Cancel</button>
</div>
</fieldset>
</form>
<h3>Example markup</h3>
<p>Given the above example form layout, here's the markup associated with the first input and control group. The <code>.control-group</code>, <code>.control-label</code>, and <code>.controls</code> classes are all required for styling.</p>
<pre class="prettyprint linenums">
&lt;form class="form-horizontal"&gt;
&lt;fieldset&gt;
&lt;legend&gt;Legend text&lt;/legend&gt;
&lt;div class="control-group"&gt;
&lt;label class="control-label" for="input01"&gt;Text input&lt;/label&gt;
&lt;div class="controls"&gt;
&lt;input type="text" class="input-xlarge" id="input01"&gt;
&lt;p class="help-block"&gt;Supporting help text&lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/fieldset&gt;
&lt;/form&gt;
</pre>
</div>
<div class="span4">
<h3>What's included</h3>
@ -1049,14 +1093,14 @@ For example, &lt;code&gt;section&lt;/code&gt; should be wrapped as inline.
</div>
<div class="form-actions">
<button type="submit" class="btn btn-primary">Save changes</button>
<button type="reset" class="btn">Cancel</button>
<button class="btn">Cancel</button>
</div>
</fieldset>
</form>
</div>
<div class="span4">
<h3>Redesigned browser states</h3>
<p>Bootstrap features styles for browser-supported focused and <code>disabled</code> states. We remove the default Webkit <code>outline</code> and apply a <code>box-shadow</code> in it's place for <code>:focus</code>.</p>
<p>Bootstrap features styles for browser-supported focused and <code>disabled</code> states. We remove the default Webkit <code>outline</code> and apply a <code>box-shadow</code> in its place for <code>:focus</code>.</p>
<hr>
<h3>Form validation</h3>
<p>It also includes validation styles for errors, warnings, and success. To use, add the error class to the surrounding <code>.control-group</code>.</p>
@ -1077,7 +1121,7 @@ For example, &lt;code&gt;section&lt;/code&gt; should be wrapped as inline.
<fieldset>
<legend>Extending form controls</legend>
<div class="control-group">
<label class="control-label">Form sizes</label>
<label class="control-label">Form grid sizes</label>
<div class="controls docs-input-sizes">
<input class="span1" type="text" placeholder=".span1">
<input class="span2" type="text" placeholder=".span2">
@ -1106,6 +1150,15 @@ For example, &lt;code&gt;section&lt;/code&gt; should be wrapped as inline.
<p class="help-block">Use the same <code>.span*</code> classes from the grid system for input sizes.</p>
</div>
</div>
<div class="control-group">
<label class="control-label">Alternate sizes</label>
<div class="controls docs-input-sizes">
<input class="input-mini" type="text" placeholder=".input-mini">
<input class="input-small" type="text" placeholder=".input-small">
<input class="input-medium" type="text" placeholder=".input-medium">
<p class="help-block">You may also use static classes that don't map to the grid, adapt to the responsive CSS styles, or account for varying types of controls (e.g., <code>input</code> vs. <code>select</code>).</p>
</div>
</div>
<div class="control-group">
<label class="control-label" for="prependedInput">Prepended text</label>
<div class="controls">
@ -1173,7 +1226,7 @@ For example, &lt;code&gt;section&lt;/code&gt; should be wrapped as inline.
</div>
<div class="form-actions">
<button type="submit" class="btn btn-primary">Save changes</button>
<button type="reset" class="btn">Cancel</button>
<button class="btn">Cancel</button>
</div>
</fieldset>
</form>
@ -1213,34 +1266,39 @@ For example, &lt;code&gt;section&lt;/code&gt; should be wrapped as inline.
</thead>
<tbody>
<tr>
<td><a class="btn" href="#">Default</a></td>
<td><button class="btn" href="#">Default</button></td>
<td><code>.btn</code></td>
<td>Standard gray button with gradient</td>
</tr>
<tr>
<td><a class="btn btn-primary" href="#">Primary</a></td>
<td><button class="btn btn-primary" href="#">Primary</button></td>
<td><code>.btn-primary</code></td>
<td>Provides extra visual weight and identifies the primary action in a set of buttons</td>
</tr>
<tr>
<td><a class="btn btn-info" href="#">Info</a></td>
<td><button class="btn btn-info" href="#">Info</button></td>
<td><code>.btn-info</code></td>
<td>Used as an alternate to the default styles</td>
</tr>
<tr>
<td><a class="btn btn-success" href="#">Success</a></td>
<td><button class="btn btn-success" href="#">Success</button></td>
<td><code>.btn-success</code></td>
<td>Indicates a successful or positive action</td>
</tr>
<tr>
<td><a class="btn btn-warning" href="#">Warning</a></td>
<td><button class="btn btn-warning" href="#">Warning</button></td>
<td><code>.btn-warning</code></td>
<td>Indicates caution should be taken with this action</td>
</tr>
<tr>
<td><a class="btn btn-danger" href="#">Danger</a></td>
<td><button class="btn btn-danger" href="#">Danger</button></td>
<td><code>.btn-danger</code></td>
<td>Indicates a dangerous or potentially negative action</td>
</tr>
<tr>
<td><button class="btn btn-inverse" href="#">Inverse</button></td>
<td><code>.btn-inverse</code></td>
<td>Alternate dark gray button, not tied to a semantic action or use</td>
</tr>
</tbody>
</table>
@ -1249,50 +1307,63 @@ For example, &lt;code&gt;section&lt;/code&gt; should be wrapped as inline.
<div class="span4">
<h3>Buttons for actions</h3>
<p>As a convention, buttons should only be used for actions while hyperlinks are to be used for objects. For instance, "Download" should be a button while "recent activity" should be a link.</p>
<p>Button styles can be applied to anything with the <code>.btn</code> class applied. However, typically you'll want to apply these to only <code>&lt;a&gt;</code> and <code>&lt;button&gt;</code> elements.</p>
<h3>Cross browser compatibility</h3>
<p>IE9 doesn't crop background gradients on rounded corners, so we remove it. Related, IE9 jankifies disabled <code>button</code> elements, rendering text gray with a nasty text-shadow that we cannot fix.</p>
</div>
<div class="span4">
<h3>For anchors and forms</h3>
<p>Button styles can be applied to anything with the <code>.btn</code> applied. However, typically you'll want to apply these to only <code>&lt;a&gt;</code> and <code>&lt;button&gt;</code> elements.</p>
</div>
<div class="span4">
<p><strong>Note:</strong> All buttons must include the <code>.btn</code> class. Button styles should be applied to <code>&lt;button&gt;</code> and <code>&lt;a&gt;</code> elements for consistency.</p>
</div>
</div>
<div class="row">
<div class="span4">
<h3>Multiple sizes</h3>
<p>Fancy larger or smaller buttons? Have at it!</p>
<p>Fancy larger or smaller buttons? Add <code>.btn-large</code>, <code>.btn-small</code>, or <code>.btn-mini</code> for two additional sizes.</p>
<p>
<a href="#" class="btn btn-large btn-primary">Primary action</a>
<a href="#" class="btn btn-large">Action</a>
<button class="btn btn-large btn-primary">Primary action</button>
<button class="btn btn-large">Action</button>
</p>
<p>
<a href="#" class="btn btn-small btn-primary">Primary action</a>
<a href="#" class="btn btn-small">Action</a>
<button class="btn btn-small btn-primary">Primary action</button>
<button class="btn btn-small">Action</button>
</p>
</div>
<div class="span4">
<p>
<button class="btn btn-mini btn-primary">Primary action</button>
<button class="btn btn-mini">Action</button>
</p>
<br>
<h3>Disabled state</h3>
<p>For disabled buttons, use <code>.btn-disabled</code> for links and <code>:disabled</code> for <code>&lt;button&gt;</code> elements.</p>
<p>For disabled buttons, add the <code>.disabled</code> class to links and the <code>disabled</code> attribute for <code>&lt;button&gt;</code> elements.</p>
<p>
<a href="#" class="btn btn-large btn-primary disabled">Primary action</a>
<a href="#" class="btn btn-large disabled">Action</a>
<a href="#" class="btn btn-large btn-primary disabled">Primary link</a>
<a href="#" class="btn btn-large disabled">Link</a>
</p>
<p style="margin-bottom: 18px;">
<button class="btn btn-large btn-primary disabled" disabled="disabled">Primary button</button>
<button class="btn btn-large" disabled>Button</button>
</p>
<p>
<button class="btn btn-large btn-primary disabled" disabled="disabled">Primary action</button>
<button class="btn btn-large" disabled>Action</button>
<span class="label label-info">Heads up!</span>
We use <code>.disabled</code> as a utility class here, similar to the common <code>.active</code> class, so no prefix is required.
</p>
</div>
<div class="span4">
<h3>Cross browser compatibility</h3>
<p>In IE9, we drop the gradient on all buttons in favor of rounded corners as IE9 doesn't crop background gradients to the corners.</p>
<p>Related, IE9 jankifies disabled <code>button</code> elements, rendering text gray with a nasty text-shadow&mdash;unfortunately we can't fix this.</p>
<h3>One class, multiple tags</h3>
<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>
<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>
<pre class="prettyprint linenums">
&lt;a class="btn" href=""&gt;Link&lt;/a&gt;
&lt;button class="btn" type="submit"&gt;
Button
&lt;/button&gt;
&lt;input class="btn" type="button"
value="Input"&gt;
&lt;input class="btn" type="submit"
value="Submit"&gt;
</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>
</div>
</div>
<br>
</section>
@ -1305,148 +1376,144 @@ For example, &lt;code&gt;section&lt;/code&gt; should be wrapped as inline.
</div>
<div class="row">
<div class="span3">
<div class="the-icons">
<i class="icon-glass"></i>
<i class="icon-music"></i>
<i class="icon-search"></i>
<i class="icon-envelope"></i>
<i class="icon-heart"></i>
<i class="icon-star"></i>
<i class="icon-star-empty"></i>
<i class="icon-user"></i>
<i class="icon-film"></i>
<i class="icon-th-large"></i>
<i class="icon-th"></i>
<i class="icon-th-list"></i>
<i class="icon-ok"></i>
<i class="icon-remove"></i>
<i class="icon-zoom-in"></i>
<i class="icon-zoom-out"></i>
<i class="icon-off"></i>
<i class="icon-signal"></i>
<i class="icon-cog"></i>
<i class="icon-trash"></i>
<i class="icon-home"></i>
<i class="icon-file"></i>
<i class="icon-time"></i>
<i class="icon-road"></i>
<i class="icon-download-alt"></i>
<i class="icon-download"></i>
<i class="icon-upload"></i>
<i class="icon-inbox"></i>
<i class="icon-play-circle"></i>
<i class="icon-repeat"></i>
</div>
<ul class="the-icons">
<li><i class="icon-glass"></i> icon-glass</li>
<li><i class="icon-music"></i> icon-music</li>
<li><i class="icon-search"></i> icon-search</li>
<li><i class="icon-envelope"></i> icon-envelope</li>
<li><i class="icon-heart"></i> icon-heart</li>
<li><i class="icon-star"></i> icon-star</li>
<li><i class="icon-star-empty"></i> icon-star-empty</li>
<li><i class="icon-user"></i> icon-user</li>
<li><i class="icon-film"></i> icon-film</li>
<li><i class="icon-th-large"></i> icon-th-large</li>
<li><i class="icon-th"></i> icon-th</li>
<li><i class="icon-th-list"></i> icon-th-list</li>
<li><i class="icon-ok"></i> icon-ok</li>
<li><i class="icon-remove"></i> icon-remove</li>
<li><i class="icon-zoom-in"></i> icon-zoom-in</li>
<li><i class="icon-zoom-out"></i> icon-zoom-out</li>
<li><i class="icon-off"></i> icon-off</li>
<li><i class="icon-signal"></i> icon-signal</li>
<li><i class="icon-cog"></i> icon-cog</li>
<li><i class="icon-trash"></i> icon-trash</li>
<li><i class="icon-home"></i> icon-home</li>
<li><i class="icon-file"></i> icon-file</li>
<li><i class="icon-time"></i> icon-time</li>
<li><i class="icon-road"></i> icon-road</li>
<li><i class="icon-download-alt"></i> icon-download-alt</li>
<li><i class="icon-download"></i> icon-download</li>
<li><i class="icon-upload"></i> icon-upload</li>
<li><i class="icon-inbox"></i> icon-inbox</li>
<li><i class="icon-play-circle"></i> icon-play-circle</li>
<li><i class="icon-repeat"></i> icon-repeat</li>
</ul>
</div>
<div class="span3">
<div class="the-icons">
<i class="icon-refresh"></i>
<i class="icon-list-alt"></i>
<i class="icon-lock"></i>
<i class="icon-flag"></i>
<i class="icon-headphones"></i>
<i class="icon-volume-off"></i>
<i class="icon-volume-down"></i>
<i class="icon-volume-up"></i>
<i class="icon-qrcode"></i>
<i class="icon-barcode"></i>
<i class="icon-tag"></i>
<i class="icon-tags"></i>
<i class="icon-book"></i>
<i class="icon-bookmark"></i>
<i class="icon-print"></i>
<i class="icon-camera"></i>
<i class="icon-font"></i>
<i class="icon-bold"></i>
<i class="icon-italic"></i>
<i class="icon-text-height"></i>
<i class="icon-text-width"></i>
<i class="icon-align-left"></i>
<i class="icon-align-center"></i>
<i class="icon-align-right"></i>
<i class="icon-align-justify"></i>
<i class="icon-list"></i>
<i class="icon-indent-left"></i>
<i class="icon-indent-right"></i>
<i class="icon-facetime-video"></i>
<i class="icon-picture"></i>
</div>
<ul class="the-icons">
<li><i class="icon-refresh"></i> icon-refresh</li>
<li><i class="icon-list-alt"></i> icon-list-alt</li>
<li><i class="icon-lock"></i> icon-lock</li>
<li><i class="icon-flag"></i> icon-flag</li>
<li><i class="icon-headphones"></i> icon-headphones</li>
<li><i class="icon-volume-off"></i> icon-volume-off</li>
<li><i class="icon-volume-down"></i> icon-volume-down</li>
<li><i class="icon-volume-up"></i> icon-volume-up</li>
<li><i class="icon-qrcode"></i> icon-qrcode</li>
<li><i class="icon-barcode"></i> icon-barcode</li>
<li><i class="icon-tag"></i> icon-tag</li>
<li><i class="icon-tags"></i> icon-tags</li>
<li><i class="icon-book"></i> icon-book</li>
<li><i class="icon-bookmark"></i> icon-bookmark</li>
<li><i class="icon-print"></i> icon-print</li>
<li><i class="icon-camera"></i> icon-camera</li>
<li><i class="icon-font"></i> icon-font</li>
<li><i class="icon-bold"></i> icon-bold</li>
<li><i class="icon-italic"></i> icon-italic</li>
<li><i class="icon-text-height"></i> icon-text-height</li>
<li><i class="icon-text-width"></i> icon-text-width</li>
<li><i class="icon-align-left"></i> icon-align-left</li>
<li><i class="icon-align-center"></i> icon-align-center</li>
<li><i class="icon-align-right"></i> icon-align-right</li>
<li><i class="icon-align-justify"></i> icon-align-justify</li>
<li><i class="icon-list"></i> icon-list</li>
<li><i class="icon-indent-left"></i> icon-indent-left</li>
<li><i class="icon-indent-right"></i> icon-indent-right</li>
<li><i class="icon-facetime-video"></i> icon-facetime-video</li>
<li><i class="icon-picture"></i> icon-picture</li>
</ul>
</div>
<div class="span3">
<div class="the-icons">
<i class="icon-pencil"></i>
<i class="icon-map-marker"></i>
<i class="icon-adjust"></i>
<i class="icon-tint"></i>
<i class="icon-edit"></i>
<i class="icon-share"></i>
<i class="icon-check"></i>
<i class="icon-move"></i>
<i class="icon-step-backward"></i>
<i class="icon-fast-backward"></i>
<i class="icon-backward"></i>
<i class="icon-play"></i>
<i class="icon-pause"></i>
<i class="icon-stop"></i>
<i class="icon-forward"></i>
<i class="icon-fast-forward"></i>
<i class="icon-step-forward"></i>
<i class="icon-eject"></i>
<i class="icon-chevron-left"></i>
<i class="icon-chevron-right"></i>
<i class="icon-plus-sign"></i>
<i class="icon-minus-sign"></i>
<i class="icon-remove-sign"></i>
<i class="icon-ok-sign"></i>
<i class="icon-question-sign"></i>
<i class="icon-info-sign"></i>
<i class="icon-screenshot"></i>
<i class="icon-remove-circle"></i>
<i class="icon-ok-circle"></i>
<i class="icon-ban-circle"></i>
</div>
<ul class="the-icons">
<li><i class="icon-pencil"></i> icon-pencil</li>
<li><i class="icon-map-marker"></i> icon-map-marker</li>
<li><i class="icon-adjust"></i> icon-adjust</li>
<li><i class="icon-tint"></i> icon-tint</li>
<li><i class="icon-edit"></i> icon-edit</li>
<li><i class="icon-share"></i> icon-share</li>
<li><i class="icon-check"></i> icon-check</li>
<li><i class="icon-move"></i> icon-move</li>
<li><i class="icon-step-backward"></i> icon-step-backward</li>
<li><i class="icon-fast-backward"></i> icon-fast-backward</li>
<li><i class="icon-backward"></i> icon-backward</li>
<li><i class="icon-play"></i> icon-play</li>
<li><i class="icon-pause"></i> icon-pause</li>
<li><i class="icon-stop"></i> icon-stop</li>
<li><i class="icon-forward"></i> icon-forward</li>
<li><i class="icon-fast-forward"></i> icon-fast-forward</li>
<li><i class="icon-step-forward"></i> icon-step-forward</li>
<li><i class="icon-eject"></i> icon-eject</li>
<li><i class="icon-chevron-left"></i> icon-chevron-left</li>
<li><i class="icon-chevron-right"></i> icon-chevron-right</li>
<li><i class="icon-plus-sign"></i> icon-plus-sign</li>
<li><i class="icon-minus-sign"></i> icon-minus-sign</li>
<li><i class="icon-remove-sign"></i> icon-remove-sign</li>
<li><i class="icon-ok-sign"></i> icon-ok-sign</li>
<li><i class="icon-question-sign"></i> icon-question-sign</li>
<li><i class="icon-info-sign"></i> icon-info-sign</li>
<li><i class="icon-screenshot"></i> icon-screenshot</li>
<li><i class="icon-remove-circle"></i> icon-remove-circle</li>
<li><i class="icon-ok-circle"></i> icon-ok-circle</li>
<li><i class="icon-ban-circle"></i> icon-ban-circle</li>
</ul>
</div>
<div class="span3">
<div class="the-icons">
<i class="icon-arrow-left"></i>
<i class="icon-arrow-right"></i>
<i class="icon-arrow-up"></i>
<i class="icon-arrow-down"></i>
<i class="icon-share-alt"></i>
<i class="icon-resize-full"></i>
<i class="icon-resize-small"></i>
<i class="icon-plus"></i>
<i class="icon-minus"></i>
<i class="icon-asterisk"></i>
<i class="icon-exclamation-sign"></i>
<i class="icon-gift"></i>
<i class="icon-leaf"></i>
<i class="icon-fire"></i>
<i class="icon-eye-open"></i>
<i class="icon-eye-close"></i>
<i class="icon-warning-sign"></i>
<i class="icon-plane"></i>
<i class="icon-calendar"></i>
<i class="icon-random"></i>
<i class="icon-comment"></i>
<i class="icon-magnet"></i>
<i class="icon-chevron-up"></i>
<i class="icon-chevron-down"></i>
<i class="icon-retweet"></i>
<i class="icon-shopping-cart"></i>
<i class="icon-folder-close"></i>
<i class="icon-folder-open"></i>
<i class="icon-resize-vertical"></i>
<i class="icon-resize-horizontal"></i>
</div>
<ul class="the-icons">
<li><i class="icon-arrow-left"></i> icon-arrow-left</li>
<li><i class="icon-arrow-right"></i> icon-arrow-right</li>
<li><i class="icon-arrow-up"></i> icon-arrow-up</li>
<li><i class="icon-arrow-down"></i> icon-arrow-down</li>
<li><i class="icon-share-alt"></i> icon-share-alt</li>
<li><i class="icon-resize-full"></i> icon-resize-full</li>
<li><i class="icon-resize-small"></i> icon-resize-small</li>
<li><i class="icon-plus"></i> icon-plus</li>
<li><i class="icon-minus"></i> icon-minus</li>
<li><i class="icon-asterisk"></i> icon-asterisk</li>
<li><i class="icon-exclamation-sign"></i> icon-exclamation-sign</li>
<li><i class="icon-gift"></i> icon-gift</li>
<li><i class="icon-leaf"></i> icon-leaf</li>
<li><i class="icon-fire"></i> icon-fire</li>
<li><i class="icon-eye-open"></i> icon-eye-open</li>
<li><i class="icon-eye-close"></i> icon-eye-close</li>
<li><i class="icon-warning-sign"></i> icon-warning-sign</li>
<li><i class="icon-plane"></i> icon-plane</li>
<li><i class="icon-calendar"></i> icon-calendar</li>
<li><i class="icon-random"></i> icon-random</li>
<li><i class="icon-comment"></i> icon-comment</li>
<li><i class="icon-magnet"></i> icon-magnet</li>
<li><i class="icon-chevron-up"></i> icon-chevron-up</li>
<li><i class="icon-chevron-down"></i> icon-chevron-down</li>
<li><i class="icon-retweet"></i> icon-retweet</li>
<li><i class="icon-shopping-cart"></i> icon-shopping-cart</li>
<li><i class="icon-folder-close"></i> icon-folder-close</li>
<li><i class="icon-folder-open"></i> icon-folder-open</li>
<li><i class="icon-resize-vertical"></i> icon-resize-vertical</li>
<li><i class="icon-resize-horizontal"></i> icon-resize-horizontal</li>
</ul>
</div>
</div>
<div class="alert alert-info">
<strong>Heads up!</strong> Icon classes are echoed via CSS <code>:after</code>. In the docs, we show a light red background color on hover to hightlight the icon's size.
<strong>Heads up!</strong> Icon classes are echoed via CSS <code>:after</code>. In the docs, we show a light red background color on hover to highlight the icon's size.
</div>
<br>
@ -1495,7 +1562,7 @@ For example, &lt;code&gt;section&lt;/code&gt; should be wrapped as inline.
<a class="btn" href="#"><i class="icon-align-justify"></i></a>
</div>
<div class="btn-group">
<a class="btn btn-primary" href="#"><i class="icon white user"></i> User</a>
<a class="btn btn-primary" href="#"><i class="icon-user icon-white"></i> User</a>
<a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#"><i class="icon-pencil"></i> Edit</a></li>

157
docs/components.html
View File

@ -7,17 +7,17 @@
<meta name="description" content="">
<meta name="author" content="">
<!-- Le HTML5 shim, for IE6-8 support of HTML elements -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!-- Le styles -->
<link href="assets/css/bootstrap.css" rel="stylesheet">
<link href="assets/css/bootstrap-responsive.css" rel="stylesheet">
<link href="assets/css/docs.css" rel="stylesheet">
<link href="assets/js/google-code-prettify/prettify.css" rel="stylesheet">
<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!-- Le fav and touch icons -->
<link rel="shortcut icon" href="assets/ico/favicon.ico">
<link rel="apple-touch-icon" href="assets/ico/apple-touch-icon.png">
@ -98,6 +98,7 @@
</ul>
</li>
<li><a href="#labels">Labels</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>
@ -118,14 +119,34 @@
<div class="span4">
<h3>Button groups</h3>
<p>Use button groups to join multiple buttons together as one composite component. Build them with a series of <code>&lt;a&gt;</code> or <code>&lt;button&gt;</code> elements.</p>
<p>You can also combine sets of <code>&lt;div class="btn-group"&gt;</code> into a <code>&lt;div class="btn-toolbar"&gt;</code> for more complex projects.</p>
<div class="btn-toolbar" style="margin-top: 18px;">
<div class="btn-group">
<h3>Best practices</h3>
<p>We recommend the following guidelines for using button groups and toolbars:</p>
<ul>
<li>Always use the same element in a single button group, <code>&lt;a&gt;</code> or <code>&lt;button&gt;</code>.</li>
<li>Don't mix buttons of different colors in the same button group.</li>
<li>Use icons in addition to or instead of text, but be sure include alt and title text where appropriate.</li>
</ul>
<p><span class="label label-info">Related</span> Button groups with dropdowns (see below) should be called out separately and always include a dropdown caret to indicate intended behavior.</p>
</div>
<div class="span4">
<h3>Default example</h3>
<p>Here's how the HTML looks for a standard button group built with anchor tag buttons:</p>
<div class="">
<div class="btn-group" style="margin: 9px 0;">
<a class="btn" href="#">Left</a>
<a class="btn" href="#">Middle</a>
<a class="btn" href="#">Right</a>
</div>
</div>
<pre class="prettyprint linenums">
&lt;div class="btn-group"&gt;
&lt;a class="btn" href="#"&gt;1&lt;/a&gt;
&lt;a class="btn" href="#"&gt;2&lt;/a&gt;
&lt;a class="btn" href="#"&gt;3&lt;/a&gt;
&lt;/div&gt;
</pre>
<h3>Toolbar example</h3>
<p>Combine sets of <code>&lt;div class="btn-group"&gt;</code> into a <code>&lt;div class="btn-toolbar"&gt;</code> for more complex components.</p>
<div class="btn-toolbar">
<div class="btn-group">
<a class="btn" href="#">1</a>
@ -142,18 +163,6 @@
<a class="btn" href="#">8</a>
</div>
</div>
</div>
<div class="span4">
<h3>Example markup</h3>
<p>Here's how the HTML looks for a standard button group built with anchor tag buttons:</p>
<pre class="prettyprint linenums">
&lt;div class="btn-group"&gt;
&lt;a class="btn" href="#"&gt;1&lt;/a&gt;
&lt;a class="btn" href="#"&gt;2&lt;/a&gt;
&lt;a class="btn" href="#"&gt;3&lt;/a&gt;
&lt;/div&gt;
</pre>
<p>And with a toolbar for multiple groups:</p>
<pre class="prettyprint linenums">
&lt;div class="btn-toolbar"&gt;
&lt;div class="btn-group"&gt;
@ -239,7 +248,9 @@
<li><a href="#">Separated link</a></li>
</ul>
</div><!-- /btn-group -->
</div>
</div><!-- /btn-toolbar -->
<hr>
<p><span class="label label-info">Heads up!</span> Button dropdowns require the <a href="./javascript.html#dropdowns">Bootstrap dropdown plugin</a> to function.</p>
</div>
<div class="span8">
<h3>Example markup</h3>
@ -354,9 +365,10 @@
<div class="span4">
<h3>Powerful base class</h3>
<p>All nav components here&mdash;tabs, pills, and lists&mdash;<strong>share the same base markup and styles</strong> through the <code>.nav</code> class.</p>
<h3>Why tabs and pills</h3>
<p>Tabs and pills in Bootstrap are built on a <code>&lt;ul&gt;</code> with the same core HTML, a list of links. Swap between tabs or pills with only a class.</p>
<p>Both options are great for sub-sections of content or navigating between pages of related content.</p>
<h3>When to use</h3>
<p>Tabs and pills are great for sections of content or navigating between pages of related content.</p>
<h3>Component alignment</h3>
<p>To align nav links, use the <code>.pull-left</code> or <code>.pull-right</code> utility classes. Both classes will add a CSS float in the specified direction.</p>
</div>
<div class="span4">
<h3>Basic tabs</h3>
@ -762,7 +774,9 @@
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li class="nav-header">Nav header</li>
<li><a href="#">Separated link</a></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
@ -801,12 +815,14 @@
&lt;/div&gt;
&lt;/div&gt;
</pre>
<p>To make the navbar fixed to the top of the viewport, add <code>.navbar-fixed-top</code> to the outermost div, <code>.navbar</code>. In your CSS, you will also need to account for the overlap it causes by adding <code>padding-top: 40px;</code> to your <code>&lt;body&gt;</code>.</p>
<h3>Fixed navbar</h3>
<p>To make the navbar fixed to the top of the viewport, add <code>.navbar-fixed-top</code> to the outermost div, <code>.navbar</code>.</p>
<pre class="prettyprint linenums">
&lt;div class="navbar navbar-fixed-top"&gt;
...
&lt;/div&gt;
</pre>
<p>In your CSS, you will also need to account for the overlap it causes by adding 40px or more of padding to your <code>&lt;body&gt;</code>. Be sure to add this after the core Bootstrap CSS and before the optional responsive CSS.</p>
<h3>Brand name</h3>
<p>A simple link to show your brand or project name only requires an anchor tag.</p>
<pre class="prettyprint linenums">
@ -827,14 +843,14 @@
&lt;div class="navbar"&gt;
&lt;div class="navbar-inner"&gt;
&lt;div class="container"&gt;
&lt;!-- .btn-navbar is used as the toggle for collapsed navbar content --&gt;
&lt;a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"&gt;
&lt;span class="icon-bar"&gt;&lt;/span&gt;
&lt;span class="icon-bar"&gt;&lt;/span&gt;
&lt;span class="icon-bar"&gt;&lt;/span&gt;
&lt;/a&gt;
&lt;!-- Be sure to leave the brand out there if you want it shown --&gt;
&lt;a class="brand" href="#"&gt;Project name&lt;/a&gt;
@ -864,8 +880,18 @@
&lt;li&gt;&lt;a href="#"&gt;Link&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
</pre>
<p>You can easily add dividers to your nav links with an empty list item and a simple class. Just add this between links:</p>
<pre class="prettyprint linenums">
&lt;ul class="nav"&gt;
...
&lt;li class="divider-vertical"&gt;&lt;/li&gt;
...
&lt;/ul&gt;
</pre>
<h3>Component alignment</h3>
<p>To align a nav, search form, or text, use the <code>.pull-left</code> or <code>.pull-right</code> utility classes. Both classes will add a CSS float in the specified direction.</p>
<h3>Adding dropdowns</h3>
<p>Adding dropdowns to the nav is super simple, but does require the use of <a href="./javascript.html#dropdown">our javascript plugin</a>.</p>
<p>Adding dropdowns to the nav is super simple, but does require the use of <a href="./javascript.html#dropdowns">our javascript plugin</a>.</p>
<pre class="prettyprint linenums">
&lt;ul class="nav"&gt;
&lt;li class="dropdown"&gt;
@ -881,7 +907,7 @@
&lt;/li&gt;
&lt;/ul&gt;
</pre>
<p><a class="btn" href="./javascript.html#dropdown">Get the javascript &rarr;</a></p>
<p><a class="btn" href="./javascript.html#dropdowns">Get the javascript &rarr;</a></p>
</div><!-- /.span -->
</div><!-- /.row -->
@ -1021,7 +1047,7 @@
<div class="row">
<div class="span4">
<h3>About pager</h3>
<p>The pager component is a set of links for simple pagination implemenations with light markup and even lighter styles. It's great for simple sites like blogs or magazines.</p>
<p>The pager component is a set of links for simple pagination implementations with light markup and even lighter styles. It's great for simple sites like blogs or magazines.</p>
</div>
<div class="span4">
<h3>Default example</h3>
@ -1091,7 +1117,7 @@
<span class="label label-success">Success</span>
</td>
<td>
<code>&lt;span class="label label-success"&gt;New&lt;/span&gt;</code>
<code>&lt;span class="label label-success"&gt;Success&lt;/span&gt;</code>
</td>
</tr>
<tr>
@ -1124,6 +1150,55 @@
<!-- Typographic components
================================================== -->
<section id="typography">
<div class="page-header">
<h1>Typographic components <small>Page header and hero unit for segmenting content</small></h1>
</div>
<h2>Hero unit</h2>
<div class="row">
<div class="span4">
<p>Bootstrap provides a lightweight, flexible component called a hero unit to showcase content on your site. It works well on marketing and content-heavy sites.</p>
<h3>Markup</h3>
<p>Wrap your content in a <code>div</code> like so:</p>
<pre class="prettyprint linenums">
&lt;div class="hero-unit"&gt;
&lt;h1&gt;Heading&lt;/h1&gt;
&lt;p&gt;Tagline&lt;/p&gt;
&lt;p&gt;
&lt;a class="btn btn-primary btn-large"&gt;
Learn more
&lt;/a&gt;
&lt;/p&gt;
&lt;/div&gt;
</pre>
</div>
<div class="span8">
<div class="hero-unit">
<h1>Hello, world!</h1>
<p>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
<p><a class="btn btn-primary btn-large">Learn more</a></p>
</div>
</div>
</div><!-- /row -->
<h2>Page header</h2>
<div class="row">
<div class="span4">
<p>A simple shell for an <code>h1</code> to appropratiely space out and segment sections of content on a page. It can utilize the <code>h1</code>'s default <code>small</code>, element as well most other components (with additional styles).</p>
</div>
<div class="span8">
<pre class="prettyprint linenums">
&lt;div class="page-haeder"&gt;
&lt;h1&gt;Example page header&lt;/h1&gt;
&lt;/div&gt;
</pre>
</div>
</div><!-- /row -->
</section>
<!-- Thumbnails
================================================== -->
<section id="thumbnails">
@ -1168,7 +1243,7 @@
<div class="caption">
<h5>Thumbnail label</h5>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<p><a href="#" class="btn primary">Action</a> <a href="#" class="btn">Action</a></p>
<p><a href="#" class="btn btn-primary">Action</a> <a href="#" class="btn">Action</a></p>
</div>
</div>
</li>
@ -1178,7 +1253,7 @@
<div class="caption">
<h5>Thumbnail label</h5>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<p><a href="#" class="btn primary">Action</a> <a href="#" class="btn">Action</a></p>
<p><a href="#" class="btn btn-primary">Action</a> <a href="#" class="btn">Action</a></p>
</div>
</div>
</li>
@ -1282,7 +1357,7 @@
<div class="row">
<div class="span4">
<h3>Rewritten base class</h3>
<p>With Bootstrap 2, we've simplified the base class: <code>.alert</code> instead of <code>.alert-message</code>. We've also reduced the minimum required markup&mdash;no <code>&lt;p&gt;</code> is required by default, just the outter <code>&lt;div&gt;</code>.</p>
<p>With Bootstrap 2, we've simplified the base class: <code>.alert</code> instead of <code>.alert-message</code>. We've also reduced the minimum required markup&mdash;no <code>&lt;p&gt;</code> is required by default, just the outer <code>&lt;div&gt;</code>.</p>
<h3>Single alert message</h3>
<p>For a more durable component with less code, we've removed the differentiating look for block alerts, messages that come with more padding and typically more text. The class also has changed to <code>.alert-block</code>.</p>
<hr>
@ -1294,24 +1369,24 @@
<h3>Example alerts</h3>
<p>Wrap your message and an optional close icon in a div with simple class.</p>
<div class="alert">
<a class="close">&times;</a>
<a class="close" data-dismiss="alert">&times;</a>
<strong>Warning!</strong> Best check yo self, you're not looking too good.
</div>
<pre class="prettyprint linenums">
&lt;div class="alert"&gt;
&lt;a class="close"&gt;&times;&lt;/a&gt;
&lt;a class="close" data-dismiss="alert"&gt;&times;&lt;/a&gt;
&lt;strong&gt;Warning!&lt;/strong&gt; Best check yo self, you're not looking too good.
&lt;/div&gt;
</pre>
<p>Easily extend the standard alert message with two optional classes: <code>.alert-block</code> for more padding and text controls and <code>.alert-heading</code> for a matching heading.</p>
<div class="alert alert-block">
<a class="close">&times;</a>
<a class="close" data-dismiss="alert">&times;</a>
<h4 class="alert-heading">Warning!</h4>
<p>Best check yo self, you're not looking too good. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</p>
</div>
<pre class="prettyprint linenums">
&lt;div class="alert alert-block"&gt;
&lt;a class="close"&gt;&times;&lt;/a&gt;
&lt;a class="close" data-dismiss="alert"&gt;&times;&lt;/a&gt;
&lt;h4 class="alert-heading"&gt;Warning!&lt;/h4&gt;
Best check yo self, you're not...
&lt;/div&gt;
@ -1324,7 +1399,7 @@
<div class="span4">
<h3>Error or danger</h3>
<div class="alert alert-error">
<a class="close">&times;</a>
<a class="close" data-dismiss="alert">&times;</a>
<strong>Oh snap!</strong> Change a few things up and try submitting again.
</div>
<pre class="prettyprint linenums">
@ -1336,7 +1411,7 @@
<div class="span4">
<h3>Success</h3>
<div class="alert alert-success">
<a class="close">&times;</a>
<a class="close" data-dismiss="alert">&times;</a>
<strong>Well done!</strong> You successfully read this important alert message.
</div>
<pre class="prettyprint linenums">
@ -1348,7 +1423,7 @@
<div class="span4">
<h3>Information</h3>
<div class="alert alert-info">
<a class="close">&times;</a>
<a class="close" data-dismiss="alert">&times;</a>
<strong>Heads up!</strong> This alert needs your attention, but it's not super important.
</div>
<pre class="prettyprint linenums">

12
docs/download.html
View File

@ -7,17 +7,17 @@
<meta name="description" content="">
<meta name="author" content="">
<!-- Le HTML5 shim, for IE6-8 support of HTML elements -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!-- Le styles -->
<link href="assets/css/bootstrap.css" rel="stylesheet">
<link href="assets/css/bootstrap-responsive.css" rel="stylesheet">
<link href="assets/css/docs.css" rel="stylesheet">
<link href="assets/js/google-code-prettify/prettify.css" rel="stylesheet">
<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!-- Le fav and touch icons -->
<link rel="shortcut icon" href="assets/ico/favicon.ico">
<link rel="apple-touch-icon" href="assets/ico/apple-touch-icon.png">
@ -93,7 +93,7 @@
<div class="page-header">
<a class="btn btn-small pull-right toggle-all" href="#">Toggle all</a>
<h1>
1. Chose components
1. Choose components
<small>Get just the CSS you need</small>
</h1>
</div>

10
docs/examples.html
View File

@ -7,17 +7,17 @@
<meta name="description" content="">
<meta name="author" content="">
<!-- Le HTML5 shim, for IE6-8 support of HTML elements -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!-- Le styles -->
<link href="assets/css/bootstrap.css" rel="stylesheet">
<link href="assets/css/bootstrap-responsive.css" rel="stylesheet">
<link href="assets/css/docs.css" rel="stylesheet">
<link href="assets/js/google-code-prettify/prettify.css" rel="stylesheet">
<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!-- Le fav and touch icons -->
<link rel="shortcut icon" href="assets/ico/favicon.ico">
<link rel="apple-touch-icon" href="assets/ico/apple-touch-icon.png">

10
docs/examples/fluid.html
View File

@ -7,11 +7,6 @@
<meta name="description" content="">
<meta name="author" content="">
<!-- Le HTML5 shim, for IE6-8 support of HTML elements -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!-- Le styles -->
<link href="../assets/css/bootstrap.css" rel="stylesheet">
<style type="text/css">
@ -25,6 +20,11 @@
</style>
<link href="../assets/css/bootstrap-responsive.css" rel="stylesheet">
<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!-- Le fav and touch icons -->
<link rel="shortcut icon" href="images/favicon.ico">
<link rel="apple-touch-icon" href="images/apple-touch-icon.png">

10
docs/examples/hero.html
View File

@ -7,11 +7,6 @@
<meta name="description" content="">
<meta name="author" content="">
<!-- Le HTML5 shim, for IE6-8 support of HTML elements -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!-- Le styles -->
<link href="../assets/css/bootstrap.css" rel="stylesheet">
<style type="text/css">
@ -22,6 +17,11 @@
</style>
<link href="../assets/css/bootstrap-responsive.css" rel="stylesheet">
<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!-- Le fav and touch icons -->
<link rel="shortcut icon" href="images/favicon.ico">
<link rel="apple-touch-icon" href="images/apple-touch-icon.png">

10
docs/examples/starter-template.html
View File

@ -7,11 +7,6 @@
<meta name="description" content="">
<meta name="author" content="">
<!-- Le HTML5 shim, for IE6-8 support of HTML elements -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!-- Le styles -->
<link href="../assets/css/bootstrap.css" rel="stylesheet">
<style>
@ -21,6 +16,11 @@
</style>
<link href="../assets/css/bootstrap-responsive.css" rel="stylesheet">
<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!-- Le fav and touch icons -->
<link rel="shortcut icon" href="images/favicon.ico">
<link rel="apple-touch-icon" href="images/apple-touch-icon.png">

21
docs/index.html
View File

@ -7,17 +7,17 @@
<meta name="description" content="">
<meta name="author" content="">
<!-- Le HTML5 shim, for IE6-8 support of HTML elements -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!-- Le styles -->
<link href="assets/css/bootstrap.css" rel="stylesheet">
<link href="assets/css/bootstrap-responsive.css" rel="stylesheet">
<link href="assets/css/docs.css" rel="stylesheet">
<link href="assets/js/google-code-prettify/prettify.css" rel="stylesheet">
<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!-- Le fav and touch icons -->
<link rel="shortcut icon" href="assets/ico/favicon.ico">
<link rel="apple-touch-icon" href="assets/ico/apple-touch-icon.png">
@ -89,18 +89,17 @@
<ul class="quick-links">
<li><a href="./upgrading.html">Upgrading from 1.4</a></li>
<li><a href="https://github.com/twitter/bootstrap/issues?state=open">Issues</a></li>
<li><a href="https://github.com/twitter/bootstrap/wiki/Roadmap">Roadmap</a></li>
<li><a href="https://github.com/twitter/bootstrap/wiki/Changelog">Changelog</a></li>
<li><a href="https://github.com/twitter/bootstrap/wiki">Roadmap &amp; changelog</a></li>
<li class="divider">&middot;</li>
<li>
<iframe class="github-btn" src="http://markdotto.github.com/github-buttons/github-btn.html?user=twitter&repo=bootstrap&type=watch&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="114px" height="20px"></iframe>
<iframe class="github-btn" src="http://markdotto.github.com/github-buttons/github-btn.html?user=twitter&repo=bootstrap&type=watch&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="112px" height="20px"></iframe>
</li>
<li>
<iframe class="github-btn" src="http://markdotto.github.com/github-buttons/github-btn.html?user=twitter&repo=bootstrap&type=fork&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="98px" height="20px"></iframe>
<iframe class="github-btn" src="http://markdotto.github.com/github-buttons/github-btn.html?user=twitter&repo=bootstrap&type=fork&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="95px" height="20px"></iframe>
</li>
<li class="divider">&middot;</li>
<li class="follow-btn">
<a href="https://twitter.com/twbootstrap" class="twitter-follow-button" data-width="145px" data-link-color="#0069D6" data-show-count="false">Follow @twbootstrap</a>
<a href="https://twitter.com/twbootstrap" class="twitter-follow-button" data-width="225px" data-link-color="#0069D6" data-show-count="true">Follow @twbootstrap</a>
</li>
<li class="tweet-btn">
<a href="https://twitter.com/share" class="twitter-share-button" data-url="http://twitter.github.com/bootstrap/" data-count="horizontal" data-via="twbootstrap" data-related="mdo:Creator of Twitter Bootstrap">Tweet</a>
@ -122,7 +121,7 @@
<div class="span4">
<img class="bs-icon" src="assets/img/glyphicons/glyphicons_079_podium.png">
<h2>For all skill levels</h2>
<p>Bootstrap is designed to help people of all skill level&mdash;designer or developer, huge nerd or early beginner. Use it as a complete kit or use to start something more complex.</p>
<p>Bootstrap is designed to help people of all skill levels&mdash;designer or developer, huge nerd or early beginner. Use it as a complete kit or use to start something more complex.</p>
</div>
<div class="span4">
<img class="bs-icon" src="assets/img/glyphicons/glyphicons_163_iphone.png">

51
docs/javascript.html
View File

@ -7,17 +7,17 @@
<meta name="description" content="">
<meta name="author" content="">
<!-- Le HTML5 shim, for IE6-8 support of HTML elements -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!-- Le styles -->
<link href="assets/css/bootstrap.css" rel="stylesheet">
<link href="assets/css/bootstrap-responsive.css" rel="stylesheet">
<link href="assets/css/docs.css" rel="stylesheet">
<link href="assets/js/google-code-prettify/prettify.css" rel="stylesheet">
<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!-- Le fav and touch icons -->
<link rel="shortcut icon" href="assets/ico/favicon.ico">
<link rel="apple-touch-icon" href="assets/ico/apple-touch-icon.png">
@ -134,7 +134,7 @@
<div class="span3">
<label>
<h3><a href="./javascript.html#tooltips">Tooltips</a></h3>
<p>A new take on the jQuery Tipsy plugin, Tooltips don't rely on images, uss CSS3 for animations, and data-attributes for local title storage.</p>
<p>A new take on the jQuery Tipsy plugin, Tooltips don't rely on images&mdash;they use CSS3 for animations and data-attributes for local title storage.</p>
</label>
</div>
<div class="span3">
@ -289,7 +289,7 @@
</pre>
<pre class="prettyprint linenums">
&lt;div class="modal"&gt;
&lt;div class="modal" id="myModal"&gt;
&lt;div class="modal-header"&gt;
&lt;a class="close" data-dismiss="modal"&gt;&times;&lt;/a&gt;
&lt;h3&gt;Modal header&lt;/h3&gt;
@ -630,11 +630,11 @@ $('#myModal').on('hidden', function () {
<h3>Markup</h3>
<p>You can activate a tab or pill navigation without writing any javascript by simply specifying <code>data-toggle="tab"</code> or <code>data-toggle="pill"</code> on an element.</p>
<pre class="prettyprint linenums">
&lt;ul class="tabs"&gt;
&lt;ul class="nav nav-tabs"&gt;
&lt;li&gt;&lt;a href="#home" data-toggle="tab"&gt;Home&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#profile" data-toggle="tab"&gt;Profile&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#messages" data-toggle="tab"&gt;Messages&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#ettings" data-toggle="tab"&gt;Settings&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#settings" data-toggle="tab"&gt;Settings&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;</pre>
<h3>Methods</h3>
<h4>$().tab</h4>
@ -642,7 +642,7 @@ $('#myModal').on('hidden', function () {
Activates a tab element and content container. Tab should have either a `data-target` or an `href` targeting a container node in the dom.
</p>
<pre class="prettyprint linenums">
&lt;ul class="tabs"&gt;
&lt;ul class="nav nav-tabs"&gt;
&lt;li class="active"&gt;&lt;a href="#home"&gt;Home&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#profile"&gt;Profile&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#messages"&gt;Messages&lt;/a&gt;&lt;/li&gt;
@ -700,14 +700,14 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
<div class="row">
<div class="span3 columns">
<h3>About Tooltips</h3>
<p>Inspired by the excellent jQuery.tipsy plugin written by Jason Frame; Tooltips are an updated version, which don't rely on images, uss css3 for animations, and data-attributes for local title storage.</p>
<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>
<a href="assets/js/bootstrap-tooltip.js" target="_blank" class="btn">Download file</a>
</div>
<div class="span9 columns">
<h2>Example use of Tooltips</h2>
<p>Hover over the links below to see tooltips:</p>
<div class="tooltip-demo well">
<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 <a href="#" rel='tooltip' title='Another one here too'>really ironic</a> artisan whatever keytar, 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="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 <a href="#" rel="tooltip" title="Another one here too">really ironic</a> artisan whatever keytar, 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>
<hr>
@ -733,7 +733,7 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
</tr>
<tr>
<td>placement</td>
<td>string</td>
<td>string|function</td>
<td>'top'</td>
<td>how to position the tooltip - top | bottom | left | right</td>
</tr>
@ -773,6 +773,9 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
</div>
<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>
<h3>Methods</h3>
<h4>$().tooltip(options)</h4>
<p>Attaches a tooltip handler to an element collection.</p>
@ -801,7 +804,7 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
<div class="span3 columns">
<h3>About popovers</h3>
<p>Add small overlays of content, like those on the iPad, to any element for housing secondary information.</p>
<p class="muted"><strong>*</strong> Requires <a href="#tooltip">Tooltip</a> to be included</p>
<p class="muted"><strong>*</strong> Requires <a href="#tooltips">Tooltip</a> to be included</p>
<a href="assets/js/bootstrap-popover.js" target="_blank" class="btn">Download file</a>
</div>
<div class="span9 columns">
@ -833,7 +836,7 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
</tr>
<tr>
<td>placement</td>
<td>string</td>
<td>string|function</td>
<td>'right'</td>
<td>how to position the popover - top | bottom | left | right</td>
</tr>
@ -923,11 +926,11 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
<h4 class="alert-heading">Oh snap! You got an error!</h4>
<p>Change this and that and try again. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.</p>
<p>
<a class="btn btn-danger small" href="#">Take this action</a> <a class="btn small" href="#">Or do this</a>
<a class="btn btn-danger" href="#">Take this action</a> <a class="btn" href="#">Or do this</a>
</p>
</div>
<hr>
<h2>Using bootstrap-alerts.js</h2>
<h2>Using bootstrap-alert.js</h2>
<p>Enable dismissal of an alert via javascript:</p>
<pre class="prettyprint linenums">$(".alert").alert()</pre>
<h3>Markup</h3>
@ -1048,7 +1051,7 @@ $('#my-alert').bind('closed', function () {
</pre>
<h3>Methods</h3>
<h4>$().button('toggle')</h4>
<p>Toggles push state. Gives btn the look that it's been activated.</p>
<p>Toggles push state. Gives btn the look that it hass been activated.</p>
<div class="alert alert-info">
<strong>Heads up!</strong>
You can enable auto toggling of a button by using the <code>data-toggle</code> attribute.
@ -1151,7 +1154,7 @@ $('#my-alert').bind('closed', function () {
<td>parent</td>
<td>selector</td>
<td>false</td>
<td>If selector then all collapsible elements under the specified parent will be closed when this collasabile item is shown. (similar to traditional accordion behavior)</td>
<td>If selector then all collapsible elements under the specified parent will be closed when this collapsible item is shown. (similar to traditional accordion behavior)</td>
</tr>
<tr>
<td>toggle</td>
@ -1301,10 +1304,12 @@ $('#myCollapsible').on('hidden', function () {
<h3>Markup</h3>
<p>Data attributes are integral to the carousel plugin. Check out the example code below for the various markup types.</p>
<pre class="prettyprint linenums">
&lt;div class="carousel"&gt;
&lt;div id="myCarousel" class="carousel"&gt;
&lt;!-- Carousel items --&gt;
&lt;div class="carousel-inner"&gt;
...
&lt;div class="active item"&gt;…&lt;/div&gt;
&lt;div class="item"&gt;…&lt;/div&gt;
&lt;div class="item"&gt;…&lt;/div&gt;
&lt;/div&gt;
&lt;!-- Carousel nav --&gt;
&lt;a class="carousel-control left" href="#myCarousel" data-slide="prev"&gt;&amp;lsaquo;&lt;/a&gt;
@ -1345,7 +1350,7 @@ $('.myCarousel').carousel({
</tr>
<tr>
<td>slid</td>
<td>This event is fired when the carousel has completed it's slide transition.</td>
<td>This event is fired when the carousel has completed its slide transition.</td>
</tr>
</tbody>
</table>
@ -1428,7 +1433,7 @@ $('.myCarousel').carousel({
</pre>
<h3>Methods</h3>
<h4>.typeahead(options)</h4>
<p>Initializes an input with a typahead.</p>
<p>Initializes an input with a typeahead.</p>
</div>
</div>
</section>

28
docs/less.html
View File

@ -7,17 +7,17 @@
<meta name="description" content="">
<meta name="author" content="">
<!-- Le HTML5 shim, for IE6-8 support of HTML elements -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!-- Le styles -->
<link href="assets/css/bootstrap.css" rel="stylesheet">
<link href="assets/css/bootstrap-responsive.css" rel="stylesheet">
<link href="assets/css/docs.css" rel="stylesheet">
<link href="assets/js/google-code-prettify/prettify.css" rel="stylesheet">
<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!-- Le fav and touch icons -->
<link rel="shortcut icon" href="assets/ico/favicon.ico">
<link rel="apple-touch-icon" href="assets/ico/apple-touch-icon.png">
@ -123,7 +123,7 @@
</div>
<div class="span4">
<h3>Operations</h3>
<p>Make your grid, leading, and more super flexible by doing the math on the fly with operations. Multiple, divide, add, and subtract your way to CSS sanity.</p>
<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>
</div>
</div>
</section>
@ -348,13 +348,13 @@
<tbody>
<tr>
<td class="span3"><code>@warningText</code></td>
<td>#f3edd2</td>
<td class="swatch-col"><span class="swatch" style="background-color: #f3edd2;"></span></td>
<td>#c09853</td>
<td><span class="swatch" style="background-color: #c09853;"></span></td>
</tr>
<tr>
<td><code>@warningBackground</code></td>
<td>#c09853</td>
<td><span class="swatch" style="background-color: #c09853;"></span></td>
<td>#f3edd2</td>
<td class="swatch-col"><span class="swatch" style="background-color: #f3edd2;"></span></td>
</tr>
<tr>
<td><code>@errorText</code></td>
@ -604,7 +604,7 @@
<tr>
<td><code>.scale()</code></td>
<td><code>@ratio</code></td>
<td>Scale an element to <em>n</em> times it's original size</td>
<td>Scale an element to <em>n</em> times its original size</td>
</tr>
<tr>
<td><code>.translate()</code></td>
@ -614,7 +614,7 @@
<tr>
<td><code>.background-clip()</code></td>
<td><code>@clip</code></td>
<td>Crop the backgroud of an element (useful for <code>border-radius</code>)</td>
<td>Crop the background of an element (useful for <code>border-radius</code>)</td>
</tr>
<tr>
<td><code>.background-size()</code></td>
@ -717,8 +717,8 @@
<div class="row">
<div class="span4">
<h3>Node with makefile</h3>
<p>Install the LESS command line compiler with npm by running the following command:</p>
<pre>$ npm install less</pre>
<p>Install the LESS command line compiler globally with npm by running the following command:</p>
<pre>$ npm install -g less</pre>
<p>Once installed just run <code>make</code> from the root of your bootstrap directory and you're all set.</p>
<p>Additionally, if you have <a href="https://github.com/mynyml/watchr">watchr</a> installed, you may run <code>make watch</code> to have bootstrap automatically rebuilt every time you edit a file in the bootstrap lib (this isn't required, just a convenience method).</p>
</div><!-- /span4 -->

154
docs/scaffolding.html
View File

@ -7,17 +7,17 @@
<meta name="description" content="">
<meta name="author" content="">
<!-- Le HTML5 shim, for IE6-8 support of HTML elements -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!-- Le styles -->
<link href="assets/css/bootstrap.css" rel="stylesheet">
<link href="assets/css/bootstrap-responsive.css" rel="stylesheet">
<link href="assets/css/docs.css" rel="stylesheet">
<link href="assets/js/google-code-prettify/prettify.css" rel="stylesheet">
<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!-- Le fav and touch icons -->
<link rel="shortcut icon" href="assets/ico/favicon.ico">
<link rel="apple-touch-icon" href="assets/ico/apple-touch-icon.png">
@ -81,7 +81,9 @@
<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="subnav">
<ul class="nav nav-pills">
<li><a href="#grid-system">Grid system</a></li>
<li><a href="#gridSystem">Grid system</a></li>
<li><a href="#fluidGridSystem">Fluid gird 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>
@ -92,12 +94,11 @@
<!-- Grid system
================================================== -->
<section id="grid-system">
<section id="gridSystem">
<div class="page-header">
<h1>Grid system <small>12 columns with a responsive twist</small></h1>
<h1>Default grid system <small>12 columns with a responsive twist</small></h1>
</div>
<h2>Default 940px grid</h2>
<div class="row show-grid">
<div class="span1">1</div>
<div class="span1">1</div>
@ -173,7 +174,8 @@
<div class="row">
<div class="span6">
<p>With the static (non-fluid) grid system in Bootstrap, nesting is easy. To nest your content, just add a new <code>.row</code> and set of <code>.span*</code> columns within an existing <code>.span*</code> column.</p>
<h4>Example</h4>
<h3>Example</h3>
<p>Nested rows should include a set of columns that add up to the number of columns of it's parent. For example, two nested <code>.span3</code> columns should be placed within a <code>.span6</code>.</p>
<div class="row show-grid">
<div class="span6">
Level 1 of column
@ -187,7 +189,7 @@
</div>
</div>
</div>
</div>
</div><!-- /span6 -->
<div class="span6">
<pre class="prettyprint linenums">
&lt;div class="row"&gt;
@ -202,8 +204,112 @@
</pre>
</div>
</div>
</section>
<h2>Grid customization</h2>
<!-- Fluid grid system
================================================== -->
<section id="fluidGridSystem">
<div class="page-header">
<h1>Fluid grid system <small>12 responsive, percent-based columns</small></h1>
</div>
<h2>Fluid columns</h2>
<div class="row-fluid show-grid">
<div class="span1">1</div>
<div class="span1">1</div>
<div class="span1">1</div>
<div class="span1">1</div>
<div class="span1">1</div>
<div class="span1">1</div>
<div class="span1">1</div>
<div class="span1">1</div>
<div class="span1">1</div>
<div class="span1">1</div>
<div class="span1">1</div>
<div class="span1">1</div>
</div>
<div class="row-fluid show-grid">
<div class="span4">4</div>
<div class="span4">4</div>
<div class="span4">4</div>
</div>
<div class="row-fluid show-grid">
<div class="span4">4</div>
<div class="span8">8</div>
</div>
<div class="row-fluid show-grid">
<div class="span6">6</div>
<div class="span6">6</div>
</div>
<div class="row-fluid show-grid">
<div class="span12">12</div>
</div>
<div class="row">
<div class="span4">
<h3>Percents, not pixels</h3>
<p>The fluid grid system uses percents for column widths instead of fixed pixels. It also has the same responsive variations as our fixed grid system, ensuring proper proportions for key screen resolutions and devices.</p>
</div>
<div class="span4">
<h3>Fluid rows</h3>
<p>Make any row fluid simply by changing <code>.row</code> to <code>.row-fluid</code>. The columns stay the exact same, making it super straightforward to flip between fixed and fluid layouts.</p>
</div>
<div class="span4">
<h3>Markup</h3>
<pre class="prettyprint linenums">
&lt;div class="row-fluid"&gt;
&lt;div class="span4"&gt;...&lt;/div&gt;
&lt;div class="span8"&gt;...&lt;/div&gt;
&lt;/div&gt;
</pre>
</div>
</div><!-- /row -->
<h2>Fluid nesting</h2>
<div class="row">
<div class="span6">
<p>Nesting with fluid grids is a bit different: the number of nested columns doesn't need to match the parent. Instead, your columns are reset at each level because each row takes up 100% of the parent column.</p>
<div class="row-fluid show-grid">
<div class="span12">
Fluid 12
<div class="row-fluid show-grid">
<div class="span6">
Fluid 6
</div>
<div class="span6">
Fluid 6
</div>
</div>
</div>
</div>
</div>
<div class="span6">
<pre class="prettyprint linenums">
&lt;div class="row-fluid"&gt;
&lt;div class="span12"&gt;
Level 1 of column
&lt;div class="row-fluid"&gt;
&lt;div class="span6"&gt;Level 2&lt;/div&gt;
&lt;div class="span6"&gt;Level 2&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
</pre>
</div>
</div>
</section>
<!-- Customizaton
================================================== -->
<section id="gridCustomization">
<div class="page-header">
<h1>Grid customization</h1>
</div>
<table class="table table-bordered table-striped">
<thead>
<tr>
@ -242,7 +348,7 @@
</div>
<div class="span4">
<h3>How to customize</h3>
<p>Modifying the grid means changing the three <code>@grid*</code> variables and recompiling Bootstrap. Change the grid variables in variables.less and use one of the <a href="#compiling">four ways documented to recompile</a>. If you're adding more columns, be sure to add the CSS for those in grid.less.</p>
<p>Modifying the grid means changing the three <code>@grid*</code> variables and recompiling Bootstrap. Change the grid variables in variables.less and use one of the <a href="less.html#compiling">four ways documented to recompile</a>. If you're adding more columns, be sure to add the CSS for those in grid.less.</p>
</div>
<div class="span4">
<h3>Staying responsive</h3>
@ -265,8 +371,8 @@
<div class="span6">
<h2>Fixed layout</h2>
<p>The default and simple 940px-wide, centered layout for just about any website or page provided by a single <code>&lt;div class="container"&gt;</code>.</p>
<div class="minicon-layout">
<div class="minicon-layout-body"></div>
<div class="mini-layout">
<div class="mini-layout-body"></div>
</div>
<pre class="prettyprint linenums">
&lt;body&gt;
@ -279,9 +385,9 @@
<div class="span6">
<h2>Fluid layout</h2>
<p><code>&lt;div class="container-fluid"&gt;</code> gives flexible page structure, min- and max-widths, and a left-hand sidebar. It's great for apps and docs.</p>
<div class="minicon-layout fluid">
<div class="minicon-layout-sidebar"></div>
<div class="minicon-layout-body"></div>
<div class="mini-layout fluid">
<div class="mini-layout-sidebar"></div>
<div class="mini-layout-body"></div>
</div>
<pre class="prettyprint linenums">
&lt;div class="container-fluid"&gt;
@ -315,7 +421,7 @@
</div>
<div class="span8">
<h2>Supported devices</h2>
<p>Bootstrap supports a handful of media queries to help make your projects more appropriate on different devices and screen resolutions. Here's what's included:</p>
<p>Bootstrap supports a handful of media queries in a single file to help make your projects more appropriate on different devices and screen resolutions. Here's what's included:</p>
<table class="table table-bordered table-striped">
<thead>
<tr>
@ -338,8 +444,8 @@
</tr>
<tr>
<td>Landscape tablets</td>
<td>768px to 980px</td>
<td>44px</td>
<td>768px to 979px</td>
<td>42px</td>
<td>20px</td>
</tr>
<tr>
@ -357,6 +463,10 @@
</tbody>
</table>
<h3>Requires meta tag</h3>
<p>To ensure devices display responsive pages properly, include the viewport meta tag.</p>
<pre class="prettyprint linenums">&lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;</pre>
<h3>What they do</h3>
<p>Media queries allow for custom CSS based on a number of conditions&mdash;ratios, widths, display type, etc&mdash;but usually focuses around <code>min-width</code> and <code>max-width</code>.</p>
<ul>
@ -377,7 +487,7 @@
<ol>
<li>Use the compiled responsive version, bootstrap-responsive.css</li>
<li>Add @import "responsive.less" and recompile Bootstrap</li>
<li>Modify and recompile responsive.less as a separate</li>
<li>Modify and recompile responsive.less as a separate file</li>
</ol>
<p><strong>Why not just include it?</strong> Truth be told, not everything needs to be responsive. Instead of encouraging developers to remove this feature, we figure it best to enable it.</p>
</div>

10
docs/templates/layout.mustache vendored
View File

@ -7,17 +7,17 @@
<meta name="description" content="">
<meta name="author" content="">
<!-- Le HTML5 shim, for IE6-8 support of HTML elements -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!-- Le styles -->
<link href="assets/css/bootstrap.css" rel="stylesheet">
<link href="assets/css/bootstrap-responsive.css" rel="stylesheet">
<link href="assets/css/docs.css" rel="stylesheet">
<link href="assets/js/google-code-prettify/prettify.css" rel="stylesheet">
<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!-- Le fav and touch icons -->
<link rel="shortcut icon" href="assets/ico/favicon.ico">
<link rel="apple-touch-icon" href="assets/ico/apple-touch-icon.png">

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

@ -299,7 +299,7 @@
</div><!--/span-->
<div class="span4">
<h2>Basic block</h2>
<p>{{_i}}Use <code>&lt;pre&gt;</code> for multiple lines of code. Be sure to turn any carets into their unicode characters for proper rendering.{{/i}}</p>
<p>{{_i}}Use <code>&lt;pre&gt;</code> for multiple lines of code. Be sure to escape any angle brackets in the code for proper rendering.{{/i}}</p>
<pre>
&lt;p&gt;{{_i}}Sample text here...{{/i}}&lt;/p&gt;
</pre>
@ -309,6 +309,7 @@
&lt;/pre&gt;
</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>
</div><!--/span-->
<div class="span4">
<h2>Google Prettify</h2>
@ -454,7 +455,7 @@
<td>
<code>.table-bordered</code>
</td>
<td>{{_i}}Rounds corners and adds outter border{{/i}}</td>
<td>{{_i}}Rounds corners and adds outer border{{/i}}</td>
</tr>
<tr>
<td>{{_i}}Zebra-stripe{{/i}}</td>
@ -776,9 +777,9 @@
<h2>{{_i}}Example forms <small>using just form controls, no extra markup</small>{{/i}}</h2>
<h3>{{_i}}Basic form{{/i}}</h3>
<div class="row">
<div class="span3">
<h3>{{_i}}Basic form{{/i}}</h3>
<p>{{_i}}With v2.0, we have lighter and smarter defaults for form styles. No extra markup, just form controls.{{/i}}</p>
</div>
<div class="span9">
@ -790,11 +791,22 @@
</label>
<button type="submit" class="btn">{{_i}}Submit{{/i}}</button>
</form>
<pre class="prettyprint linenums">
&lt;form class="well"&gt;
&lt;label&gt;{{_i}}Label name{{/i}}&lt;/label&gt;
&lt;input type="text" class="span3" placeholder="{{_i}}Type something…{{/i}}"&gt;
&lt;span class="help-inline"&gt;Associated help text!&lt;/span&gt;
&lt;label class="checkbox"&gt;
&lt;input type="checkbox"&gt; {{_i}}Check me out{{/i}}
&lt;/label&gt;
&lt;button type="submit" class="btn"&gt;{{_i}}Submit{{/i}}&lt;/button&gt;
&lt;/form&gt;
</pre>
</div>
</div> <!-- /row -->
<h3>{{_i}}Search form{{/i}}</h3>
<div class="row">
<div class="span3">
<h3>{{_i}}Search form{{/i}}</h3>
<p>{{_i}}Reflecting default WebKit styles, just add <code>.form-search</code> for extra rounded search fields.{{/i}}</p>
</div>
<div class="span9">
@ -802,19 +814,35 @@
<input type="text" class="input-medium search-query">
<button type="submit" class="btn">{{_i}}Search{{/i}}</button>
</form>
<pre class="prettyprint linenums">
&lt;form class="well form-search"&gt;
&lt;input type="text" class="input-medium search-query"&gt;
&lt;button type="submit" class="btn"&gt;{{_i}}Search{{/i}}&lt;/button&gt;
&lt;/form&gt;
</pre>
</div>
</div> <!-- /row -->
<h3>{{_i}}Inline form{{/i}}</h3>
<div class="row">
<div class="span3">
<h3>{{_i}}Inline form{{/i}}</h3>
<p>{{_i}}Inputs are block level to start. For <code>.form-inline</code> and <code>.form-horizontal</code>, we use inline-block.{{/i}}</p>
</div>
<div class="span9">
<form class="well form-search">
<form class="well form-inline">
<input type="text" class="input-small" placeholder="{{_i}}Email{{/i}}">
<input type="password" class="input-small" placeholder="{{_i}}Password{{/i}}">
<button type="submit" class="btn">{{_i}}Go{{/i}}</button>
<label class="checkbox">
<input type="checkbox"> {{_i}}Remember?{{/i}}
</label>
<button type="submit" class="btn">{{_i}}Sign in{{/i}}</button>
</form>
<pre class="prettyprint linenums">
&lt;form class="well form-inline"&gt;
&lt;input type="text" class="input-small" placeholder="{{_i}}Email{{/i}}"&gt;
&lt;input type="password" class="input-small" placeholder="{{_i}}Password{{/i}}"&gt;
&lt;button type="submit" class="btn"&gt;{{_i}}Go{{/i}}&lt;/button&gt;
&lt;/form&gt;
</pre>
</div>
</div><!-- /row -->
@ -880,10 +908,26 @@
</div>
<div class="form-actions">
<button type="submit" class="btn btn-primary">{{_i}}Save changes{{/i}}</button>
<button type="reset" class="btn">{{_i}}Cancel{{/i}}</button>
<button class="btn">{{_i}}Cancel{{/i}}</button>
</div>
</fieldset>
</form>
<h3>{{_i}}Example markup{{/i}}</h3>
<p>{{_i}}Given the above example form layout, here's the markup associated with the first input and control group. The <code>.control-group</code>, <code>.control-label</code>, and <code>.controls</code> classes are all required for styling.{{/i}}</p>
<pre class="prettyprint linenums">
&lt;form class="form-horizontal"&gt;
&lt;fieldset&gt;
&lt;legend&gt;{{_i}}Legend text{{/i}}&lt;/legend&gt;
&lt;div class="control-group"&gt;
&lt;label class="control-label" for="input01"&gt;{{_i}}Text input{{/i}}&lt;/label&gt;
&lt;div class="controls"&gt;
&lt;input type="text" class="input-xlarge" id="input01"&gt;
&lt;p class="help-block"&gt;{{_i}}Supporting help text{{/i}}&lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/fieldset&gt;
&lt;/form&gt;
</pre>
</div>
<div class="span4">
<h3>{{_i}}What's included{{/i}}</h3>
@ -973,14 +1017,14 @@
</div>
<div class="form-actions">
<button type="submit" class="btn btn-primary">{{_i}}Save changes{{/i}}</button>
<button type="reset" class="btn">{{_i}}Cancel{{/i}}</button>
<button class="btn">{{_i}}Cancel{{/i}}</button>
</div>
</fieldset>
</form>
</div>
<div class="span4">
<h3>{{_i}}Redesigned browser states{{/i}}</h3>
<p>{{_i}}Bootstrap features styles for browser-supported focused and <code>disabled</code> states. We remove the default Webkit <code>outline</code> and apply a <code>box-shadow</code> in it's place for <code>:focus</code>.{{/i}}</p>
<p>{{_i}}Bootstrap features styles for browser-supported focused and <code>disabled</code> states. We remove the default Webkit <code>outline</code> and apply a <code>box-shadow</code> in its place for <code>:focus</code>.{{/i}}</p>
<hr>
<h3>{{_i}}Form validation{{/i}}</h3>
<p>{{_i}}It also includes validation styles for errors, warnings, and success. To use, add the error class to the surrounding <code>.control-group</code>.{{/i}}</p>
@ -1001,7 +1045,7 @@
<fieldset>
<legend>{{_i}}Extending form controls{{/i}}</legend>
<div class="control-group">
<label class="control-label">{{_i}}Form sizes{{/i}}</label>
<label class="control-label">{{_i}}Form grid sizes{{/i}}</label>
<div class="controls docs-input-sizes">
<input class="span1" type="text" placeholder=".span1">
<input class="span2" type="text" placeholder=".span2">
@ -1030,6 +1074,15 @@
<p class="help-block">{{_i}}Use the same <code>.span*</code> classes from the grid system for input sizes.{{/i}}</p>
</div>
</div>
<div class="control-group">
<label class="control-label">{{_i}}Alternate sizes{{/i}}</label>
<div class="controls docs-input-sizes">
<input class="input-mini" type="text" placeholder=".input-mini">
<input class="input-small" type="text" placeholder=".input-small">
<input class="input-medium" type="text" placeholder=".input-medium">
<p class="help-block">{{_i}}You may also use static classes that don't map to the grid, adapt to the responsive CSS styles, or account for varying types of controls (e.g., <code>input</code> vs. <code>select</code>).{{/i}}</p>
</div>
</div>
<div class="control-group">
<label class="control-label" for="prependedInput">{{_i}}Prepended text{{/i}}</label>
<div class="controls">
@ -1097,7 +1150,7 @@
</div>
<div class="form-actions">
<button type="submit" class="btn btn-primary">{{_i}}Save changes{{/i}}</button>
<button type="reset" class="btn">{{_i}}Cancel{{/i}}</button>
<button class="btn">{{_i}}Cancel{{/i}}</button>
</div>
</fieldset>
</form>
@ -1137,34 +1190,39 @@
</thead>
<tbody>
<tr>
<td><a class="btn" href="#">{{_i}}Default{{/i}}</a></td>
<td><button class="btn" href="#">{{_i}}Default{{/i}}</button></td>
<td><code>.btn</code></td>
<td>{{_i}}Standard gray button with gradient{{/i}}</td>
</tr>
<tr>
<td><a class="btn btn-primary" href="#">{{_i}}Primary{{/i}}</a></td>
<td><button class="btn btn-primary" href="#">{{_i}}Primary{{/i}}</button></td>
<td><code>.btn-primary</code></td>
<td>{{_i}}Provides extra visual weight and identifies the primary action in a set of buttons{{/i}}</td>
</tr>
<tr>
<td><a class="btn btn-info" href="#">{{_i}}Info{{/i}}</a></td>
<td><button class="btn btn-info" href="#">{{_i}}Info{{/i}}</button></td>
<td><code>.btn-info</code></td>
<td>{{_i}}Used as an alternate to the default styles{{/i}}</td>
</tr>
<tr>
<td><a class="btn btn-success" href="#">{{_i}}Success{{/i}}</a></td>
<td><button class="btn btn-success" href="#">{{_i}}Success{{/i}}</button></td>
<td><code>.btn-success</code></td>
<td>{{_i}}Indicates a successful or positive action{{/i}}</td>
</tr>
<tr>
<td><a class="btn btn-warning" href="#">{{_i}}Warning{{/i}}</a></td>
<td><button class="btn btn-warning" href="#">{{_i}}Warning{{/i}}</button></td>
<td><code>.btn-warning</code></td>
<td>{{_i}}Indicates caution should be taken with this action{{/i}}</td>
</tr>
<tr>
<td><a class="btn btn-danger" href="#">{{_i}}Danger{{/i}}</a></td>
<td><button class="btn btn-danger" href="#">{{_i}}Danger{{/i}}</button></td>
<td><code>.btn-danger</code></td>
<td>{{_i}}Indicates a dangerous or potentially negative action{{/i}}</td>
</tr>
<tr>
<td><button class="btn btn-inverse" href="#">{{_i}}Inverse{{/i}}</button></td>
<td><code>.btn-inverse</code></td>
<td>{{_i}}Alternate dark gray button, not tied to a semantic action or use{{/i}}</td>
</tr>
</tbody>
</table>
@ -1173,50 +1231,63 @@
<div class="span4">
<h3>{{_i}}Buttons for actions{{/i}}</h3>
<p>{{_i}}As a convention, buttons should only be used for actions while hyperlinks are to be used for objects. For instance, "Download" should be a button while "recent activity" should be a link.{{/i}}</p>
<p>{{_i}}Button styles can be applied to anything with the <code>.btn</code> class applied. However, typically you'll want to apply these to only <code>&lt;a&gt;</code> and <code>&lt;button&gt;</code> elements.{{/i}}</p>
<h3>{{_i}}Cross browser compatibility{{/i}}</h3>
<p>{{_i}}IE9 doesn't crop background gradients on rounded corners, so we remove it. Related, IE9 jankifies disabled <code>button</code> elements, rendering text gray with a nasty text-shadow that we cannot fix.{{/i}}</p>
</div>
<div class="span4">
<h3>{{_i}}For anchors and forms{{/i}}</h3>
<p>{{_i}}Button styles can be applied to anything with the <code>.btn</code> applied. However, typically you'll want to apply these to only <code>&lt;a&gt;</code> and <code>&lt;button&gt;</code> elements.{{/i}}</p>
</div>
<div class="span4">
<p>{{_i}}<strong>Note:</strong> All buttons must include the <code>.btn</code> class. Button styles should be applied to <code>&lt;button&gt;</code> and <code>&lt;a&gt;</code> elements for consistency.{{/i}}</p>
</div>
</div>
<div class="row">
<div class="span4">
<h3>{{_i}}Multiple sizes{{/i}}</h3>
<p>{{_i}}Fancy larger or smaller buttons? Have at it!{{/i}}</p>
<p>{{_i}}Fancy larger or smaller buttons? Add <code>.btn-large</code>, <code>.btn-small</code>, or <code>.btn-mini</code> for two additional sizes.{{/i}}</p>
<p>
<a href="#" class="btn btn-large btn-primary">{{_i}}Primary action{{/i}}</a>
<a href="#" class="btn btn-large">{{_i}}Action{{/i}}</a>
<button class="btn btn-large btn-primary">{{_i}}Primary action{{/i}}</button>
<button class="btn btn-large">{{_i}}Action{{/i}}</button>
</p>
<p>
<a href="#" class="btn btn-small btn-primary">{{_i}}Primary action{{/i}}</a>
<a href="#" class="btn btn-small">{{_i}}Action{{/i}}</a>
<button class="btn btn-small btn-primary">{{_i}}Primary action{{/i}}</button>
<button class="btn btn-small">{{_i}}Action{{/i}}</button>
</p>
</div>
<div class="span4">
<p>
<button class="btn btn-mini btn-primary">{{_i}}Primary action{{/i}}</button>
<button class="btn btn-mini">{{_i}}Action{{/i}}</button>
</p>
<br>
<h3>{{_i}}Disabled state{{/i}}</h3>
<p>{{_i}}For disabled buttons, use <code>.btn-disabled</code> for links and <code>:disabled</code> for <code>&lt;button&gt;</code> elements.{{/i}}</p>
<p>{{_i}}For disabled buttons, add the <code>.disabled</code> class to links and the <code>disabled</code> attribute for <code>&lt;button&gt;</code> elements.{{/i}}</p>
<p>
<a href="#" class="btn btn-large btn-primary disabled">{{_i}}Primary action{{/i}}</a>
<a href="#" class="btn btn-large disabled">{{_i}}Action{{/i}}</a>
<a href="#" class="btn btn-large btn-primary disabled">{{_i}}Primary link{{/i}}</a>
<a href="#" class="btn btn-large disabled">{{_i}}Link{{/i}}</a>
</p>
<p style="margin-bottom: 18px;">
<button class="btn btn-large btn-primary disabled" disabled="disabled">{{_i}}Primary button{{/i}}</button>
<button class="btn btn-large" disabled>{{_i}}Button{{/i}}</button>
</p>
<p>
<button class="btn btn-large btn-primary disabled" disabled="disabled">{{_i}}Primary action{{/i}}</button>
<button class="btn btn-large" disabled>{{_i}}Action{{/i}}</button>
<span class="label label-info">{{_i}}Heads up!{{/i}}</span>
{{_i}}We use <code>.disabled</code> as a utility class here, similar to the common <code>.active</code> class, so no prefix is required.{{/i}}
</p>
</div>
<div class="span4">
<h3>Cross browser compatibility</h3>
<p>In IE9, we drop the gradient on all buttons in favor of rounded corners as IE9 doesn't crop background gradients to the corners.</p>
<p>Related, IE9 jankifies disabled <code>button</code> elements, rendering text gray with a nasty text-shadow&mdash;unfortunately we can't fix this.</p>
<h3>{{_i}}One class, multiple tags{{/i}}</h3>
<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>
<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>
<pre class="prettyprint linenums">
&lt;a class="btn" href=""&gt;{{_i}}Link{{/i}}&lt;/a&gt;
&lt;button class="btn" type="submit"&gt;
{{_i}}Button{{/i}}
&lt;/button&gt;
&lt;input class="btn" type="button"
value="{{_i}}Input{{/i}}"&gt;
&lt;input class="btn" type="submit"
value="{{_i}}Submit{{/i}}"&gt;
</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>
</div>
</div>
<br>
</section>
@ -1229,148 +1300,144 @@
</div>
<div class="row">
<div class="span3">
<div class="the-icons">
<i class="icon-glass"></i>
<i class="icon-music"></i>
<i class="icon-search"></i>
<i class="icon-envelope"></i>
<i class="icon-heart"></i>
<i class="icon-star"></i>
<i class="icon-star-empty"></i>
<i class="icon-user"></i>
<i class="icon-film"></i>
<i class="icon-th-large"></i>
<i class="icon-th"></i>
<i class="icon-th-list"></i>
<i class="icon-ok"></i>
<i class="icon-remove"></i>
<i class="icon-zoom-in"></i>
<i class="icon-zoom-out"></i>
<i class="icon-off"></i>
<i class="icon-signal"></i>
<i class="icon-cog"></i>
<i class="icon-trash"></i>
<i class="icon-home"></i>
<i class="icon-file"></i>
<i class="icon-time"></i>
<i class="icon-road"></i>
<i class="icon-download-alt"></i>
<i class="icon-download"></i>
<i class="icon-upload"></i>
<i class="icon-inbox"></i>
<i class="icon-play-circle"></i>
<i class="icon-repeat"></i>
</div>
<ul class="the-icons">
<li><i class="icon-glass"></i> icon-glass</li>
<li><i class="icon-music"></i> icon-music</li>
<li><i class="icon-search"></i> icon-search</li>
<li><i class="icon-envelope"></i> icon-envelope</li>
<li><i class="icon-heart"></i> icon-heart</li>
<li><i class="icon-star"></i> icon-star</li>
<li><i class="icon-star-empty"></i> icon-star-empty</li>
<li><i class="icon-user"></i> icon-user</li>
<li><i class="icon-film"></i> icon-film</li>
<li><i class="icon-th-large"></i> icon-th-large</li>
<li><i class="icon-th"></i> icon-th</li>
<li><i class="icon-th-list"></i> icon-th-list</li>
<li><i class="icon-ok"></i> icon-ok</li>
<li><i class="icon-remove"></i> icon-remove</li>
<li><i class="icon-zoom-in"></i> icon-zoom-in</li>
<li><i class="icon-zoom-out"></i> icon-zoom-out</li>
<li><i class="icon-off"></i> icon-off</li>
<li><i class="icon-signal"></i> icon-signal</li>
<li><i class="icon-cog"></i> icon-cog</li>
<li><i class="icon-trash"></i> icon-trash</li>
<li><i class="icon-home"></i> icon-home</li>
<li><i class="icon-file"></i> icon-file</li>
<li><i class="icon-time"></i> icon-time</li>
<li><i class="icon-road"></i> icon-road</li>
<li><i class="icon-download-alt"></i> icon-download-alt</li>
<li><i class="icon-download"></i> icon-download</li>
<li><i class="icon-upload"></i> icon-upload</li>
<li><i class="icon-inbox"></i> icon-inbox</li>
<li><i class="icon-play-circle"></i> icon-play-circle</li>
<li><i class="icon-repeat"></i> icon-repeat</li>
</ul>
</div>
<div class="span3">
<div class="the-icons">
<i class="icon-refresh"></i>
<i class="icon-list-alt"></i>
<i class="icon-lock"></i>
<i class="icon-flag"></i>
<i class="icon-headphones"></i>
<i class="icon-volume-off"></i>
<i class="icon-volume-down"></i>
<i class="icon-volume-up"></i>
<i class="icon-qrcode"></i>
<i class="icon-barcode"></i>
<i class="icon-tag"></i>
<i class="icon-tags"></i>
<i class="icon-book"></i>
<i class="icon-bookmark"></i>
<i class="icon-print"></i>
<i class="icon-camera"></i>
<i class="icon-font"></i>
<i class="icon-bold"></i>
<i class="icon-italic"></i>
<i class="icon-text-height"></i>
<i class="icon-text-width"></i>
<i class="icon-align-left"></i>
<i class="icon-align-center"></i>
<i class="icon-align-right"></i>
<i class="icon-align-justify"></i>
<i class="icon-list"></i>
<i class="icon-indent-left"></i>
<i class="icon-indent-right"></i>
<i class="icon-facetime-video"></i>
<i class="icon-picture"></i>
</div>
<ul class="the-icons">
<li><i class="icon-refresh"></i> icon-refresh</li>
<li><i class="icon-list-alt"></i> icon-list-alt</li>
<li><i class="icon-lock"></i> icon-lock</li>
<li><i class="icon-flag"></i> icon-flag</li>
<li><i class="icon-headphones"></i> icon-headphones</li>
<li><i class="icon-volume-off"></i> icon-volume-off</li>
<li><i class="icon-volume-down"></i> icon-volume-down</li>
<li><i class="icon-volume-up"></i> icon-volume-up</li>
<li><i class="icon-qrcode"></i> icon-qrcode</li>
<li><i class="icon-barcode"></i> icon-barcode</li>
<li><i class="icon-tag"></i> icon-tag</li>
<li><i class="icon-tags"></i> icon-tags</li>
<li><i class="icon-book"></i> icon-book</li>
<li><i class="icon-bookmark"></i> icon-bookmark</li>
<li><i class="icon-print"></i> icon-print</li>
<li><i class="icon-camera"></i> icon-camera</li>
<li><i class="icon-font"></i> icon-font</li>
<li><i class="icon-bold"></i> icon-bold</li>
<li><i class="icon-italic"></i> icon-italic</li>
<li><i class="icon-text-height"></i> icon-text-height</li>
<li><i class="icon-text-width"></i> icon-text-width</li>
<li><i class="icon-align-left"></i> icon-align-left</li>
<li><i class="icon-align-center"></i> icon-align-center</li>
<li><i class="icon-align-right"></i> icon-align-right</li>
<li><i class="icon-align-justify"></i> icon-align-justify</li>
<li><i class="icon-list"></i> icon-list</li>
<li><i class="icon-indent-left"></i> icon-indent-left</li>
<li><i class="icon-indent-right"></i> icon-indent-right</li>
<li><i class="icon-facetime-video"></i> icon-facetime-video</li>
<li><i class="icon-picture"></i> icon-picture</li>
</ul>
</div>
<div class="span3">
<div class="the-icons">
<i class="icon-pencil"></i>
<i class="icon-map-marker"></i>
<i class="icon-adjust"></i>
<i class="icon-tint"></i>
<i class="icon-edit"></i>
<i class="icon-share"></i>
<i class="icon-check"></i>
<i class="icon-move"></i>
<i class="icon-step-backward"></i>
<i class="icon-fast-backward"></i>
<i class="icon-backward"></i>
<i class="icon-play"></i>
<i class="icon-pause"></i>
<i class="icon-stop"></i>
<i class="icon-forward"></i>
<i class="icon-fast-forward"></i>
<i class="icon-step-forward"></i>
<i class="icon-eject"></i>
<i class="icon-chevron-left"></i>
<i class="icon-chevron-right"></i>
<i class="icon-plus-sign"></i>
<i class="icon-minus-sign"></i>
<i class="icon-remove-sign"></i>
<i class="icon-ok-sign"></i>
<i class="icon-question-sign"></i>
<i class="icon-info-sign"></i>
<i class="icon-screenshot"></i>
<i class="icon-remove-circle"></i>
<i class="icon-ok-circle"></i>
<i class="icon-ban-circle"></i>
</div>
<ul class="the-icons">
<li><i class="icon-pencil"></i> icon-pencil</li>
<li><i class="icon-map-marker"></i> icon-map-marker</li>
<li><i class="icon-adjust"></i> icon-adjust</li>
<li><i class="icon-tint"></i> icon-tint</li>
<li><i class="icon-edit"></i> icon-edit</li>
<li><i class="icon-share"></i> icon-share</li>
<li><i class="icon-check"></i> icon-check</li>
<li><i class="icon-move"></i> icon-move</li>
<li><i class="icon-step-backward"></i> icon-step-backward</li>
<li><i class="icon-fast-backward"></i> icon-fast-backward</li>
<li><i class="icon-backward"></i> icon-backward</li>
<li><i class="icon-play"></i> icon-play</li>
<li><i class="icon-pause"></i> icon-pause</li>
<li><i class="icon-stop"></i> icon-stop</li>
<li><i class="icon-forward"></i> icon-forward</li>
<li><i class="icon-fast-forward"></i> icon-fast-forward</li>
<li><i class="icon-step-forward"></i> icon-step-forward</li>
<li><i class="icon-eject"></i> icon-eject</li>
<li><i class="icon-chevron-left"></i> icon-chevron-left</li>
<li><i class="icon-chevron-right"></i> icon-chevron-right</li>
<li><i class="icon-plus-sign"></i> icon-plus-sign</li>
<li><i class="icon-minus-sign"></i> icon-minus-sign</li>
<li><i class="icon-remove-sign"></i> icon-remove-sign</li>
<li><i class="icon-ok-sign"></i> icon-ok-sign</li>
<li><i class="icon-question-sign"></i> icon-question-sign</li>
<li><i class="icon-info-sign"></i> icon-info-sign</li>
<li><i class="icon-screenshot"></i> icon-screenshot</li>
<li><i class="icon-remove-circle"></i> icon-remove-circle</li>
<li><i class="icon-ok-circle"></i> icon-ok-circle</li>
<li><i class="icon-ban-circle"></i> icon-ban-circle</li>
</ul>
</div>
<div class="span3">
<div class="the-icons">
<i class="icon-arrow-left"></i>
<i class="icon-arrow-right"></i>
<i class="icon-arrow-up"></i>
<i class="icon-arrow-down"></i>
<i class="icon-share-alt"></i>
<i class="icon-resize-full"></i>
<i class="icon-resize-small"></i>
<i class="icon-plus"></i>
<i class="icon-minus"></i>
<i class="icon-asterisk"></i>
<i class="icon-exclamation-sign"></i>
<i class="icon-gift"></i>
<i class="icon-leaf"></i>
<i class="icon-fire"></i>
<i class="icon-eye-open"></i>
<i class="icon-eye-close"></i>
<i class="icon-warning-sign"></i>
<i class="icon-plane"></i>
<i class="icon-calendar"></i>
<i class="icon-random"></i>
<i class="icon-comment"></i>
<i class="icon-magnet"></i>
<i class="icon-chevron-up"></i>
<i class="icon-chevron-down"></i>
<i class="icon-retweet"></i>
<i class="icon-shopping-cart"></i>
<i class="icon-folder-close"></i>
<i class="icon-folder-open"></i>
<i class="icon-resize-vertical"></i>
<i class="icon-resize-horizontal"></i>
</div>
<ul class="the-icons">
<li><i class="icon-arrow-left"></i> icon-arrow-left</li>
<li><i class="icon-arrow-right"></i> icon-arrow-right</li>
<li><i class="icon-arrow-up"></i> icon-arrow-up</li>
<li><i class="icon-arrow-down"></i> icon-arrow-down</li>
<li><i class="icon-share-alt"></i> icon-share-alt</li>
<li><i class="icon-resize-full"></i> icon-resize-full</li>
<li><i class="icon-resize-small"></i> icon-resize-small</li>
<li><i class="icon-plus"></i> icon-plus</li>
<li><i class="icon-minus"></i> icon-minus</li>
<li><i class="icon-asterisk"></i> icon-asterisk</li>
<li><i class="icon-exclamation-sign"></i> icon-exclamation-sign</li>
<li><i class="icon-gift"></i> icon-gift</li>
<li><i class="icon-leaf"></i> icon-leaf</li>
<li><i class="icon-fire"></i> icon-fire</li>
<li><i class="icon-eye-open"></i> icon-eye-open</li>
<li><i class="icon-eye-close"></i> icon-eye-close</li>
<li><i class="icon-warning-sign"></i> icon-warning-sign</li>
<li><i class="icon-plane"></i> icon-plane</li>
<li><i class="icon-calendar"></i> icon-calendar</li>
<li><i class="icon-random"></i> icon-random</li>
<li><i class="icon-comment"></i> icon-comment</li>
<li><i class="icon-magnet"></i> icon-magnet</li>
<li><i class="icon-chevron-up"></i> icon-chevron-up</li>
<li><i class="icon-chevron-down"></i> icon-chevron-down</li>
<li><i class="icon-retweet"></i> icon-retweet</li>
<li><i class="icon-shopping-cart"></i> icon-shopping-cart</li>
<li><i class="icon-folder-close"></i> icon-folder-close</li>
<li><i class="icon-folder-open"></i> icon-folder-open</li>
<li><i class="icon-resize-vertical"></i> icon-resize-vertical</li>
<li><i class="icon-resize-horizontal"></i> icon-resize-horizontal</li>
</ul>
</div>
</div>
<div class="alert alert-info">
{{_i}}<strong>Heads up!</strong> Icon classes are echoed via CSS <code>:after</code>. In the docs, we show a light red background color on hover to hightlight the icon's size.{{/i}}
{{_i}}<strong>Heads up!</strong> Icon classes are echoed via CSS <code>:after</code>. In the docs, we show a light red background color on hover to highlight the icon's size.{{/i}}
</div>
<br>
@ -1419,7 +1486,7 @@
<a class="btn" href="#"><i class="icon-align-justify"></i></a>
</div>
<div class="btn-group">
<a class="btn btn-primary" href="#"><i class="icon white user"></i> {{_i}}User{{/i}}</a>
<a class="btn btn-primary" href="#"><i class="icon-user icon-white"></i> {{_i}}User{{/i}}</a>
<a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#"><i class="icon-pencil"></i> {{_i}}Edit{{/i}}</a></li>

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

@ -8,8 +8,8 @@
<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">Button groups</a></li>
<li><a href="#buttonDropdowns">Button dropdowns</a></li>
<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">
@ -22,6 +22,7 @@
</ul>
</li>
<li><a href="#labels">{{_i}}Labels{{/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>
@ -42,14 +43,34 @@
<div class="span4">
<h3>{{_i}}Button groups{{/i}}</h3>
<p>{{_i}}Use button groups to join multiple buttons together as one composite component. Build them with a series of <code>&lt;a&gt;</code> or <code>&lt;button&gt;</code> elements.{{/i}}</p>
<p>{{_i}}You can also combine sets of <code>&lt;div class="btn-group"&gt;</code> into a <code>&lt;div class="btn-toolbar"&gt;</code> for more complex projects.{{/i}}</p>
<div class="btn-toolbar" style="margin-top: 18px;">
<div class="btn-group">
<h3>{{_i}}Best practices{{/i}}</h3>
<p>{{_i}}We recommend the following guidelines for using button groups and toolbars:{{/i}}</p>
<ul>
<li>{{_i}}Always use the same element in a single button group, <code>&lt;a&gt;</code> or <code>&lt;button&gt;</code>.{{/i}}</li>
<li>{{_i}}Don't mix buttons of different colors in the same button group.{{/i}}</li>
<li>{{_i}}Use icons in addition to or instead of text, but be sure include alt and title text where appropriate.{{/i}}</li>
</ul>
<p>{{_i}}<span class="label label-info">Related</span> Button groups with dropdowns (see below) should be called out separately and always include a dropdown caret to indicate intended behavior.{{/i}}</p>
</div>
<div class="span4">
<h3>{{_i}}Default example{{/i}}</h3>
<p>{{_i}}Here's how the HTML looks for a standard button group built with anchor tag buttons:{{/i}}</p>
<div class="">
<div class="btn-group" style="margin: 9px 0;">
<a class="btn" href="#">{{_i}}Left{{/i}}</a>
<a class="btn" href="#">{{_i}}Middle{{/i}}</a>
<a class="btn" href="#">{{_i}}Right{{/i}}</a>
</div>
</div>
<pre class="prettyprint linenums">
&lt;div class="btn-group"&gt;
&lt;a class="btn" href="#"&gt;1&lt;/a&gt;
&lt;a class="btn" href="#"&gt;2&lt;/a&gt;
&lt;a class="btn" href="#"&gt;3&lt;/a&gt;
&lt;/div&gt;
</pre>
<h3>{{_i}}Toolbar example{{/i}}</h3>
<p>{{_i}}Combine sets of <code>&lt;div class="btn-group"&gt;</code> into a <code>&lt;div class="btn-toolbar"&gt;</code> for more complex components.{{/i}}</p>
<div class="btn-toolbar">
<div class="btn-group">
<a class="btn" href="#">1</a>
@ -66,18 +87,6 @@
<a class="btn" href="#">8</a>
</div>
</div>
</div>
<div class="span4">
<h3>{{_i}}Example markup{{/i}}</h3>
<p>{{_i}}Here's how the HTML looks for a standard button group built with anchor tag buttons:{{/i}}</p>
<pre class="prettyprint linenums">
&lt;div class="btn-group"&gt;
&lt;a class="btn" href="#"&gt;1&lt;/a&gt;
&lt;a class="btn" href="#"&gt;2&lt;/a&gt;
&lt;a class="btn" href="#"&gt;3&lt;/a&gt;
&lt;/div&gt;
</pre>
<p>{{_i}}And with a toolbar for multiple groups:{{/i}}</p>
<pre class="prettyprint linenums">
&lt;div class="btn-toolbar"&gt;
&lt;div class="btn-group"&gt;
@ -163,7 +172,9 @@
<li><a href="#">{{_i}}Separated link{{/i}}</a></li>
</ul>
</div><!-- /btn-group -->
</div>
</div><!-- /btn-toolbar -->
<hr>
<p><span class="label label-info">{{_i}}Heads up!{{/i}}</span> {{_i}}Button dropdowns require the <a href="./javascript.html#dropdowns">Bootstrap dropdown plugin</a> to function.{{/i}}</p>
</div>
<div class="span8">
<h3>{{_i}}Example markup{{/i}}</h3>
@ -278,9 +289,10 @@
<div class="span4">
<h3>{{_i}}Powerful base class{{/i}}</h3>
<p>{{_i}}All nav components here&mdash;tabs, pills, and lists&mdash;<strong>share the same base markup and styles</strong> through the <code>.nav</code> class.{{/i}}</p>
<h3>{{_i}}Why tabs and pills{{/i}}</h3>
<p>{{_i}}Tabs and pills in Bootstrap are built on a <code>&lt;ul&gt;</code> with the same core HTML, a list of links. Swap between tabs or pills with only a class.{{/i}}</p>
<p>{{_i}}Both options are great for sub-sections of content or navigating between pages of related content.{{/i}}</p>
<h3>{{_i}}When to use{{/i}}</h3>
<p>{{_i}}Tabs and pills are great for sections of content or navigating between pages of related content.{{/i}}</p>
<h3>{{_i}}Component alignment{{/i}}</h3>
<p>{{_i}}To align nav links, use the <code>.pull-left</code> or <code>.pull-right</code> utility classes. Both classes will add a CSS float in the specified direction.{{/i}}</p>
</div>
<div class="span4">
<h3>{{_i}}Basic tabs{{/i}}</h3>
@ -686,7 +698,9 @@
<li><a href="#">{{_i}}Another action{{/i}}</a></li>
<li><a href="#">{{_i}}Something else here{{/i}}</a></li>
<li class="divider"></li>
<li class="nav-header">Nav header</li>
<li><a href="#">{{_i}}Separated link{{/i}}</a></li>
<li><a href="#">{{_i}}One more separated link{{/i}}</a></li>
</ul>
</li>
</ul>
@ -725,12 +739,14 @@
&lt;/div&gt;
&lt;/div&gt;
</pre>
<p>{{_i}}To make the navbar fixed to the top of the viewport, add <code>.navbar-fixed-top</code> to the outermost div, <code>.navbar</code>. In your CSS, you will also need to account for the overlap it causes by adding <code>padding-top: 40px;</code> to your <code>&lt;body&gt;</code>.{{/i}}</p>
<h3>{{_i}}Fixed navbar{{/i}}</h3>
<p>{{_i}}To make the navbar fixed to the top of the viewport, add <code>.navbar-fixed-top</code> to the outermost div, <code>.navbar</code>.{{/i}}</p>
<pre class="prettyprint linenums">
&lt;div class="navbar navbar-fixed-top"&gt;
...
&lt;/div&gt;
</pre>
<p>{{_i}}In your CSS, you will also need to account for the overlap it causes by adding 40px or more of padding to your <code>&lt;body&gt;</code>. Be sure to add this after the core Bootstrap CSS and before the optional responsive CSS.{{/i}}</p>
<h3>{{_i}}Brand name{{/i}}</h3>
<p>{{_i}}A simple link to show your brand or project name only requires an anchor tag.{{/i}}</p>
<pre class="prettyprint linenums">
@ -751,18 +767,18 @@
&lt;div class="navbar"&gt;
&lt;div class="navbar-inner"&gt;
&lt;div class="container"&gt;
&lt;!-- .btn-navbar is used as the toggle for collapsed navbar content --&gt;
&lt;!-- {{_i}}.btn-navbar is used as the toggle for collapsed navbar content{{/i}} --&gt;
&lt;a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"&gt;
&lt;span class="icon-bar"&gt;&lt;/span&gt;
&lt;span class="icon-bar"&gt;&lt;/span&gt;
&lt;span class="icon-bar"&gt;&lt;/span&gt;
&lt;/a&gt;
&lt;!-- Be sure to leave the brand out there if you want it shown --&gt;
&lt;!-- {{_i}}Be sure to leave the brand out there if you want it shown{{/i}} --&gt;
&lt;a class="brand" href="#"&gt;{{_i}}Project name{{/i}}&lt;/a&gt;
&lt;!-- Everything you want hidden at 940px or less, place within here --&gt;
&lt;!-- {{_i}}Everything you want hidden at 940px or less, place within here{{/i}} --&gt;
&lt;div class="nav-collapse"&gt;
&lt;!-- .nav, .navbar-search, .navbar-form, etc --&gt;
&lt;/div&gt;
@ -788,8 +804,18 @@
&lt;li&gt;&lt;a href="#"&gt;{{_i}}Link{{/i}}&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
</pre>
<p>{{_i}}You can easily add dividers to your nav links with an empty list item and a simple class. Just add this between links:{{/i}}</p>
<pre class="prettyprint linenums">
&lt;ul class="nav"&gt;
...
&lt;li class="divider-vertical"&gt;&lt;/li&gt;
...
&lt;/ul&gt;
</pre>
<h3>{{_i}}Component alignment{{/i}}</h3>
<p>{{_i}}To align a nav, search form, or text, use the <code>.pull-left</code> or <code>.pull-right</code> utility classes. Both classes will add a CSS float in the specified direction.{{/i}}</p>
<h3>{{_i}}Adding dropdowns{{/i}}</h3>
<p>{{_i}}Adding dropdowns to the nav is super simple, but does require the use of <a href="./javascript.html#dropdown">our javascript plugin</a>.{{/i}}</p>
<p>{{_i}}Adding dropdowns to the nav is super simple, but does require the use of <a href="./javascript.html#dropdowns">our javascript plugin</a>.{{/i}}</p>
<pre class="prettyprint linenums">
&lt;ul class="nav"&gt;
&lt;li class="dropdown"&gt;
@ -805,7 +831,7 @@
&lt;/li&gt;
&lt;/ul&gt;
</pre>
<p><a class="btn" href="./javascript.html#dropdown">{{_i}}Get the javascript &rarr;{{/i}}</a></p>
<p><a class="btn" href="./javascript.html#dropdowns">{{_i}}Get the javascript &rarr;{{/i}}</a></p>
</div><!-- /.span -->
</div><!-- /.row -->
@ -945,7 +971,7 @@
<div class="row">
<div class="span4">
<h3>{{_i}}About pager{{/i}}</h3>
<p>{{_i}}The pager component is a set of links for simple pagination implemenations with light markup and even lighter styles. It's great for simple sites like blogs or magazines.{{/i}}</p>
<p>{{_i}}The pager component is a set of links for simple pagination implementations with light markup and even lighter styles. It's great for simple sites like blogs or magazines.{{/i}}</p>
</div>
<div class="span4">
<h3>{{_i}}Default example{{/i}}</h3>
@ -1015,7 +1041,7 @@
<span class="label label-success">{{_i}}Success{{/i}}</span>
</td>
<td>
<code>&lt;span class="label label-success"&gt;{{/_i}}New{{/i}}&lt;/span&gt;</code>
<code>&lt;span class="label label-success"&gt;{{/_i}}Success{{/i}}&lt;/span&gt;</code>
</td>
</tr>
<tr>
@ -1048,6 +1074,55 @@
<!-- 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>
<h2>{{_i}}Hero unit{{/i}}</h2>
<div class="row">
<div class="span4">
<p>{{_i}}Bootstrap provides a lightweight, flexible component called a hero unit to showcase content on your site. It works well on marketing and content-heavy sites.{{/i}}</p>
<h3>{{_i}}Markup{{/i}}</h3>
<p>{{_i}}Wrap your content in a <code>div</code> like so:{{/i}}</p>
<pre class="prettyprint linenums">
&lt;div class="hero-unit"&gt;
&lt;h1&gt;{{_i}}Heading{{/i}}&lt;/h1&gt;
&lt;p&gt;{{_i}}Tagline{{/i}}&lt;/p&gt;
&lt;p&gt;
&lt;a class="btn btn-primary btn-large"&gt;
{{_i}}Learn more{{/i}}
&lt;/a&gt;
&lt;/p&gt;
&lt;/div&gt;
</pre>
</div>
<div class="span8">
<div class="hero-unit">
<h1>{{_i}}Hello, world!{{/i}}</h1>
<p>{{_i}}This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.{{/i}}</p>
<p><a class="btn btn-primary btn-large">{{_i}}Learn more{{/i}}</a></p>
</div>
</div>
</div><!-- /row -->
<h2>{{_i}}Page header{{/i}}</h2>
<div class="row">
<div class="span4">
<p>{{_i}}A simple shell for an <code>h1</code> to appropratiely space out and segment sections of content on a page. It can utilize the <code>h1</code>'s default <code>small</code>, element as well most other components (with additional styles).{{/i}}</p>
</div>
<div class="span8">
<pre class="prettyprint linenums">
&lt;div class="page-haeder"&gt;
&lt;h1&gt;{{_i}}Example page header{{/i}}&lt;/h1&gt;
&lt;/div&gt;
</pre>
</div>
</div><!-- /row -->
</section>
<!-- Thumbnails
================================================== -->
<section id="thumbnails">
@ -1092,7 +1167,7 @@
<div class="caption">
<h5>{{_i}}Thumbnail label{{/i}}</h5>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<p><a href="#" class="btn primary">{{_i}}Action{{/i}}</a> <a href="#" class="btn">{{_i}}Action{{/i}}</a></p>
<p><a href="#" class="btn btn-primary">{{_i}}Action{{/i}}</a> <a href="#" class="btn">{{_i}}Action{{/i}}</a></p>
</div>
</div>
</li>
@ -1102,7 +1177,7 @@
<div class="caption">
<h5>{{_i}}Thumbnail label{{/i}}</h5>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<p><a href="#" class="btn primary">{{_i}}Action{{/i}}</a> <a href="#" class="btn">{{_i}}Action{{/i}}</a></p>
<p><a href="#" class="btn btn-primary">{{_i}}Action{{/i}}</a> <a href="#" class="btn">{{_i}}Action{{/i}}</a></p>
</div>
</div>
</li>
@ -1206,7 +1281,7 @@
<div class="row">
<div class="span4">
<h3>{{_i}}Rewritten base class{{/i}}</h3>
<p>{{_i}}With Bootstrap 2, we've simplified the base class: <code>.alert</code> instead of <code>.alert-message</code>. We've also reduced the minimum required markup&mdash;no <code>&lt;p&gt;</code> is required by default, just the outter <code>&lt;div&gt;</code>.{{/i}}</p>
<p>{{_i}}With Bootstrap 2, we've simplified the base class: <code>.alert</code> instead of <code>.alert-message</code>. We've also reduced the minimum required markup&mdash;no <code>&lt;p&gt;</code> is required by default, just the outer <code>&lt;div&gt;</code>.{{/i}}</p>
<h3>{{_i}}Single alert message{{/i}}</h3>
<p>{{_i}}For a more durable component with less code, we've removed the differentiating look for block alerts, messages that come with more padding and typically more text. The class also has changed to <code>.alert-block</code>.{{/i}}</p>
<hr>
@ -1218,24 +1293,24 @@
<h3>{{_i}}Example alerts{{/i}}</h3>
<p>{{_i}}Wrap your message and an optional close icon in a div with simple class.{{/i}}</p>
<div class="alert">
<a class="close">&times;</a>
<a class="close" data-dismiss="alert">&times;</a>
<strong>{{_i}}Warning!{{/i}}</strong> {{_i}}Best check yo self, you're not looking too good.{{/i}}
</div>
<pre class="prettyprint linenums">
&lt;div class="alert"&gt;
&lt;a class="close"&gt;&times;&lt;/a&gt;
&lt;a class="close" data-dismiss="alert"&gt;&times;&lt;/a&gt;
&lt;strong&gt;{{_i}}Warning!{{/i}}&lt;/strong&gt; {{_i}}Best check yo self, you're not looking too good.{{/i}}
&lt;/div&gt;
</pre>
<p>{{_i}}Easily extend the standard alert message with two optional classes: <code>.alert-block</code> for more padding and text controls and <code>.alert-heading</code> for a matching heading.{{/i}}</p>
<div class="alert alert-block">
<a class="close">&times;</a>
<a class="close" data-dismiss="alert">&times;</a>
<h4 class="alert-heading">{{_i}}Warning!{{/i}}</h4>
<p>{{_i}}Best check yo self, you're not looking too good.{{/i}} Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</p>
</div>
<pre class="prettyprint linenums">
&lt;div class="alert alert-block"&gt;
&lt;a class="close"&gt;&times;&lt;/a&gt;
&lt;a class="close" data-dismiss="alert"&gt;&times;&lt;/a&gt;
&lt;h4 class="alert-heading"&gt;{{_i}}Warning!{{/i}}&lt;/h4&gt;
{{_i}}Best check yo self, you're not...{{/i}}
&lt;/div&gt;
@ -1248,7 +1323,7 @@
<div class="span4">
<h3>{{_i}}Error or danger{{/i}}</h3>
<div class="alert alert-error">
<a class="close">&times;</a>
<a class="close" data-dismiss="alert">&times;</a>
<strong>{{_i}}Oh snap!{{/i}}</strong> {{_i}}Change a few things up and try submitting again.{{/i}}
</div>
<pre class="prettyprint linenums">
@ -1260,7 +1335,7 @@
<div class="span4">
<h3>{{_i}}Success{{/i}}</h3>
<div class="alert alert-success">
<a class="close">&times;</a>
<a class="close" data-dismiss="alert">&times;</a>
<strong>{{_i}}Well done!{{/i}}</strong> {{_i}}You successfully read this important alert message.{{/i}}
</div>
<pre class="prettyprint linenums">
@ -1272,7 +1347,7 @@
<div class="span4">
<h3>{{_i}}Information{{/i}}</h3>
<div class="alert alert-info">
<a class="close">&times;</a>
<a class="close" data-dismiss="alert">&times;</a>
<strong>{{_i}}Heads up!{{/i}}</strong> {{_i}}This alert needs your attention, but it's not super important.{{/i}}
</div>
<pre class="prettyprint linenums">

2
docs/templates/pages/download.mustache vendored
View File

@ -17,7 +17,7 @@
<div class="page-header">
<a class="btn btn-small pull-right toggle-all" href="#">{{_i}}Toggle all{{/i}}</a>
<h1>
{{_i}}1. Chose components{{/i}}
{{_i}}1. Choose components{{/i}}
<small>{{_i}}Get just the CSS you need{{/i}}</small>
</h1>
</div>

15
docs/templates/pages/index.mustache vendored
View File

@ -3,7 +3,7 @@
<header class="jumbotron masthead">
<div class="inner">
<h1>{{_i}}Bootstrap, from Twitter{{/i}}</h1>
<p>Simple and flexible HTML, CSS, and Javascript for popular user interface components and interactions.</p>
<p>{{_i}}Simple and flexible HTML, CSS, and Javascript for popular user interface components and interactions.{{/i}}</p>
<p class="download-info">
<a href="https://github.com/twitter/bootstrap/" class="btn btn-primary btn-large">{{_i}}View project on GitHub{{/i}}</a>
<a href="assets/bootstrap.zip" class="btn btn-large">{{_i}}Download Bootstrap{{/i}}</a>
@ -11,20 +11,19 @@
</div>
<ul class="quick-links">
<li><a href="./upgrading.html">Upgrading from 1.4</a></li>
<li><a href="./upgrading.html">{{_i}}Upgrading from 1.4{{/i}}</a></li>
<li><a href="https://github.com/twitter/bootstrap/issues?state=open">{{_i}}Issues{{/i}}</a></li>
<li><a href="https://github.com/twitter/bootstrap/wiki/Roadmap">{{_i}}Roadmap{{/i}}</a></li>
<li><a href="https://github.com/twitter/bootstrap/wiki/Changelog">{{_i}}Changelog{{/i}}</a></li>
<li><a href="https://github.com/twitter/bootstrap/wiki">{{_i}}Roadmap &amp; changelog{{/i}}</a></li>
<li class="divider">&middot;</li>
<li>
<iframe class="github-btn" src="http://markdotto.github.com/github-buttons/github-btn.html?user=twitter&repo=bootstrap&type=watch&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="114px" height="20px"></iframe>
<iframe class="github-btn" src="http://markdotto.github.com/github-buttons/github-btn.html?user=twitter&repo=bootstrap&type=watch&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="112px" height="20px"></iframe>
</li>
<li>
<iframe class="github-btn" src="http://markdotto.github.com/github-buttons/github-btn.html?user=twitter&repo=bootstrap&type=fork&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="98px" height="20px"></iframe>
<iframe class="github-btn" src="http://markdotto.github.com/github-buttons/github-btn.html?user=twitter&repo=bootstrap&type=fork&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="95px" height="20px"></iframe>
</li>
<li class="divider">&middot;</li>
<li class="follow-btn">
<a href="https://twitter.com/twbootstrap" class="twitter-follow-button" data-width="145px" data-link-color="#0069D6" data-show-count="false">{{_i}}Follow @twbootstrap{{/i}}</a>
<a href="https://twitter.com/twbootstrap" class="twitter-follow-button" data-width="225px" data-link-color="#0069D6" data-show-count="true">{{_i}}Follow @twbootstrap{{/i}}</a>
</li>
<li class="tweet-btn">
<a href="https://twitter.com/share" class="twitter-share-button" data-url="http://twitter.github.com/bootstrap/" data-count="horizontal" data-via="twbootstrap" data-related="mdo:Creator of Twitter Bootstrap">Tweet</a>
@ -46,7 +45,7 @@
<div class="span4">
<img class="bs-icon" src="assets/img/glyphicons/glyphicons_079_podium.png">
<h2>{{_i}}For all skill levels{{/i}}</h2>
<p>{{_i}}Bootstrap is designed to help people of all skill level&mdash;designer or developer, huge nerd or early beginner. Use it as a complete kit or use to start something more complex.{{/i}}</p>
<p>{{_i}}Bootstrap is designed to help people of all skill levels&mdash;designer or developer, huge nerd or early beginner. Use it as a complete kit or use to start something more complex.{{/i}}</p>
</div>
<div class="span4">
<img class="bs-icon" src="assets/img/glyphicons/glyphicons_163_iphone.png">

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

@ -58,7 +58,7 @@
<div class="span3">
<label>
<h3><a href="./javascript.html#tooltips">{{_i}}Tooltips{{/i}}</a></h3>
<p>{{_i}}A new take on the jQuery Tipsy plugin, Tooltips don't rely on images, uss CSS3 for animations, and data-attributes for local title storage.{{/i}}</p>
<p>{{_i}}A new take on the jQuery Tipsy plugin, Tooltips don't rely on images&mdash;they use CSS3 for animations and data-attributes for local title storage.{{/i}}</p>
</label>
</div>
<div class="span3">
@ -213,7 +213,7 @@
</pre>
<pre class="prettyprint linenums">
&lt;div class="modal"&gt;
&lt;div class="modal" id="myModal"&gt;
&lt;div class="modal-header"&gt;
&lt;a class="close" data-dismiss="modal"&gt;&times;&lt;/a&gt;
&lt;h3&gt;Modal header&lt;/h3&gt;
@ -554,11 +554,11 @@ $('#myModal').on('hidden', function () {
<h3>{{_i}}Markup{{/i}}</h3>
<p>{{_i}}You can activate a tab or pill navigation without writing any javascript by simply specifying <code>data-toggle="tab"</code> or <code>data-toggle="pill"</code> on an element.{{/i}}</p>
<pre class="prettyprint linenums">
&lt;ul class="tabs"&gt;
&lt;ul class="nav nav-tabs"&gt;
&lt;li&gt;&lt;a href="#home" data-toggle="tab"&gt;{{_i}}Home{{/i}}&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#profile" data-toggle="tab"&gt;{{_i}}Profile{{/i}}&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#messages" data-toggle="tab"&gt;{{_i}}Messages{{/i}}&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#ettings" data-toggle="tab"&gt;{{_i}}Settings{{/i}}&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#settings" data-toggle="tab"&gt;{{_i}}Settings{{/i}}&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;</pre>
<h3>{{_i}}Methods{{/i}}</h3>
<h4>$().tab</h4>
@ -566,7 +566,7 @@ $('#myModal').on('hidden', function () {
{{_i}}Activates a tab element and content container. Tab should have either a `data-target` or an `href` targeting a container node in the dom.{{/i}}
</p>
<pre class="prettyprint linenums">
&lt;ul class="tabs"&gt;
&lt;ul class="nav nav-tabs"&gt;
&lt;li class="active"&gt;&lt;a href="#home"&gt;{{_i}}Home{{/i}}&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#profile"&gt;{{_i}}Profile{{/i}}&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#messages"&gt;{{_i}}Messages{{/i}}&lt;/a&gt;&lt;/li&gt;
@ -624,14 +624,14 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
<div class="row">
<div class="span3 columns">
<h3>{{_i}}About Tooltips{{/i}}</h3>
<p>{{_i}}Inspired by the excellent jQuery.tipsy plugin written by Jason Frame; Tooltips are an updated version, which don't rely on images, uss css3 for animations, and data-attributes for local title storage.{{/i}}</p>
<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>
<a href="assets/js/bootstrap-tooltip.js" target="_blank" class="btn">{{_i}}Download file{{/i}}</a>
</div>
<div class="span9 columns">
<h2>{{_i}}Example use of Tooltips{{/i}}</h2>
<p>{{_i}}Hover over the links below to see tooltips:{{/i}}</p>
<div class="tooltip-demo well">
<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 <a href="#" rel='tooltip' title='Another one here too'>really ironic</a> artisan whatever keytar, 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="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 <a href="#" rel="tooltip" title="Another one here too">really ironic</a> artisan whatever keytar, 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>
<hr>
@ -657,7 +657,7 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
</tr>
<tr>
<td>{{_i}}placement{{/i}}</td>
<td>{{_i}}string{{/i}}</td>
<td>{{_i}}string|function{{/i}}</td>
<td>'top'</td>
<td>{{_i}}how to position the tooltip{{/i}} - top | bottom | left | right</td>
</tr>
@ -697,6 +697,9 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
</div>
<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>
<h3>{{_i}}Methods{{/i}}</h3>
<h4>$().tooltip({{_i}}options{{/i}})</h4>
<p>{{_i}}Attaches a tooltip handler to an element collection.{{/i}}</p>
@ -725,7 +728,7 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
<div class="span3 columns">
<h3>{{_i}}About popovers{{/i}}</h3>
<p>{{_i}}Add small overlays of content, like those on the iPad, to any element for housing secondary information.{{/i}}</p>
<p class="muted"><strong>*</strong> {{_i}}Requires <a href="#tooltip">Tooltip</a> to be included{{/i}}</p>
<p class="muted"><strong>*</strong> {{_i}}Requires <a href="#tooltips">Tooltip</a> to be included{{/i}}</p>
<a href="assets/js/bootstrap-popover.js" target="_blank" class="btn">{{_i}}Download file{{/i}}</a>
</div>
<div class="span9 columns">
@ -757,7 +760,7 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
</tr>
<tr>
<td>{{_i}}placement{{/i}}</td>
<td>{{_i}}string{{/i}}</td>
<td>{{_i}}string|function{{/i}}</td>
<td>'right'</td>
<td>{{_i}}how to position the popover{{/i}} - top | bottom | left | right</td>
</tr>
@ -847,11 +850,11 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
<h4 class="alert-heading">{{_i}}Oh snap! You got an error!{{/i}}</h4>
<p>{{_i}}Change this and that and try again. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.{{/i}}</p>
<p>
<a class="btn btn-danger small" href="#">{{_i}}Take this action{{/i}}</a> <a class="btn small" href="#">{{_i}}Or do this{{/i}}</a>
<a class="btn btn-danger" href="#">{{_i}}Take this action{{/i}}</a> <a class="btn" href="#">{{_i}}Or do this{{/i}}</a>
</p>
</div>
<hr>
<h2>{{_i}}Using bootstrap-alerts.js{{/i}}</h2>
<h2>{{_i}}Using bootstrap-alert.js{{/i}}</h2>
<p>{{_i}}Enable dismissal of an alert via javascript:{{/i}}</p>
<pre class="prettyprint linenums">$(".alert").alert()</pre>
<h3>{{_i}}Markup{{/i}}</h3>
@ -953,17 +956,17 @@ $('#my-alert').bind('closed', function () {
<h3>{{_i}}Markup{{/i}}</h3>
<p>{{_i}}Data attributes are integral to the button plugin. Check out the example code below for the various markup types.{{/i}}</p>
<pre class="prettyprint linenums">
&lt;!-- Add data-toggle="button" to activate toggling on a single button --&gt;
&lt;!-- {{_i}}Add data-toggle="button" to activate toggling on a single button{{/i}} --&gt;
&lt;button class="btn" data-toggle="button"&gt;Single Toggle&lt;/button&gt;
&lt;!-- Add data-toggle="buttons-checkbox" for checkbox style toggling on btn-group --&gt;
&lt;!-- {{_i}}Add data-toggle="buttons-checkbox" for checkbox style toggling on btn-group{{/i}} --&gt;
&lt;div class="btn-group" data-toggle="buttons-checkbox"&gt;
&lt;button class="btn"&gt;Left&lt;/button&gt;
&lt;button class="btn"&gt;Middle&lt;/button&gt;
&lt;button class="btn"&gt;Right&lt;/button&gt;
&lt;/div&gt;
&lt;!-- Add data-toggle="buttons-radio" for radio style toggling on btn-group --&gt;
&lt;!-- {{_i}}Add data-toggle="buttons-radio" for radio style toggling on btn-group{{/i}} --&gt;
&lt;div class="btn-group" data-toggle="buttons-radio"&gt;
&lt;button class="btn"&gt;Left&lt;/button&gt;
&lt;button class="btn"&gt;Middle&lt;/button&gt;
@ -972,7 +975,7 @@ $('#my-alert').bind('closed', function () {
</pre>
<h3>{{_i}}Methods{{/i}}</h3>
<h4>$().button('toggle')</h4>
<p>{{_i}}Toggles push state. Gives btn the look that it's been activated.{{/i}}</p>
<p>{{_i}}Toggles push state. Gives btn the look that it hass been activated.{{/i}}</p>
<div class="alert alert-info">
<strong>{{_i}}Heads up!{{/i}}</strong>
{{_i}}You can enable auto toggling of a button by using the <code>data-toggle</code> attribute.{{/i}}
@ -1058,7 +1061,7 @@ $('#my-alert').bind('closed', function () {
<hr>
<h2>{{_i}}Using bootstrap-collapse.js{{/i}}</h2>
<p>Enable via javascript:</p>
<p>{{_i}}Enable via javascript:{{/i}}</p>
<pre class="prettyprint linenums">$(".collapse").collapse()</pre>
<h3>{{_i}}Options{{/i}}</h3>
<table class="table table-bordered table-striped">
@ -1075,7 +1078,7 @@ $('#my-alert').bind('closed', function () {
<td>{{_i}}parent{{/i}}</td>
<td>{{_i}}selector{{/i}}</td>
<td>false</td>
<td>{{_i}}If selector then all collapsible elements under the specified parent will be closed when this collasabile item is shown. (similar to traditional accordion behavior){{/i}}</td>
<td>{{_i}}If selector then all collapsible elements under the specified parent will be closed when this collapsible item is shown. (similar to traditional accordion behavior){{/i}}</td>
</tr>
<tr>
<td>{{_i}}toggle{{/i}}</td>
@ -1225,12 +1228,14 @@ $('#myCollapsible').on('hidden', function () {
<h3>{{_i}}Markup{{/i}}</h3>
<p>{{_i}}Data attributes are integral to the carousel plugin. Check out the example code below for the various markup types.{{/i}}</p>
<pre class="prettyprint linenums">
&lt;div class="carousel"&gt;
&lt;!-- Carousel items --&gt;
&lt;div id="myCarousel" class="carousel"&gt;
&lt;!-- {{_i}}Carousel items{{/i}} --&gt;
&lt;div class="carousel-inner"&gt;
...
&lt;div class="active item"&gt;…&lt;/div&gt;
&lt;div class="item"&gt;…&lt;/div&gt;
&lt;div class="item"&gt;…&lt;/div&gt;
&lt;/div&gt;
&lt;!-- Carousel nav --&gt;
&lt;!-- {{_i}}Carousel nav{{/i}} --&gt;
&lt;a class="carousel-control left" href="#myCarousel" data-slide="prev"&gt;&amp;lsaquo;&lt;/a&gt;
&lt;a class="carousel-control right" href="#myCarousel" data-slide="next"&gt;&amp;rsaquo;&lt;/a&gt;
&lt;/div&gt;
@ -1269,7 +1274,7 @@ $('.myCarousel').carousel({
</tr>
<tr>
<td>{{_i}}slid{{/i}}</td>
<td>{{_i}}This event is fired when the carousel has completed it's slide transition.{{/i}}</td>
<td>{{_i}}This event is fired when the carousel has completed its slide transition.{{/i}}</td>
</tr>
</tbody>
</table>
@ -1352,7 +1357,7 @@ $('.myCarousel').carousel({
</pre>
<h3>{{_i}}Methods{{/i}}</h3>
<h4>.typeahead({{_i}}options{{/i}})</h4>
<p>{{_i}}Initializes an input with a typahead.{{/i}}</p>
<p>{{_i}}Initializes an input with a typeahead.{{/i}}</p>
</div>
</div>
</section>

28
docs/templates/pages/less.mustache vendored
View File

@ -47,7 +47,7 @@
</div>
<div class="span4">
<h3>{{_i}}Operations{{/i}}</h3>
<p>{{_i}}Make your grid, leading, and more super flexible by doing the math on the fly with operations. Multiple, divide, add, and subtract your way to CSS sanity.{{/i}}</p>
<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>
</div>
</div>
</section>
@ -210,7 +210,7 @@
<h3>{{_i}}Components{{/i}}</h3>
<div class="row">
<div class="span6">
<h4>Buttons</h4>
<h4>{{_i}}Buttons{{/i}}</h4>
<table class="table table-bordered table-striped">
<tbody>
<tr>
@ -220,7 +220,7 @@
</tr>
</tbody>
</table>
<h4>Forms</h4>
<h4>{{_i}}Forms{{/i}}</h4>
<table class="table table-bordered table-striped">
<tbody>
<tr>
@ -230,7 +230,7 @@
</tr>
</tbody>
</table>
<h4>Navbar</h4>
<h4>{{_i}}Navbar{{/i}}</h4>
<table class="table table-bordered table-striped">
<tbody>
<tr>
@ -272,13 +272,13 @@
<tbody>
<tr>
<td class="span3"><code>@warningText</code></td>
<td>#f3edd2</td>
<td class="swatch-col"><span class="swatch" style="background-color: #f3edd2;"></span></td>
<td>#c09853</td>
<td><span class="swatch" style="background-color: #c09853;"></span></td>
</tr>
<tr>
<td><code>@warningBackground</code></td>
<td>#c09853</td>
<td><span class="swatch" style="background-color: #c09853;"></span></td>
<td>#f3edd2</td>
<td class="swatch-col"><span class="swatch" style="background-color: #f3edd2;"></span></td>
</tr>
<tr>
<td><code>@errorText</code></td>
@ -495,7 +495,7 @@
</tr>
</tbody>
</table>
<h3>CSS3 properties</h3>
<h3>{{_i}}CSS3 properties{{/i}}</h3>
<table class="table table-bordered table-striped">
<thead>
<tr>
@ -528,7 +528,7 @@
<tr>
<td><code>.scale()</code></td>
<td><code>@ratio</code></td>
<td>{{_i}}Scale an element to <em>n</em> times it's original size{{/i}}</td>
<td>{{_i}}Scale an element to <em>n</em> times its original size{{/i}}</td>
</tr>
<tr>
<td><code>.translate()</code></td>
@ -538,7 +538,7 @@
<tr>
<td><code>.background-clip()</code></td>
<td><code>@clip</code></td>
<td>{{_i}}Crop the backgroud of an element (useful for <code>border-radius</code>){{/i}}</td>
<td>{{_i}}Crop the background of an element (useful for <code>border-radius</code>){{/i}}</td>
</tr>
<tr>
<td><code>.background-size()</code></td>
@ -567,7 +567,7 @@
</tr>
</tbody>
</table>
<h3>Backgrounds and gradients</h3>
<h3>{{_i}}Backgrounds and gradients{{/i}}</h3>
<table class="table table-bordered table-striped">
<thead>
<tr>
@ -641,8 +641,8 @@
<div class="row">
<div class="span4">
<h3>{{_i}}Node with makefile{{/i}}</h3>
<p>{{_i}}Install the LESS command line compiler with npm by running the following command:{{/i}}</p>
<pre>$ npm install less</pre>
<p>{{_i}}Install the LESS command line compiler globally with npm by running the following command:{{/i}}</p>
<pre>$ npm install -g less</pre>
<p>{{_i}}Once installed just run <code>make</code> from the root of your bootstrap directory and you're all set.{{/i}}</p>
<p>{{_i}}Additionally, if you have <a href="https://github.com/mynyml/watchr">watchr</a> installed, you may run <code>make watch</code> to have bootstrap automatically rebuilt every time you edit a file in the bootstrap lib (this isn't required, just a convenience method).{{/i}}</p>
</div><!-- /span4 -->

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

@ -5,7 +5,9 @@
<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="subnav">
<ul class="nav nav-pills">
<li><a href="#grid-system">{{_i}}Grid system{{/i}}</a></li>
<li><a href="#gridSystem">{{_i}}Grid system{{/i}}</a></li>
<li><a href="#fluidGridSystem">{{_i}}Fluid gird 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>
@ -16,12 +18,11 @@
<!-- Grid system
================================================== -->
<section id="grid-system">
<section id="gridSystem">
<div class="page-header">
<h1>{{_i}}Grid system <small>12 columns with a responsive twist</small>{{/i}}</h1>
<h1>{{_i}}Default grid system <small>12 columns with a responsive twist</small>{{/i}}</h1>
</div>
<h2>Default 940px grid</h2>
<div class="row show-grid">
<div class="span1">1</div>
<div class="span1">1</div>
@ -72,7 +73,7 @@
<br>
<h2>Offsetting columns</h2>
<h2>{{_i}}Offsetting columns{{/i}}</h2>
<div class="row show-grid">
<div class="span4">4</div>
<div class="span4 offset4">4 offset 4</div>
@ -97,7 +98,8 @@
<div class="row">
<div class="span6">
<p>{{_i}}With the static (non-fluid) grid system in Bootstrap, nesting is easy. To nest your content, just add a new <code>.row</code> and set of <code>.span*</code> columns within an existing <code>.span*</code> column.{{/i}}</p>
<h4>{{_i}}Example{{/i}}</h4>
<h3>{{_i}}Example{{/i}}</h3>
<p>{{_i}}Nested rows should include a set of columns that add up to the number of columns of it's parent. For example, two nested <code>.span3</code> columns should be placed within a <code>.span6</code>.{{/i}}</p>
<div class="row show-grid">
<div class="span6">
{{_i}}Level 1 of column{{/i}}
@ -111,7 +113,7 @@
</div>
</div>
</div>
</div>
</div><!-- /span6 -->
<div class="span6">
<pre class="prettyprint linenums">
&lt;div class="row"&gt;
@ -126,8 +128,112 @@
</pre>
</div>
</div>
</section>
<h2>{{_i}}Grid customization{{/i}}</h2>
<!-- 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>
<h2>{{_i}}Fluid columns{{/i}}</h2>
<div class="row-fluid show-grid">
<div class="span1">1</div>
<div class="span1">1</div>
<div class="span1">1</div>
<div class="span1">1</div>
<div class="span1">1</div>
<div class="span1">1</div>
<div class="span1">1</div>
<div class="span1">1</div>
<div class="span1">1</div>
<div class="span1">1</div>
<div class="span1">1</div>
<div class="span1">1</div>
</div>
<div class="row-fluid show-grid">
<div class="span4">4</div>
<div class="span4">4</div>
<div class="span4">4</div>
</div>
<div class="row-fluid show-grid">
<div class="span4">4</div>
<div class="span8">8</div>
</div>
<div class="row-fluid show-grid">
<div class="span6">6</div>
<div class="span6">6</div>
</div>
<div class="row-fluid show-grid">
<div class="span12">12</div>
</div>
<div class="row">
<div class="span4">
<h3>{{_i}}Percents, not pixels{{/i}}</h3>
<p>{{_i}}The fluid grid system uses percents for column widths instead of fixed pixels. It also has the same responsive variations as our fixed grid system, ensuring proper proportions for key screen resolutions and devices.{{/i}}</p>
</div>
<div class="span4">
<h3>{{_i}}Fluid rows{{/i}}</h3>
<p>{{_i}}Make any row fluid simply by changing <code>.row</code> to <code>.row-fluid</code>. The columns stay the exact same, making it super straightforward to flip between fixed and fluid layouts.{{/i}}</p>
</div>
<div class="span4">
<h3>{{_i}}Markup{{/i}}</h3>
<pre class="prettyprint linenums">
&lt;div class="row-fluid"&gt;
&lt;div class="span4"&gt;...&lt;/div&gt;
&lt;div class="span8"&gt;...&lt;/div&gt;
&lt;/div&gt;
</pre>
</div>
</div><!-- /row -->
<h2>{{_i}}Fluid nesting{{/i}}</h2>
<div class="row">
<div class="span6">
<p>{{_i}}Nesting with fluid grids is a bit different: the number of nested columns doesn't need to match the parent. Instead, your columns are reset at each level because each row takes up 100% of the parent column.{{/i}}</p>
<div class="row-fluid show-grid">
<div class="span12">
{{_i}}Fluid 12{{/i}}
<div class="row-fluid show-grid">
<div class="span6">
{{_i}}Fluid 6{{/i}}
</div>
<div class="span6">
{{_i}}Fluid 6{{/i}}
</div>
</div>
</div>
</div>
</div>
<div class="span6">
<pre class="prettyprint linenums">
&lt;div class="row-fluid"&gt;
&lt;div class="span12"&gt;
{{_i}}Level 1 of column{{/i}}
&lt;div class="row-fluid"&gt;
&lt;div class="span6"&gt;{{_i}}Level 2{{/i}}&lt;/div&gt;
&lt;div class="span6"&gt;{{_i}}Level 2{{/i}}&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
</pre>
</div>
</div>
</section>
<!-- Customizaton
================================================== -->
<section id="gridCustomization">
<div class="page-header">
<h1>{{_i}}Grid customization{{/i}}</h1>
</div>
<table class="table table-bordered table-striped">
<thead>
<tr>
@ -166,7 +272,7 @@
</div>
<div class="span4">
<h3>{{_i}}How to customize{{/i}}</h3>
<p>{{_i}}Modifying the grid means changing the three <code>@grid*</code> variables and recompiling Bootstrap. Change the grid variables in variables.less and use one of the <a href="#compiling">four ways documented to recompile</a>. If you're adding more columns, be sure to add the CSS for those in grid.less.{{/i}}</p>
<p>{{_i}}Modifying the grid means changing the three <code>@grid*</code> variables and recompiling Bootstrap. Change the grid variables in variables.less and use one of the <a href="less.html#compiling">four ways documented to recompile</a>. If you're adding more columns, be sure to add the CSS for those in grid.less.{{/i}}</p>
</div>
<div class="span4">
<h3>{{_i}}Staying responsive{{/i}}</h3>
@ -189,8 +295,8 @@
<div class="span6">
<h2>{{_i}}Fixed layout{{/i}}</h2>
<p>{{_i}}The default and simple 940px-wide, centered layout for just about any website or page provided by a single <code>&lt;div class="container"&gt;</code>.{{/i}}</p>
<div class="minicon-layout">
<div class="minicon-layout-body"></div>
<div class="mini-layout">
<div class="mini-layout-body"></div>
</div>
<pre class="prettyprint linenums">
&lt;body&gt;
@ -203,9 +309,9 @@
<div class="span6">
<h2>{{_i}}Fluid layout{{/i}}</h2>
<p>{{_i}}<code>&lt;div class="container-fluid"&gt;</code> gives flexible page structure, min- and max-widths, and a left-hand sidebar. It's great for apps and docs.{{/i}}</p>
<div class="minicon-layout fluid">
<div class="minicon-layout-sidebar"></div>
<div class="minicon-layout-body"></div>
<div class="mini-layout fluid">
<div class="mini-layout-sidebar"></div>
<div class="mini-layout-body"></div>
</div>
<pre class="prettyprint linenums">
&lt;div class="container-fluid"&gt;
@ -239,7 +345,7 @@
</div>
<div class="span8">
<h2>{{_i}}Supported devices{{/i}}</h2>
<p>{{_i}}Bootstrap supports a handful of media queries to help make your projects more appropriate on different devices and screen resolutions. Here's what's included:{{/i}}</p>
<p>{{_i}}Bootstrap supports a handful of media queries in a single file to help make your projects more appropriate on different devices and screen resolutions. Here's what's included:{{/i}}</p>
<table class="table table-bordered table-striped">
<thead>
<tr>
@ -262,8 +368,8 @@
</tr>
<tr>
<td>{{_i}}Landscape tablets{{/i}}</td>
<td>768px to 980px</td>
<td>44px</td>
<td>768px to 979px</td>
<td>42px</td>
<td>20px</td>
</tr>
<tr>
@ -281,6 +387,10 @@
</tbody>
</table>
<h3>{{_i}}Requires meta tag{{/i}}</h3>
<p>{{_i}}To ensure devices display responsive pages properly, include the viewport meta tag.{{/i}}</p>
<pre class="prettyprint linenums">&lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;</pre>
<h3>{{_i}}What they do{{/i}}</h3>
<p>{{_i}}Media queries allow for custom CSS based on a number of conditions&mdash;ratios, widths, display type, etc&mdash;but usually focuses around <code>min-width</code> and <code>max-width</code>.{{/i}}</p>
<ul>
@ -301,7 +411,7 @@
<ol>
<li>{{_i}}Use the compiled responsive version, bootstrap-responsive.css{{/i}}</li>
<li>{{_i}}Add @import "responsive.less" and recompile Bootstrap{{/i}}</li>
<li>{{_i}}Modify and recompile responsive.less as a separate{{/i}}</li>
<li>{{_i}}Modify and recompile responsive.less as a separate file{{/i}}</li>
</ol>
<p>{{_i}}<strong>Why not just include it?</strong> Truth be told, not everything needs to be responsive. Instead of encouraging developers to remove this feature, we figure it best to enable it.{{/i}}</p>
</div>

12
docs/templates/pages/upgrading.mustache vendored
View File

@ -39,7 +39,7 @@
<ul>
<li>{{_i}}Media queries added for <strong>basic support</strong> across mobile and tablet devices{{/i}}
<li>{{_i}}Responsive CSS is compiled separately, as bootstrap-responsive.css{{/i}}</li>
</ul>
</ul>
</section>
@ -76,12 +76,14 @@
<li>{{_i}}IE9: removed gradients and added rounded corners{{/i}}</li>
<li>{{_i}}Updated active state to make styling clearer in button groups (new) and look better with custom transition{{/i}}</li>
<li>{{_i}}New mixin, <code>.buttonBackground</code>, to set button gradients{{/i}}</li>
<li>{{_i}}The <code>.secondary</code> class was removed from modal examples in our docs as it never had associated styles.{{/i}}</li>
</ul>
<h3>{{_i}}Forms{{/i}}</h3>
<ul>
<li>{{_i}}Default form style is now vertical (stacked) to use less CSS and add greater flexibility{{/i}}</li>
<li>{{_i}}Form classes standardized with <code>.form-</code> required as a prefix{{/i}}</li>
<li>{{_i}}New built-in form defaults for search, inline, and horizontal forms{{/i}}</li>
<li>{{_i}}For horizontal forms, previous classes <code>.clearfix</code> and <code>.input</code> are equivalent to the new <code>.control-group</code> and <code>.controls</code>.{{/i}}</li>
<li>{{_i}}More flexible horizontal form markup with classes for all styling, including new optional class for the <code>label</code>{{/i}}</li>
<li>{{_i}}Form states: colors updated and customizable via new LESS variables{{/i}}</li>
</ul>
@ -109,7 +111,7 @@
</ul>
<h3>{{_i}}Navigation{{/i}}</h3>
<ul>
<li>{{_i}}Tabs and pills now require the use of a new base class, <code>.nav</code>, on their <code>&lt;ul&gt;</code>{{/i}}</li>
<li>{{_i}}Tabs and pills now require the use of a new base class, <code>.nav</code>, on their <code>&lt;ul&gt;</code> and the class names are now <code>.nav-pills</code> and <code>.nav-tabs</code>.{{/i}}</li>
<li>{{_i}}New nav list variation added that uses the same base class, <code>.nav</code>{{/i}}</li>
<li>{{_i}}Vertical tabs and pills have been added&mdash;just add <code>.nav-stacked</code> to the <code>&lt;ul&gt;</code>{{/i}}</li>
<li>{{_i}}Pills were restyled to be less rounded by default{{/i}}</li>
@ -128,6 +130,7 @@
<ul>
<li>{{_i}}Updated the <code>.dropdown-menu</code> to tighten up spacing{{/i}}</li>
<li>{{_i}}Now requires you to add a <code>&lt;span class="caret"&gt;&lt;/span&gt;</code> to show the dropdown arrow{{/i}}</li>
<li>{{_i}}Now requires you to add a <code>data-toggle="dropdown"</code> attribute to obtain toggling behavior{{/i}}</li>
<li>{{_i}}The navbar (fixed topbar) has brand new dropdowns. Gone are the dark versions and in their place are the standard white ones with an additional caret at their tops for clarity of position.{{/i}}</li>
</ul>
<h3>{{_i}}Labels{{/i}}</h3>
@ -144,7 +147,7 @@
<ul>
<li>{{_i}}New base class: <code>.alert</code> instead of <code>.alert-message</code>{{/i}}</li>
<li>{{_i}}Class names standardized for other options, now all starting with <code>.alert-</code>{{/i}}</li>
<li>{{_i}}Redesigned base alert styles to combine the deafult alerts and block-level alerts into one{{/i}}</li>
<li>{{_i}}Redesigned base alert styles to combine the default alerts and block-level alerts into one{{/i}}</li>
<li>{{_i}}Block level alert class changed: <code>.alert-block</code> instead of <code>.block-message</code>{{/i}}</li>
</ul>
<h3>{{_i}}Progress bars{{/i}}</h3>
@ -167,7 +170,7 @@
<h1>{{_i}}Javascript plugins{{/i}}</h1>
</div>
<div class="alert alert-info">
<strong>{{_i}}Heads up!{{/i}}</strong> {{_i}}We're rewritten just about everything for our plugins, so head on over to <a href="./javascript.html">the Javascript page</a> to learn more.{{/i}}
<strong>{{_i}}Heads up!{{/i}}</strong> {{_i}}We've rewritten just about everything for our plugins, so head on over to <a href="./javascript.html">the Javascript page</a> to learn more.{{/i}}
</div>
<h3>{{_i}}Tooltips{{/i}}</h3>
<ul>
@ -179,6 +182,7 @@
<h3>{{_i}}Popovers{{/i}}</h3>
<ul>
<li>{{_i}}Child elements now properly namespaced: <code>.title</code> to <code>.popover-title</code>, <code>.inner</code> to <code>.popover-inner</code>, and <code>.content</code> to <code>.popover-content</code>.{{/i}}</li>
<li>{{_i}}The <code>placement</code> option value that was <code>below</code> is now <code>bottom</code>, and <code>above</code> is now <code>top</code>.{{/i}}</li>
</ul>
<h3>{{_i}}New plugins{{/i}}</h3>
<ul>

29
docs/upgrading.html
View File

@ -7,17 +7,17 @@
<meta name="description" content="">
<meta name="author" content="">
<!-- Le HTML5 shim, for IE6-8 support of HTML elements -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!-- Le styles -->
<link href="assets/css/bootstrap.css" rel="stylesheet">
<link href="assets/css/bootstrap-responsive.css" rel="stylesheet">
<link href="assets/css/docs.css" rel="stylesheet">
<link href="assets/js/google-code-prettify/prettify.css" rel="stylesheet">
<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!-- Le fav and touch icons -->
<link rel="shortcut icon" href="assets/ico/favicon.ico">
<link rel="apple-touch-icon" href="assets/ico/apple-touch-icon.png">
@ -115,7 +115,7 @@
<ul>
<li>Media queries added for <strong>basic support</strong> across mobile and tablet devices
<li>Responsive CSS is compiled separately, as bootstrap-responsive.css</li>
</ul>
</ul>
</section>
@ -152,12 +152,14 @@
<li>IE9: removed gradients and added rounded corners</li>
<li>Updated active state to make styling clearer in button groups (new) and look better with custom transition</li>
<li>New mixin, <code>.buttonBackground</code>, to set button gradients</li>
<li>The <code>.secondary</code> class was removed from modal examples in our docs as it never had associated styles.</li>
</ul>
<h3>Forms</h3>
<ul>
<li>Default form style is now vertical (stacked) to use less CSS and add greater flexibility</li>
<li>Form classes standardized with <code>.form-</code> required as a prefix</li>
<li>New built-in form defaults for search, inline, and horizontal forms</li>
<li>For horizontal forms, previous classes <code>.clearfix</code> and <code>.input</code> are equivalent to the new <code>.control-group</code> and <code>.controls</code>.</li>
<li>More flexible horizontal form markup with classes for all styling, including new optional class for the <code>label</code></li>
<li>Form states: colors updated and customizable via new LESS variables</li>
</ul>
@ -185,7 +187,7 @@
</ul>
<h3>Navigation</h3>
<ul>
<li>Tabs and pills now require the use of a new base class, <code>.nav</code>, on their <code>&lt;ul&gt;</code></li>
<li>Tabs and pills now require the use of a new base class, <code>.nav</code>, on their <code>&lt;ul&gt;</code> and the class names are now <code>.nav-pills</code> and <code>.nav-tabs</code>.</li>
<li>New nav list variation added that uses the same base class, <code>.nav</code></li>
<li>Vertical tabs and pills have been added&mdash;just add <code>.nav-stacked</code> to the <code>&lt;ul&gt;</code></li>
<li>Pills were restyled to be less rounded by default</li>
@ -204,6 +206,7 @@
<ul>
<li>Updated the <code>.dropdown-menu</code> to tighten up spacing</li>
<li>Now requires you to add a <code>&lt;span class="caret"&gt;&lt;/span&gt;</code> to show the dropdown arrow</li>
<li>Now requires you to add a <code>data-toggle="dropdown"</code> attribute to obtain toggling behavior</li>
<li>The navbar (fixed topbar) has brand new dropdowns. Gone are the dark versions and in their place are the standard white ones with an additional caret at their tops for clarity of position.</li>
</ul>
<h3>Labels</h3>
@ -220,7 +223,7 @@
<ul>
<li>New base class: <code>.alert</code> instead of <code>.alert-message</code></li>
<li>Class names standardized for other options, now all starting with <code>.alert-</code></li>
<li>Redesigned base alert styles to combine the deafult alerts and block-level alerts into one</li>
<li>Redesigned base alert styles to combine the default alerts and block-level alerts into one</li>
<li>Block level alert class changed: <code>.alert-block</code> instead of <code>.block-message</code></li>
</ul>
<h3>Progress bars</h3>
@ -243,11 +246,19 @@
<h1>Javascript plugins</h1>
</div>
<div class="alert alert-info">
<strong>Heads up!</strong> We're rewritten just about everything for our plugins, so head on over to <a href="./javascript.html">the Javascript page</a> to learn more.
<strong>Heads up!</strong> We've rewritten just about everything for our plugins, so head on over to <a href="./javascript.html">the Javascript page</a> to learn more.
</div>
<h3>Tooltips</h3>
<ul>
<li>The plugin method has been renamed from <code>twipsy()</code> to <code>tooltip()</code>, and the class name changed from <code>twipsy</code> to <code>tooltip</code>.</li>
<li>The <code>placement</code> option value that was <code>below</code> is now <code>bottom</code>, and <code>above</code> is now <code>top</code>.</li>
<li>The <code>animate</code> option was renamed to <code>animation</code>.</li>
<li>The <code>html</code> option was removed, as the tooltips default to allowing HTML now.</li>
</ul>
<h3>Popovers</h3>
<ul>
<li>Child elements now properly namespaced: <code>.title</code> to <code>.popover-title</code>, <code>.inner</code> to <code>.popover-inner</code>, and <code>.content</code> to <code>.popover-content</code>.</li>
<li>The <code>placement</code> option value that was <code>below</code> is now <code>bottom</code>, and <code>above</code> is now <code>top</code>.</li>
</ul>
<h3>New plugins</h3>
<ul>

4
js/README.md
View File

@ -37,7 +37,7 @@ All methods should accept an optional options object, a string which targets a p
Options should be sparse and add universal value. We should pick the right defaults.
All plugins should have a default object which can be modified to effect all instance's default options. The defaults object should be available via `$.fn.plugin.defaults`.
All plugins should have a default object which can be modified to affect all instances' default options. The defaults object should be available via `$.fn.plugin.defaults`.
$.fn.modal.defaults = { … }
@ -64,7 +64,7 @@ All events should have an infinitive and past participle form. The infinitive is
### CONSTRUCTORS
Each plugin should expose it's raw constructor on a `Constructor` property -- accessed in the following way:
Each plugin should expose its raw constructor on a `Constructor` property -- accessed in the following way:
$.fn.popover.Constructor

11
js/bootstrap-alert.js vendored
View File

@ -51,11 +51,14 @@
$parent.length || ($parent = $this.hasClass('alert') ? $this : $this.parent())
$parent.removeClass('in')
$parent
.trigger('close')
.removeClass('in')
function removeElement() {
$parent.remove()
$parent.trigger('closed')
$parent
.trigger('closed')
.remove()
}
$.support.transition && $parent.hasClass('fade') ?
@ -88,4 +91,4 @@
$('body').on('click.alert.data-api', dismiss, Alert.prototype.close)
})
}( window.jQuery )
}( window.jQuery );

4
js/bootstrap-button.js vendored
View File

@ -91,8 +91,8 @@
$(function () {
$('body').on('click.button.data-api', '[data-toggle^=button]', function ( e ) {
$(e.target).button('toggle')
$(e.currentTarget).button('toggle')
})
})
}( window.jQuery )
}( window.jQuery );

5
js/bootstrap-carousel.js vendored
View File

@ -61,6 +61,7 @@
, pause: function () {
clearInterval(this.interval)
this.interval = null
return this
}
@ -82,6 +83,8 @@
, fallback = type == 'next' ? 'first' : 'last'
, that = this
if (!$next.length) return
this.sliding = true
isCycling && this.pause()
@ -151,4 +154,4 @@
})
})
}( window.jQuery )
}( window.jQuery );

2
js/bootstrap-collapse.js vendored
View File

@ -133,4 +133,4 @@
})
})
}( window.jQuery )
}( window.jQuery );

2
js/bootstrap-dropdown.js vendored
View File

@ -89,4 +89,4 @@
$('body').on('click.dropdown.data-api', toggle, Dropdown.prototype.toggle)
})
}( window.jQuery )
}( window.jQuery );

4
js/bootstrap-modal.js vendored
View File

@ -177,7 +177,7 @@
return this.each(function () {
var $this = $(this)
, data = $this.data('modal')
, options = $.extend({}, $.fn.modal.defaults, typeof option == 'object' && option)
, options = $.extend({}, $.fn.modal.defaults, $this.data(), typeof option == 'object' && option)
if (!data) $this.data('modal', (data = new Modal(this, options)))
if (typeof option == 'string') data[option]()
else if (options.show) data.show()
@ -207,4 +207,4 @@
})
})
}( window.jQuery )
}( window.jQuery );

2
js/bootstrap-popover.js vendored
View File

@ -92,4 +92,4 @@
, template: '<div class="popover"><div class="arrow"></div><div class="popover-inner"><h3 class="popover-title"></h3><div class="popover-content"><p></p></div></div></div>'
})
}( window.jQuery )
}( window.jQuery );

2
js/bootstrap-scrollspy.js vendored
View File

@ -122,4 +122,4 @@
})
})
}( window.jQuery )
}( window.jQuery );

2
js/bootstrap-tab.js vendored
View File

@ -127,4 +127,4 @@
})
})
}( window.jQuery )
}( window.jQuery );

2
js/bootstrap-tooltip.js vendored
View File

@ -267,4 +267,4 @@
, template: '<div class="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>'
}
}( window.jQuery )
}( window.jQuery );

4
js/bootstrap-transition.js vendored
View File

@ -47,5 +47,5 @@
})()
})
}( window.jQuery )
}( window.jQuery );

2
js/bootstrap-typeahead.js vendored
View File

@ -268,4 +268,4 @@
})
})
}( window.jQuery )
}( window.jQuery );

2
js/tests/unit/bootstrap-button.js vendored
View File

@ -3,7 +3,7 @@ $(function () {
module("bootstrap-buttons")
test("should be defined on jquery object", function () {
ok($(document.body).button, 'tabs method is defined')
ok($(document.body).button, 'button method is defined')
})
test("should return element", function () {

2
less/breadcrumbs.less
View File

@ -9,7 +9,7 @@
.border-radius(3px);
.box-shadow(inset 0 1px 0 @white);
li {
display: inline;
display: inline-block;
text-shadow: 0 1px 0 @white;
}
.divider {

3
less/button-groups.less
View File

@ -133,7 +133,8 @@
.btn-primary,
.btn-danger,
.btn-info,
.btn-success {
.btn-success,
.btn-inverse {
.caret {
border-top-color: @white;
.opacity(75);

32
less/buttons.less
View File

@ -9,12 +9,14 @@
.btn {
display: inline-block;
padding: 4px 10px 4px;
margin-bottom: 0; // For input.btn
font-size: @baseFontSize;
line-height: @baseLineHeight;
color: @grayDark;
text-align: center;
text-shadow: 0 1px 1px rgba(255,255,255,.75);
#gradient > .vertical-three-colors(@white, @white, 25%, darken(@white, 10%)); // Don't use .gradientbar() here since it does a three-color gradient
vertical-align: middle;
.buttonBackground(@white, darken(@white, 10%));
border: 1px solid #ccc;
border-bottom-color: #bbb;
.border-radius(4px);
@ -23,6 +25,7 @@
cursor: pointer;
// Give IE7 some love
.reset-filter();
.ie7-restore-left-whitespace();
}
@ -51,7 +54,6 @@
.box-shadow(@shadow);
background-color: darken(@white, 10%);
background-color: darken(@white, 15%) e("\9");
color: rgba(0,0,0,.5);
outline: 0;
}
@ -76,7 +78,7 @@
line-height: normal;
.border-radius(5px);
}
.btn-large .icon {
.btn-large [class^="icon-"] {
margin-top: 1px;
}
@ -86,10 +88,17 @@
font-size: @baseFontSize - 2px;
line-height: @baseLineHeight - 2px;
}
.btn-small .icon {
.btn-small [class^="icon-"] {
margin-top: -1px;
}
// Mini
.btn-mini {
padding: 2px 6px;
font-size: @baseFontSize - 2px;
line-height: @baseLineHeight - 4px;
}
// Alternate buttons
// --------------------------------------------------
@ -105,7 +114,9 @@
.btn-success,
.btn-success:hover,
.btn-info,
.btn-info:hover {
.btn-info:hover,
.btn-inverse,
.btn-inverse:hover {
text-shadow: 0 -1px 0 rgba(0,0,0,.25);
color: @white;
}
@ -114,7 +125,8 @@
.btn-warning.active,
.btn-danger.active,
.btn-success.active,
.btn-info.active {
.btn-info.active,
.btn-dark.active {
color: rgba(255,255,255,.75);
}
@ -139,6 +151,10 @@
.btn-info {
.buttonBackground(#5bc0de, #2f96b4);
}
// Inverse appears as dark gray
.btn-inverse {
.buttonBackground(#454545, #262626);
}
// Cross-browser Jank
@ -146,8 +162,10 @@
button.btn,
input[type="submit"].btn {
// Firefox 3.6 only I believe
&::-moz-focus-inner {
padding: 0;
padding: 0;
border: 0;
}

13
less/code.less
View File

@ -11,12 +11,16 @@ pre {
color: @grayDark;
.border-radius(3px);
}
// Inline code
code {
padding: 3px 4px;
color: #d14;
background-color: #f7f7f9;
border: 1px solid #e1e1e8;
}
// Blocks of code
pre {
display: block;
padding: (@baseLineHeight - 1) / 2;
@ -30,6 +34,7 @@ pre {
white-space: pre;
white-space: pre-wrap;
word-break: break-all;
word-wrap: break-word;
// Make prettyprint styles more spaced out for readability
&.prettyprint {
@ -39,6 +44,14 @@ pre {
// Account for some code outputs that place code tags in pre tags
code {
padding: 0;
color: inherit;
background-color: transparent;
border: 0;
}
}
// Enable scrollable blocks of code
.pre-scrollable {
max-height: 340px;
overflow-y: scroll;
}

3
less/dropdowns.less
View File

@ -46,7 +46,6 @@
float: left;
display: none; // none by default, but block on "open" of the menu
min-width: 160px;
max-width: 220px;
_width: 160px;
padding: 4px 0;
margin: 0; // override default ul
@ -93,7 +92,7 @@
padding: 3px 15px;
clear: both;
font-weight: normal;
line-height: 18px;
line-height: @baseLineHeight;
color: @gray;
white-space: nowrap;
}

89
less/forms.less
View File

@ -28,6 +28,12 @@ legend {
color: @grayDark;
border: 0;
border-bottom: 1px solid #eee;
// Small
small {
font-size: @baseLineHeight * .75;
color: @grayLight;
}
}
// Set font for forms
@ -36,7 +42,13 @@ input,
button,
select,
textarea {
#font > .sans-serif(@baseFontSize,normal,@baseLineHeight);
#font > .shorthand(@baseFontSize,normal,@baseLineHeight); // Set size, weight, line-height here
}
input,
button,
select,
textarea {
#font > #family > .sans-serif(); // And only set font-family here for those that need it (note the missing label element)
}
// Identify controls by their labels
@ -84,13 +96,17 @@ input[type="radio"] {
margin: 3px 0;
*margin-top: 0; /* IE7 */
line-height: normal;
border: 0;
cursor: pointer;
.border-radius(0);
border: 0 \9; /* IE9 and down */
}
input[type="image"] {
border: 0;
}
// Reset the file input to browser defaults
input[type="file"] {
width: auto;
padding: initial;
line-height: initial;
border: initial;
@ -115,6 +131,11 @@ input[type="file"] {
line-height: 28px;
}
// Reset line-height for IE
input[type="file"] {
line-height: 18px \9;
}
// Chrome on Linux and Mobile Safari need background-color
select {
width: 220px; // default input width + 10px of padding that doesn't get applied
@ -165,9 +186,11 @@ input[type="hidden"] {
}
// Radios and checkboxes on same line
// TODO v3: Convert .inline to .control-inline
.radio.inline,
.checkbox.inline {
display: inline-block;
padding-top: 5px;
margin-bottom: 0;
vertical-align: middle;
}
@ -175,11 +198,6 @@ input[type="hidden"] {
.checkbox.inline + .checkbox.inline {
margin-left: 10px; // space out consecutive inline controls
}
// But don't forget to remove their padding on first-child
.controls > .radio.inline:first-child,
.controls > .checkbox.inline:first-child {
padding-top: 0;
}
@ -198,9 +216,10 @@ textarea:focus {
@shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6);
.box-shadow(@shadow);
outline: 0;
outline: thin dotted \9; /* IE6-8 */
outline: thin dotted \9; /* IE6-9 */
}
input[type="file"]:focus,
input[type="radio"]:focus,
input[type="checkbox"]:focus,
select:focus {
.box-shadow(none); // override for file inputs
@ -260,33 +279,6 @@ textarea[readonly] {
// FORM FIELD FEEDBACK STATES
// --------------------------
// Mixin for form field states
.formFieldState(@textColor: #555, @borderColor: #ccc, @backgroundColor: #f5f5f5) {
// Set the text color
> label,
.help-block,
.help-inline {
color: @textColor;
}
// Style inputs accordingly
input,
select,
textarea {
color: @textColor;
border-color: @borderColor;
&:focus {
border-color: darken(@borderColor, 10%);
.box-shadow(0 0 6px lighten(@borderColor, 20%));
}
}
// Give a small background color for input-prepend/-append
.input-prepend .add-on,
.input-append .add-on {
color: @textColor;
background-color: @backgroundColor;
border-color: @textColor;
}
}
// Warning
.control-group.warning {
.formFieldState(@warningText, @warningText, @warningBackground);
@ -344,6 +336,7 @@ select:focus:required:invalid {
// ---------
.help-block {
display: block; // account for any element using help-block
margin-top: 5px;
margin-bottom: 0;
color: @grayLight;
@ -412,6 +405,7 @@ select:focus:required:invalid {
.border-radius(3px 0 0 3px);
}
.uneditable-input {
border-left-color: #eee;
border-right-color: #ccc;
}
.add-on {
@ -461,6 +455,10 @@ select:focus:required:invalid {
display: inline-block;
margin-bottom: 0;
}
// Re-hide hidden elements due to specifity
.hide {
display: none;
}
}
.form-search label,
.form-inline label,
@ -477,28 +475,37 @@ select:focus:required:invalid {
.form-inline .input-prepend .add-on {
vertical-align: middle;
}
// Inline checkbox/radio labels
.form-search .radio,
.form-inline .radio,
.form-search .checkbox,
.form-inline .checkbox {
margin-bottom: 0;
vertical-align: middle;
}
// Margin to space out fieldsets
.control-group {
margin-bottom: @baseLineHeight / 2;
}
// Legend collapses margin, so next element is responsible for spacing
legend + .control-group {
margin-top: @baseLineHeight;
-webkit-margin-top-collapse: separate;
}
// Horizontal-specific styles
// --------------------------
.form-horizontal {
// Legend collapses margin, so we're relegated to padding
legend + .control-group {
margin-top: @baseLineHeight;
-webkit-margin-top-collapse: separate;
}
// Increase spacing between groups
.control-group {
margin-bottom: @baseLineHeight;
.clearfix();
}
// Float the labels left
.control-group > label {
.control-label {
float: left;
width: 140px;
padding-top: 5px;

30
less/labels.less
View File

@ -1,16 +1,32 @@
// LABELS
// ------
// Base
.label {
padding: 1px 3px 2px;
font-size: @baseFontSize * .75;
padding: 2px 4px 3px;
font-size: @baseFontSize * .85;
font-weight: bold;
color: @white;
text-transform: uppercase;
text-shadow: 0 -1px 0 rgba(0,0,0,.25);
background-color: @grayLight;
.border-radius(3px);
}
.label-important { background-color: @errorText; }
.label-warning { background-color: @orange; }
.label-success { background-color: @successText; }
.label-info { background-color: @infoText; }
// Hover state
.label:hover {
color: @white;
text-decoration: none;
}
// Colors
.label-important { background-color: @errorText; }
.label-important:hover { background-color: darken(@errorText, 10%); }
.label-warning { background-color: @orange; }
.label-warning:hover { background-color: darken(@orange, 10%); }
.label-success { background-color: @successText; }
.label-success:hover { background-color: darken(@successText, 10%); }
.label-info { background-color: @infoText; }
.label-info:hover { background-color: darken(@infoText, 10%); }

103
less/mixins.less
View File

@ -9,7 +9,7 @@
// Clearfix
// --------
// For clearing floats like a boss h5bp.com/q
.clearfix() {
.clearfix {
*zoom: 1;
&:before,
&:after {
@ -25,7 +25,7 @@
// ------------------
.tab-focus() {
// Default
outline: thin dotted;
outline: thin dotted #333;
// Webkit
outline: 5px auto -webkit-focus-ring-color;
outline-offset: -2px;
@ -89,6 +89,15 @@
}
}
// Text overflow
// -------------------------
// Requires inline-block or block for proper styling
.text-overflow() {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
// FONTS
@ -199,13 +208,13 @@
// Setup the mixins to be used
.columns(@fluidGridGutterWidth, @fluidGridColumnWidth, @columns) {
width: 1% * (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1));
}
}
.gridColumn(@fluidGridGutterWidth) {
float: left;
margin-left: @fluidGridGutterWidth;
}
// Take these values and mixins, and make 'em do their thang
.generate(@gridColumns, @fluidGridColumnWidth, @fluidGridGutterWidth) {
.generate(@gridColumns, @fluidGridColumnWidth, @fluidGridGutterWidth) {
// Row surrounds the columns
.row-fluid {
width: 100%;
@ -219,24 +228,22 @@
margin-left: 0;
}
// Default columns
.span1 { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 1); }
.span2 { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 2); }
.span3 { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 3); }
.span4 { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 4); }
.span5 { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 5); }
.span6 { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 6); }
.span7 { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 7); }
.span8 { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 8); }
.span9 { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 9); }
.span10 { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 10); }
.span11 { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 11); }
.span12 { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 12); }
> .span1 { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 1); }
> .span2 { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 2); }
> .span3 { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 3); }
> .span4 { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 4); }
> .span5 { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 5); }
> .span6 { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 6); }
> .span7 { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 7); }
> .span8 { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 8); }
> .span9 { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 9); }
> .span10 { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 10); }
> .span11 { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 11); }
> .span12 { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 12); }
}
}
}
// Input grid system
// -------------------------
#inputGridSystem {
@ -263,6 +270,52 @@
}
}
// Make a Grid
// -------------------------
// Use .makeRow and .makeColumn to assign semantic layouts grid system behavior
.makeRow() {
margin-left: @gridGutterWidth * -1;
.clearfix();
}
.makeColumn(@columns: 1) {
float: left;
margin-left: @gridGutterWidth;
width: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1));
}
// Form field states (used in forms.less)
// --------------------------------------------------
// Mixin for form field states
.formFieldState(@textColor: #555, @borderColor: #ccc, @backgroundColor: #f5f5f5) {
// Set the text color
> label,
.help-block,
.help-inline {
color: @textColor;
}
// Style inputs accordingly
input,
select,
textarea {
color: @textColor;
border-color: @borderColor;
&:focus {
border-color: darken(@borderColor, 10%);
.box-shadow(0 0 6px lighten(@borderColor, 20%));
}
}
// Give a small background color for input-prepend/-append
.input-prepend .add-on,
.input-append .add-on {
color: @textColor;
background-color: @backgroundColor;
border-color: @textColor;
}
}
// CSS3 PROPERTIES
@ -313,13 +366,6 @@
-o-transform: translate(@x, @y);
transform: translate(@x, @y);
}
.skew(@x: 0, @y: 0) {
-webkit-transform: translate(@x, @y);
-moz-transform: translate(@x, @y);
-ms-transform: translate(@x, @y);
-o-transform: translate(@x, @y);
transform: translate(@x, @y);
}
.skew(@x: 0, @y: 0) {
-webkit-transform: skew(@x, @y);
-moz-transform: skew(@x, @y);
@ -327,6 +373,13 @@
-o-transform: skew(@x, @y);
transform: skew(@x, @y);
}
.translate3d(@x: 0, @y: 0, @z: 0) {
-webkit-transform: translate(@x, @y, @z);
-moz-transform: translate(@x, @y, @z);
-ms-transform: translate(@x, @y, @z);
-o-transform: translate(@x, @y, @z);
transform: translate(@x, @y, @z);
}
// Background clipping
// Heads up: FF 3.6 and under need "padding" instead of "padding-box"

11
less/modals.less
View File

@ -1,6 +1,7 @@
// MODALS
// ------
// Recalculate z-index where appropriate
.modal-open {
.dropdown-menu { z-index: @zindexDropdown + @zindexModal; }
.dropdown.open { *z-index: @zindexDropdown + @zindexModal; }
@ -8,6 +9,7 @@
.tooltip { z-index: @zindexTooltip + @zindexModal; }
}
// Background
.modal-backdrop {
position: fixed;
top: 0;
@ -25,6 +27,7 @@
.opacity(80);
}
// Base modal
.modal {
position: fixed;
top: 50%;
@ -53,9 +56,17 @@
// Close icon
.close { margin-top: 2px; }
}
// Body (where all modal content resises)
.modal-body {
padding: 15px;
}
// Remove bottom margin if need be
.modal-body .modal-form {
margin-bottom: 0;
}
// Footer (for actions)
.modal-footer {
padding: 14px 15px 15px;
margin-bottom: 0;

15
less/navbar.less
View File

@ -81,7 +81,7 @@
margin-top: 5px; // make buttons vertically centered in navbar
}
.btn-group .btn {
margin-top: 0;
margin-top: 0; // then undo the margin here so we don't accidentally double it
}
}
@ -104,6 +104,14 @@
input[type="radio"] {
margin-top: 3px;
}
.input-append,
.input-prepend {
margin-top: 6px;
white-space: nowrap; // preven two items from separating within a .navbar-form that has .pull-left
input {
margin-top: 0; // remove the margin on top since it's on the parent
}
}
}
// Navbar search
@ -133,7 +141,7 @@
background-color: @grayLight;
background-color: rgba(255,255,255,.5);
}
// Focus states (we use .focused since IE8 and down doesn't support :focus)
// Focus states (we use .focused since IE7-8 and down doesn't support :focus)
&:focus,
&.focused {
padding: 5px 10px;
@ -194,7 +202,7 @@
}
// Hover
.navbar .nav > li > a:hover {
background-color: transparent;
background-color: @navbarLinkBackgroundHover; // "transparent" is default to differentiate :hover from .active
color: @navbarLinkColorHover;
text-decoration: none;
}
@ -205,7 +213,6 @@
color: @navbarLinkColorHover;
text-decoration: none;
background-color: @navbarBackground;
background-color: rgba(0,0,0,.5);
}
// Dividers (basically a vertical hr)

31
less/navs.less
View File

@ -21,6 +21,21 @@
background-color: @grayLighter;
}
// Nav headers (for dropdowns and lists)
.nav .nav-header {
display: block;
padding: 3px 15px;
font-size: 11px;
font-weight: bold;
line-height: @baseLineHeight;
color: @grayLight;
text-shadow: 0 1px 0 rgba(255,255,255,.5);
text-transform: uppercase;
}
// Space them out when they follow another list item (link)
.nav li + .nav-header {
margin-top: 9px;
}
// NAV LIST
@ -33,21 +48,12 @@
}
.nav-list > li > a,
.nav-list .nav-header {
display: block;
padding: 3px 15px;
margin-left: -15px;
margin-right: -15px;
text-shadow: 0 1px 0 rgba(255,255,255,.5);
}
.nav-list .nav-header {
font-size: 11px;
font-weight: bold;
line-height: @baseLineHeight;
color: @grayLight;
text-transform: uppercase;
}
.nav-list > li + .nav-header {
margin-top: 9px;
.nav-list > li > a {
padding: 3px 15px;
}
.nav-list .active > a,
.nav-list .active > a:hover {
@ -249,6 +255,9 @@
.tabbable {
.clearfix();
}
.tab-content {
overflow: hidden; // prevent content from running below tabs
}
// Remove border on bottom, left, right
.tabs-below .nav-tabs,

2
less/reset.less
View File

@ -108,7 +108,7 @@ input[type="button"],
input[type="reset"],
input[type="submit"] {
cursor: pointer; // Cursors on all buttons applied consistently
-webkit-appearance: button; // Style clicable inputs in iOS
-webkit-appearance: button; // Style clickable inputs in iOS
}
input[type="search"] { // Appearance in Safari/Chrome
-webkit-appearance: textfield;

12
less/responsive.less
View File

@ -56,7 +56,7 @@
.uneditable-input {
display: block;
width: 100%;
height: 28px; /* Make inputs at least the height of their button counterpart */
min-height: 28px; /* Make inputs at least the height of their button counterpart */
/* Makes inputs behave like true block-level elements */
-webkit-box-sizing: border-box; /* Older Webkit */
-moz-box-sizing: border-box; /* Older FF */
@ -123,7 +123,7 @@
// LANDSCAPE PHONE TO SMALL DESKTOP & PORTRAIT TABLET
// --------------------------------------------------
@media (max-width: 768px) {
@media (max-width: 767px) {
// GRID & CONTAINERS
// -----------------
// Remove width from containers
@ -154,7 +154,7 @@
// PORTRAIT TABLET TO DEFAULT DESKTOP
// ----------------------------------
@media (min-width: 768px) and (max-width: 980px) {
@media (min-width: 768px) and (max-width: 979px) {
// Fixed grid
#gridSystem > .generate(12, 42px, 20px);
@ -171,7 +171,7 @@
// TABLETS AND BELOW
// -----------------
@media (max-width: 980px) {
@media (max-width: 979px) {
// UNFIX THE TOPBAR
// ----------------
@ -215,6 +215,10 @@
.navbar .nav > .divider-vertical {
display: none;
}
.navbar .nav .nav-header {
color: @navbarText;
text-shadow: none;
}
// Nav and dropdown links in navbar
.navbar .nav > li > a,
.navbar .dropdown-menu a {

12
less/sprites.less
View File

@ -9,24 +9,26 @@
// All icons receive the styles of the <i> tag with a base class
// of .i and are then given a unique class to add width, height,
// and background-position. Your resulting HTML will look like
// <i class="i icon-inbox"></i>.
// <i class="icon-inbox"></i>.
// For the white version of the icons, just add the .icon-white class:
// <i class="i icon-inbox icon-white"></i>
// <i class="icon-inbox icon-white"></i>
[class^="icon-"] {
[class^="icon-"],
[class*=" icon-"] {
display: inline-block;
width: 14px;
height: 14px;
line-height: 14px;
vertical-align: text-top;
background-image: url(../img/glyphicons-halflings.png);
background-image: url(@iconSpritePath);
background-position: 14px 14px;
background-repeat: no-repeat;
.ie7-restore-right-whitespace();
}
.icon-white {
background-image: url(../img/glyphicons-halflings-white.png);
background-image: url(@iconWhiteSpritePath);
}
.icon-glass { background-position: 0 0; }

17
less/tables.less
View File

@ -25,14 +25,15 @@ table {
padding: 8px;
line-height: @baseLineHeight;
text-align: left;
vertical-align: top;
border-top: 1px solid #ddd;
}
th {
font-weight: bold;
vertical-align: bottom;
}
td {
vertical-align: top;
// Bottom align for column headings
thead th {
vertical-align: bottom;
}
// Remove top border from thead by default
thead:first-child tr th,
@ -113,6 +114,16 @@ table {
}
// HOVER EFFECT
// ------------
// Placed here since it has to come after the potential zebra striping
.table {
tbody tr:hover td,
tbody tr:hover th {
background-color: #f5f5f5;
}
}
// TABLE CELL SIZING
// -----------------

4
less/thumbnails.less
View File

@ -2,13 +2,13 @@
// ----------
.thumbnails {
margin-left: -20px;
margin-left: -@gridGutterWidth;
list-style: none;
.clearfix();
}
.thumbnails > li {
float: left;
margin: 0 0 @baseLineHeight 20px;
margin: 0 0 @baseLineHeight @gridGutterWidth;
}
.thumbnail {
display: block;

5
less/type.less
View File

@ -110,7 +110,8 @@ ol {
li {
line-height: @baseLineHeight;
}
ul.unstyled {
ul.unstyled,
ol.unstyled {
margin-left: 0;
list-style: none;
}
@ -137,7 +138,7 @@ dd {
hr {
margin: @baseLineHeight 0;
border: 0;
border-top: 1px solid #e5e5e5;
border-top: 1px solid @hrBorder;
border-bottom: 1px solid @white;
}

22
less/variables.less
View File

@ -47,20 +47,28 @@
// Z-index master list
// Used for a bird's eye view of components dependent on the z-axis
// Try to avoid customizing these :)
@zindexDropdown: 1000;
@zindexPopover: 1010;
@zindexTooltip: 1020;
@zindexFixedNavbar: 1030;
@zindexModalBackdrop: 1040;
@zindexModal: 1050;
@zindexDropdown: 1000;
@zindexPopover: 1010;
@zindexTooltip: 1020;
@zindexFixedNavbar: 1030;
@zindexModalBackdrop: 1040;
@zindexModal: 1050;
// Sprite icons path
@iconSpritePath: "../img/glyphicons-halflings.png";
@iconWhiteSpritePath: "../img/glyphicons-halflings-white.png";
// Input placeholder text color
@placeholderText: @grayLight;
@placeholderText: @grayLight;
// Hr border color
@hrBorder: @grayLighter;
// Navbar
@navbarHeight: 40px;
@navbarBackground: @grayDarker;
@navbarBackgroundHighlight: @grayDark;
@navbarLinkBackgroundHover: transparent;
@navbarText: @grayLight;
@navbarLinkColor: @grayLight;