From ecfa09decb7dff6ad601834c2ad400467a72ba96 Mon Sep 17 00:00:00 2001 From: Jim Webb Date: Wed, 12 Dec 2012 11:48:44 -0500 Subject: [PATCH 01/21] * modify scrollspy documentation to clarify javascript usage * add scrollspy 'target' option --- docs/javascript.html | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/docs/javascript.html b/docs/javascript.html index 6c4fbf7fbb..418dec9e61 100644 --- a/docs/javascript.html +++ b/docs/javascript.html @@ -571,12 +571,12 @@ $('#myModal').on('hidden', function () {

Usage

Via data attributes

-

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.

+

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 need to use scrollspy with a .nav component.

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

Via JavaScript

Call the scrollspy via JavaScript:

- 
$('#navbar').scrollspy()
+ 
$('body').scrollspy(options)
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 From d206ec16595a022f10955eb025fd5756512399a8 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 24 Dec 2012 02:06:28 -0800 Subject: [PATCH 02/21] 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 +----------------------- less/badges.less | 6 ------ 4 files changed, 2 insertions(+), 68 deletions(-) diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css index 44581d473c..b5ef18ebb1 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 ac9dc91ce2..b870c1f3fd 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 4db9d84dce..b3d0b29ea9 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> - - diff --git a/less/badges.less b/less/badges.less index b8de24df1a..5511bc81f3 100644 --- a/less/badges.less +++ b/less/badges.less @@ -44,12 +44,6 @@ a.badge { // Success (green) &-success { background-color: @state-success-text; } &-success[href] { background-color: darken(@state-success-text, 10%); } - // Info (turquoise) - &-info { background-color: @state-info-text; } - &-info[href] { background-color: darken(@state-info-text, 10%); } - // Inverse (black) - &-inverse { background-color: @grayDark; } - &-inverse[href] { background-color: darken(@grayDark, 10%); } } // Quick fix for labels/badges in buttons From c063f7c9c26abad3d9ac605d70b60d86e4d79343 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 24 Dec 2012 02:08:45 -0800 Subject: [PATCH 03/21] Update docs to reflect latest on .clearfix --- docs/components.html | 2 +- docs/templates/pages/components.mustache | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/components.html b/docs/components.html index b870c1f3fd..e528837da4 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 b3d0b29ea9..8060770aca 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"
From 9921d219693a1b01f7c9275babbef3f9d0afd3be Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Wed, 26 Dec 2012 13:59:01 -0600 Subject: [PATCH 04/21] Run make on previous commits --- docs/javascript.html | 10 ++-------- 1 file changed, 2 insertions(+), 8 deletions(-) diff --git a/docs/javascript.html b/docs/javascript.html index fe7f750c0c..2d01af561f 100644 --- a/docs/javascript.html +++ b/docs/javascript.html @@ -571,12 +571,12 @@ $('#myModal').on('hidden', function () {

Usage

Via data attributes

-

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 need to use scrollspy with a .nav component.

+

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.

<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 From c17673dc6139de37ecb5d075231e426d1b238706 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Wed, 26 Dec 2012 13:59:09 -0600 Subject: [PATCH 05/21] Restore .form-horizontal --- docs/assets/css/bootstrap.css | 25 +++++++++++++++++++++++++ less/forms.less | 29 ++++++++++++++++++++++++++++- 2 files changed, 53 insertions(+), 1 deletion(-) diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css index b5ef18ebb1..b4e548870a 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; diff --git a/less/forms.less b/less/forms.less index dc4e7ffd98..cc0f49b343 100644 --- a/less/forms.less +++ b/less/forms.less @@ -428,7 +428,6 @@ select:focus:invalid { - // Input groups // -------------------------------------------------- @@ -537,3 +536,31 @@ select:focus:invalid { border-radius: 0 @border-radius-base @border-radius-base 0; } } + + + +// Horizontal forms +// -------------------------------------------------- + +.form-horizontal { + + // Increase spacing between groups + .control-group { + margin-bottom: @line-height-base / 2; + .clearfix(); + } + + // Float the labels left + .control-group > .control-label { + float: left; + width: @component-offset-horizontal - 20; + padding-top: 5px; + text-align: right; + } + + // Move over all input controls and content over + .control-group > .controls { + margin-left: @component-offset-horizontal; + } + +} From 0da31ceb51e7339e1c7119b3877ce6f5a88ab4fc Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Wed, 26 Dec 2012 14:06:21 -0600 Subject: [PATCH 06/21] Cleanup spacing in variables file --- less/variables.less | 69 ++++++++++++++++++++++----------------------- 1 file changed, 34 insertions(+), 35 deletions(-) diff --git a/less/variables.less b/less/variables.less index f5103cca64..71de02c06e 100644 --- a/less/variables.less +++ b/less/variables.less @@ -78,17 +78,17 @@ @btn-background: #fff; @btn-background-highlight: #eaeaea; -@btn-background-primary: @link-color; -@btn-background-primary-highlight: darken(@link-color, 10%); +@btn-background-primary: @link-color; +@btn-background-primary-highlight: darken(@link-color, 10%); -@btn-background-success: #62c462; -@btn-background-success-highlight: #51a351; +@btn-background-success: #62c462; +@btn-background-success-highlight: #51a351; -@btn-background-warning: lighten(#f89406, 15%); -@btn-background-warning-highlight: #f89406; +@btn-background-warning: lighten(#f89406, 15%); +@btn-background-warning-highlight: #f89406; -@btn-background-danger: #ee5f5b; -@btn-background-danger-highlight: #bd362f; +@btn-background-danger: #ee5f5b; +@btn-background-danger-highlight: #bd362f; // Forms @@ -113,12 +113,12 @@ @dropdown-background: #fff; @dropdown-border: rgba(0,0,0,.2); -@dropdown-divider-top: #e5e5e5; -@dropdown-divider-bottom: #fff; +@dropdown-divider-top: #e5e5e5; +@dropdown-divider-bottom: #fff; -@dropdown-link-color: @grayDark; -@dropdown-link-color-hover: #fff; -@dropdown-link-color-active: #fff; +@dropdown-link-color: @grayDark; +@dropdown-link-color-hover: #fff; +@dropdown-link-color-active: #fff; @dropdown-link-background-active: @link-color; @dropdown-link-background-hover: @dropdown-link-background-active; @@ -186,8 +186,7 @@ // ------------------------- @pagination-background: #fff; -@pagination-background-active: #f5f5f5; - +@pagination-background-active: #f5f5f5; @pagination-border: #ddd; @@ -221,32 +220,32 @@ // Tooltips and popovers // ------------------------- -@tooltip-color: #fff; -@tooltip-background: rgba(0,0,0,.9); -@tooltip-arrow-width: 5px; -@tooltip-arrow-color: @tooltip-background; +@tooltip-color: #fff; +@tooltip-background: rgba(0,0,0,.9); +@tooltip-arrow-width: 5px; +@tooltip-arrow-color: @tooltip-background; -@popover-background: #fff; -@popover-arrow-width: 10px; -@popover-arrow-color: #fff; -@popover-title-background: darken(@popover-background, 3%); +@popover-background: #fff; +@popover-arrow-width: 10px; +@popover-arrow-color: #fff; +@popover-title-background: darken(@popover-background, 3%); // Special enhancement for popovers -@popover-arrow-outer-width: @popover-arrow-width + 1; -@popover-arrow-outer-color: rgba(0,0,0,.25); +@popover-arrow-outer-width: @popover-arrow-width + 1; +@popover-arrow-outer-color: rgba(0,0,0,.25); // Miscellaneous // ------------------------- // Hr border color -@hr-border: @grayLighter; +@hr-border: @grayLighter; // Horizontal forms & lists -@component-offset-horizontal: 180px; +@component-offset-horizontal: 180px; // Wells -@well-background: #f5f5f5; +@well-background: #f5f5f5; @@ -254,17 +253,17 @@ // -------------------------------------------------- // Default 940px grid -@grid-columns: 12; +@grid-columns: 12; @grid-column-width: 60px; @grid-gutter-width: 20px; @grid-row-width: (@grid-columns * @grid-column-width) + (@grid-gutter-width * (@grid-columns - 1)); // 1200px min -@grid-column-width-1200: 70px; -@grid-gutter-width-1200: 30px; -@grid-row-width-1200: (@grid-columns * @grid-column-width-1200) + (@grid-gutter-width-1200 * (@grid-columns - 1)); +@grid-column-width-1200: 70px; +@grid-gutter-width-1200: 30px; +@grid-row-width-1200: (@grid-columns * @grid-column-width-1200) + (@grid-gutter-width-1200 * (@grid-columns - 1)); // 768px-979px -@grid-column-width-768: 42px; -@grid-gutter-width-768: 20px; -@grid-row-width-768: (@grid-columns * @grid-column-width-768) + (@grid-gutter-width-768 * (@grid-columns - 1)); +@grid-column-width-768: 42px; +@grid-gutter-width-768: 20px; +@grid-row-width-768: (@grid-columns * @grid-column-width-768) + (@grid-gutter-width-768 * (@grid-columns - 1)); From 070109abc1624808873e6e172ff97d27eb05c406 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Wed, 26 Dec 2012 14:09:36 -0600 Subject: [PATCH 07/21] 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 +--------- less/forms.less | 19 ------ 4 files changed, 2 insertions(+), 188 deletions(-) diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css index b4e548870a..a1af172b29 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 a3133026d7..db7cb17e2a 100644 --- a/docs/css.html +++ b/docs/css.html @@ -1538,39 +1538,7 @@ For example, <code>&lt;section&gt;</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 30b0e68e60..93e3e269d7 100644 --- a/docs/templates/pages/css.mustache +++ b/docs/templates/pages/css.mustache @@ -1478,39 +1478,7 @@ For example, <code>&lt;section&gt;</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/less/forms.less b/less/forms.less index cc0f49b343..ca7060b0a8 100644 --- a/less/forms.less +++ b/less/forms.less @@ -291,10 +291,6 @@ textarea[class*="span"], margin-right: 0; } -.controls-row { - #grid > .input(@grid-column-width, @grid-gutter-width, @grid-row-width); -} - // Ensure input-prepend/append never wraps .input-append input[class*="span"], .input-append .uneditable-input[class*="span"], @@ -309,21 +305,6 @@ textarea[class*="span"], .uneditable-input[class*="span"] { height: @input-height; } -// Control row for multiple inputs per line -.controls-row { - .clearfix(); // Clear the float from controls -} - -// Float to collapse white-space for proper grid alignment -.controls-row [class*="span"] { - float: left; -} -// Explicity set top padding on all checkboxes/radios, not just first-child -.controls-row .checkbox[class*="span"], -.controls-row .radio[class*="span"] { - padding-top: 5px; -} - From 12b738bf302699a51721d030465e07f76de72bf9 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Wed, 26 Dec 2012 14:13:44 -0600 Subject: [PATCH 08/21] 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(-) diff --git a/docs/css.html b/docs/css.html index db7cb17e2a..b23119f8d2 100644 --- a/docs/css.html +++ b/docs/css.html @@ -1538,7 +1538,33 @@ For example, <code>&lt;section&gt;</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.

+

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 93e3e269d7..31d0b6c2e8 100644 --- a/docs/templates/pages/css.mustache +++ b/docs/templates/pages/css.mustache @@ -1478,7 +1478,33 @@ For example, <code>&lt;section&gt;</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.

+

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.

From 2ef4fde09fae0dd3e054a77b61b0738fe538b58d Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Wed, 26 Dec 2012 14:19:48 -0600 Subject: [PATCH 09/21] 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 ----------- less/mixins.less | 8 -------- less/responsive-767px-max.less | 2 +- less/utilities.less | 8 -------- 6 files changed, 1 insertion(+), 45 deletions(-) diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css index a1af172b29..8b93968b6b 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 b23119f8d2..bf659d5c57 100644 --- a/docs/css.html +++ b/docs/css.html @@ -1468,17 +1468,6 @@ For example, <code>&lt;section&gt;</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.

diff --git a/docs/templates/pages/css.mustache b/docs/templates/pages/css.mustache index 31d0b6c2e8..47ac9e5c9a 100644 --- a/docs/templates/pages/css.mustache +++ b/docs/templates/pages/css.mustache @@ -1408,17 +1408,6 @@ For example, <code>&lt;section&gt;</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.

diff --git a/less/mixins.less b/less/mixins.less index a90e61bc73..243436b18c 100644 --- a/less/mixins.less +++ b/less/mixins.less @@ -122,14 +122,6 @@ // FORMS // -------------------------------------------------- -// Block level inputs -.input-block-level() { - display: block; - width: 100%; -} - - - // Mixin for form field states .formFieldState(@text-color: #555, @border-color: #ccc, @background-color: #f5f5f5) { // Set the text color diff --git a/less/responsive-767px-max.less b/less/responsive-767px-max.less index 0a2ff6ef92..52aefff718 100644 --- a/less/responsive-767px-max.less +++ b/less/responsive-767px-max.less @@ -57,7 +57,7 @@ select[class*="span"], textarea[class*="span"], .uneditable-input { - .input-block-level(); + width: 100%; } // But don't let it screw up prepend/append inputs .input-prepend input, diff --git a/less/utilities.less b/less/utilities.less index d1e0a1beda..f31070710b 100644 --- a/less/utilities.less +++ b/less/utilities.less @@ -40,11 +40,3 @@ .affix { position: fixed; } - - -// Forms -// ------------------------- - -.control-block-level { - .input-block-level(); -} From d0baa99aed07b6643d649350f3988b3d8a07a4ac Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Wed, 26 Dec 2012 14:59:58 -0600 Subject: [PATCH 10/21] Remove .text-info and .info form validation states --- docs/assets/css/bootstrap.css | 45 ------------------------------- docs/css.html | 9 ------- docs/templates/pages/css.mustache | 9 ------- less/forms.less | 4 --- less/type.less | 3 --- 5 files changed, 70 deletions(-) diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css index 8b93968b6b..fe6adf2cc3 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 bf659d5c57..33dc6966df 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>&lt;section&gt;</code> should be wrapped Please correct the error
-
- -
- - Username is taken -
-
diff --git a/docs/templates/pages/css.mustache b/docs/templates/pages/css.mustache index 47ac9e5c9a..a72352017f 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>&lt;section&gt;</code> should be wrapped Please correct the error
-
- -
- - Username is taken -
-
diff --git a/less/forms.less b/less/forms.less index ca7060b0a8..4abb7874a3 100644 --- a/less/forms.less +++ b/less/forms.less @@ -353,10 +353,6 @@ input[type="checkbox"] { .control-group.success { .formFieldState(@state-success-text, @state-success-text, @state-success-background); } -// Success -.control-group.info { - .formFieldState(@state-info-text, @state-info-text, @state-info-background); -} // HTML5 invalid states // Shares styles with the .control-group.error above diff --git a/less/type.less b/less/type.less index feb2388f5b..3aac597bd2 100644 --- a/less/type.less +++ b/less/type.less @@ -37,9 +37,6 @@ a.text-warning:hover { color: darken(@state-warning-text, 10%); } .text-error { color: @state-error-text; } a.text-error:hover { color: darken(@state-error-text, 10%); } -.text-info { color: @state-info-text; } -a.text-info:hover { color: darken(@state-info-text, 10%); } - .text-success { color: @state-success-text; } a.text-success:hover { color: darken(@state-success-text, 10%); } From dc5c6d6be8e46e36aa8a2e1d35f6ed8c8e3cd8cb Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Wed, 26 Dec 2012 15:57:52 -0600 Subject: [PATCH 11/21] 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 ++++------ less/forms.less | 18 ++++-- less/mixins.less | 28 ++------- 5 files changed, 64 insertions(+), 138 deletions(-) diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css index fe6adf2cc3..fcc8a8c107 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 33dc6966df..31e745378f 100644 --- a/docs/css.html +++ b/docs/css.html @@ -1671,48 +1671,42 @@ For example, <code>&lt;section&gt;</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.

-
+
- - Something may have gone wrong +
-
+
- - Please correct the error +
-
+
- - 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 a72352017f..c82d48351d 100644 --- a/docs/templates/pages/css.mustache +++ b/docs/templates/pages/css.mustache @@ -1611,48 +1611,42 @@ For example, <code>&lt;section&gt;</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.

-
+
- - Something may have gone wrong +
-
+
- - Please correct the error +
-
+
- - 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/less/forms.less b/less/forms.less index 4abb7874a3..de814a915a 100644 --- a/less/forms.less +++ b/less/forms.less @@ -342,15 +342,15 @@ input[type="checkbox"] { // -------------------------- // Warning -.control-group.warning { +.has-warning { .formFieldState(@state-warning-text, @state-warning-text, @state-warning-background); } // Error -.control-group.error { +.has-error { .formFieldState(@state-error-text, @state-error-text, @state-error-background); } // Success -.control-group.success { +.has-success { .formFieldState(@state-success-text, @state-success-text, @state-success-background); } @@ -523,15 +523,23 @@ select:focus:invalid { // Increase spacing between groups .control-group { - margin-bottom: @line-height-base / 2; + position: relative; + margin-bottom: @line-height-base; .clearfix(); + + input, + select, + textarea, + .uneditable-input { + margin-bottom: 0; + } } // Float the labels left .control-group > .control-label { float: left; width: @component-offset-horizontal - 20; - padding-top: 5px; + padding-top: 6px; text-align: right; } diff --git a/less/mixins.less b/less/mixins.less index 243436b18c..1ab0a4eb23 100644 --- a/less/mixins.less +++ b/less/mixins.less @@ -122,25 +122,14 @@ // FORMS // -------------------------------------------------- -// Mixin for form field states .formFieldState(@text-color: #555, @border-color: #ccc, @background-color: #f5f5f5) { - // Set the text color - .control-label, - .help-block, - .help-inline { + // Color the label text + .control-label { color: @text-color; } - // Style inputs accordingly - .checkbox, - .radio, - input, - select, - textarea { - color: @text-color; - } - input, - select, - textarea { + // Set the border and box shadow on specific inputs to match + .input-with-feedback { + padding-right: 32px; // to account for the feedback icon border-color: @border-color; .box-shadow(inset 0 1px 1px rgba(0,0,0,.075)); // Redeclare so transitions work &:focus { @@ -149,13 +138,6 @@ .box-shadow(@shadow); } } - // Give a small background color for input-prepend/-append - .input-prepend .add-on, - .input-append .add-on { - color: @text-color; - background-color: @background-color; - border-color: @text-color; - } } From 5a2dc0b897968838cf09e0ff990b3a411623ed68 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Fri, 28 Dec 2012 14:47:55 -0600 Subject: [PATCH 12/21] Improve documentation for new form validation styles --- docs/css.html | 17 +++++++++++------ docs/templates/pages/css.mustache | 17 +++++++++++------ 2 files changed, 22 insertions(+), 12 deletions(-) diff --git a/docs/css.html b/docs/css.html index 31e745378f..53cd678d03 100644 --- a/docs/css.html +++ b/docs/css.html @@ -1603,7 +1603,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped

Form control states

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

-

Input focus

+

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>&lt;section&gt;</code> should be wrapped <input class="input-xlarge" id="focusedInput" type="text" value="This is focused..."> -

Invalid inputs

+

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>&lt;section&gt;</code> should be wrapped <input class="span3" type="email" required> -

Disabled inputs

+

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>&lt;section&gt;</code> should be wrapped <input class="input-xlarge" id="disabledInput" type="text" placeholder="Disabled input here..." disabled> -

Disabled fieldsets

+

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>&lt;section&gt;</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 c82d48351d..47abef021d 100644 --- a/docs/templates/pages/css.mustache +++ b/docs/templates/pages/css.mustache @@ -1543,7 +1543,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped

Form control states

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

-

Input focus

+

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>&lt;section&gt;</code> should be wrapped <input class="input-xlarge" id="focusedInput" type="text" value="This is focused..."> -

Invalid inputs

+

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>&lt;section&gt;</code> should be wrapped <input class="span3" type="email" required> -

Disabled inputs

+

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>&lt;section&gt;</code> should be wrapped <input class="input-xlarge" id="disabledInput" type="text" placeholder="Disabled input here..." disabled> -

Disabled fieldsets

+

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.

@@ -1607,8 +1607,13 @@ For example, <code>&lt;section&gt;</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.

From 3d04d9ba751c08ab7909ee6146719171609d5cf9 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Fri, 28 Dec 2012 19:24:13 -0600 Subject: [PATCH 13/21] 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(-) diff --git a/docs/components.html b/docs/components.html index e528837da4..a8a71842f8 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 8060770aca..c185bff481 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"
From 206205a6b2a214fbdc76cfb5e9c63706bb11e0ea Mon Sep 17 00:00:00 2001 From: Chris Rebert Date: Sat, 5 Jan 2013 17:36:20 -0800 Subject: [PATCH 14/21] update docs to reflect #5786 --- docs/css.html | 2 +- docs/templates/pages/css.mustache | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/css.html b/docs/css.html index 53cd678d03..2dfa3ff3b2 100644 --- a/docs/css.html +++ b/docs/css.html @@ -1613,7 +1613,7 @@ For example, <code>&lt;section&gt;</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 47abef021d..7674f4956c 100644 --- a/docs/templates/pages/css.mustache +++ b/docs/templates/pages/css.mustache @@ -1553,7 +1553,7 @@ For example, <code>&lt;section&gt;</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.

From 91dd77939b4183fa86973056778ad87950674410 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Wed, 9 Jan 2013 18:56:08 -0800 Subject: [PATCH 15/21] Add text alignment utility classes --- docs/assets/css/bootstrap.css | 12 ++++++++++++ docs/css.html | 13 +++++++++++++ docs/templates/pages/css.mustache | 13 +++++++++++++ less/type.less | 4 ++++ 4 files changed, 42 insertions(+) diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css index fcc8a8c107..3f7434cbdd 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 53cd678d03..64527c34fe 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 47abef021d..800dd2ff35 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.

diff --git a/less/type.less b/less/type.less index 3aac597bd2..a1789fd79f 100644 --- a/less/type.less +++ b/less/type.less @@ -40,6 +40,10 @@ a.text-error:hover { color: darken(@state-error-text, 10%); } .text-success { color: @state-success-text; } a.text-success:hover { color: darken(@state-success-text, 10%); } +.text-left { text-align: left; } +.text-right { text-align: right; } +.text-center { text-align: center; } + // Headings // ------------------------- From c91bf424b0c69da931b674a021f48fe471b1d053 Mon Sep 17 00:00:00 2001 From: Fabien Date: Fri, 11 Jan 2013 18:32:00 +0100 Subject: [PATCH 16/21] Add glyphicons font path variable --- less/glyphicons.less | 10 +++++----- less/variables.less | 5 +++++ 2 files changed, 10 insertions(+), 5 deletions(-) diff --git a/less/glyphicons.less b/less/glyphicons.less index ad22b45793..bfe481734c 100644 --- a/less/glyphicons.less +++ b/less/glyphicons.less @@ -21,11 +21,11 @@ // Import the fonts @font-face { font-family: 'Glyphicons Halflings'; - src: url('../fonts/glyphiconshalflings-regular.eot'); - src: url('../fonts/glyphiconshalflings-regular.eot?#iefix') format('embedded-opentype'), - url('../fonts/glyphiconshalflings-regular.woff') format('woff'), - url('../fonts/glyphiconshalflings-regular.ttf') format('truetype'), - url('../fonts/glyphiconshalflings-regular.svg#glyphicons_halflingsregular') format('svg'); + src: url('@{glyphicons-font-path}/glyphiconshalflings-regular.eot'); + src: url('@{glyphicons-font-path}/glyphiconshalflings-regular.eot?#iefix') format('embedded-opentype'), + url('@{glyphicons-font-path}/glyphiconshalflings-regular.woff') format('woff'), + url('@{glyphicons-font-path}/glyphiconshalflings-regular.ttf') format('truetype'), + url('@{glyphicons-font-path}/glyphiconshalflings-regular.svg#glyphicons_halflingsregular') format('svg'); font-style: normal; font-weight: normal; } diff --git a/less/variables.less b/less/variables.less index 71de02c06e..1bcc1808d0 100644 --- a/less/variables.less +++ b/less/variables.less @@ -142,6 +142,11 @@ @zindex-modal: 1050; +// Glyphicons font path +// ------------------------- +@glyphicons-font-path: "../fonts"; + + // Navbar // ------------------------- From b9b5cd786d2e774f478704c9aa942f35ac5d2a0c Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Fri, 11 Jan 2013 20:23:37 -0800 Subject: [PATCH 17/21] Fixes #6555: remove .controls-row from responsive --- docs/assets/css/bootstrap.css | 3 --- less/responsive-767px-max.less | 3 --- 2 files changed, 6 deletions(-) diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css index 3f7434cbdd..b296eeeb4c 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; diff --git a/less/responsive-767px-max.less b/less/responsive-767px-max.less index 52aefff718..e690f239db 100644 --- a/less/responsive-767px-max.less +++ b/less/responsive-767px-max.less @@ -67,9 +67,6 @@ display: inline-block; // redeclare so they don't wrap to new lines width: auto; } - .controls-row [class*="span"] + [class*="span"] { - margin-left: 0; - } // Modals .modal { From 7626cc629ff165f84601ad7c35b64e0b30f491f1 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Fri, 11 Jan 2013 20:26:48 -0800 Subject: [PATCH 18/21] Remove overflow: auto; from .tab-content --- docs/assets/css/bootstrap.css | 4 ---- less/navs.less | 3 --- 2 files changed, 7 deletions(-) diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css index b296eeeb4c..9442927195 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; diff --git a/less/navs.less b/less/navs.less index 19b43dfa0b..ff7fe51fa1 100644 --- a/less/navs.less +++ b/less/navs.less @@ -243,9 +243,6 @@ .tabbable { .clearfix(); } -.tab-content { - overflow: auto; // prevent content from running below tabs -} // Show/hide tabbable areas .tab-content > .tab-pane, From 7a3f078fb487323246ccf64460b7efaf7d478afc Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 12 Jan 2013 13:15:19 -0800 Subject: [PATCH 19/21] 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 | 183 ++++++++--------------- docs/templates/pages/components.mustache | 183 ++++++++--------------- less/pagination.less | 81 ++++------ 4 files changed, 190 insertions(+), 338 deletions(-) diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css index 9442927195..b707ef3093 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 a8a71842f8..8811a7e5e2 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>
+<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.

-