From 4c82dd3645ec60277b07a161c779f57dda10037c Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 9 Dec 2012 21:46:14 -0800 Subject: Refactor input groups * Deprecate .input-append and .input-prepend * Use new, single base class for component, .input-group * Deprecate .addon for .input-group-addon * For compatibility with all buttons, require .input-group-btn to wrap buttons and button dropdowns * Still need to reimplement with segmented button dropdowns, but that's dependent on a refactor of those first --- docs/css.html | 254 +++++++++++++++++++++++++++------------------------------- 1 file changed, 118 insertions(+), 136 deletions(-) (limited to 'docs/css.html') diff --git a/docs/css.html b/docs/css.html index 728dac389..e6506c432 100644 --- a/docs/css.html +++ b/docs/css.html @@ -1119,13 +1119,15 @@ For example, <code><section></code> should be wrapped as inlin
+
+ +
-
@@ -1146,9 +1148,11 @@ For example, <code><section></code> should be wrapped as inlin </div> <div class="control-group"> <div class="controls"> - <label class="checkbox"> - <input type="checkbox"> Remember me - </label> + <div class="checkbox"> + <label> + <input type="checkbox"> Remember me + </label> + </div> <button type="submit" class="btn">Sign in</button> </div> </div> @@ -1284,85 +1288,116 @@ For example, <code><section></code> should be wrapped as inlin

Extending form controls

Adding on top of existing browser controls, Bootstrap includes other useful form components.

-

Prepended and appended inputs

-

Add text or buttons before or after any text-based input. Do note that select elements are not supported here.

- -

Default options

-

Wrap an .add-on and an input with one of two classes to prepend or append text to an input.

+

Input groups

+

Add text or buttons before, after, or on both sides of any text-based input. Use .input-group with a .add-on to prepend or append elements to an <input>.

+

Avoid using <select> elements here as they cannot be fully styled in WebKit browsers.

-
- @ - +
+ @ +

-
- - .00 +
+ + .00 +
+
+
+ $ + + .00 
-<div class="input-prepend">
-  <span class="add-on">@</span>
-  <input id="prependedInput" type="text" placeholder="Username">
+<div class="input-group span9">
+  <span class="input-group-addon">@</span>
+  <input type="text" placeholder="Username">
 </div>
-<div class="input-append">
-  <input id="appendedInput" type="text">
-  <span class="add-on">.00</span>
+
+<div class="input-group span6">
+  <input type="text">
+  <span class="input-group-addon">.00</span>
 </div>
-
-

Combined

-

Use both classes and two instances of .add-on to prepend and append an input.

-
-
- $ - - .00 -
-
-
-<div class="input-prepend input-append">
-  <span class="add-on">$</span>
-  <input id="appendedPrependedInput" type="text">
-  <span class="add-on">.00</span>
+<div class="input-group span3">
+  <span class="input-group-addon">$</span>
+  <input type="text">
+  <span class="input-group-addon">.00</span>
 </div>

Buttons instead of text

-

Instead of a <span> with text, use a .btn to attach a button (or two) to an input.

+

Buttons in input groups are a bit different and require one extra level of nesting. Instead of .input-group-addon, you'll need to use .input-group-btn to wrap the buttons. This is required due to default browser styles that cannot be overridden.

-
- - +
+ + + + +
+
+
+ + + + 
-<div class="input-append">
-  <input class="span3" id="appendedInputButton" type="text">
-  <button class="btn" type="button">Go!</button>
+<div class="input-group span7">
+  <span class="input-group-btn">
+    <button class="btn" type="button">Go!</button>
+  </span>
+  <input type="text">
+</div>
+
+<div class="input-group span7">
+  <input type="text">
+  <span class="input-group-btn">
+    <button class="btn" type="button">Go!</button>
+  </span>
 </div>
-
- - - +
+ + + + + +
+
+
+ + + + + 
-<div class="input-append">
-  <input class="span3" id="appendedInputButton" type="text">
-  <button class="btn" type="button">Search</button>
-  <button class="btn" type="button">Options</button>
+<div class="input-group span7">
+  <input type="text">
+  <span class="input-group-btn">
+    <button class="btn" type="button">Search</button>
+    <button class="btn" type="button">Options</button>
+  </span>
+</div>
+
+<div class="input-group span7">
+  <span class="input-group-btn">
+    <button class="btn" type="button">Search</button>
+    <button class="btn" type="button">Options</button>
+  </span>
+  <input type="text">
 </div>

Button dropdowns

-
- -
+
+
  • Action
    • @@ -1372,27 +1407,12 @@ For example, <code><section></code> should be wrapped as inlin
  • Separated link
