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/css.html | 34 +--------------------------------- 1 file changed, 1 insertion(+), 33 deletions(-) (limited to 'docs/css.html') 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>&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.

-- 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 +++++++++++++++++++++++++++- 1 file changed, 27 insertions(+), 1 deletion(-) (limited to 'docs/css.html') 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>&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.

-- 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/css.html | 11 ----------- 1 file changed, 11 deletions(-) (limited to 'docs/css.html') 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>&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.

-- 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/css.html | 9 --------- 1 file changed, 9 deletions(-) (limited to 'docs/css.html') 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>&lt;section&gt;</code> should be wrapped Please correct the error -
- -
- - Username is taken -
-
-- 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/css.html | 30 ++++++++++++------------------ 1 file changed, 12 insertions(+), 18 deletions(-) (limited to 'docs/css.html') 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>&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>
-- 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 +++++++++++------ 1 file changed, 11 insertions(+), 6 deletions(-) (limited to 'docs/css.html') 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>&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.

-- 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 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'docs/css.html') 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>&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.

-- 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/css.html | 13 +++++++++++++ 1 file changed, 13 insertions(+) (limited to 'docs/css.html') 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.

-- cgit v1.2.3