To easily add scrollspy behavior to your topbar navigation, just add data-spy="scroll" to the element you want to spy on (most typically this would be the body) and data-target=".navbar" to select which nav to use. You'll want to use scrollspy with a .nav component.

Via JavaScript

Heads up! @@ -604,6 +604,12 @@ $('[data-spy="scroll"]').each(function () { + + target + selector + 'body' + Nav target to be updated on scroll. (Scrollspy looks for .nav li > a inside this target.) + offset number -- cgit v1.2.3 From d206ec16595a022f10955eb025fd5756512399a8 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 24 Dec 2012 02:06:28 -0800 Subject: Remove .badge-info and .badge-inverse; change docs label of .badge-important to .badge-danger --- docs/assets/css/bootstrap.css | 16 ---------------- docs/components.html | 24 +----------------------- docs/templates/pages/components.mustache | 24 +----------------------- 3 files changed, 2 insertions(+), 62 deletions(-) (limited to 'docs') diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css index 44581d473..b5ef18ebb 100644 --- a/docs/assets/css/bootstrap.css +++ b/docs/assets/css/bootstrap.css @@ -4523,22 +4523,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; diff --git a/docs/components.html b/docs/components.html index ac9dc91ce..b870c1f3f 100644 --- a/docs/components.html +++ b/docs/components.html @@ -1478,7 +1478,7 @@ - Important + Danger 6 @@ -1487,28 +1487,6 @@ <span class="badge badge-danger">6</span> - - - Info - - - 8 - - - <span class="badge badge-info">8</span> - - - - - Inverse - - - 10 - - - <span class="badge badge-inverse">10</span> - - diff --git a/docs/templates/pages/components.mustache b/docs/templates/pages/components.mustache index 4db9d84dc..b3d0b29ea 100644 --- a/docs/templates/pages/components.mustache +++ b/docs/templates/pages/components.mustache @@ -1410,7 +1410,7 @@ - Important + Danger 6 @@ -1419,28 +1419,6 @@ <span class="badge badge-danger">6</span> - - - Info - - - 8 - - - <span class="badge badge-info">8</span> - - - - - Inverse - - - 10 - - - <span class="badge badge-inverse">10</span> - - -- cgit v1.2.3 From c063f7c9c26abad3d9ac605d70b60d86e4d79343 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 24 Dec 2012 02:08:45 -0800 Subject: Update docs to reflect latest on .clearfix --- docs/components.html | 2 +- docs/templates/pages/components.mustache | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) (limited to 'docs') diff --git a/docs/components.html b/docs/components.html index b870c1f3f..e528837da 100644 --- a/docs/components.html +++ b/docs/components.html @@ -2116,7 +2116,7 @@ class="muted"

.clearfix

Clear the float on any element.

Clear the float on any element. Utilizes the micro clearfix as popularized by Nicollas Gallagher.

 class="clearfix"

diff --git a/docs/templates/pages/components.mustache b/docs/templates/pages/components.mustache index b3d0b29ea..8060770ac 100644 --- a/docs/templates/pages/components.mustache +++ b/docs/templates/pages/components.mustache @@ -2048,7 +2048,7 @@ class="muted"

.clearfix

Clear the float on any element.

Clear the float on any element. Utilizes the micro clearfix as popularized by Nicollas Gallagher.

 class="clearfix"

-- cgit v1.2.3 From 9921d219693a1b01f7c9275babbef3f9d0afd3be Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Wed, 26 Dec 2012 13:59:01 -0600 Subject: Run make on previous commits --- docs/javascript.html | 10 ++-------- 1 file changed, 2 insertions(+), 8 deletions(-) (limited to 'docs') diff --git a/docs/javascript.html b/docs/javascript.html index fe7f750c0..2d01af561 100644 --- a/docs/javascript.html +++ b/docs/javascript.html @@ -571,12 +571,12 @@ $('#myModal').on('hidden', function () {

Usage

Via data attributes

<body data-spy="scroll" data-target=".navbar">...</body>

Via JavaScript

Call the scrollspy via JavaScript:

$('body').scrollspy(options)

$('#navbar').scrollspy()

Heads up! @@ -604,12 +604,6 @@ $('[data-spy="scroll"]').each(function () { - - target - selector - 'body' - Nav target to be updated on scroll. (Scrollspy looks for .nav li > a inside this target.) - offset number -- cgit v1.2.3 From c17673dc6139de37ecb5d075231e426d1b238706 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Wed, 26 Dec 2012 13:59:09 -0600 Subject: Restore .form-horizontal --- docs/assets/css/bootstrap.css | 25 +++++++++++++++++++++++++ 1 file changed, 25 insertions(+) (limited to 'docs') diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css index b5ef18ebb..b4e548870 100644 --- a/docs/assets/css/bootstrap.css +++ b/docs/assets/css/bootstrap.css @@ -1528,6 +1528,31 @@ select:focus:invalid:focus { border-radius: 0 4px 4px 0; } +.form-horizontal .control-group { + margin-bottom: 10px; +} + +.form-horizontal .control-group:before, +.form-horizontal .control-group:after { + display: table; + content: " "; +} + +.form-horizontal .control-group:after { + clear: both; +} + +.form-horizontal .control-group > .control-label { + float: left; + width: 160px; + padding-top: 5px; + text-align: right; +} + +.form-horizontal .control-group > .controls { + margin-left: 180px; +} + table { max-width: 100%; background-color: transparent; -- cgit v1.2.3 From 070109abc1624808873e6e172ff97d27eb05c406 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Wed, 26 Dec 2012 14:09:36 -0600 Subject: Remove .controls-row; instead, folks should use .row and .span* for all their grid input sizing needs when multiple inputs per line are required --- docs/assets/css/bootstrap.css | 103 -------------------------------------- docs/css.html | 34 +------------ docs/templates/pages/css.mustache | 34 +------------ 3 files changed, 2 insertions(+), 169 deletions(-) (limited to 'docs') diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css index b4e548870..a1af172b2 100644 --- a/docs/assets/css/bootstrap.css +++ b/docs/assets/css/bootstrap.css @@ -1088,90 +1088,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"], @@ -1186,25 +1102,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], diff --git a/docs/css.html b/docs/css.html index a3133026d..db7cb17e2 100644 --- a/docs/css.html +++ b/docs/css.html @@ -1538,39 +1538,7 @@ For example, <code><section></code> should be wrapped ... </select> - -

For multiple grid inputs per line, use the .controls-row modifier class for proper spacing. It floats the inputs to collapse white-space, sets the proper margins, and the clears the float.

- -

-<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>
-...
-

If you need multiple inputs on the same line, wrap them in the standard grid markup (with `.row` and `.span*` classes). Each input should have it's own column and will expand to fill the available width automatically.

Uneditable inputs

Present data in a form that's not editable without using actual form markup.

diff --git a/docs/templates/pages/css.mustache b/docs/templates/pages/css.mustache index 30b0e68e6..93e3e269d 100644 --- a/docs/templates/pages/css.mustache +++ b/docs/templates/pages/css.mustache @@ -1478,39 +1478,7 @@ For example, <code><section></code> should be wrapped ... </select> - -

For multiple grid inputs per line, use the .controls-row modifier class for proper spacing. It floats the inputs to collapse white-space, sets the proper margins, and the clears the float.

- -

-<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>
-...
-

Uneditable inputs

Present data in a form that's not editable without using actual form markup.

-- cgit v1.2.3 From 12b738bf302699a51721d030465e07f76de72bf9 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Wed, 26 Dec 2012 14:13:44 -0600 Subject: Add grid column example to form input sizing --- docs/css.html | 28 +++++++++++++++++++++++++++- docs/templates/pages/css.mustache | 28 +++++++++++++++++++++++++++- 2 files changed, 54 insertions(+), 2 deletions(-) (limited to 'docs') diff --git a/docs/css.html b/docs/css.html index db7cb17e2..b23119f8d 100644 --- a/docs/css.html +++ b/docs/css.html @@ -1538,7 +1538,33 @@ For example, <code><section></code> should be wrapped ... </select> -

If you need multiple inputs on the same line, wrap them in the standard grid markup (with .row and .span* classes). Each input should have it's own column and will expand to fill the available width automatically.

+ +

+<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>
+

Uneditable inputs

Present data in a form that's not editable without using actual form markup.

diff --git a/docs/templates/pages/css.mustache b/docs/templates/pages/css.mustache index 93e3e269d..31d0b6c2e 100644 --- a/docs/templates/pages/css.mustache +++ b/docs/templates/pages/css.mustache @@ -1478,7 +1478,33 @@ For example, <code><section></code> should be wrapped ... </select> -

+ +

+<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>
+

Uneditable inputs

Present data in a form that's not editable without using actual form markup.

-- cgit v1.2.3 From 2ef4fde09fae0dd3e054a77b61b0738fe538b58d Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Wed, 26 Dec 2012 14:19:48 -0600 Subject: Drop .input-block-level modifier as inputs are already width: 100%; --- docs/assets/css/bootstrap.css | 6 ------ docs/css.html | 11 ----------- docs/templates/pages/css.mustache | 11 ----------- 3 files changed, 28 deletions(-) (limited to 'docs') diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css index a1af172b2..8b93968b6 100644 --- a/docs/assets/css/bootstrap.css +++ b/docs/assets/css/bootstrap.css @@ -4924,11 +4924,6 @@ a.badge:hover { position: fixed; } -.control-block-level { - display: block; - width: 100%; -} - @-ms-viewport { width: device-width; } @@ -5213,7 +5208,6 @@ a.badge:hover { select[class*="span"], textarea[class*="span"], .uneditable-input { - display: block; width: 100%; } .input-prepend input, diff --git a/docs/css.html b/docs/css.html index b23119f8d..bf659d5c5 100644 --- a/docs/css.html +++ b/docs/css.html @@ -1468,17 +1468,6 @@ For example, <code><section></code> should be wrapped

Control sizing

Use relative sizing classes like .input-large or match your inputs to the grid column sizes using .span* classes.

Block level inputs

Make any <input> or <textarea> element behave like a block level element.

- -

-<input class="input-block-level" type="text" placeholder=".input-block-level">
-

Relative sizing

Create larger or smaller form controls that match button sizes.

-<input class="input-block-level" type="text" placeholder=".input-block-level">
-

Relative sizing

Create larger or smaller form controls that match button sizes.

-- cgit v1.2.3 From d0baa99aed07b6643d649350f3988b3d8a07a4ac Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Wed, 26 Dec 2012 14:59:58 -0600 Subject: Remove .text-info and .info form validation states --- docs/assets/css/bootstrap.css | 45 --------------------------------------- docs/css.html | 9 -------- docs/templates/pages/css.mustache | 9 -------- 3 files changed, 63 deletions(-) (limited to 'docs') diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css index 8b93968b6..fe6adf2cc 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; } @@ -1235,43 +1227,6 @@ fieldset[disabled] input[type="checkbox"] { 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 { diff --git a/docs/css.html b/docs/css.html index bf659d5c5..33dc6966d 100644 --- a/docs/css.html +++ b/docs/css.html @@ -311,14 +311,12 @@

Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.

Etiam porta sem malesuada magna mollis euismod.

Donec ullamcorper nulla non metus auctor fringilla.

Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis.

Duis mollis, est non commodo luctus, nisi erat porttitor ligula.

 <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>

@@ -1687,13 +1685,6 @@ For example, <code><section></code> should be wrapped Please correct the error

- Input with info -

- - Username is taken -

Input with success

diff --git a/docs/templates/pages/css.mustache b/docs/templates/pages/css.mustache index 47ac9e5c9..a72352017 100644 --- a/docs/templates/pages/css.mustache +++ b/docs/templates/pages/css.mustache @@ -248,14 +248,12 @@

Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.

Etiam porta sem malesuada magna mollis euismod.

Donec ullamcorper nulla non metus auctor fringilla.

Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis.

Duis mollis, est non commodo luctus, nisi erat porttitor ligula.

 <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>

@@ -1627,13 +1625,6 @@ For example, <code><section></code> should be wrapped Please correct the error

- Input with info -

- - Username is taken -

Input with success

-- cgit v1.2.3 From dc5c6d6be8e46e36aa8a2e1d35f6ed8c8e3cd8cb Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Wed, 26 Dec 2012 15:57:52 -0600 Subject: Simplify form validation states while enabling them to be applied to one field at a time. --- docs/assets/css/bootstrap.css | 96 +++++++++------------------------------ docs/css.html | 30 +++++------- docs/templates/pages/css.mustache | 30 +++++------- 3 files changed, 46 insertions(+), 110 deletions(-) (limited to 'docs') diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css index fe6adf2cc..fcc8a8c10 100644 --- a/docs/assets/css/bootstrap.css +++ b/docs/assets/css/bootstrap.css @@ -1116,117 +1116,57 @@ fieldset[disabled] input[type="checkbox"] { background-color: transparent; } -.control-group.warning .control-label, -.control-group.warning .help-block, -.control-group.warning .help-inline { +.has-warning .control-label { color: #c09853; } -.control-group.warning .checkbox, -.control-group.warning .radio, -.control-group.warning input, -.control-group.warning select, -.control-group.warning textarea { - 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; -} - input:focus:invalid, textarea:focus:invalid, select:focus:invalid { @@ -1381,7 +1321,8 @@ select:focus:invalid:focus { } .form-horizontal .control-group { - margin-bottom: 10px; + position: relative; + margin-bottom: 20px; } .form-horizontal .control-group:before, @@ -1394,10 +1335,17 @@ select:focus:invalid:focus { 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: 5px; + padding-top: 6px; text-align: right; } diff --git a/docs/css.html b/docs/css.html index 33dc6966d..31e745378 100644 --- a/docs/css.html +++ b/docs/css.html @@ -1671,48 +1671,42 @@ For example, <code><section></code> should be wrapped

Bootstrap includes validation styles for error, warning, info, and success messages. To use, add the appropriate class to the surrounding .control-group.

Input with warning

- - Something may have gone wrong +

Input with error

- - Please correct the error +

Input with success

- - Woohoo! +

-<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>

diff --git a/docs/templates/pages/css.mustache b/docs/templates/pages/css.mustache index a72352017..c82d48351 100644 --- a/docs/templates/pages/css.mustache +++ b/docs/templates/pages/css.mustache @@ -1611,48 +1611,42 @@ For example, <code><section></code> should be wrapped

Bootstrap includes validation styles for error, warning, info, and success messages. To use, add the appropriate class to the surrounding .control-group.

Input with warning

- - Something may have gone wrong +

Input with error

- - Please correct the error +

Input with success

- - Woohoo! +

-<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>

-- cgit v1.2.3 From 5a2dc0b897968838cf09e0ff990b3a411623ed68 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Fri, 28 Dec 2012 14:47:55 -0600 Subject: Improve documentation for new form validation styles --- docs/css.html | 17 +++++++++++------ docs/templates/pages/css.mustache | 17 +++++++++++------ 2 files changed, 22 insertions(+), 12 deletions(-) (limited to 'docs') diff --git a/docs/css.html b/docs/css.html index 31e745378..53cd678d0 100644 --- a/docs/css.html +++ b/docs/css.html @@ -1603,7 +1603,7 @@ For example, <code><section></code> should be wrapped

Form control states

Provide feedback to users or visitors with basic feedback states on form controls and labels.

Input focus

We remove the default outline styles on some form controls and apply a box-shadow in its place for :focus.

@@ -1612,7 +1612,7 @@ For example, <code><section></code> should be wrapped <input class="input-xlarge" id="focusedInput" type="text" value="This is focused..."> -

Invalid inputs

Style inputs via default browser functionality with :invalid. Specify a type and add the required attribute.

@@ -1621,7 +1621,7 @@ For example, <code><section></code> should be wrapped <input class="span3" type="email" required> -

Disabled inputs

Add the disabled attribute on an input to prevent user input and trigger a slightly different look.

@@ -1630,7 +1630,7 @@ For example, <code><section></code> should be wrapped <input class="input-xlarge" id="disabledInput" type="text" placeholder="Disabled input here..." disabled> -

Disabled fieldsets

Add the disabled attribute to a <fieldset> to disable all the controls within the <fieldset> at once. Link buttons (with the <a> element) will be aesthetically disabled, but you will need custom JavaScript to disable their behavior.

@@ -1667,8 +1667,13 @@ For example, <code><section></code> should be wrapped </form> -

Validation states

Bootstrap includes validation styles for error, warning, info, and success messages. To use, add the appropriate class to the surrounding .control-group.

Validation states

Bootstrap includes validation styles for error, warning, info, and success messages. To use:

Add .has-warning, .has-error, or .has-success to the parent element
Add .input-with-feedback to the field(s) in question

Validation styles are applied on a per-input basis. With horizontal forms, the <label class="control-label"> will always be styled.

diff --git a/docs/templates/pages/css.mustache b/docs/templates/pages/css.mustache index c82d48351..47abef021 100644 --- a/docs/templates/pages/css.mustache +++ b/docs/templates/pages/css.mustache @@ -1543,7 +1543,7 @@ For example, <code><section></code> should be wrapped

Form control states

Provide feedback to users or visitors with basic feedback states on form controls and labels.

Input focus

We remove the default outline styles on some form controls and apply a box-shadow in its place for :focus.

@@ -1552,7 +1552,7 @@ For example, <code><section></code> should be wrapped <input class="input-xlarge" id="focusedInput" type="text" value="This is focused..."> -

Invalid inputs

Style inputs via default browser functionality with :invalid. Specify a type and add the required attribute.

@@ -1561,7 +1561,7 @@ For example, <code><section></code> should be wrapped <input class="span3" type="email" required> -

Disabled inputs

Add the disabled attribute on an input to prevent user input and trigger a slightly different look.

@@ -1570,7 +1570,7 @@ For example, <code><section></code> should be wrapped <input class="input-xlarge" id="disabledInput" type="text" placeholder="Disabled input here..." disabled> -

Disabled fieldsets

@@ -1607,8 +1607,13 @@ For example, <code><section></code> should be wrapped </form> -

Validation states

Bootstrap includes validation styles for error, warning, info, and success messages. To use, add the appropriate class to the surrounding .control-group.

Validation states

Bootstrap includes validation styles for error, warning, info, and success messages. To use:

Add .has-warning, .has-error, or .has-success to the parent element
Add .input-with-feedback to the field(s) in question

Validation styles are applied on a per-input basis. With horizontal forms, the <label class="control-label"> will always be styled.

-- cgit v1.2.3 From 3d04d9ba751c08ab7909ee6146719171609d5cf9 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Fri, 28 Dec 2012 19:24:13 -0600 Subject: Super lame typo on my part, sorry @necolas :) --- docs/components.html | 2 +- docs/templates/pages/components.mustache | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) (limited to 'docs') diff --git a/docs/components.html b/docs/components.html index e528837da..a8a71842f 100644 --- a/docs/components.html +++ b/docs/components.html @@ -2116,7 +2116,7 @@ class="muted"

.clearfix

Clear the float on any element. Utilizes the micro clearfix as popularized by Nicollas Gallagher.

Clear the float on any element. Utilizes the micro clearfix as popularized by Nicolas Gallagher.

 class="clearfix"

diff --git a/docs/templates/pages/components.mustache b/docs/templates/pages/components.mustache index 8060770ac..c185bff48 100644 --- a/docs/templates/pages/components.mustache +++ b/docs/templates/pages/components.mustache @@ -2048,7 +2048,7 @@ class="muted"

.clearfix

Clear the float on any element. Utilizes the micro clearfix as popularized by Nicollas Gallagher.

Clear the float on any element. Utilizes the micro clearfix as popularized by Nicolas Gallagher.

 class="clearfix"

-- cgit v1.2.3 From 206205a6b2a214fbdc76cfb5e9c63706bb11e0ea Mon Sep 17 00:00:00 2001 From: Chris Rebert Date: Sat, 5 Jan 2013 17:36:20 -0800 Subject: update docs to reflect #5786 --- docs/css.html | 2 +- docs/templates/pages/css.mustache | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) (limited to 'docs') diff --git a/docs/css.html b/docs/css.html index 53cd678d0..2dfa3ff3b 100644 --- a/docs/css.html +++ b/docs/css.html @@ -1613,7 +1613,7 @@ For example, <code><section></code> should be wrapped

Invalid inputs

Style inputs via default browser functionality with :invalid. Specify a type and add the required attribute.

Style inputs via default browser functionality with :invalid. Specify a type, add the required attribute if the field is not optional, and (if applicable) specify a pattern.

diff --git a/docs/templates/pages/css.mustache b/docs/templates/pages/css.mustache index 47abef021..7674f4956 100644 --- a/docs/templates/pages/css.mustache +++ b/docs/templates/pages/css.mustache @@ -1553,7 +1553,7 @@ For example, <code><section></code> should be wrapped

Invalid inputs

Style inputs via default browser functionality with :invalid. Specify a type and add the required attribute.

Style inputs via default browser functionality with :invalid. Specify a type, add the required attribute if the field is not optional, and (if applicable) specify a pattern.

-- cgit v1.2.3 From 91dd77939b4183fa86973056778ad87950674410 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Wed, 9 Jan 2013 18:56:08 -0800 Subject: Add text alignment utility classes --- docs/assets/css/bootstrap.css | 12 ++++++++++++ docs/css.html | 13 +++++++++++++ docs/templates/pages/css.mustache | 13 +++++++++++++ 3 files changed, 38 insertions(+) (limited to 'docs') diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css index fcc8a8c10..3f7434cbd 100644 --- a/docs/assets/css/bootstrap.css +++ b/docs/assets/css/bootstrap.css @@ -510,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, diff --git a/docs/css.html b/docs/css.html index 53cd678d0..64527c34f 100644 --- a/docs/css.html +++ b/docs/css.html @@ -305,6 +305,19 @@

Feel free to use <b> and <i> in HTML5. <b> is meant to highlight words or phrases without conveying additional importance while <i> is mostly for voice, technical terms, etc.

Alignment classes

Easily realign text to components with text alignment classes.

Left aligned text.

Center aligned text.

Right aligned text.

+<p class="text-left">Left aligned text.</p>
+<p class="text-center">Center aligned text.</p>
+<p class="text-right">Right aligned text.</p>
+

Emphasis classes

Convey meaning through color with a handful of emphasis utility classes.

diff --git a/docs/templates/pages/css.mustache b/docs/templates/pages/css.mustache index 47abef021..800dd2ff3 100644 --- a/docs/templates/pages/css.mustache +++ b/docs/templates/pages/css.mustache @@ -242,6 +242,19 @@

Feel free to use <b> and <i> in HTML5. <b> is meant to highlight words or phrases without conveying additional importance while <i> is mostly for voice, technical terms, etc.

Alignment classes

Easily realign text to components with text alignment classes.

Left aligned text.

Center aligned text.

Right aligned text.

+<p class="text-left">Left aligned text.</p>
+<p class="text-center">Center aligned text.</p>
+<p class="text-right">Right aligned text.</p>
+

Emphasis classes

Convey meaning through color with a handful of emphasis utility classes.

-- cgit v1.2.3 From b9b5cd786d2e774f478704c9aa942f35ac5d2a0c Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Fri, 11 Jan 2013 20:23:37 -0800 Subject: Fixes #6555: remove .controls-row from responsive --- docs/assets/css/bootstrap.css | 3 --- 1 file changed, 3 deletions(-) (limited to 'docs') diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css index 3f7434cbd..b296eeeb4 100644 --- a/docs/assets/css/bootstrap.css +++ b/docs/assets/css/bootstrap.css @@ -5132,9 +5132,6 @@ a.badge:hover { display: inline-block; width: auto; } - .controls-row [class*="span"] + [class*="span"] { - margin-left: 0; - } .modal { position: fixed; top: 20px; -- cgit v1.2.3 From 7626cc629ff165f84601ad7c35b64e0b30f491f1 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Fri, 11 Jan 2013 20:26:48 -0800 Subject: Remove overflow: auto; from .tab-content --- docs/assets/css/bootstrap.css | 4 ---- 1 file changed, 4 deletions(-) (limited to 'docs') diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css index b296eeeb4..944292719 100644 --- a/docs/assets/css/bootstrap.css +++ b/docs/assets/css/bootstrap.css @@ -3177,10 +3177,6 @@ fieldset[disabled] .btn-link:hover { clear: both; } -.tab-content { - overflow: auto; -} - .tab-content > .tab-pane, .pill-content > .pill-pane { display: none; -- cgit v1.2.3 From 7a3f078fb487323246ccf64460b7efaf7d478afc Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 12 Jan 2013 13:15:19 -0800 Subject: Remove parent div from pagination component * No more div.pagination; it's now just ul.pagination * No more .pagination-right or .pagination-centered * Sizes remain * Any further customization, such as alignment, should be done on the individual application or site level. --- docs/assets/css/bootstrap.css | 81 ++++++--------- docs/components.html | 171 +++++++++++-------------------- docs/templates/pages/components.mustache | 167 ++++++++++-------------------- 3 files changed, 146 insertions(+), 273 deletions(-) (limited to 'docs') diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css index 944292719..b707ef309 100644 --- a/docs/assets/css/bootstrap.css +++ b/docs/assets/css/bootstrap.css @@ -3746,24 +3746,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; @@ -3773,89 +3768,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; } diff --git a/docs/components.html b/docs/components.html index a8a71842f..8811a7e5e 100644 --- a/docs/components.html +++ b/docs/components.html @@ -1189,29 +1189,25 @@

Standard pagination

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.

-<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>

@@ -1223,43 +1219,37 @@

Disabled and active states

Links are customizable for different circumstances. Use .disabled for unclickable links and .active to indicate the current page.

-<div class="pagination">
-  <ul>
-    <li class="disabled"><a href="#">Prev</a></li>
-    <li class="active"><a href="#">1</a></li>
-    ...
-  </ul>
-</div>
+            
+              «
+              1
+              2
+              3
+              4
+              5
+              »
+           
+

+<ul class="pagination">
+  <li class="disabled"><a href="#">Prev</a></li>
+  <li class="active"><a href="#">1</a></li>
+  ...
+</ul>

You can optionally swap out active or disabled anchors for spans to remove click functionality while retaining intended styles.

-<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>

Sizes

Fancy larger or smaller pagination? Add .pagination-large, .pagination-small, or .pagination-mini for additional sizes.

-<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>
-

Alignment

Add one of two optional classes to change the alignment of pagination links: .pagination-centered and .pagination-right.

-<div class="pagination pagination-centered">
-  ...
-</div>
-

-<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>

diff --git a/docs/templates/pages/components.mustache b/docs/templates/pages/components.mustache index c185bff48..0446faf7e 100644 --- a/docs/templates/pages/components.mustache +++ b/docs/templates/pages/components.mustache @@ -1121,29 +1121,25 @@

Standard pagination

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.

-<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>

@@ -1155,43 +1151,37 @@

Disabled and active states

Links are customizable for different circumstances. Use .disabled for unclickable links and .active to indicate the current page.

-<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>

You can optionally swap out active or disabled anchors for spans to remove click functionality while retaining intended styles.

-<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>

Sizes

Fancy larger or smaller pagination? Add .pagination-large, .pagination-small, or .pagination-mini for additional sizes.

-<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>
-

Alignment

Add one of two optional classes to change the alignment of pagination links: .pagination-centered and .pagination-right.

-<div class="pagination pagination-centered">
-  ...
-</div>
-

-<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>

-- cgit v1.2.3 From b1f0a7e62b32e97930d579ef24e414ace39bad29 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 12 Jan 2013 13:46:07 -0800 Subject: Remove Extend page from the docs entirely * Information was old and out of date on compiling Bootstrap * Information was also not directly related to Bootstrap with background info on Less and apps for compiling (Google it, yo) * Starter template and recommended HTML is already in use on the Getting Started page --- docs/extend.html | 306 ----------------------------------- docs/templates/pages/extend.mustache | 169 ------------------- 2 files changed, 475 deletions(-) delete mode 100644 docs/extend.html delete mode 100644 docs/templates/pages/extend.mustache (limited to 'docs') 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 @@ - - - - - Extend · Bootstrap - - - - - - - - - - - - - - - - - - - - - - - - -

- - Bootstrap -

- Home -
- Get started -
- Core CSS -
- Components -
- JavaScript -
- Customize -
- Gallery -

- - -

Extending Bootstrap

Extend Bootstrap to take advantage of included styles and components, as well as LESS variables and mixins.

- -

- - -

- -

- - - - -

- - -

Bootstrap is made with LESS at its core, a dynamic stylesheet language created by our good friend, Alexis Sellier. It makes developing systems-based CSS faster, easier, and more fun.

- -

Why LESS?

One of Bootstrap's creators wrote a quick blog post about this, summarized here:

Bootstrap compiles faster ~6x faster with Less compared to Sass
Less is written in JavaScript, making it easier to us to dive in and patch compared to Ruby with Sass.
Less is more; we want to feel like we're writing CSS and making Bootstrap approachable to all.

- -

What's included?

As an extension of CSS, LESS includes variables, mixins for reusable snippets of code, operations for simple math, nesting, and even color functions.

- -

Learn more

Visit the official website at http://lesscss.org to learn more.

- - - - -

- - -

Since our CSS is written with Less and utilizes variables and mixins, it needs to be compiled for final production implementation. Here's how.

- -

- Note: If you're submitting a pull request to GitHub with modified CSS, you must recompile the CSS via any of these methods. -

- -

Tools for compiling

- -

Node with makefile

Install the LESS command line compiler, JSHint, Recess, and uglify-js globally with npm by running the following command:

$ npm install -g less jshint recess uglify-js

Once installed just run make from the root of your bootstrap directory and you're all set.

Additionally, if you have watchr installed, you may run make watch to have bootstrap automatically rebuilt every time you edit a file in the bootstrap lib (this isn't required, just a convenience method).

- -

Command line

Install the LESS command line tool via Node and run the following command:

$ lessc ./less/bootstrap.less > bootstrap.css

Be sure to include --compress in that command if you're trying to save some bytes!

- -

JavaScript

Download the latest Less.js and include the path to it (and Bootstrap) in the <head>.

-<link rel="stylesheet/less" href="/path/to/bootstrap.less">
-<script src="/path/to/less.js"></script>
-

To recompile the .less files, just save them and reload your page. Less.js compiles them and stores them in local storage.

- -

Unofficial Mac app

The unofficial Mac app 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.

- -

More apps

Crunch

Crunch is a great looking LESS editor and compiler built on Adobe Air.

CodeKit

Created by the same guy as the unofficial Mac app, CodeKit is a Mac app that compiles LESS, SASS, Stylus, and CoffeeScript.

Simpless

Mac, Linux, and Windows app for drag and drop compiling of LESS files. Plus, the source code is on GitHub.

- -

- - - - -

- -

Quickly start 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.

- -

Setup file structure

Download the latest compiled Bootstrap and place into your project. For example, you might have something like this:

-   app/
-       layouts/
-       templates/
-   public/
-       css/
-           bootstrap.min.css
-       js/
-           bootstrap.min.js
-       img/
-           glyphicons-halflings.png
-           glyphicons-halflings-white.png
-

- -

Utilize starter template

Copy the following base HTML to get started.

-<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>
-

- -

Layer on custom code

Work in your custom CSS, JS, and more as necessary to make Bootstrap your own with your own separate CSS and JS files.

-<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>
-

- -

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 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 @@ - -

Extending Bootstrap

Extend Bootstrap to take advantage of included styles and components, as well as LESS variables and mixins.

- -

- - -

- -

- - - - -

- - -

Bootstrap is made with LESS at its core, a dynamic stylesheet language created by our good friend, Alexis Sellier. It makes developing systems-based CSS faster, easier, and more fun.

- -

Why LESS?

One of Bootstrap's creators wrote a quick blog post about this, summarized here:

Bootstrap compiles faster ~6x faster with Less compared to Sass
Less is written in JavaScript, making it easier to us to dive in and patch compared to Ruby with Sass.
Less is more; we want to feel like we're writing CSS and making Bootstrap approachable to all.

- -

What's included?

As an extension of CSS, LESS includes variables, mixins for reusable snippets of code, operations for simple math, nesting, and even color functions.

- -

Learn more

Visit the official website at http://lesscss.org to learn more.

- - - - -

- - -

Since our CSS is written with Less and utilizes variables and mixins, it needs to be compiled for final production implementation. Here's how.

- -

- Note: If you're submitting a pull request to GitHub with modified CSS, you must recompile the CSS via any of these methods. -

- -

Tools for compiling

- -

Node with makefile

Install the LESS command line compiler, JSHint, Recess, and uglify-js globally with npm by running the following command:

$ npm install -g less jshint recess uglify-js

Once installed just run make from the root of your bootstrap directory and you're all set.

- -

Command line

Install the LESS command line tool via Node and run the following command:

$ lessc ./less/bootstrap.less > bootstrap.css

Be sure to include --compress in that command if you're trying to save some bytes!

- -

JavaScript

Download the latest Less.js and include the path to it (and Bootstrap) in the <head>.

-<link rel="stylesheet/less" href="/path/to/bootstrap.less">
-<script src="/path/to/less.js"></script>
-

To recompile the .less files, just save them and reload your page. Less.js compiles them and stores them in local storage.

- -

Unofficial Mac app

- -

More apps

Crunch

Crunch is a great looking LESS editor and compiler built on Adobe Air.

CodeKit

Created by the same guy as the unofficial Mac app, CodeKit is a Mac app that compiles LESS, SASS, Stylus, and CoffeeScript.

Simpless

Mac, Linux, and Windows app for drag and drop compiling of LESS files. Plus, the source code is on GitHub.

- -

- - - - -

- -

Quickly start 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.

- -

Setup file structure

Download the latest compiled Bootstrap and place into your project. For example, you might have something like this:

-   app/
-       layouts/
-       templates/
-   public/
-       css/
-           bootstrap.min.css
-       js/
-           bootstrap.min.js
-       img/
-           glyphicons-halflings.png
-           glyphicons-halflings-white.png
-

- -

Utilize starter template

Copy the following base HTML to get started.

-<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>
-

- -

Layer on custom code

Work in your custom CSS, JS, and more as necessary to make Bootstrap your own with your own separate CSS and JS files.

-<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>
-

- -

{{! /span9 }} -

{{! row}} - -

{{! /.container }} -- cgit v1.2.3 From 24f7df15e6a5b4b08201b3a6650340998f3ed381 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 12 Jan 2013 13:57:41 -0800 Subject: Remove mention of Extend page from readme and index page --- docs/index.html | 3 --- docs/templates/pages/index.mustache | 3 --- 2 files changed, 6 deletions(-) (limited to 'docs') 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 @@

Examples

- Extend -

Version 3.0.0

Examples
- Extend -
Version 3.0.0

-- cgit v1.2.3

Usage

Via data attributes

Via JavaScript

.clearfix

.clearfix

Usage

Via data attributes

Via JavaScript

Uneditable inputs

Uneditable inputs

Uneditable inputs

Uneditable inputs

Control sizing

Block level inputs

Relative sizing

Control sizing

Block level inputs

Relative sizing

Form control states

Input focus

Input focus

Invalid inputs

Invalid inputs

Disabled inputs

Disabled inputs

Disabled fieldsets

Disabled fieldsets

Validation states

Validation states

Form control states

Input focus

Input focus

Invalid inputs

Invalid inputs

Disabled inputs

Disabled inputs

Disabled fieldsets

Disabled fieldsets

Validation states

Validation states

.clearfix

.clearfix

Invalid inputs

Invalid inputs

Alignment classes

Emphasis classes

Alignment classes

Emphasis classes

Standard pagination

Disabled and active states

Sizes

Alignment

Standard pagination

Disabled and active states

Sizes

Alignment

Built with LESS

Why LESS?

What's included?

Learn more

Compiling Bootstrap with Less

Tools for compiling

Node with makefile

Command line

JavaScript

Unofficial Mac app

More apps

Crunch

CodeKit

Simpless

Use as static assets

Setup file structure

Utilize starter template

Layer on custom code

Built with LESS

Why LESS?

What's included?

Learn more

Compiling Bootstrap with Less

Tools for compiling