-
- -
-<div class="input-append">
-  <input id="appendedInputButtons" type="text">
-  <input class="span3" id="appendedDropdownButton" type="text">
-  <div class="btn-group">
-    <button class="btn dropdown-toggle" data-toggle="dropdown">
-      Action
-      <span class="caret"></span>
-    </button>
-    <ul class="dropdown-menu">
-      ...
-    </ul>
-  </div>
-</div>
-
- -
-
-
+ +
+
+
+ +
  • Action
    • @@ -1402,12 +1422,11 @@ For example, <code><section></code> should be wrapped as inlin
  • Separated link
- -
+ 
-<div class="input-prepend">
-  <div class="btn-group">
+<div class="input-group span7">
+  <div class="input-group-btn btn-group">
     <button class="btn dropdown-toggle" data-toggle="dropdown">
       Action
       <span class="caret"></span>
@@ -1416,48 +1435,12 @@ For example, <code><section></code> should be wrapped as inlin
       ...
     </ul>
   </div>
-  <input class="span2" id="prependedDropdownButton" type="text">
+  <input type="text">
 </div>
-
-
-
-
- - -
- -
- - -
-
-
-
-<div class="input-prepend input-append">
-  <div class="btn-group">
-    <button class="btn dropdown-toggle" data-toggle="dropdown">
-      Action
-      <span class="caret"></span>
-    </button>
-    <ul class="dropdown-menu">
-      ...
-    </ul>
-  </div>
-  <input class="span2" id="appendedPrependedDropdownButton" type="text">
-  <div class="btn-group">
+<div class="input-group span7">
+  <input type="text">
+  <div class="input-group-btn btn-group">
     <button class="btn dropdown-toggle" data-toggle="dropdown">
       Action
       <span class="caret"></span>
@@ -1471,8 +1454,8 @@ For example, <code><section></code> should be wrapped as inlin
 
           
Segmented dropdown groups

           

-            

-              

+            

+              

                 
                 

               
             

-            

-              
-              

+
+            

+              
+              

                 
                 

           
 
-<form>
-  <div class="input-prepend">
-    <div class="btn-group">...</div>
-    <input type="text" class="span3">
-  </div>
-  <div class="input-append">
-    <input type="text" class="span3">
-    <div class="btn-group">...</div>
-  </div>
-</form>
+<div class="input-prepend">
+  <div class="btn-group">...</div>
+  <input type="text" class="span3">
+</div>
+<div class="input-append">
+  <input type="text" class="span3">
+  <div class="btn-group">...</div>
+</div>
 

 
           
Search form

-- 
cgit v1.2.3


From 48759eee941729a2e21a89215123b2e05c0b8549 Mon Sep 17 00:00:00 2001
From: Chris Rebert 
Date: Mon, 10 Dec 2012 01:33:02 -0800
Subject: document fieldset[disabled] styling added in #6199; per @mdo

---
 docs/css.html | 37 +++++++++++++++++++++++++++++++++++++
 1 file changed, 37 insertions(+)

(limited to 'docs/css.html')

diff --git a/docs/css.html b/docs/css.html
index 728dac389..f2f54a3fc 100644
--- a/docs/css.html
+++ b/docs/css.html
@@ -1725,6 +1725,43 @@ For example, <code><section></code> should be wrapped as inlin
 <input class="input-xlarge" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>
+

Disabled fieldsets

+

Add the disabled attribute on a fieldset to disable all the controls within the fieldset at once.

+
+
+ + +
+ +
+ +
+
+
+<form class="form-inline">
+  <fieldset disabled>
+    <input type="text" class="span4" placeholder="These controls are all disabled just">
+    <select class="span4">
+      <option>by being under a disabled fieldset</option>
+    </select>
+    <div class="checkbox">
+      <label>
+        <input type="checkbox"> Can't check this
+      </label>
+    </div>
+    <button type="submit" class="btn btn-primary">Submit</button>
+  </fieldset>
+</form>
+
+

+ Heads up! + <a> buttons within a fieldset[disabled] will be styled like they each had the .disabled class, but this only affects aesthetics; you must use custom JavaScript to actually make such links non-functional. +

+

Validation states

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

-- cgit v1.2.3 From 8c8a14ab59553984d6bb2b1d080e9f3917d6e981 Mon Sep 17 00:00:00 2001 From: Chris Rebert Date: Mon, 10 Dec 2012 01:46:16 -0800 Subject: document caveat regarding fieldset legend and #6199 --- docs/css.html | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) (limited to 'docs/css.html') diff --git a/docs/css.html b/docs/css.html index f2f54a3fc..7f67fa294 100644 --- a/docs/css.html +++ b/docs/css.html @@ -1759,7 +1759,8 @@ For example, <code><section></code> should be wrapped as inlin

