diff options
| author | Mark Otto <[email protected]> | 2013-01-12 14:16:49 -0800 |
|---|---|---|
| committer | Mark Otto <[email protected]> | 2013-01-12 14:16:49 -0800 |
| commit | a33d45f3082ac6db154aa6796eeb47a0f69f2249 (patch) | |
| tree | 0c09fb9e1247e838bcaf65fa121b15a611340c8f /docs | |
| parent | c11f41ba04791a0c408071527994dfb22c91a436 (diff) | |
| parent | 24f7df15e6a5b4b08201b3a6650340998f3ed381 (diff) | |
| download | bootstrap-a33d45f3082ac6db154aa6796eeb47a0f69f2249.tar.xz bootstrap-a33d45f3082ac6db154aa6796eeb47a0f69f2249.zip | |
Merge branch '3.0.0-wip' into bs3-flatten
Diffstat (limited to 'docs')
| -rw-r--r-- | docs/assets/css/bootstrap.css | 387 | ||||
| -rw-r--r-- | docs/components.html | 197 | ||||
| -rw-r--r-- | docs/css.html | 130 | ||||
| -rw-r--r-- | docs/extend.html | 306 | ||||
| -rw-r--r-- | docs/index.html | 3 | ||||
| -rw-r--r-- | docs/templates/pages/components.mustache | 193 | ||||
| -rw-r--r-- | docs/templates/pages/css.mustache | 130 | ||||
| -rw-r--r-- | docs/templates/pages/extend.mustache | 169 | ||||
| -rw-r--r-- | docs/templates/pages/index.mustache | 3 |
9 files changed, 323 insertions, 1195 deletions
diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css index f186dd736..fb7a75cbe 100644 --- a/docs/assets/css/bootstrap.css +++ b/docs/assets/css/bootstrap.css @@ -502,14 +502,6 @@ a.text-error:hover { color: #953b39; } -.text-info { - color: #3a87ad; -} - -a.text-info:hover { - color: #2d6987; -} - .text-success { color: #468847; } @@ -518,6 +510,18 @@ a.text-success:hover { color: #356635; } +.text-left { + text-align: left; +} + +.text-right { + text-align: right; +} + +.text-center { + text-align: center; +} + h1, h2, h3, @@ -1086,90 +1090,6 @@ textarea[class*="span"], margin-left: 0; } -.controls-row input.offset12, -textarea.offset12, -select.offset12, -uneditable-input.offset12 { - margin-left: 101.06382978723404%; -} - -.controls-row input.offset11, -textarea.offset11, -select.offset11, -uneditable-input.offset11 { - margin-left: 92.7304964539007%; -} - -.controls-row input.offset10, -textarea.offset10, -select.offset10, -uneditable-input.offset10 { - margin-left: 84.39716312056738%; -} - -.controls-row input.offset9, -textarea.offset9, -select.offset9, -uneditable-input.offset9 { - margin-left: 76.06382978723404%; -} - -.controls-row input.offset8, -textarea.offset8, -select.offset8, -uneditable-input.offset8 { - margin-left: 67.7304964539007%; -} - -.controls-row input.offset7, -textarea.offset7, -select.offset7, -uneditable-input.offset7 { - margin-left: 59.39716312056738%; -} - -.controls-row input.offset6, -textarea.offset6, -select.offset6, -uneditable-input.offset6 { - margin-left: 51.06382978723404%; -} - -.controls-row input.offset5, -textarea.offset5, -select.offset5, -uneditable-input.offset5 { - margin-left: 42.73049645390071%; -} - -.controls-row input.offset4, -textarea.offset4, -select.offset4, -uneditable-input.offset4 { - margin-left: 34.39716312056737%; -} - -.controls-row input.offset3, -textarea.offset3, -select.offset3, -uneditable-input.offset3 { - margin-left: 26.06382978723404%; -} - -.controls-row input.offset2, -textarea.offset2, -select.offset2, -uneditable-input.offset2 { - margin-left: 17.730496453900706%; -} - -.controls-row input.offset1, -textarea.offset1, -select.offset1, -uneditable-input.offset1 { - margin-left: 9.397163120567374%; -} - .input-append input[class*="span"], .input-append .uneditable-input[class*="span"], .input-prepend input[class*="span"], @@ -1184,25 +1104,6 @@ textarea[class*="span"], height: 34px; } -.controls-row:before, -.controls-row:after { - display: table; - content: " "; -} - -.controls-row:after { - clear: both; -} - -.controls-row [class*="span"] { - float: left; -} - -.controls-row .checkbox[class*="span"], -.controls-row .radio[class*="span"] { - padding-top: 5px; -} - input[disabled], select[disabled], textarea[disabled], @@ -1225,154 +1126,57 @@ fieldset[disabled] input[type="checkbox"] { background-color: transparent; } -.control-group.warning .control-label, -.control-group.warning .help-block, -.control-group.warning .help-inline { - color: #c09853; -} - -.control-group.warning .checkbox, -.control-group.warning .radio, -.control-group.warning input, -.control-group.warning select, -.control-group.warning textarea { +.has-warning .control-label { color: #c09853; } -.control-group.warning input, -.control-group.warning select, -.control-group.warning textarea { +.has-warning .input-with-feedback { + padding-right: 32px; border-color: #c09853; -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); } -.control-group.warning input:focus, -.control-group.warning select:focus, -.control-group.warning textarea:focus { +.has-warning .input-with-feedback:focus { border-color: #a47e3c; -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #dbc59e; box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #dbc59e; } -.control-group.warning .input-prepend .add-on, -.control-group.warning .input-append .add-on { - color: #c09853; - background-color: #fcf8e3; - border-color: #c09853; -} - -.control-group.error .control-label, -.control-group.error .help-block, -.control-group.error .help-inline { +.has-error .control-label { color: #b94a48; } -.control-group.error .checkbox, -.control-group.error .radio, -.control-group.error input, -.control-group.error select, -.control-group.error textarea { - color: #b94a48; -} - -.control-group.error input, -.control-group.error select, -.control-group.error textarea { +.has-error .input-with-feedback { + padding-right: 32px; border-color: #b94a48; -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); } -.control-group.error input:focus, -.control-group.error select:focus, -.control-group.error textarea:focus { +.has-error .input-with-feedback:focus { border-color: #953b39; -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #d59392; box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #d59392; } -.control-group.error .input-prepend .add-on, -.control-group.error .input-append .add-on { - color: #b94a48; - background-color: #f2dede; - border-color: #b94a48; -} - -.control-group.success .control-label, -.control-group.success .help-block, -.control-group.success .help-inline { +.has-success .control-label { color: #468847; } -.control-group.success .checkbox, -.control-group.success .radio, -.control-group.success input, -.control-group.success select, -.control-group.success textarea { - color: #468847; -} - -.control-group.success input, -.control-group.success select, -.control-group.success textarea { +.has-success .input-with-feedback { + padding-right: 32px; border-color: #468847; -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); } -.control-group.success input:focus, -.control-group.success select:focus, -.control-group.success textarea:focus { +.has-success .input-with-feedback:focus { border-color: #356635; -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #7aba7b; box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #7aba7b; } -.control-group.success .input-prepend .add-on, -.control-group.success .input-append .add-on { - color: #468847; - background-color: #dff0d8; - border-color: #468847; -} - -.control-group.info .control-label, -.control-group.info .help-block, -.control-group.info .help-inline { - color: #3a87ad; -} - -.control-group.info .checkbox, -.control-group.info .radio, -.control-group.info input, -.control-group.info select, -.control-group.info textarea { - color: #3a87ad; -} - -.control-group.info input, -.control-group.info select, -.control-group.info textarea { - border-color: #3a87ad; - -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); - box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); -} - -.control-group.info input:focus, -.control-group.info select:focus, -.control-group.info textarea:focus { - border-color: #2d6987; - -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #7ab5d3; - box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #7ab5d3; -} - -.control-group.info .input-prepend .add-on, -.control-group.info .input-append .add-on { - color: #3a87ad; - background-color: #d9edf7; - border-color: #3a87ad; -} - input:focus:invalid, textarea:focus:invalid, select:focus:invalid { @@ -1526,6 +1330,39 @@ select:focus:invalid:focus { border-radius: 0 4px 4px 0; } +.form-horizontal .control-group { + position: relative; + margin-bottom: 20px; +} + +.form-horizontal .control-group:before, +.form-horizontal .control-group:after { + display: table; + content: " "; +} + +.form-horizontal .control-group:after { + clear: both; +} + +.form-horizontal .control-group input, +.form-horizontal .control-group select, +.form-horizontal .control-group textarea, +.form-horizontal .control-group .uneditable-input { + margin-bottom: 0; +} + +.form-horizontal .control-group > .control-label { + float: left; + width: 160px; + padding-top: 6px; + text-align: right; +} + +.form-horizontal .control-group > .controls { + margin-left: 180px; +} + table { max-width: 100%; background-color: transparent; @@ -3196,10 +3033,6 @@ fieldset[disabled] .btn-link:hover { clear: both; } -.tab-content { - overflow: auto; -} - .tab-content > .tab-pane, .pill-content > .pill-pane { display: none; @@ -3755,24 +3588,19 @@ fieldset[disabled] .navbar-inverse .btn-navbar { } .pagination { - margin: 20px 0; -} - -.pagination ul { display: inline-block; - margin-bottom: 0; - margin-left: 0; + margin: 20px 0; border-radius: 4px; -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); } -.pagination ul > li { +.pagination > li { display: inline; } -.pagination ul > li > a, -.pagination ul > li > span { +.pagination > li > a, +.pagination > li > span { float: left; padding: 4px 12px; line-height: 20px; @@ -3782,89 +3610,81 @@ fieldset[disabled] .navbar-inverse .btn-navbar { border-left-width: 0; } -.pagination ul > li > a:hover, -.pagination ul > .active > a, -.pagination ul > .active > span { +.pagination > li > a:hover, +.pagination > .active > a, +.pagination > .active > span { background-color: #f5f5f5; } -.pagination ul > .active > a, -.pagination ul > .active > span { +.pagination > .active > a, +.pagination > .active > span { color: #999999; cursor: default; } -.pagination ul > .disabled > span, -.pagination ul > .disabled > a, -.pagination ul > .disabled > a:hover { +.pagination > .disabled > span, +.pagination > .disabled > a, +.pagination > .disabled > a:hover { color: #999999; cursor: default; background-color: transparent; } -.pagination ul > li:first-child > a, -.pagination ul > li:first-child > span { +.pagination > li:first-child > a, +.pagination > li:first-child > span { border-left-width: 1px; border-bottom-left-radius: 4px; border-top-left-radius: 4px; } -.pagination ul > li:last-child > a, -.pagination ul > li:last-child > span { +.pagination > li:last-child > a, +.pagination > li:last-child > span { border-top-right-radius: 4px; border-bottom-right-radius: 4px; } -.pagination-centered { - text-align: center; -} - -.pagination-right { - text-align: right; -} - -.pagination-large ul > li > a, -.pagination-large ul > li > span { +.pagination-large > li > a, +.pagination-large > li > span { padding: 11px 19px; font-size: 17.5px; } -.pagination-large ul > li:first-child > a, -.pagination-large ul > li:first-child > span { +.pagination-large > li:first-child > a, +.pagination-large > li:first-child > span { border-bottom-left-radius: 6px; border-top-left-radius: 6px; } -.pagination-large ul > li:last-child > a, -.pagination-large ul > li:last-child > span { +.pagination-large > li:last-child > a, +.pagination-large > li:last-child > span { border-top-right-radius: 6px; border-bottom-right-radius: 6px; } -.pagination-mini ul > li:first-child > a, -.pagination-small ul > li:first-child > a, -.pagination-mini ul > li:first-child > span, -.pagination-small ul > li:first-child > span { +.pagination-mini > li:first-child > a, +.pagination-small > li:first-child > a, +.pagination-mini > li:first-child > span, +.pagination-small > li:first-child > span { border-bottom-left-radius: 3px; border-top-left-radius: 3px; } -.pagination-mini ul > li:last-child > a, -.pagination-small ul > li:last-child > a, -.pagination-mini ul > li:last-child > span, -.pagination-small ul > li:last-child > span { +.pagination-mini > li:last-child > a, +.pagination-small > li:last-child > a, +.pagination-mini > li:last-child > span, +.pagination-small > li:last-child > span { border-top-right-radius: 3px; border-bottom-right-radius: 3px; } -.pagination-small ul > li > a, -.pagination-small ul > li > span { +.pagination-small > li > a, +.pagination-small > li > span { padding: 2px 10px; font-size: 11.9px; } -.pagination-mini ul > li > a, -.pagination-mini ul > li > span { +.pagination-mini > li > a, +.pagination-mini > li > span { padding: 0 6px; font-size: 10.5px; } @@ -4365,22 +4185,6 @@ a.badge:hover { background-color: #356635; } -.badge-info { - background-color: #3a87ad; -} - -.badge-info[href] { - background-color: #2d6987; -} - -.badge-inverse { - background-color: #333333; -} - -.badge-inverse[href] { - background-color: #1a1a1a; -} - .btn .badge { position: relative; top: -1px; @@ -4860,11 +4664,6 @@ a.badge:hover { position: fixed; } -.control-block-level { - display: block; - width: 100%; -} - @-ms-viewport { width: device-width; } @@ -5149,7 +4948,6 @@ a.badge:hover { select[class*="span"], textarea[class*="span"], .uneditable-input { - display: block; width: 100%; } .input-prepend input, @@ -5159,9 +4957,6 @@ a.badge:hover { display: inline-block; width: auto; } - .controls-row [class*="span"] + [class*="span"] { - margin-left: 0; - } .modal { position: fixed; top: 20px; diff --git a/docs/components.html b/docs/components.html index 4f49688f5..20ac32133 100644 --- a/docs/components.html +++ b/docs/components.html @@ -1189,29 +1189,25 @@ <h2>Standard pagination</h2> <p>Simple pagination inspired by Rdio, great for apps and search results. The large block is hard to miss, easily scalable, and provides large click areas.</p> <div class="bs-docs-example"> - <div class="pagination"> - <ul> - <li><a href="#">«</a></li> - <li><a href="#">1</a></li> - <li><a href="#">2</a></li> - <li><a href="#">3</a></li> - <li><a href="#">4</a></li> - <li><a href="#">5</a></li> - <li><a href="#">»</a></li> - </ul> - </div> + <ul class="pagination"> + <li><a href="#">«</a></li> + <li><a href="#">1</a></li> + <li><a href="#">2</a></li> + <li><a href="#">3</a></li> + <li><a href="#">4</a></li> + <li><a href="#">5</a></li> + <li><a href="#">»</a></li> + </ul> </div> <pre class="prettyprint linenums"> -<div class="pagination"> - <ul> - <li><a href="#">Prev</a></li> - <li><a href="#">1</a></li> - <li><a href="#">2</a></li> - <li><a href="#">3</a></li> - <li><a href="#">4</a></li> - <li><a href="#">Next</a></li> - </ul> -</div> +<ul class="pagination"> + <li><a href="#">Prev</a></li> + <li><a href="#">1</a></li> + <li><a href="#">2</a></li> + <li><a href="#">3</a></li> + <li><a href="#">4</a></li> + <li><a href="#">Next</a></li> +</ul> </pre> @@ -1223,43 +1219,37 @@ <h3>Disabled and active states</h3> <p>Links are customizable for different circumstances. Use <code>.disabled</code> for unclickable links and <code>.active</code> to indicate the current page.</p> <div class="bs-docs-example"> - <div class="pagination pagination-centered"> - <ul> - <li class="disabled"><a href="#">«</a></li> - <li class="active"><a href="#">1</a></li> - <li><a href="#">2</a></li> - <li><a href="#">3</a></li> - <li><a href="#">4</a></li> - <li><a href="#">5</a></li> - <li><a href="#">»</a></li> - </ul> - </div> - </div> -<pre class="prettyprint linenums"> -<div class="pagination"> - <ul> - <li class="disabled"><a href="#">Prev</a></li> - <li class="active"><a href="#">1</a></li> - ... - </ul> -</div> + <ul class="pagination"> + <li class="disabled"><a href="#">«</a></li> + <li class="active"><a href="#">1</a></li> + <li><a href="#">2</a></li> + <li><a href="#">3</a></li> + <li><a href="#">4</a></li> + <li><a href="#">5</a></li> + <li><a href="#">»</a></li> + </ul> + </div> +<pre class="prettyprint linenums"> +<ul class="pagination"> + <li class="disabled"><a href="#">Prev</a></li> + <li class="active"><a href="#">1</a></li> + ... +</ul> </pre> <p>You can optionally swap out active or disabled anchors for spans to remove click functionality while retaining intended styles.</p> <pre class="prettyprint linenums"> -<div class="pagination"> - <ul> - <li class="disabled"><span>Prev</span></li> - <li class="active"><span>1</span></li> - ... - </ul> -</div> +<ul class="pagination"> + <li class="disabled"><span>Prev</span></li> + <li class="active"><span>1</span></li> + ... +</ul> </pre> <h3>Sizes</h3> <p>Fancy larger or smaller pagination? Add <code>.pagination-large</code>, <code>.pagination-small</code>, or <code>.pagination-mini</code> for additional sizes.</p> <div class="bs-docs-example"> - <div class="pagination pagination-large"> - <ul> + <div> + <ul class="pagination pagination-large"> <li><a href="#">«</a></li> <li><a href="#">1</a></li> <li><a href="#">2</a></li> @@ -1269,19 +1259,8 @@ <li><a href="#">»</a></li> </ul> </div> - <div class="pagination"> - <ul> - <li><a href="#">«</a></li> - <li><a href="#">1</a></li> - <li><a href="#">2</a></li> - <li><a href="#">3</a></li> - <li><a href="#">4</a></li> - <li><a href="#">5</a></li> - <li><a href="#">»</a></li> - </ul> - </div> - <div class="pagination pagination-small"> - <ul> + <div> + <ul class="pagination"> <li><a href="#">«</a></li> <li><a href="#">1</a></li> <li><a href="#">2</a></li> @@ -1291,8 +1270,8 @@ <li><a href="#">»</a></li> </ul> </div> - <div class="pagination pagination-mini"> - <ul> + <div> + <ul class="pagination pagination-small"> <li><a href="#">«</a></li> <li><a href="#">1</a></li> <li><a href="#">2</a></li> @@ -1302,53 +1281,8 @@ <li><a href="#">»</a></li> </ul> </div> - </div> -<pre class="prettyprint linenums"> -<div class="pagination pagination-large"> - <ul> - ... - </ul> -</div> -<div class="pagination"> - <ul> - ... - </ul> -</div> -<div class="pagination pagination-small"> - <ul> - ... - </ul> -</div> -<div class="pagination pagination-mini"> - <ul> - ... - </ul> -</div> -</pre> - - <h3>Alignment</h3> - <p>Add one of two optional classes to change the alignment of pagination links: <code>.pagination-centered</code> and <code>.pagination-right</code>.</p> - <div class="bs-docs-example"> - <div class="pagination pagination-centered"> - <ul> - <li><a href="#">«</a></li> - <li><a href="#">1</a></li> - <li><a href="#">2</a></li> - <li><a href="#">3</a></li> - <li><a href="#">4</a></li> - <li><a href="#">5</a></li> - <li><a href="#">»</a></li> - </ul> - </div> - </div> -<pre class="prettyprint linenums"> -<div class="pagination pagination-centered"> - ... -</div> -</pre> - <div class="bs-docs-example"> - <div class="pagination pagination-right"> - <ul> + <div> + <ul class="pagination pagination-mini"> <li><a href="#">«</a></li> <li><a href="#">1</a></li> <li><a href="#">2</a></li> @@ -1360,9 +1294,18 @@ </div> </div> <pre class="prettyprint linenums"> -<div class="pagination pagination-right"> +<ul class="pagination pagination-large"> ... -</div> +</ul> +<ul class="pagination"> + ... +</ul> +<ul class="pagination pagination-small"> + ... +</ul> +<ul class="pagination pagination-mini"> + ... +</ul> </pre> @@ -1478,7 +1421,7 @@ </tr> <tr> <td> - Important + Danger </td> <td> <span class="badge badge-danger">6</span> @@ -1487,28 +1430,6 @@ <code><span class="badge badge-danger">6</span></code> </td> </tr> - <tr> - <td> - Info - </td> - <td> - <span class="badge badge-info">8</span> - </td> - <td> - <code><span class="badge badge-info">8</span></code> - </td> - </tr> - <tr> - <td> - Inverse - </td> - <td> - <span class="badge badge-inverse">10</span> - </td> - <td> - <code><span class="badge badge-inverse">10</span></code> - </td> - </tr> </tbody> </table> @@ -2138,7 +2059,7 @@ class="muted" </pre> <h4>.clearfix</h4> - <p>Clear the <code>float</code> on any element.</p> + <p>Clear the <code>float</code> on any element. Utilizes <a href="http://nicolasgallagher.com/micro-clearfix-hack/">the micro clearfix</a> as popularized by Nicolas Gallagher.</p> <pre class="prettyprint linenums"> class="clearfix" </pre> diff --git a/docs/css.html b/docs/css.html index a3133026d..65c876b2b 100644 --- a/docs/css.html +++ b/docs/css.html @@ -305,20 +305,31 @@ <p>Feel free to use <code><b></code> and <code><i></code> in HTML5. <code><b></code> is meant to highlight words or phrases without conveying additional importance while <code><i></code> is mostly for voice, technical terms, etc.</p> + <h3>Alignment classes</h3> + <p>Easily realign text to components with text alignment classes.</p> + <div class="bs-docs-example"> + <p class="text-left">Left aligned text.</p> + <p class="text-center">Center aligned text.</p> + <p class="text-right">Right aligned text.</p> + </div> +<pre class="prettyprint linenums"> +<p class="text-left">Left aligned text.</p> +<p class="text-center">Center aligned text.</p> +<p class="text-right">Right aligned text.</p> +</pre> + <h3>Emphasis classes</h3> <p>Convey meaning through color with a handful of emphasis utility classes.</p> <div class="bs-docs-example"> <p class="muted">Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.</p> <p class="text-warning">Etiam porta sem malesuada magna mollis euismod.</p> <p class="text-error">Donec ullamcorper nulla non metus auctor fringilla.</p> - <p class="text-info">Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis.</p> <p class="text-success">Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p> </div> <pre class="prettyprint linenums"> <p class="muted">Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.</p> <p class="text-warning">Etiam porta sem malesuada magna mollis euismod.</p> <p class="text-error">Donec ullamcorper nulla non metus auctor fringilla.</p> -<p class="text-info">Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis.</p> <p class="text-success">Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p> </pre> @@ -1468,17 +1479,6 @@ For example, <code>&lt;section&gt;</code> should be wrapped <h3 id="forms-extending-sizes">Control sizing</h3> <p>Use relative sizing classes like <code>.input-large</code> or match your inputs to the grid column sizes using <code>.span*</code> classes.</p> - <h4>Block level inputs</h4> - <p>Make any <code><input></code> or <code><textarea></code> element behave like a block level element.</p> - <form class="bs-docs-example" style="padding-bottom: 15px;"> - <div class="controls"> - <input class="input-block-level" type="text" placeholder=".input-block-level"> - </div> - </form> -<pre class="prettyprint linenums"> -<input class="input-block-level" type="text" placeholder=".input-block-level"> -</pre> - <h4>Relative sizing</h4> <p>Create larger or smaller form controls that match button sizes.</p> <form class="bs-docs-example" style="padding-bottom: 15px;"> @@ -1538,38 +1538,32 @@ For example, <code>&lt;section&gt;</code> should be wrapped ... </select> </pre> - - <p>For multiple grid inputs per line, <strong>use the <code>.controls-row</code> modifier class for proper spacing</strong>. It floats the inputs to collapse white-space, sets the proper margins, and the clears the float.</p> + <p>If you need multiple inputs on the same line, wrap them in the standard grid markup (with <code>.row</code> and <code>.span*</code> classes). Each input should have it's own column and will expand to fill the available width automatically.</p> <form class="bs-docs-example" style="padding-bottom: 15px;"> - <div class="controls controls-row"> - <input class="span5" type="text" placeholder=".span5"> - </div> - <div class="controls controls-row"> - <input class="span4" type="text" placeholder=".span4"> - <input class="span1" type="text" placeholder=".span1"> - </div> - <div class="controls controls-row"> - <input class="span3" type="text" placeholder=".span3"> - <input class="span2" type="text" placeholder=".span2"> - </div> - <div class="controls controls-row"> - <input class="span2" type="text" placeholder=".span2"> - <input class="span3" type="text" placeholder=".span3"> - </div> - <div class="controls controls-row"> - <input class="span1" type="text" placeholder=".span1"> - <input class="span4" type="text" placeholder=".span4"> + <div class="row"> + <div class="span4"> + <input type="text" placeholder=".span4"> + </div> + <div class="span4"> + <input type="text" placeholder=".span4"> + </div> + <div class="span4"> + <input type="text" placeholder=".span4"> + </div> </div> </form> <pre class="prettyprint linenums"> -<div class="controls"> - <input class="span5" type="text" placeholder=".span5"> -</div> -<div class="controls controls-row"> - <input class="span4" type="text" placeholder=".span4"> - <input class="span1" type="text" placeholder=".span1"> +<div class="row"> + <div class="span4"> + <input type="text" placeholder=".span4"> + </div> + <div class="span4"> + <input type="text" placeholder=".span4"> + </div> + <div class="span4"> + <input type="text" placeholder=".span4"> + </div> </div> -... </pre> <h3>Uneditable inputs</h3> @@ -1622,7 +1616,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped <h2>Form control states</h2> <p>Provide feedback to users or visitors with basic feedback states on form controls and labels.</p> - <h3>Input focus</h3> + <h3 id="forms-input-focus">Input focus</h3> <p>We remove the default <code>outline</code> styles on some form controls and apply a <code>box-shadow</code> in its place for <code>:focus</code>.</p> <form class="bs-docs-example form-inline"> <input class="input-xlarge focused" id="focusedInput" type="text" value="This is focused..."> @@ -1631,8 +1625,8 @@ For example, <code>&lt;section&gt;</code> should be wrapped <input class="input-xlarge" id="focusedInput" type="text" value="This is focused..."> </pre> - <h3>Invalid inputs</h3> - <p>Style inputs via default browser functionality with <code>:invalid</code>. Specify a <code>type</code> and add the <code>required</code> attribute.</p> + <h3 id="forms-invalid-inputs">Invalid inputs</h3> + <p>Style inputs via default browser functionality with <code>:invalid</code>. Specify a <code>type</code>, add the <code>required</code> attribute if the field is not optional, and (if applicable) specify a <code>pattern</code>.</p> <form class="bs-docs-example form-inline"> <input class="span3" type="email" placeholder="[email protected]" required> </form> @@ -1640,7 +1634,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped <input class="span3" type="email" required> </pre> - <h3>Disabled inputs</h3> + <h3 id="forms-disabled-inputs">Disabled inputs</h3> <p>Add the <code>disabled</code> attribute on an input to prevent user input and trigger a slightly different look.</p> <form class="bs-docs-example form-inline"> <input class="input-xlarge" id="disabledInput" type="text" placeholder="Disabled input here…" disabled> @@ -1649,7 +1643,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped <input class="input-xlarge" id="disabledInput" type="text" placeholder="Disabled input here..." disabled> </pre> - <h3>Disabled fieldsets</h3> + <h3 id="forms-disabled-fieldsets">Disabled fieldsets</h3> <p>Add the <code>disabled</code> attribute to a <code><fieldset></code> to disable all the controls within the <code><fieldset></code> at once. Link buttons (with the <code><a></code> element) will be aesthetically disabled, but you will need custom JavaScript to disable their behavior.</p> <form class="bs-docs-example form-inline"> <fieldset disabled> @@ -1686,59 +1680,51 @@ For example, <code>&lt;section&gt;</code> should be wrapped </form> </pre> - <h3>Validation states</h3> - <p>Bootstrap includes validation styles for error, warning, info, and success messages. To use, add the appropriate class to the surrounding <code>.control-group</code>.</p> + <h3 id="forms-validation">Validation states</h3> + <p>Bootstrap includes validation styles for error, warning, info, and success messages. To use:</p> + <ul> + <li>Add <code>.has-warning</code>, <code>.has-error</code>, or <code>.has-success</code> to the parent element</li> + <li>Add .input-with-feedback to the field(s) in question</li> + </ul> + <p>Validation styles are applied on a per-input basis. With horizontal forms, the <code><label class="control-label"></code> will always be styled.</p> <form class="bs-docs-example form-horizontal"> - <div class="control-group warning"> + <div class="control-group has-warning"> <label class="control-label" for="inputWarning">Input with warning</label> <div class="controls"> - <input type="text" id="inputWarning"> - <span class="help-inline">Something may have gone wrong</span> + <input type="text" class="input-with-feedback" id="inputWarning"> </div> </div> - <div class="control-group error"> + <div class="control-group has-error"> <label class="control-label" for="inputError">Input with error</label> <div class="controls"> - <input type="text" id="inputError"> - <span class="help-inline">Please correct the error</span> - </div> - </div> - <div class="control-group info"> - <label class="control-label" for="inputInfo">Input with info</label> - <div class="controls"> - <input type="text" id="inputInfo"> - <span class="help-inline">Username is taken</span> + <input type="text" class="input-with-feedback" id="inputError"> </div> </div> - <div class="control-group success"> + <div class="control-group has-success"> <label class="control-label" for="inputSuccess">Input with success</label> <div class="controls"> - <input type="text" id="inputSuccess"> - <span class="help-inline">Woohoo!</span> + <input type="text" class="input-with-feedback" id="inputSuccess"> </div> </div> </form> <pre class="prettyprint linenums"> -<div class="control-group warning"> +<div class="control-group has-warning"> <label class="control-label" for="inputWarning">Input with warning</label> <div class="controls"> - <input type="text" id="inputWarning"> - <span class="help-inline">Something may have gone wrong</span> + <input type="text" class="input-with-feedback" id="inputWarning"> </div> </div> -<div class="control-group error"> +<div class="control-group has-error"> <label class="control-label" for="inputError">Input with error</label> <div class="controls"> - <input type="text" id="inputError"> - <span class="help-inline">Please correct the error</span> + <input type="text" class="input-with-feedback" id="inputError"> </div> </div> -<div class="control-group success"> +<div class="control-group has-success"> <label class="control-label" for="inputSuccess">Input with success</label> <div class="controls"> - <input type="text" id="inputSuccess"> - <span class="help-inline">Woohoo!</span> + <input type="text" class="input-with-feedback id="inputSuccess""> </div> </div> </pre> diff --git a/docs/extend.html b/docs/extend.html deleted file mode 100644 index ca482feec..000000000 --- a/docs/extend.html +++ /dev/null @@ -1,306 +0,0 @@ -<!DOCTYPE html> -<html lang="en"> - <head> - <meta charset="utf-8"> - <title>Extend · Bootstrap</title> - <meta name="viewport" content="width=device-width, initial-scale=1.0"> - <meta name="description" content=""> - <meta name="author" content=""> - - <!-- Le styles --> - <link href="assets/css/bootstrap.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="apple-touch-icon-precomposed" sizes="144x144" href="assets/ico/apple-touch-icon-144-precomposed.png"> - <link rel="apple-touch-icon-precomposed" sizes="114x114" href="assets/ico/apple-touch-icon-114-precomposed.png"> - <link rel="apple-touch-icon-precomposed" sizes="72x72" href="assets/ico/apple-touch-icon-72-precomposed.png"> - <link rel="apple-touch-icon-precomposed" href="assets/ico/apple-touch-icon-57-precomposed.png"> - <link rel="shortcut icon" href="assets/ico/favicon.png"> - - </head> - - <body data-spy="scroll" data-target=".bs-docs-sidebar"> - - <!-- Navbar - ================================================== --> - <div class="navbar navbar-inverse navbar-fixed-top"> - <div class="container"> - <button type="button" 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> - </button> - <a class="brand" href="./index.html">Bootstrap</a> - <div class="nav-collapse collapse"> - <ul class="nav"> - <li class=""> - <a href="./index.html">Home</a> - </li> - <li class=""> - <a href="./getting-started.html">Get started</a> - </li> - <li class=""> - <a href="./css.html">Core CSS</a> - </li> - <li class=""> - <a href="./components.html">Components</a> - </li> - <li class=""> - <a href="./javascript.html">JavaScript</a> - </li> - <li class=""> - <a href="./customize.html">Customize</a> - </li> - <li class=""> - <a href="./gallery.html">Gallery</a> - </li> - </ul> - </div> - </div> - </div> - -<!-- Subhead -================================================== --> -<header class="bs-docs-jumbotron subhead"> - <div class="container"> - <h1>Extending Bootstrap</h1> - <p class="lead">Extend Bootstrap to take advantage of included styles and components, as well as LESS variables and mixins.</p> - <div> -</header> - - <div class="container"> - - <!-- Docs nav - ================================================== --> - <div class="row"> - <div class="span3 bs-docs-sidebar"> - <ul class="nav nav-list bs-docs-sidenav"> - <li><a href="#built-with-less"><i class="glyphicon-chevron-right"></i> Built with LESS</a></li> - <li><a href="#compiling"><i class="glyphicon-chevron-right"></i> Compiling Bootstrap</a></li> - <li><a href="#static-assets"><i class="glyphicon-chevron-right"></i> Use as static assets</a></li> - </ul> - </div> - <div class="span9"> - - - - <!-- BUILT WITH LESS - ================================================== --> - <section id="built-with-less"> - <div class="page-header"> - <h1>Built with LESS</h1> - </div> - - <img style="float: right; height: 36px; margin: 10px 20px 20px" src="assets/img/less-logo-large.png" alt="LESS CSS"> - <p class="lead">Bootstrap is made with LESS at its core, a dynamic stylesheet language created by our good friend, <a href="http://cloudhead.io">Alexis Sellier</a>. It makes developing systems-based CSS faster, easier, and more fun.</p> - - <h3>Why LESS?</h3> - <p>One of Bootstrap's creators wrote a quick <a href="http://www.wordsbyf.at/2012/03/08/why-less/">blog post about this</a>, summarized here:</p> - <ul> - <li>Bootstrap compiles faster ~6x faster with Less compared to Sass</li> - <li>Less is written in JavaScript, making it easier to us to dive in and patch compared to Ruby with Sass.</li> - <li>Less is more; we want to feel like we're writing CSS and making Bootstrap approachable to all.</li> - </ul> - - <h3>What's included?</h3> - <p>As an extension of CSS, LESS includes variables, mixins for reusable snippets of code, operations for simple math, nesting, and even color functions.</p> - - <h3>Learn more</h3> - <p>Visit the official website at <a href="http://lesscss.org">http://lesscss.org</a> to learn more.</p> - </section> - - - - <!-- COMPILING LESS AND BOOTSTRAP - ================================================== --> - <section id="compiling"> - <div class="page-header"> - <h1>Compiling Bootstrap with Less</h1> - </div> - - <p class="lead">Since our CSS is written with Less and utilizes variables and mixins, it needs to be compiled for final production implementation. Here's how.</p> - - <div class="alert alert-info"> - <strong>Note:</strong> If you're submitting a pull request to GitHub with modified CSS, you <strong>must</strong> recompile the CSS via any of these methods. - </div> - - <h2>Tools for compiling</h2> - - <h3>Node with makefile</h3> - <p>Install the LESS command line compiler, JSHint, Recess, and uglify-js globally with npm by running the following command:</p> - <pre>$ npm install -g less jshint recess uglify-js</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> - - <h3>Command line</h3> - <p>Install the LESS command line tool via Node and run the following command:</p> - <pre>$ lessc ./less/bootstrap.less > bootstrap.css</pre> - <p>Be sure to include <code>--compress</code> in that command if you're trying to save some bytes!</p> - - <h3>JavaScript</h3> - <p><a href="http://lesscss.org/">Download the latest Less.js</a> and include the path to it (and Bootstrap) in the <code><head></code>.</p> -<pre class="prettyprint"> -<link rel="stylesheet/less" href="/path/to/bootstrap.less"> -<script src="/path/to/less.js"></script> -</pre> - <p>To recompile the .less files, just save them and reload your page. Less.js compiles them and stores them in local storage.</p> - - <h3>Unofficial Mac app</h3> - <p><a href="http://incident57.com/less/">The unofficial Mac app</a> watches directories of .less files and compiles the code to local files after every save of a watched .less file. If you like, you can toggle preferences in the app for automatic minifying and which directory the compiled files end up in.</p> - - <h3>More apps</h3> - <h4><a href="http://crunchapp.net/" target="_blank">Crunch</a></h4> - <p>Crunch is a great looking LESS editor and compiler built on Adobe Air.</p> - <h4><a href="http://incident57.com/codekit/" target="_blank">CodeKit</a></h4> - <p>Created by the same guy as the unofficial Mac app, CodeKit is a Mac app that compiles LESS, SASS, Stylus, and CoffeeScript.</p> - <h4><a href="http://wearekiss.com/simpless" target="_blank">Simpless</a></h4> - <p>Mac, Linux, and Windows app for drag and drop compiling of LESS files. Plus, the <a href="https://github.com/Paratron/SimpLESS" target="_blank">source code is on GitHub</a>.</p> - - </section> - - - - <!-- Static assets - ================================================== --> - <section id="static-assets"> - <div class="page-header"> - <h1>Use as static assets</h1> - </div> - <p class="lead"><a href="./getting-started.html">Quickly start</a> any web project by dropping in the compiled or minified CSS and JS. Layer on custom styles separately for easy upgrades and maintenance moving forward.</p> - - <h3>Setup file structure</h3> - <p>Download the latest compiled Bootstrap and place into your project. For example, you might have something like this:</p> -<pre> - <span class="icon-folder-open"></span> app/ - <span class="icon-folder-open"></span> layouts/ - <span class="icon-folder-open"></span> templates/ - <span class="icon-folder-open"></span> public/ - <span class="icon-folder-open"></span> css/ - <span class="icon-file"></span> bootstrap.min.css - <span class="icon-folder-open"></span> js/ - <span class="icon-file"></span> bootstrap.min.js - <span class="icon-folder-open"></span> img/ - <span class="icon-file"></span> glyphicons-halflings.png - <span class="icon-file"></span> glyphicons-halflings-white.png -</pre> - - <h3>Utilize starter template</h3> - <p>Copy the following base HTML to get started.</p> -<pre class="prettyprint linenums"> -<html> - <head> - <title>Bootstrap 101 Template</title> - <!-- Bootstrap --> - <link href="public/css/bootstrap.min.css" rel="stylesheet"> - </head> - <body> - <h1>Hello, world!</h1> - <!-- Bootstrap --> - <script src="public/js/bootstrap.min.js"></script> - </body> -</html> -</pre> - - <h3>Layer on custom code</h3> - <p>Work in your custom CSS, JS, and more as necessary to make Bootstrap your own with your own separate CSS and JS files.</p> -<pre class="prettyprint linenums"> -<html> - <head> - <title>Bootstrap 101 Template</title> - <!-- Bootstrap --> - <link href="public/css/bootstrap.min.css" rel="stylesheet"> - <!-- Project --> - <link href="public/css/application.css" rel="stylesheet"> - </head> - <body> - <h1>Hello, world!</h1> - <!-- Bootstrap --> - <script src="public/js/bootstrap.min.js"></script> - <!-- Project --> - <script src="public/js/application.js"></script> - </body> -</html> -</pre> - - </section> - - </div> - </div> - - </div> - - - - <!-- Footer - ================================================== --> - <footer class="footer"> - <div class="container"> - - <div class="bs-docs-social"> - <ul class="bs-docs-social-buttons"> - <li> - <iframe class="github-btn" src="http://ghbtns.com/github-btn.html?user=twitter&repo=bootstrap&type=watch&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="100px" height="20px"></iframe> - </li> - <li> - <iframe class="github-btn" src="http://ghbtns.com/github-btn.html?user=twitter&repo=bootstrap&type=fork&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="102px" height="20px"></iframe> - </li> - <li class="follow-btn"> - <a href="https://twitter.com/twbootstrap" class="twitter-follow-button" 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> - </li> - </ul> - </div> - - - <p>Designed and built with all the love in the world by <a href="http://twitter.com/mdo" target="_blank">@mdo</a> and <a href="http://twitter.com/fat" target="_blank">@fat</a>.</p> - <p>Code licensed under <a href="http://www.apache.org/licenses/LICENSE-2.0" target="_blank">Apache License v2.0</a>, documentation under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.</p> - <p><a href="http://glyphicons.com">Glyphicons Free</a> licensed under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.</p> - <ul class="footer-links"> - <li><a href="http://blog.getbootstrap.com">Blog</a></li> - <li class="muted">·</li> - <li><a href="https://github.com/twitter/bootstrap/issues?state=open">Issues</a></li> - <li class="muted">·</li> - <li><a href="https://github.com/twitter/bootstrap/wiki">Roadmap and changelog</a></li> - </ul> - </div> - </footer> - - - - <!-- Le javascript - ================================================== --> - <!-- Placed at the end of the document so the pages load faster --> - <script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script> - <script src="assets/js/jquery.js"></script> - <script src="assets/js/bootstrap-transition.js"></script> - <script src="assets/js/bootstrap-alert.js"></script> - <script src="assets/js/bootstrap-modal.js"></script> - <script src="assets/js/bootstrap-dropdown.js"></script> - <script src="assets/js/bootstrap-scrollspy.js"></script> - <script src="assets/js/bootstrap-tab.js"></script> - <script src="assets/js/bootstrap-tooltip.js"></script> - <script src="assets/js/bootstrap-popover.js"></script> - <script src="assets/js/bootstrap-button.js"></script> - <script src="assets/js/bootstrap-collapse.js"></script> - <script src="assets/js/bootstrap-carousel.js"></script> - <script src="assets/js/bootstrap-typeahead.js"></script> - <script src="assets/js/bootstrap-affix.js"></script> - - <script src="assets/js/holder/holder.js"></script> - <script src="assets/js/google-code-prettify/prettify.js"></script> - - <script src="assets/js/application.js"></script> - - - - </body> -</html> diff --git a/docs/index.html b/docs/index.html index d7dd74ff5..b941e2261 100644 --- a/docs/index.html +++ b/docs/index.html @@ -80,9 +80,6 @@ <li> <a href="./getting-started.html#examples" >Examples</a> </li> - <li> - <a href="./extend.html" >Extend</a> - </li> <li>Version 3.0.0</li> </ul> </div> diff --git a/docs/templates/pages/components.mustache b/docs/templates/pages/components.mustache index 44d86f8a7..f7fc48ba5 100644 --- a/docs/templates/pages/components.mustache +++ b/docs/templates/pages/components.mustache @@ -1121,29 +1121,25 @@ <h2>Standard pagination</h2> <p>Simple pagination inspired by Rdio, great for apps and search results. The large block is hard to miss, easily scalable, and provides large click areas.</p> <div class="bs-docs-example"> - <div class="pagination"> - <ul> - <li><a href="#">«</a></li> - <li><a href="#">1</a></li> - <li><a href="#">2</a></li> - <li><a href="#">3</a></li> - <li><a href="#">4</a></li> - <li><a href="#">5</a></li> - <li><a href="#">»</a></li> - </ul> - </div> + <ul class="pagination"> + <li><a href="#">«</a></li> + <li><a href="#">1</a></li> + <li><a href="#">2</a></li> + <li><a href="#">3</a></li> + <li><a href="#">4</a></li> + <li><a href="#">5</a></li> + <li><a href="#">»</a></li> + </ul> </div> <pre class="prettyprint linenums"> -<div class="pagination"> - <ul> - <li><a href="#">Prev</a></li> - <li><a href="#">1</a></li> - <li><a href="#">2</a></li> - <li><a href="#">3</a></li> - <li><a href="#">4</a></li> - <li><a href="#">Next</a></li> - </ul> -</div> +<ul class="pagination"> + <li><a href="#">Prev</a></li> + <li><a href="#">1</a></li> + <li><a href="#">2</a></li> + <li><a href="#">3</a></li> + <li><a href="#">4</a></li> + <li><a href="#">Next</a></li> +</ul> </pre> @@ -1155,43 +1151,37 @@ <h3>Disabled and active states</h3> <p>Links are customizable for different circumstances. Use <code>.disabled</code> for unclickable links and <code>.active</code> to indicate the current page.</p> <div class="bs-docs-example"> - <div class="pagination pagination-centered"> - <ul> - <li class="disabled"><a href="#">«</a></li> - <li class="active"><a href="#">1</a></li> - <li><a href="#">2</a></li> - <li><a href="#">3</a></li> - <li><a href="#">4</a></li> - <li><a href="#">5</a></li> - <li><a href="#">»</a></li> - </ul> - </div> + <ul class="pagination"> + <li class="disabled"><a href="#">«</a></li> + <li class="active"><a href="#">1</a></li> + <li><a href="#">2</a></li> + <li><a href="#">3</a></li> + <li><a href="#">4</a></li> + <li><a href="#">5</a></li> + <li><a href="#">»</a></li> + </ul> </div> <pre class="prettyprint linenums"> -<div class="pagination"> - <ul> - <li class="disabled"><a href="#">Prev</a></li> - <li class="active"><a href="#">1</a></li> - ... - </ul> -</div> +<ul class="pagination"> + <li class="disabled"><a href="#">Prev</a></li> + <li class="active"><a href="#">1</a></li> + ... +</ul> </pre> <p>You can optionally swap out active or disabled anchors for spans to remove click functionality while retaining intended styles.</p> <pre class="prettyprint linenums"> -<div class="pagination"> - <ul> - <li class="disabled"><span>Prev</span></li> - <li class="active"><span>1</span></li> - ... - </ul> -</div> +<ul class="pagination"> + <li class="disabled"><span>Prev</span></li> + <li class="active"><span>1</span></li> + ... +</ul> </pre> <h3>Sizes</h3> <p>Fancy larger or smaller pagination? Add <code>.pagination-large</code>, <code>.pagination-small</code>, or <code>.pagination-mini</code> for additional sizes.</p> <div class="bs-docs-example"> - <div class="pagination pagination-large"> - <ul> + <div> + <ul class="pagination pagination-large"> <li><a href="#">«</a></li> <li><a href="#">1</a></li> <li><a href="#">2</a></li> @@ -1201,19 +1191,8 @@ <li><a href="#">»</a></li> </ul> </div> - <div class="pagination"> - <ul> - <li><a href="#">«</a></li> - <li><a href="#">1</a></li> - <li><a href="#">2</a></li> - <li><a href="#">3</a></li> - <li><a href="#">4</a></li> - <li><a href="#">5</a></li> - <li><a href="#">»</a></li> - </ul> - </div> - <div class="pagination pagination-small"> - <ul> + <div> + <ul class="pagination"> <li><a href="#">«</a></li> <li><a href="#">1</a></li> <li><a href="#">2</a></li> @@ -1223,8 +1202,8 @@ <li><a href="#">»</a></li> </ul> </div> - <div class="pagination pagination-mini"> - <ul> + <div> + <ul class="pagination pagination-small"> <li><a href="#">«</a></li> <li><a href="#">1</a></li> <li><a href="#">2</a></li> @@ -1234,53 +1213,8 @@ <li><a href="#">»</a></li> </ul> </div> - </div> -<pre class="prettyprint linenums"> -<div class="pagination pagination-large"> - <ul> - ... - </ul> -</div> -<div class="pagination"> - <ul> - ... - </ul> -</div> -<div class="pagination pagination-small"> - <ul> - ... - </ul> -</div> -<div class="pagination pagination-mini"> - <ul> - ... - </ul> -</div> -</pre> - - <h3>Alignment</h3> - <p>Add one of two optional classes to change the alignment of pagination links: <code>.pagination-centered</code> and <code>.pagination-right</code>.</p> - <div class="bs-docs-example"> - <div class="pagination pagination-centered"> - <ul> - <li><a href="#">«</a></li> - <li><a href="#">1</a></li> - <li><a href="#">2</a></li> - <li><a href="#">3</a></li> - <li><a href="#">4</a></li> - <li><a href="#">5</a></li> - <li><a href="#">»</a></li> - </ul> - </div> - </div> -<pre class="prettyprint linenums"> -<div class="pagination pagination-centered"> - ... -</div> -</pre> - <div class="bs-docs-example"> - <div class="pagination pagination-right"> - <ul> + <div> + <ul class="pagination pagination-mini"> <li><a href="#">«</a></li> <li><a href="#">1</a></li> <li><a href="#">2</a></li> @@ -1292,9 +1226,18 @@ </div> </div> <pre class="prettyprint linenums"> -<div class="pagination pagination-right"> +<ul class="pagination pagination-large"> ... -</div> +</ul> +<ul class="pagination"> + ... +</ul> +<ul class="pagination pagination-small"> + ... +</ul> +<ul class="pagination pagination-mini"> + ... +</ul> </pre> @@ -1410,7 +1353,7 @@ </tr> <tr> <td> - Important + Danger </td> <td> <span class="badge badge-danger">6</span> @@ -1419,28 +1362,6 @@ <code><span class="badge badge-danger">6</span></code> </td> </tr> - <tr> - <td> - Info - </td> - <td> - <span class="badge badge-info">8</span> - </td> - <td> - <code><span class="badge badge-info">8</span></code> - </td> - </tr> - <tr> - <td> - Inverse - </td> - <td> - <span class="badge badge-inverse">10</span> - </td> - <td> - <code><span class="badge badge-inverse">10</span></code> - </td> - </tr> </tbody> </table> @@ -2070,7 +1991,7 @@ class="muted" </pre> <h4>.clearfix</h4> - <p>Clear the <code>float</code> on any element.</p> + <p>Clear the <code>float</code> on any element. Utilizes <a href="http://nicolasgallagher.com/micro-clearfix-hack/">the micro clearfix</a> as popularized by Nicolas Gallagher.</p> <pre class="prettyprint linenums"> class="clearfix" </pre> diff --git a/docs/templates/pages/css.mustache b/docs/templates/pages/css.mustache index 30b0e68e6..f3209f1e8 100644 --- a/docs/templates/pages/css.mustache +++ b/docs/templates/pages/css.mustache @@ -242,20 +242,31 @@ <p>Feel free to use <code><b></code> and <code><i></code> in HTML5. <code><b></code> is meant to highlight words or phrases without conveying additional importance while <code><i></code> is mostly for voice, technical terms, etc.</p> + <h3>Alignment classes</h3> + <p>Easily realign text to components with text alignment classes.</p> + <div class="bs-docs-example"> + <p class="text-left">Left aligned text.</p> + <p class="text-center">Center aligned text.</p> + <p class="text-right">Right aligned text.</p> + </div> +<pre class="prettyprint linenums"> +<p class="text-left">Left aligned text.</p> +<p class="text-center">Center aligned text.</p> +<p class="text-right">Right aligned text.</p> +</pre> + <h3>Emphasis classes</h3> <p>Convey meaning through color with a handful of emphasis utility classes.</p> <div class="bs-docs-example"> <p class="muted">Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.</p> <p class="text-warning">Etiam porta sem malesuada magna mollis euismod.</p> <p class="text-error">Donec ullamcorper nulla non metus auctor fringilla.</p> - <p class="text-info">Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis.</p> <p class="text-success">Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p> </div> <pre class="prettyprint linenums"> <p class="muted">Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.</p> <p class="text-warning">Etiam porta sem malesuada magna mollis euismod.</p> <p class="text-error">Donec ullamcorper nulla non metus auctor fringilla.</p> -<p class="text-info">Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis.</p> <p class="text-success">Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p> </pre> @@ -1408,17 +1419,6 @@ For example, <code>&lt;section&gt;</code> should be wrapped <h3 id="forms-extending-sizes">Control sizing</h3> <p>Use relative sizing classes like <code>.input-large</code> or match your inputs to the grid column sizes using <code>.span*</code> classes.</p> - <h4>Block level inputs</h4> - <p>Make any <code><input></code> or <code><textarea></code> element behave like a block level element.</p> - <form class="bs-docs-example" style="padding-bottom: 15px;"> - <div class="controls"> - <input class="input-block-level" type="text" placeholder=".input-block-level"> - </div> - </form> -<pre class="prettyprint linenums"> -<input class="input-block-level" type="text" placeholder=".input-block-level"> -</pre> - <h4>Relative sizing</h4> <p>Create larger or smaller form controls that match button sizes.</p> <form class="bs-docs-example" style="padding-bottom: 15px;"> @@ -1478,38 +1478,32 @@ For example, <code>&lt;section&gt;</code> should be wrapped ... </select> </pre> - - <p>For multiple grid inputs per line, <strong>use the <code>.controls-row</code> modifier class for proper spacing</strong>. It floats the inputs to collapse white-space, sets the proper margins, and the clears the float.</p> + <p>If you need multiple inputs on the same line, wrap them in the standard grid markup (with <code>.row</code> and <code>.span*</code> classes). Each input should have it's own column and will expand to fill the available width automatically.</p> <form class="bs-docs-example" style="padding-bottom: 15px;"> - <div class="controls controls-row"> - <input class="span5" type="text" placeholder=".span5"> - </div> - <div class="controls controls-row"> - <input class="span4" type="text" placeholder=".span4"> - <input class="span1" type="text" placeholder=".span1"> - </div> - <div class="controls controls-row"> - <input class="span3" type="text" placeholder=".span3"> - <input class="span2" type="text" placeholder=".span2"> - </div> - <div class="controls controls-row"> - <input class="span2" type="text" placeholder=".span2"> - <input class="span3" type="text" placeholder=".span3"> - </div> - <div class="controls controls-row"> - <input class="span1" type="text" placeholder=".span1"> - <input class="span4" type="text" placeholder=".span4"> + <div class="row"> + <div class="span4"> + <input type="text" placeholder=".span4"> + </div> + <div class="span4"> + <input type="text" placeholder=".span4"> + </div> + <div class="span4"> + <input type="text" placeholder=".span4"> + </div> </div> </form> <pre class="prettyprint linenums"> -<div class="controls"> - <input class="span5" type="text" placeholder=".span5"> -</div> -<div class="controls controls-row"> - <input class="span4" type="text" placeholder=".span4"> - <input class="span1" type="text" placeholder=".span1"> +<div class="row"> + <div class="span4"> + <input type="text" placeholder=".span4"> + </div> + <div class="span4"> + <input type="text" placeholder=".span4"> + </div> + <div class="span4"> + <input type="text" placeholder=".span4"> + </div> </div> -... </pre> <h3>Uneditable inputs</h3> @@ -1562,7 +1556,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped <h2>Form control states</h2> <p>Provide feedback to users or visitors with basic feedback states on form controls and labels.</p> - <h3>Input focus</h3> + <h3 id="forms-input-focus">Input focus</h3> <p>We remove the default <code>outline</code> styles on some form controls and apply a <code>box-shadow</code> in its place for <code>:focus</code>.</p> <form class="bs-docs-example form-inline"> <input class="input-xlarge focused" id="focusedInput" type="text" value="This is focused..."> @@ -1571,8 +1565,8 @@ For example, <code>&lt;section&gt;</code> should be wrapped <input class="input-xlarge" id="focusedInput" type="text" value="This is focused..."> </pre> - <h3>Invalid inputs</h3> - <p>Style inputs via default browser functionality with <code>:invalid</code>. Specify a <code>type</code> and add the <code>required</code> attribute.</p> + <h3 id="forms-invalid-inputs">Invalid inputs</h3> + <p>Style inputs via default browser functionality with <code>:invalid</code>. Specify a <code>type</code>, add the <code>required</code> attribute if the field is not optional, and (if applicable) specify a <code>pattern</code>.</p> <form class="bs-docs-example form-inline"> <input class="span3" type="email" placeholder="[email protected]" required> </form> @@ -1580,7 +1574,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped <input class="span3" type="email" required> </pre> - <h3>Disabled inputs</h3> + <h3 id="forms-disabled-inputs">Disabled inputs</h3> <p>Add the <code>disabled</code> attribute on an input to prevent user input and trigger a slightly different look.</p> <form class="bs-docs-example form-inline"> <input class="input-xlarge" id="disabledInput" type="text" placeholder="Disabled input here…" disabled> @@ -1589,7 +1583,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped <input class="input-xlarge" id="disabledInput" type="text" placeholder="Disabled input here..." disabled> </pre> - <h3>Disabled fieldsets</h3> + <h3 id="forms-disabled-fieldsets">Disabled fieldsets</h3> <p>Add the <code>disabled</code> attribute to a <code><fieldset></code> to disable all the controls within the <code><fieldset></code> at once. Link buttons (with the <code><a></code> element) will be aesthetically disabled, but you will need custom JavaScript to disable their behavior.</p> <form class="bs-docs-example form-inline"> <fieldset disabled> @@ -1626,59 +1620,51 @@ For example, <code>&lt;section&gt;</code> should be wrapped </form> </pre> - <h3>Validation states</h3> - <p>Bootstrap includes validation styles for error, warning, info, and success messages. To use, add the appropriate class to the surrounding <code>.control-group</code>.</p> + <h3 id="forms-validation">Validation states</h3> + <p>Bootstrap includes validation styles for error, warning, info, and success messages. To use:</p> + <ul> + <li>Add <code>.has-warning</code>, <code>.has-error</code>, or <code>.has-success</code> to the parent element</li> + <li>Add .input-with-feedback to the field(s) in question</li> + </ul> + <p>Validation styles are applied on a per-input basis. With horizontal forms, the <code><label class="control-label"></code> will always be styled.</p> <form class="bs-docs-example form-horizontal"> - <div class="control-group warning"> + <div class="control-group has-warning"> <label class="control-label" for="inputWarning">Input with warning</label> <div class="controls"> - <input type="text" id="inputWarning"> - <span class="help-inline">Something may have gone wrong</span> + <input type="text" class="input-with-feedback" id="inputWarning"> </div> </div> - <div class="control-group error"> + <div class="control-group has-error"> <label class="control-label" for="inputError">Input with error</label> <div class="controls"> - <input type="text" id="inputError"> - <span class="help-inline">Please correct the error</span> - </div> - </div> - <div class="control-group info"> - <label class="control-label" for="inputInfo">Input with info</label> - <div class="controls"> - <input type="text" id="inputInfo"> - <span class="help-inline">Username is taken</span> + <input type="text" class="input-with-feedback" id="inputError"> </div> </div> - <div class="control-group success"> + <div class="control-group has-success"> <label class="control-label" for="inputSuccess">Input with success</label> <div class="controls"> - <input type="text" id="inputSuccess"> - <span class="help-inline">Woohoo!</span> + <input type="text" class="input-with-feedback" id="inputSuccess"> </div> </div> </form> <pre class="prettyprint linenums"> -<div class="control-group warning"> +<div class="control-group has-warning"> <label class="control-label" for="inputWarning">Input with warning</label> <div class="controls"> - <input type="text" id="inputWarning"> - <span class="help-inline">Something may have gone wrong</span> + <input type="text" class="input-with-feedback" id="inputWarning"> </div> </div> -<div class="control-group error"> +<div class="control-group has-error"> <label class="control-label" for="inputError">Input with error</label> <div class="controls"> - <input type="text" id="inputError"> - <span class="help-inline">Please correct the error</span> + <input type="text" class="input-with-feedback" id="inputError"> </div> </div> -<div class="control-group success"> +<div class="control-group has-success"> <label class="control-label" for="inputSuccess">Input with success</label> <div class="controls"> - <input type="text" id="inputSuccess"> - <span class="help-inline">Woohoo!</span> + <input type="text" class="input-with-feedback id="inputSuccess""> </div> </div> </pre> diff --git a/docs/templates/pages/extend.mustache b/docs/templates/pages/extend.mustache deleted file mode 100644 index 7747fff3e..000000000 --- a/docs/templates/pages/extend.mustache +++ /dev/null @@ -1,169 +0,0 @@ -<!-- Subhead -================================================== --> -<header class="bs-docs-jumbotron subhead"> - <div class="container"> - <h1>Extending Bootstrap</h1> - <p class="lead">Extend Bootstrap to take advantage of included styles and components, as well as LESS variables and mixins.</p> - <div> -</header> - - <div class="container"> - - <!-- Docs nav - ================================================== --> - <div class="row"> - <div class="span3 bs-docs-sidebar"> - <ul class="nav nav-list bs-docs-sidenav"> - <li><a href="#built-with-less"><i class="glyphicon-chevron-right"></i> Built with LESS</a></li> - <li><a href="#compiling"><i class="glyphicon-chevron-right"></i> Compiling Bootstrap</a></li> - <li><a href="#static-assets"><i class="glyphicon-chevron-right"></i> Use as static assets</a></li> - </ul> - </div> - <div class="span9"> - - - - <!-- BUILT WITH LESS - ================================================== --> - <section id="built-with-less"> - <div class="page-header"> - <h1>Built with LESS</h1> - </div> - - <img style="float: right; height: 36px; margin: 10px 20px 20px" src="assets/img/less-logo-large.png" alt="LESS CSS"> - <p class="lead">Bootstrap is made with LESS at its core, a dynamic stylesheet language created by our good friend, <a href="http://cloudhead.io">Alexis Sellier</a>. It makes developing systems-based CSS faster, easier, and more fun.</p> - - <h3>Why LESS?</h3> - <p>One of Bootstrap's creators wrote a quick <a href="http://www.wordsbyf.at/2012/03/08/why-less/">blog post about this</a>, summarized here:</p> - <ul> - <li>Bootstrap compiles faster ~6x faster with Less compared to Sass</li> - <li>Less is written in JavaScript, making it easier to us to dive in and patch compared to Ruby with Sass.</li> - <li>Less is more; we want to feel like we're writing CSS and making Bootstrap approachable to all.</li> - </ul> - - <h3>What's included?</h3> - <p>As an extension of CSS, LESS includes variables, mixins for reusable snippets of code, operations for simple math, nesting, and even color functions.</p> - - <h3>Learn more</h3> - <p>Visit the official website at <a href="http://lesscss.org">http://lesscss.org</a> to learn more.</p> - </section> - - - - <!-- COMPILING LESS AND BOOTSTRAP - ================================================== --> - <section id="compiling"> - <div class="page-header"> - <h1>Compiling Bootstrap with Less</h1> - </div> - - <p class="lead">Since our CSS is written with Less and utilizes variables and mixins, it needs to be compiled for final production implementation. Here's how.</p> - - <div class="alert alert-info"> - <strong>Note:</strong> If you're submitting a pull request to GitHub with modified CSS, you <strong>must</strong> recompile the CSS via any of these methods. - </div> - - <h2>Tools for compiling</h2> - - <h3>Node with makefile</h3> - <p>Install the LESS command line compiler, JSHint, Recess, and uglify-js globally with npm by running the following command:</p> - <pre>$ npm install -g less jshint recess uglify-js</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> - - <h3>Command line</h3> - <p>Install the LESS command line tool via Node and run the following command:</p> - <pre>$ lessc ./less/bootstrap.less > bootstrap.css</pre> - <p>Be sure to include <code>--compress</code> in that command if you're trying to save some bytes!</p> - - <h3>JavaScript</h3> - <p><a href="http://lesscss.org/">Download the latest Less.js</a> and include the path to it (and Bootstrap) in the <code><head></code>.</p> -<pre class="prettyprint"> -<link rel="stylesheet/less" href="/path/to/bootstrap.less"> -<script src="/path/to/less.js"></script> -</pre> - <p>To recompile the .less files, just save them and reload your page. Less.js compiles them and stores them in local storage.</p> - - <h3>Unofficial Mac app</h3> - <p><a href="http://incident57.com/less/">The unofficial Mac app</a> watches directories of .less files and compiles the code to local files after every save of a watched .less file. If you like, you can toggle preferences in the app for automatic minifying and which directory the compiled files end up in.</p> - - <h3>More apps</h3> - <h4><a href="http://crunchapp.net/" target="_blank">Crunch</a></h4> - <p>Crunch is a great looking LESS editor and compiler built on Adobe Air.</p> - <h4><a href="http://incident57.com/codekit/" target="_blank">CodeKit</a></h4> - <p>Created by the same guy as the unofficial Mac app, CodeKit is a Mac app that compiles LESS, SASS, Stylus, and CoffeeScript.</p> - <h4><a href="http://wearekiss.com/simpless" target="_blank">Simpless</a></h4> - <p>Mac, Linux, and Windows app for drag and drop compiling of LESS files. Plus, the <a href="https://github.com/Paratron/SimpLESS" target="_blank">source code is on GitHub</a>.</p> - - </section> - - - - <!-- Static assets - ================================================== --> - <section id="static-assets"> - <div class="page-header"> - <h1>Use as static assets</h1> - </div> - <p class="lead"><a href="./getting-started.html">Quickly start</a> any web project by dropping in the compiled or minified CSS and JS. Layer on custom styles separately for easy upgrades and maintenance moving forward.</p> - - <h3>Setup file structure</h3> - <p>Download the latest compiled Bootstrap and place into your project. For example, you might have something like this:</p> -<pre> - <span class="icon-folder-open"></span> app/ - <span class="icon-folder-open"></span> layouts/ - <span class="icon-folder-open"></span> templates/ - <span class="icon-folder-open"></span> public/ - <span class="icon-folder-open"></span> css/ - <span class="icon-file"></span> bootstrap.min.css - <span class="icon-folder-open"></span> js/ - <span class="icon-file"></span> bootstrap.min.js - <span class="icon-folder-open"></span> img/ - <span class="icon-file"></span> glyphicons-halflings.png - <span class="icon-file"></span> glyphicons-halflings-white.png -</pre> - - <h3>Utilize starter template</h3> - <p>Copy the following base HTML to get started.</p> -<pre class="prettyprint linenums"> -<html> - <head> - <title>Bootstrap 101 Template</title> - <!-- Bootstrap --> - <link href="public/css/bootstrap.min.css" rel="stylesheet"> - </head> - <body> - <h1>Hello, world!</h1> - <!-- Bootstrap --> - <script src="public/js/bootstrap.min.js"></script> - </body> -</html> -</pre> - - <h3>Layer on custom code</h3> - <p>Work in your custom CSS, JS, and more as necessary to make Bootstrap your own with your own separate CSS and JS files.</p> -<pre class="prettyprint linenums"> -<html> - <head> - <title>Bootstrap 101 Template</title> - <!-- Bootstrap --> - <link href="public/css/bootstrap.min.css" rel="stylesheet"> - <!-- Project --> - <link href="public/css/application.css" rel="stylesheet"> - </head> - <body> - <h1>Hello, world!</h1> - <!-- Bootstrap --> - <script src="public/js/bootstrap.min.js"></script> - <!-- Project --> - <script src="public/js/application.js"></script> - </body> -</html> -</pre> - - </section> - - </div>{{! /span9 }} - </div>{{! row}} - - </div>{{! /.container }} diff --git a/docs/templates/pages/index.mustache b/docs/templates/pages/index.mustache index b0eb23bf2..1c71d1151 100644 --- a/docs/templates/pages/index.mustache +++ b/docs/templates/pages/index.mustache @@ -12,9 +12,6 @@ <li> <a href="./getting-started.html#examples" {{#production}}onclick="_gaq.push(['_trackEvent', 'Jumbotron actions', 'Jumbotron links', 'Examples']);"{{/production}}>Examples</a> </li> - <li> - <a href="./extend.html" {{#production}}onclick="_gaq.push(['_trackEvent', 'Jumbotron actions', 'Jumbotron links', 'Extend']);"{{/production}}>Extend</a> - </li> <li>Version 3.0.0</li> </ul> </div> |