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/assets/css/bootstrap.css | 343 ++++++++------------------------------ docs/css.html | 254 +++++++++++++--------------- docs/templates/pages/css.mustache | 256 +++++++++++++--------------- 3 files changed, 310 insertions(+), 543 deletions(-) (limited to 'docs') diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css index d4495a270..d7fc04bfe 100644 --- a/docs/assets/css/bootstrap.css +++ b/docs/assets/css/bootstrap.css @@ -1340,63 +1340,38 @@ select:focus:invalid:focus { vertical-align: middle; } -.input-append, -.input-prepend { - margin-bottom: 5px; - font-size: 0; - white-space: nowrap; -} - -.input-append input, -.input-prepend input, -.input-append select, -.input-prepend select, -.input-append .uneditable-input, -.input-prepend .uneditable-input, -.input-append .dropdown-menu, -.input-prepend .dropdown-menu { - font-size: 14px; +.input-group { + display: table; } -.input-append input, -.input-prepend input, -.input-append select, -.input-prepend select, -.input-append .uneditable-input, -.input-prepend .uneditable-input { - position: relative; +.input-group[class*="span"] { float: none; - margin: 0; - font-size: 14px; - vertical-align: top; - border-radius: 0 4px 4px 0; + padding: 0; } -.input-append input:focus, -.input-prepend input:focus, -.input-append select:focus, -.input-prepend select:focus, -.input-append .uneditable-input:focus, -.input-prepend .uneditable-input:focus { - z-index: 2; +.input-group input, +.input-group select, +.input-group .uneditable-input { + width: 100%; } -.input-append input[class*="span"], -.input-prepend input[class*="span"], -.input-append select[class*="span"], -.input-prepend select[class*="span"], -.input-append .uneditable-input[class*="span"], -.input-prepend .uneditable-input[class*="span"] { +.input-group-addon, +.input-group-btn, +.input-group input, +.input-group .uneditable-input { + display: table-cell; margin: 0; + border-radius: 0; } -.input-append .add-on, -.input-prepend .add-on { - display: inline-block; - width: auto; - height: 20px; - min-width: 16px; - padding: 6px; +.input-group-addon, +.input-group-btn { + width: 1%; + vertical-align: middle; +} + +.input-group-addon { + padding: 6px 8px; font-size: 14px; font-weight: normal; line-height: 20px; @@ -1404,244 +1379,69 @@ select:focus:invalid:focus { text-shadow: 0 1px 0 #fff; background-color: #eeeeee; border: 1px solid #ccc; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; } -.input-append .add-on, -.input-prepend .add-on, -.input-append .btn, -.input-prepend .btn, -.input-append .btn-group > .dropdown-toggle, -.input-prepend .btn-group > .dropdown-toggle { - vertical-align: top; - border-radius: 0; -} - -.input-append .active, -.input-prepend .active { - background-color: #dff0d8; - border-color: #468847; -} - -.input-prepend .add-on, -.input-prepend .btn { - margin-right: -1px; -} - -.input-prepend .add-on:first-child, -.input-prepend .btn:first-child { - border-radius: 4px 0 0 4px; -} - -.input-append input, -.input-append select, -.input-append .uneditable-input { - border-radius: 4px 0 0 4px; -} - -.input-append input + .btn-group .btn, -.input-append select + .btn-group .btn, -.input-append .uneditable-input + .btn-group .btn, -.input-append input + .btn-group .btn:last-child, -.input-append select + .btn-group .btn:last-child, -.input-append .uneditable-input + .btn-group .btn:last-child { - border-radius: 0 4px 4px 0; -} - -.input-append .add-on, -.input-append .btn, -.input-append .btn-group { - margin-left: -1px; -} - -.input-append .add-on:last-child, -.input-append .btn:last-child, -.input-append .btn-group:last-child > .dropdown-toggle { - border-radius: 0 4px 4px 0; -} - -.input-prepend.input-append input, -.input-prepend.input-append select, -.input-prepend.input-append .uneditable-input { - border-radius: 0; -} - -.input-prepend.input-append input + .btn-group .btn, -.input-prepend.input-append select + .btn-group .btn, -.input-prepend.input-append .uneditable-input + .btn-group .btn { - border-radius: 0 4px 4px 0; -} - -.input-prepend.input-append .add-on:first-child, -.input-prepend.input-append .btn:first-child { - margin-right: -1px; - border-radius: 4px 0 0 4px; -} - -.input-prepend.input-append .add-on:last-child, -.input-prepend.input-append .btn:last-child { - margin-left: -1px; - border-radius: 0 4px 4px 0; -} - -.input-prepend.input-append .btn-group:first-child { - margin-left: 0; -} - -input.search-query { - padding-right: 14px; - padding-right: 4px \9; - padding-left: 14px; - padding-left: 4px \9; - /* IE8 doesn't have border radius, so don't indent the padding */ - - margin-bottom: 0; - border-radius: 20px; -} - -/* Allow for input prepend/append in search forms */ - -.form-search .input-append .search-query, -.form-search .input-prepend .search-query { - border-radius: 0; -} - -.form-search .input-append .search-query { - border-radius: 20px 0 0 20px; -} - -.form-search .input-append .btn { - border-radius: 0 20px 20px 0; -} - -.form-search .input-prepend .search-query { - border-radius: 0 20px 20px 0; -} - -.form-search .input-prepend .btn { - border-radius: 20px 0 0 20px; -} - -.form-search input, -.form-inline input, -.form-horizontal input, -.form-search textarea, -.form-inline textarea, -.form-horizontal textarea, -.form-search select, -.form-inline select, -.form-horizontal select, -.form-search .help-inline, -.form-inline .help-inline, -.form-horizontal .help-inline, -.form-search .uneditable-input, -.form-inline .uneditable-input, -.form-horizontal .uneditable-input, -.form-search .input-prepend, -.form-inline .input-prepend, -.form-horizontal .input-prepend, -.form-search .input-append, -.form-inline .input-append, -.form-horizontal .input-append { - display: inline-block; - margin-bottom: 0; - vertical-align: middle; -} - -.form-search .hide, -.form-inline .hide, -.form-horizontal .hide { - display: none; +.input-group input:first-child, +.input-group .uneditable-input:first-child, +.input-group-addon:first-child { + border-bottom-left-radius: 4px; + border-top-left-radius: 4px; } -.form-search label, -.form-inline label, -.form-search .btn-group, -.form-inline .btn-group { - display: inline-block; +.input-group-addon:first-child { + border-right: 0; } -.form-search .input-append, -.form-inline .input-append, -.form-search .input-prepend, -.form-inline .input-prepend { - margin-bottom: 0; +.input-group input:last-child, +.input-group .uneditable-input:last-child, +.input-group-addon:last-child { + border-top-right-radius: 4px; + border-bottom-right-radius: 4px; } -.form-search .radio, -.form-search .checkbox, -.form-inline .radio, -.form-inline .checkbox { - display: inline-block; - padding-left: 0; +.input-group-addon:last-child { + border-left: 0; } -.form-search .radio label, -.form-search .checkbox label, -.form-inline .radio label, -.form-inline .checkbox label { - margin-bottom: 0; - vertical-align: middle; +.input-group-btn, +.input-group-btn .btn { + white-space: nowrap; } -.form-search .radio input[type="radio"], -.form-search .checkbox input[type="checkbox"], -.form-inline .radio input[type="radio"], -.form-inline .checkbox input[type="checkbox"] { +.input-group-btn > .btn { float: left; - margin-right: 3px; - margin-left: 0; -} - -.control-group { - margin-bottom: 10px; -} - -legend + .control-group { - margin-top: 20px; - -webkit-margin-top-collapse: separate; -} - -.form-horizontal .control-group { - margin-bottom: 20px; -} - -.form-horizontal .control-group:before, -.form-horizontal .control-group:after { - display: table; - line-height: 0; - content: ""; + border-radius: 0; } -.form-horizontal .control-group:after { - clear: both; +.input-group-btn > .btn + .btn { + border-left: 0; } -.form-horizontal .control-label { - float: left; - width: 160px; - padding-top: 5px; - text-align: right; +.input-group-btn.btn-group { + display: table-cell; } -.form-horizontal .controls { - margin-left: 180px; +.input-group-btn:first-child > .btn:last-child, +.input-group-btn.btn-group:first-child > .btn { + border-right: 0; } -.form-horizontal .help-block { - margin-bottom: 0; +.input-group-btn:first-child > .btn:first-child, +.input-group-btn.btn-group:first-child > .btn { + border-radius: 4px 0 0 4px; } -.form-horizontal input + .help-block, -.form-horizontal select + .help-block, -.form-horizontal textarea + .help-block, -.form-horizontal .uneditable-input + .help-block, -.form-horizontal .input-prepend + .help-block, -.form-horizontal .input-append + .help-block { - margin-top: 10px; +.input-group-btn:last-child > .btn:first-child, +.input-group-btn.btn-group:last-child > .btn:first-child { + border-left: 0; } -.form-horizontal .form-actions { - padding-left: 180px; +.input-group-btn:last-child > .btn:last-child, +.input-group-btn.btn-group:last-child > .btn { + border-radius: 0 4px 4px 0; } table { @@ -2753,21 +2553,22 @@ button.close { color: #333333; text-align: center; text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75); + white-space: nowrap; vertical-align: middle; cursor: pointer; - background-color: #f5f5f5; - background-image: -moz-linear-gradient(top, #ffffff, #e6e6e6); - background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#e6e6e6)); - background-image: -webkit-linear-gradient(top, #ffffff, #e6e6e6); - background-image: -o-linear-gradient(top, #ffffff, #e6e6e6); - background-image: linear-gradient(to bottom, #ffffff, #e6e6e6); + background-color: #f0f0f0; + background-image: -moz-linear-gradient(top, #fafafa, #e1e1e1); + background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#fafafa), to(#e1e1e1)); + background-image: -webkit-linear-gradient(top, #fafafa, #e1e1e1); + background-image: -o-linear-gradient(top, #fafafa, #e1e1e1); + background-image: linear-gradient(to bottom, #fafafa, #e1e1e1); background-repeat: repeat-x; border: 1px solid #bbbbbb; - border-color: #e6e6e6 #e6e6e6 #bfbfbf; + border-color: #e1e1e1 #e1e1e1 #bababa; border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); border-bottom-color: #a2a2a2; border-radius: 4px; - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#ffe6e6e6', GradientType=0); + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fffafafa', endColorstr='#ffe1e1e1', GradientType=0); filter: progid:DXImageTransform.Microsoft.gradient(enabled=false); -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); @@ -2779,12 +2580,12 @@ button.close { .btn.disabled, .btn[disabled] { color: #333333; - background-color: #e6e6e6; + background-color: #e1e1e1; } .btn:active, .btn.active { - background-color: #cccccc \9; + background-color: #c7c7c7 \9; } .btn:hover { @@ -3205,7 +3006,7 @@ input[type="button"].btn-block { } .btn-group.open .btn.dropdown-toggle { - background-color: #e6e6e6; + background-color: #e1e1e1; } .btn-group.open .btn-primary.dropdown-toggle { 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

diff --git a/docs/templates/pages/css.mustache b/docs/templates/pages/css.mustache
index cf9902519..3bfbb0280 100644
--- a/docs/templates/pages/css.mustache
+++ b/docs/templates/pages/css.mustache
@@ -1059,13 +1059,15 @@ For example, <code><section></code> should be wrapped as inlin
               
               

                 
+                

+                  
+                

               

             

             

               

-                
                 
               

             

@@ -1086,9 +1088,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>
@@ -1224,85 +1228,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
    • 
@@ -1312,27 +1347,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
    • 
@@ -1342,12 +1362,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>
@@ -1356,48 +1375,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>
@@ -1411,8 +1394,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