Heads up! - <a> buttons within a fieldset[disabled] will be styled like they each had the .disabled class, but this only affects aesthetics; you must use custom JavaScript to actually make such links non-functional. + Contrary to the HTML5 spec, form controls within a fieldset's legend will also be disabled.
+ Also, <a> buttons within a fieldset[disabled] will be styled like they each had the .disabled class, but this only affects aesthetics; you must use custom JavaScript to actually make such links non-functional.

Validation states

-- cgit v1.2.3 From 19a94d08d659d39e718efca95812cac2db178b15 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Wed, 19 Dec 2012 19:33:14 -0800 Subject: Remove support for multiple buttons in input groups because fuck that shit. --- docs/css.html | 36 ++---------------------------------- 1 file changed, 2 insertions(+), 34 deletions(-) (limited to 'docs/css.html') diff --git a/docs/css.html b/docs/css.html index e6506c432..01410e0c4 100644 --- a/docs/css.html +++ b/docs/css.html @@ -1357,40 +1357,6 @@ For example, <code><section></code> should be wrapped as inlin <button class="btn" type="button">Go!</button> </span> </div> - -
-
- - - - - -
-
-
- - - - - -
-
-
-<div class="input-group span7">
-  <input type="text">
-  <span class="input-group-btn">
-    <button class="btn" type="button">Search</button>
-    <button class="btn" type="button">Options</button>
-  </span>
-</div>
-
-<div class="input-group span7">
-  <span class="input-group-btn">
-    <button class="btn" type="button">Search</button>
-    <button class="btn" type="button">Options</button>
-  </span>
-  <input type="text">
-</div>

Button dropdowns

@@ -1471,6 +1437,8 @@ For example, <code><section></code> should be wrapped as inlin
+
+
-- cgit v1.2.3 From 85971ff3e80ce90573ed243055b1b0ba7685e15e Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Wed, 19 Dec 2012 21:12:37 -0800 Subject: Drop .form-search support --- docs/css.html | 39 +-------------------------------------- 1 file changed, 1 insertion(+), 38 deletions(-) (limited to 'docs/css.html') diff --git a/docs/css.html b/docs/css.html index 9b23a836c..d9262dc57 100644 --- a/docs/css.html +++ b/docs/css.html @@ -1060,20 +1060,7 @@ For example, <code><section></code> should be wrapped as inlin

Optional layouts

-

Included with Bootstrap are three optional form layouts for common use cases.

- -

Search form

-

Add .form-search to the form and .search-query to the <input> for an extra-rounded text input.

-
- - -
-
-<form class="form-search">
-  <input type="text" class="span3 search-query">
-  <button type="submit" class="btn">Search</button>
-</form>
-
+

Included with Bootstrap are optional form layouts for common use cases.

Inline form

Add .form-inline for left-aligned labels and inline-block controls for a compact layout.

@@ -1477,30 +1464,6 @@ For example, <code><section></code> should be wrapped as inlin <input type="text" class="span3"> <div class="btn-group">...</div> </div> - - -

Search form

-
-
- - -
-
- - -
-
-
-<form class="form-search">
-  <div class="input-append">
-    <input type="text" class="search-query span3">
-    <button type="submit" class="btn">Search</button>
-  </div>
-  <div class="input-prepend">
-    <button type="submit" class="btn">Search</button>
-    <input type="text" class="search-query span3">
-  </div>
-</form>

Control sizing

-- cgit v1.2.3 From 2011a0d50f717c95b706e10ac5e9e0f964c972a9 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Wed, 19 Dec 2012 21:29:57 -0800 Subject: Drop labels from the docs --- docs/css.html | 15 ++++----------- 1 file changed, 4 insertions(+), 11 deletions(-) (limited to 'docs/css.html') diff --git a/docs/css.html b/docs/css.html index d9262dc57..51fa3ee09 100644 --- a/docs/css.html +++ b/docs/css.html @@ -303,7 +303,7 @@ 
<em>rendered as italicized text</em>
-

Heads up! 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.

+

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.

Emphasis classes

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

@@ -567,8 +567,8 @@ <dd>...</dd> </dl> +
Auto-truncating

- Heads up! Horizontal description lists will truncate terms that are too long to fit in the left column fix text-overflow. In narrower viewports, they will change to the default stacked layout.

