diff options
| author | Jacob Thornton <jacobthornton@gmail.com> | 2012-02-17 10:41:02 +0400 |
|---|---|---|
| committer | Jacob Thornton <jacobthornton@gmail.com> | 2012-02-17 10:41:02 +0400 |
| commit | 03e6dc66c2fe14e756723395752feefb687b6526 (patch) | |
| tree | b8cfe13d72e1a780ef08dbd26e3bfe48e406c59e /docs | |
| parent | 9143d8e449a852c606194ea8c529e30ea1a52ddf (diff) | |
| parent | 091622644a0c619e1afbb21041c141da30df76b7 (diff) | |
Merge branch '2.0.1-wip'
Diffstat (limited to 'docs')
37 files changed, 1418 insertions, 758 deletions
diff --git a/docs/assets/bootstrap.zip b/docs/assets/bootstrap.zip Binary files differindex e5a1d8b427..622ad01177 100644 --- a/docs/assets/bootstrap.zip +++ b/docs/assets/bootstrap.zip diff --git a/docs/assets/css/bootstrap-responsive.css b/docs/assets/css/bootstrap-responsive.css index 4b032cdb55..780719e650 100644 --- a/docs/assets/css/bootstrap-responsive.css +++ b/docs/assets/css/bootstrap-responsive.css @@ -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 { diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css index a90e31930b..ed32b339f0 100644 --- a/docs/assets/css/bootstrap.css +++ b/docs/assets/css/bootstrap.css @@ -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; diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css index c3a6848d74..f6a388c236 100644 --- a/docs/assets/css/docs.css +++ b/docs/assets/css/docs.css @@ -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 ------------------------- */ diff --git a/docs/assets/js/bootstrap-alert.js b/docs/assets/js/bootstrap-alert.js index 4a65b135ab..1d69c5f533 100644 --- a/docs/assets/js/bootstrap-alert.js +++ b/docs/assets/js/bootstrap-alert.js @@ -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 );
\ No newline at end of file diff --git a/docs/assets/js/bootstrap-button.js b/docs/assets/js/bootstrap-button.js index d85c82947a..89101ed7be 100644 --- a/docs/assets/js/bootstrap-button.js +++ b/docs/assets/js/bootstrap-button.js @@ -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 );
\ No newline at end of file diff --git a/docs/assets/js/bootstrap-carousel.js b/docs/assets/js/bootstrap-carousel.js index 2f47edb8dc..bad4f46f46 100644 --- a/docs/assets/js/bootstrap-carousel.js +++ b/docs/assets/js/bootstrap-carousel.js @@ -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 );
\ No newline at end of file diff --git a/docs/assets/js/bootstrap-collapse.js b/docs/assets/js/bootstrap-collapse.js index 8134cc42ff..53bcd7c40f 100644 --- a/docs/assets/js/bootstrap-collapse.js +++ b/docs/assets/js/bootstrap-collapse.js @@ -133,4 +133,4 @@ }) }) -}( window.jQuery ) +}( window.jQuery );
\ No newline at end of file diff --git a/docs/assets/js/bootstrap-dropdown.js b/docs/assets/js/bootstrap-dropdown.js index 48d3ce0f85..ce65aa3b54 100644 --- a/docs/assets/js/bootstrap-dropdown.js +++ b/docs/assets/js/bootstrap-dropdown.js @@ -89,4 +89,4 @@ $('body').on('click.dropdown.data-api', toggle, Dropdown.prototype.toggle) }) -}( window.jQuery ) +}( window.jQuery );
\ No newline at end of file diff --git a/docs/assets/js/bootstrap-modal.js b/docs/assets/js/bootstrap-modal.js index 180f0b64d9..0a69b6a2f8 100644 --- a/docs/assets/js/bootstrap-modal.js +++ b/docs/assets/js/bootstrap-modal.js @@ -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 );
\ No newline at end of file diff --git a/docs/assets/js/bootstrap-popover.js b/docs/assets/js/bootstrap-popover.js index 35ff9d0ab6..4df81fee94 100644 --- a/docs/assets/js/bootstrap-popover.js +++ b/docs/assets/js/bootstrap-popover.js @@ -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 );
\ No newline at end of file diff --git a/docs/assets/js/bootstrap-scrollspy.js b/docs/assets/js/bootstrap-scrollspy.js index e8bd0715c6..f9aba137b9 100644 --- a/docs/assets/js/bootstrap-scrollspy.js +++ b/docs/assets/js/bootstrap-scrollspy.js @@ -122,4 +122,4 @@ }) }) -}( window.jQuery ) +}( window.jQuery );
\ No newline at end of file diff --git a/docs/assets/js/bootstrap-tab.js b/docs/assets/js/bootstrap-tab.js index f19db5da1e..78258c6a07 100644 --- a/docs/assets/js/bootstrap-tab.js +++ b/docs/assets/js/bootstrap-tab.js @@ -127,4 +127,4 @@ }) }) -}( window.jQuery ) +}( window.jQuery );
\ No newline at end of file diff --git a/docs/assets/js/bootstrap-tooltip.js b/docs/assets/js/bootstrap-tooltip.js index 21f2311fb2..e1c8b2dc27 100644 --- a/docs/assets/js/bootstrap-tooltip.js +++ b/docs/assets/js/bootstrap-tooltip.js @@ -267,4 +267,4 @@ , template: '<div class="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>' } -}( window.jQuery ) +}( window.jQuery );
\ No newline at end of file diff --git a/docs/assets/js/bootstrap-transition.js b/docs/assets/js/bootstrap-transition.js index 956350bd0a..0b13eccd4c 100644 --- a/docs/assets/js/bootstrap-transition.js +++ b/docs/assets/js/bootstrap-transition.js @@ -47,5 +47,5 @@ })() }) - -}( window.jQuery ) + +}( window.jQuery );
\ No newline at end of file diff --git a/docs/assets/js/bootstrap-typeahead.js b/docs/assets/js/bootstrap-typeahead.js index 1426185afc..e0be49fecd 100644 --- a/docs/assets/js/bootstrap-typeahead.js +++ b/docs/assets/js/bootstrap-typeahead.js @@ -268,4 +268,4 @@ }) }) -}( window.jQuery ) +}( window.jQuery );
\ No newline at end of file diff --git a/docs/base-css.html b/docs/base-css.html index 60b6edfe13..c04dc7daa9 100644 --- a/docs/base-css.html +++ b/docs/base-css.html @@ -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, <code>section</code> should be wrapped as inline. </div><!--/span--> <div class="span4"> <h2>Basic block</h2> - <p>Use <code><pre></code> for multiple lines of code. Be sure to turn any carets into their unicode characters for proper rendering.</p> + <p>Use <code><pre></code> for multiple lines of code. Be sure to escape any angle brackets in the code for proper rendering.</p> <pre> <p>Sample text here...</p> </pre> @@ -385,6 +385,7 @@ For example, <code>section</code> should be wrapped as inline. </pre> </pre> <p><strong>Note:</strong> Be sure to keep code within <code><pre></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, <code>section</code> 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, <code>section</code> 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, <code>section</code> should be wrapped as inline. </label> <button type="submit" class="btn">Submit</button> </form> +<pre class="prettyprint linenums"> +<form class="well"> + <label>Label name</label> + <input type="text" class="span3" placeholder="Type something…"> + <span class="help-inline">Associated help text!</span> + <label class="checkbox"> + <input type="checkbox"> Check me out + </label> + <button type="submit" class="btn">Submit</button> +</form> +</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, <code>section</code> 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"> +<form class="well form-search"> + <input type="text" class="input-medium search-query"> + <button type="submit" class="btn">Search</button> +</form> +</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"> +<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> +</form> +</pre> </div> </div><!-- /row --> @@ -956,10 +984,26 @@ For example, <code>section</code> 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"> +<form class="form-horizontal"> + <fieldset> + <legend>Legend text</legend> + <div class="control-group"> + <label class="control-label" for="input01">Text input</label> + <div class="controls"> + <input type="text" class="input-xlarge" id="input01"> + <p class="help-block">Supporting help text</p> + </div> + </div> + </fieldset> +</form> +</pre> </div> <div class="span4"> <h3>What's included</h3> @@ -1049,14 +1093,14 @@ For example, <code>section</code> 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, <code>section</code> 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"> @@ -1107,6 +1151,15 @@ For example, <code>section</code> should be wrapped as inline. </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"> <div class="input-prepend"> @@ -1173,7 +1226,7 @@ For example, <code>section</code> 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,35 +1266,40 @@ For example, <code>section</code> 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, <code>section</code> 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><a></code> and <code><button></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><a></code> and <code><button></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><button></code> and <code><a></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><button></code> elements.</p> + <p>For disabled buttons, add the <code>.disabled</code> class to links and the <code>disabled</code> attribute for <code><button></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—unfortunately we can't fix this.</p> + <h3>One class, multiple tags</h3> + <p>Use the <code>.btn</code> class on an <code><a></code>, <code><button></code>, or <code><input></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"> +<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"> +</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><input type="submit"></code> for your button.</p> </div> </div> - - <br> - </section> @@ -1305,148 +1376,144 @@ For example, <code>section</code> 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, <code>section</code> 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> diff --git a/docs/components.html b/docs/components.html index c40d55613f..cf11e69986 100644 --- a/docs/components.html +++ b/docs/components.html @@ -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><a></code> or <code><button></code> elements.</p> - <p>You can also combine sets of <code><div class="btn-group"></code> into a <code><div class="btn-toolbar"></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><a></code> or <code><button></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"> +<div class="btn-group"> + <a class="btn" href="#">1</a> + <a class="btn" href="#">2</a> + <a class="btn" href="#">3</a> +</div> +</pre> + <h3>Toolbar example</h3> + <p>Combine sets of <code><div class="btn-group"></code> into a <code><div class="btn-toolbar"></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"> -<div class="btn-group"> - <a class="btn" href="#">1</a> - <a class="btn" href="#">2</a> - <a class="btn" href="#">3</a> -</div> -</pre> - <p>And with a toolbar for multiple groups:</p> <pre class="prettyprint linenums"> <div class="btn-toolbar"> <div class="btn-group"> @@ -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—tabs, pills, and lists—<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><ul></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 @@ </div> </div> </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><body></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"> <div class="navbar navbar-fixed-top"> ... </div> </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><body></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 @@ <div class="navbar"> <div class="navbar-inner"> <div class="container"> - + <!-- .btn-navbar is used as the toggle for collapsed navbar content --> <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </a> - + <!-- Be sure to leave the brand out there if you want it shown --> <a class="brand" href="#">Project name</a> @@ -864,8 +880,18 @@ <li><a href="#">Link</a></li> </ul> </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"> +<ul class="nav"> + ... + <li class="divider-vertical"></li> + ... +</ul> +</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"> <ul class="nav"> <li class="dropdown"> @@ -881,7 +907,7 @@ </li> </ul> </pre> - <p><a class="btn" href="./javascript.html#dropdown">Get the javascript →</a></p> + <p><a class="btn" href="./javascript.html#dropdowns">Get the javascript →</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><span class="label label-success">New</span></code> + <code><span class="label label-success">Success</span></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"> +<div class="hero-unit"> + <h1>Heading</h1> + <p>Tagline</p> + <p> + <a class="btn btn-primary btn-large"> + Learn more + </a> + </p> +</div> +</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"> +<div class="page-haeder"> + <h1>Example page header</h1> +</div> +</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—no <code><p></code> is required by default, just the outter <code><div></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—no <code><p></code> is required by default, just the outer <code><div></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">×</a> + <a class="close" data-dismiss="alert">×</a> <strong>Warning!</strong> Best check yo self, you're not looking too good. </div> <pre class="prettyprint linenums"> <div class="alert"> - <a class="close">×</a> + <a class="close" data-dismiss="alert">×</a> <strong>Warning!</strong> Best check yo self, you're not looking too good. </div> </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">×</a> + <a class="close" data-dismiss="alert">×</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"> <div class="alert alert-block"> - <a class="close">×</a> + <a class="close" data-dismiss="alert">×</a> <h4 class="alert-heading">Warning!</h4> Best check yo self, you're not... </div> @@ -1324,7 +1399,7 @@ <div class="span4"> <h3>Error or danger</h3> <div class="alert alert-error"> - <a class="close">×</a> + <a class="close" data-dismiss="alert">×</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">×</a> + <a class="close" data-dismiss="alert">×</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">×</a> + <a class="close" data-dismiss="alert">×</a> <strong>Heads up!</strong> This alert needs your attention, but it's not super important. </div> <pre class="prettyprint linenums"> diff --git a/docs/download.html b/docs/download.html index 1765b8a7d1..9159787d09 100644 --- a/docs/download.html +++ b/docs/download.html @@ -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> diff --git a/docs/examples.html b/docs/examples.html index 42faf93c0a..76eb4b59a9 100644 --- a/docs/examples.html +++ b/docs/examples.html @@ -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"> diff --git a/docs/examples/fluid.html b/docs/examples/fluid.html index f6f7fceff1..3c7059f9d2 100644 --- a/docs/examples/fluid.html +++ b/docs/examples/fluid.html @@ -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"> diff --git a/docs/examples/hero.html b/docs/examples/hero.html index bfcd803448..ee64646f38 100644 --- a/docs/examples/hero.html +++ b/docs/examples/hero.html @@ -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"> diff --git a/docs/examples/starter-template.html b/docs/examples/starter-template.html index 75249d7117..31cc57cf81 100644 --- a/docs/examples/starter-template.html +++ b/docs/examples/starter-template.html @@ -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"> diff --git a/docs/index.html b/docs/index.html index dcf39a7929..a914f677fe 100644 --- a/docs/index.html +++ b/docs/index.html @@ -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 & changelog</a></li> <li class="divider">·</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">·</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—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—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"> diff --git a/docs/javascript.html b/docs/javascript.html index 7960a29e39..612724c798 100644 --- a/docs/javascript.html +++ b/docs/javascript.html @@ -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—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"> -<div class="modal"> +<div class="modal" id="myModal"> <div class="modal-header"> <a class="close" data-dismiss="modal">×</a> <h3>Modal header</h3> @@ -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"> -<ul class="tabs"> +<ul class="nav nav-tabs"> <li><a href="#home" data-toggle="tab">Home</a></li> <li><a href="#profile" data-toggle="tab">Profile</a></li> <li><a href="#messages" data-toggle="tab">Messages</a></li> - <li><a href="#ettings" data-toggle="tab">Settings</a></li> + <li><a href="#settings" data-toggle="tab">Settings</a></li> </ul></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"> -<ul class="tabs"> +<ul class="nav nav-tabs"> <li class="active"><a href="#home">Home</a></li> <li><a href="#profile">Profile</a></li> <li><a href="#messages">Messages</a></li> @@ -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"> +<a href="#" rel="tooltip" title="first tooltip">hover over me</a> +</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"> -<div class="carousel"> +<div id="myCarousel" class="carousel"> <!-- Carousel items --> <div class="carousel-inner"> - ... + <div class="active item">…</div> + <div class="item">…</div> + <div class="item">…</div> </div> <!-- Carousel nav --> <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a> @@ -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> diff --git a/docs/less.html b/docs/less.html index 2212a2e4d6..97847cc9d4 100644 --- a/docs/less.html +++ b/docs/less.html @@ -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 --> diff --git a/docs/scaffolding.html b/docs/scaffolding.html index 4ed4a36c86..525c1152fc 100644 --- a/docs/scaffolding.html +++ b/docs/scaffolding.html @@ -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"> <div class="row"> @@ -202,8 +204,112 @@ </pre> </div> </div> +</section> + + + +<!-- Fluid grid system +================================================== --> +<section id="fluidGridSystem"> + <div class="page-header"> + <h1>Fluid grid system <small>12 responsive, percent-based columns</small></h1> + </div> - <h2>Grid customization</h2> + <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"> +<div class="row-fluid"> + <div class="span4">...</div> + <div class="span8">...</div> +</div> +</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"> +<div class="row-fluid"> + <div class="span12"> + Level 1 of column + <div class="row-fluid"> + <div class="span6">Level 2</div> + <div class="span6">Level 2</div> + </div> + </div> +</div> +</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><div class="container"></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"> <body> @@ -279,9 +385,9 @@ <div class="span6"> <h2>Fluid layout</h2> <p><code><div class="container-fluid"></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"> <div class="container-fluid"> @@ -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"><meta name="viewport" content="width=device-width, initial-scale=1.0"></pre> + <h3>What they do</h3> <p>Media queries allow for custom CSS based on a number of conditions—ratios, widths, display type, etc—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> diff --git a/docs/templates/layout.mustache b/docs/templates/layout.mustache index 5f49bb62a1..832983e16a 100644 --- a/docs/templates/layout.mustache +++ b/docs/templates/layout.mustache @@ -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"> diff --git a/docs/templates/pages/base-css.mustache b/docs/templates/pages/base-css.mustache index 38dd5587ab..acb9cdcb2d 100644 --- a/docs/templates/pages/base-css.mustache +++ b/docs/templates/pages/base-css.mustache @@ -299,7 +299,7 @@ </div><!--/span--> <div class="span4"> <h2>Basic block</h2> - <p>{{_i}}Use <code><pre></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><pre></code> for multiple lines of code. Be sure to escape any angle brackets in the code for proper rendering.{{/i}}</p> <pre> <p>{{_i}}Sample text here...{{/i}}</p> </pre> @@ -309,6 +309,7 @@ </pre> </pre> <p>{{_i}}<strong>Note:</strong> Be sure to keep code within <code><pre></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"> +<form class="well"> + <label>{{_i}}Label name{{/i}}</label> + <input type="text" class="span3" placeholder="{{_i}}Type something…{{/i}}"> + <span class="help-inline">Associated help text!</span> + <label class="checkbox"> + <input type="checkbox"> {{_i}}Check me out{{/i}} + </label> + <button type="submit" class="btn">{{_i}}Submit{{/i}}</button> +</form> +</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"> +<form class="well form-search"> + <input type="text" class="input-medium search-query"> + <button type="submit" class="btn">{{_i}}Search{{/i}}</button> +</form> +</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"> +<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> +</form> +</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"> +<form class="form-horizontal"> + <fieldset> + <legend>{{_i}}Legend text{{/i}}</legend> + <div class="control-group"> + <label class="control-label" for="input01">{{_i}}Text input{{/i}}</label> + <div class="controls"> + <input type="text" class="input-xlarge" id="input01"> + <p class="help-block">{{_i}}Supporting help text{{/i}}</p> + </div> + </div> + </fieldset> +</form> +</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"> @@ -1031,6 +1075,15 @@ </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"> <div class="input-prepend"> @@ -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,35 +1190,40 @@ </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><a></code> and <code><button></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><a></code> and <code><button></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><button></code> and <code><a></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><button></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><button></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—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><a></code>, <code><button></code>, or <code><input></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"> +<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}}"> +</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><input type="submit"></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> diff --git a/docs/templates/pages/components.mustache b/docs/templates/pages/components.mustache index d7b3efcaef..1887b6f770 100644 --- a/docs/templates/pages/components.mustache +++ b/docs/templates/pages/components.mustache @@ -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><a></code> or <code><button></code> elements.{{/i}}</p> - <p>{{_i}}You can also combine sets of <code><div class="btn-group"></code> into a <code><div class="btn-toolbar"></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><a></code> or <code><button></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"> +<div class="btn-group"> + <a class="btn" href="#">1</a> + <a class="btn" href="#">2</a> + <a class="btn" href="#">3</a> +</div> +</pre> + <h3>{{_i}}Toolbar example{{/i}}</h3> + <p>{{_i}}Combine sets of <code><div class="btn-group"></code> into a <code><div class="btn-toolbar"></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"> -<div class="btn-group"> - <a class="btn" href="#">1</a> - <a class="btn" href="#">2</a> - <a class="btn" href="#">3</a> -</div> -</pre> - <p>{{_i}}And with a toolbar for multiple groups:{{/i}}</p> <pre class="prettyprint linenums"> <div class="btn-toolbar"> <div class="btn-group"> @@ -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—tabs, pills, and lists—<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><ul></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 @@ </div> </div> </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><body></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"> <div class="navbar navbar-fixed-top"> ... </div> </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><body></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 @@ <div class="navbar"> <div class="navbar-inner"> <div class="container"> - - <!-- .btn-navbar is used as the toggle for collapsed navbar content --> + + <!-- {{_i}}.btn-navbar is used as the toggle for collapsed navbar content{{/i}} --> <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </a> - - <!-- Be sure to leave the brand out there if you want it shown --> + + <!-- {{_i}}Be sure to leave the brand out there if you want it shown{{/i}} --> <a class="brand" href="#">{{_i}}Project name{{/i}}</a> - <!-- Everything you want hidden at 940px or less, place within here --> + <!-- {{_i}}Everything you want hidden at 940px or less, place within here{{/i}} --> <div class="nav-collapse"> <!-- .nav, .navbar-search, .navbar-form, etc --> </div> @@ -788,8 +804,18 @@ <li><a href="#">{{_i}}Link{{/i}}</a></li> </ul> </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"> +<ul class="nav"> + ... + <li class="divider-vertical"></li> + ... +</ul> +</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"> <ul class="nav"> <li class="dropdown"> @@ -805,7 +831,7 @@ </li> </ul> </pre> - <p><a class="btn" href="./javascript.html#dropdown">{{_i}}Get the javascript →{{/i}}</a></p> + <p><a class="btn" href="./javascript.html#dropdowns">{{_i}}Get the javascript →{{/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><span class="label label-success">{{/_i}}New{{/i}}</span></code> + <code><span class="label label-success">{{/_i}}Success{{/i}}</span></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"> +<div class="hero-unit"> + <h1>{{_i}}Heading{{/i}}</h1> + <p>{{_i}}Tagline{{/i}}</p> + <p> + <a class="btn btn-primary btn-large"> + {{_i}}Learn more{{/i}} + </a> + </p> +</div> +</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"> +<div class="page-haeder"> + <h1>{{_i}}Example page header{{/i}}</h1> +</div> +</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—no <code><p></code> is required by default, just the outter <code><div></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—no <code><p></code> is required by default, just the outer <code><div></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">×</a> + <a class="close" data-dismiss="alert">×</a> <strong>{{_i}}Warning!{{/i}}</strong> {{_i}}Best check yo self, you're not looking too good.{{/i}} </div> <pre class="prettyprint linenums"> <div class="alert"> - <a class="close">×</a> + <a class="close" data-dismiss="alert">×</a> <strong>{{_i}}Warning!{{/i}}</strong> {{_i}}Best check yo self, you're not looking too good.{{/i}} </div> </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">×</a> + <a class="close" data-dismiss="alert">×</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"> <div class="alert alert-block"> - <a class="close">×</a> + <a class="close" data-dismiss="alert">×</a> <h4 class="alert-heading">{{_i}}Warning!{{/i}}</h4> {{_i}}Best check yo self, you're not...{{/i}} </div> @@ -1248,7 +1323,7 @@ <div class="span4"> <h3>{{_i}}Error or danger{{/i}}</h3> <div class="alert alert-error"> - <a class="close">×</a> + <a class="close" data-dismiss="alert">×</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">×</a> + <a class="close" data-dismiss="alert">×</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">×</a> + <a class="close" data-dismiss="alert">×</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"> diff --git a/docs/templates/pages/download.mustache b/docs/templates/pages/download.mustache index f6d319d6ad..fe38d1450e 100644 --- a/docs/templates/pages/download.mustache +++ b/docs/templates/pages/download.mustache @@ -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> diff --git a/docs/templates/pages/index.mustache b/docs/templates/pages/index.mustache index f7cadc0814..c95e85362c 100644 --- a/docs/templates/pages/index.mustache +++ b/docs/templates/pages/index.mustache @@ -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 & changelog{{/i}}</a></li> <li class="divider">·</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">·</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—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—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"> diff --git a/docs/templates/pages/javascript.mustache b/docs/templates/pages/javascript.mustache index 57cb4eac42..ac989f3ed7 100644 --- a/docs/templates/pages/javascript.mustache +++ b/docs/templates/pages/javascript.mustache @@ -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—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"> -<div class="modal"> +<div class="modal" id="myModal"> <div class="modal-header"> <a class="close" data-dismiss="modal">×</a> <h3>Modal header</h3> @@ -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"> -<ul class="tabs"> +<ul class="nav nav-tabs"> <li><a href="#home" data-toggle="tab">{{_i}}Home{{/i}}</a></li> <li><a href="#profile" data-toggle="tab">{{_i}}Profile{{/i}}</a></li> <li><a href="#messages" data-toggle="tab">{{_i}}Messages{{/i}}</a></li> - <li><a href="#ettings" data-toggle="tab">{{_i}}Settings{{/i}}</a></li> + <li><a href="#settings" data-toggle="tab">{{_i}}Settings{{/i}}</a></li> </ul></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"> -<ul class="tabs"> +<ul class="nav nav-tabs"> <li class="active"><a href="#home">{{_i}}Home{{/i}}</a></li> <li><a href="#profile">{{_i}}Profile{{/i}}</a></li> <li><a href="#messages">{{_i}}Messages{{/i}}</a></li> @@ -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"> +<a href="#" rel="tooltip" title="{{_i}}first tooltip{{/i}}">{{_i}}hover over me{{/i}}</a> +</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"> -<!-- Add data-toggle="button" to activate toggling on a single button --> +<!-- {{_i}}Add data-toggle="button" to activate toggling on a single button{{/i}} --> <button class="btn" data-toggle="button">Single Toggle</button> -<!-- Add data-toggle="buttons-checkbox" for checkbox style toggling on btn-group --> +<!-- {{_i}}Add data-toggle="buttons-checkbox" for checkbox style toggling on btn-group{{/i}} --> <div class="btn-group" data-toggle="buttons-checkbox"> <button class="btn">Left</button> <button class="btn">Middle</button> <button class="btn">Right</button> </div> -<!-- Add data-toggle="buttons-radio" for radio style toggling on btn-group --> +<!-- {{_i}}Add data-toggle="buttons-radio" for radio style toggling on btn-group{{/i}} --> <div class="btn-group" data-toggle="buttons-radio"> <button class="btn">Left</button> <button class="btn">Middle</button> @@ -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"> -<div class="carousel"> - <!-- Carousel items --> +<div id="myCarousel" class="carousel"> + <!-- {{_i}}Carousel items{{/i}} --> <div class="carousel-inner"> - ... + <div class="active item">…</div> + <div class="item">…</div> + <div class="item">…</div> </div> - <!-- Carousel nav --> + <!-- {{_i}}Carousel nav{{/i}} --> <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a> <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a> </div> @@ -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>
\ No newline at end of file diff --git a/docs/templates/pages/less.mustache b/docs/templates/pages/less.mustache index 1bc9715d8a..742b166d27 100644 --- a/docs/templates/pages/less.mustache +++ b/docs/templates/pages/less.mustache @@ -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 --> diff --git a/docs/templates/pages/scaffolding.mustache b/docs/templates/pages/scaffolding.mustache index e20c524029..50c776e2de 100644 --- a/docs/templates/pages/scaffolding.mustache +++ b/docs/templates/pages/scaffolding.mustache @@ -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"> <div class="row"> @@ -126,8 +128,112 @@ </pre> </div> </div> +</section> + + + +<!-- 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}}Grid customization{{/i}}</h2> + <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"> +<div class="row-fluid"> + <div class="span4">...</div> + <div class="span8">...</div> +</div> +</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"> +<div class="row-fluid"> + <div class="span12"> + {{_i}}Level 1 of column{{/i}} + <div class="row-fluid"> + <div class="span6">{{_i}}Level 2{{/i}}</div> + <div class="span6">{{_i}}Level 2{{/i}}</div> + </div> + </div> +</div> +</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><div class="container"></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"> <body> @@ -203,9 +309,9 @@ <div class="span6"> <h2>{{_i}}Fluid layout{{/i}}</h2> <p>{{_i}}<code><div class="container-fluid"></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"> <div class="container-fluid"> @@ -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"><meta name="viewport" content="width=device-width, initial-scale=1.0"></pre> + <h3>{{_i}}What they do{{/i}}</h3> <p>{{_i}}Media queries allow for custom CSS based on a number of conditions—ratios, widths, display type, etc—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> diff --git a/docs/templates/pages/upgrading.mustache b/docs/templates/pages/upgrading.mustache index ab4b29812d..5a82e2dc98 100644 --- a/docs/templates/pages/upgrading.mustache +++ b/docs/templates/pages/upgrading.mustache @@ -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><ul></code>{{/i}}</li> + <li>{{_i}}Tabs and pills now require the use of a new base class, <code>.nav</code>, on their <code><ul></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—just add <code>.nav-stacked</code> to the <code><ul></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><span class="caret"></span></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> diff --git a/docs/upgrading.html b/docs/upgrading.html index 4d8328b7c2..f56f22545e 100644 --- a/docs/upgrading.html +++ b/docs/upgrading.html @@ -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><ul></code></li> + <li>Tabs and pills now require the use of a new base class, <code>.nav</code>, on their <code><ul></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—just add <code>.nav-stacked</code> to the <code><ul></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><span class="caret"></span></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> |