@@ -601,7 +601,6 @@ For example, <code><section></code> should be wrapped as inlin &lt;p&gt;Sample text here...&lt;/p&gt; </pre> -

Heads up! Be sure to keep code within <pre> tags as close to the left as possible; it will render all tabs.

You may optionally add the .pre-scrollable class which will set a max-height of 350px and provide a y-axis scrollbar.

@@ -1841,7 +1840,6 @@ For example, <code><section></code> should be wrapped as inlin <a href="#" class="btn btn-large disabled">Link</a>

- Heads up! We use .disabled as a utility class here, similar to the common .active class, so no prefix is required. Also, this class is only for aesthetic; you must use custom JavaScript to disable links here.

@@ -1884,7 +1882,7 @@ For example, <code><section></code> should be wrapped as inlin

Images

-

Add classes to an <img> element to easily style images in any project.

+

Add classes to an <img> element to easily style images in any project. Rounded corners are not available in IE8.

@@ -1895,8 +1893,6 @@ For example, <code><section></code> should be wrapped as inlin <img src="..." class="img-circle"> <img src="..." class="img-polaroid"> -

Heads up! .img-rounded and .img-circle do not work in IE8 due to lack of border-radius support.

- @@ -2094,10 +2090,7 @@ For example, <code><section></code> should be wrapped as inlin <i class="glyphicon-search"></i>

Want to change the icon color? Just change the color of the parent element.

-

- Heads up! - When using beside strings of text, as in buttons or nav links, be sure to leave a space after the icon for proper spacing. -

+

When using beside strings of text, as in buttons or nav links, be sure to leave a space after the icon for proper spacing.

-- cgit v1.2.3 From 65edc9cd6e453a7bf30ccbd6a57b3ea340e21907 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Wed, 19 Dec 2012 21:42:36 -0800 Subject: Change .jumbotron usage in docs layout to .bs-docs-jumbotron --- 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 51fa3ee09..20900ec9c 100644 --- a/docs/css.html +++ b/docs/css.html @@ -68,7 +68,7 @@ -
+

CSS

Fundamental HTML elements styled and enhanced with extensible classes.

-- cgit v1.2.3 From c38b7206eb049f57c7b1db570817739bdda0be6f Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Wed, 19 Dec 2012 22:25:56 -0800 Subject: overhaul buttons --- docs/css.html | 14 ++------------ 1 file changed, 2 insertions(+), 12 deletions(-) (limited to 'docs/css.html') diff --git a/docs/css.html b/docs/css.html index 20900ec9c..dd279a6b4 100644 --- a/docs/css.html +++ b/docs/css.html @@ -1729,8 +1729,8 @@ For example, <code><section></code> should be wrapped as inlin - - btn + + btn btn-default Standard gray button with gradient @@ -1738,11 +1738,6 @@ For example, <code><section></code> should be wrapped as inlin btn btn-primary Provides extra visual weight and identifies the primary action in a set of buttons - - - btn btn-info - Used as an alternative to the default styles - btn btn-success @@ -1758,11 +1753,6 @@ For example, <code><section></code> should be wrapped as inlin btn btn-danger Indicates a dangerous or potentially negative action - - - btn btn-inverse - Alternate dark gray button, not tied to a semantic action or use - btn btn-link -- cgit v1.2.3 From afef81c0d79fc0c8bc313f7f46f4f92f7e3a9988 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Wed, 19 Dec 2012 22:30:08 -0800 Subject: remove commented out buttons css, update docs --- 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 dd279a6b4..fdf1fe595 100644 --- a/docs/css.html +++ b/docs/css.html @@ -1730,7 +1730,7 @@ For example, <code><section></code> should be wrapped as inlin - btn btn-default + btn Standard gray button with gradient -- cgit v1.2.3 From 14844db862a61c92be982921e14a526484f3b8a9 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Wed, 19 Dec 2012 23:37:33 -0800 Subject: Holy shit, buttons, button states, and input states updated --- docs/css.html | 23 +++++++++++------------ 1 file changed, 11 insertions(+), 12 deletions(-) (limited to 'docs/css.html') diff --git a/docs/css.html b/docs/css.html index 3ad55d080..ddf4e08a7 100644 --- a/docs/css.html +++ b/docs/css.html @@ -1650,13 +1650,17 @@ For example, <code><section></code> should be wrapped as inlin

Disabled fieldsets

-

Add the disabled attribute on a fieldset to disable all the controls within the fieldset at once.

+

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.

- - +
+ +
+
+ + 
-For example, <code><section></code> should be wrapped as inline.
+For example, <code>&lt;section&gt;</code> should be wrapped as inline.

Basic block

-- cgit v1.2.3