diff options
author | Mark Otto <otto@github.com> | 2012-12-20 09:02:54 +0400 |
---|---|---|
committer | Mark Otto <otto@github.com> | 2012-12-20 09:02:54 +0400 |
commit | 51b1a027dacfb31f80ddff1755a19530d89d912d (patch) | |
tree | 191ec20fafba9b335da9005f414257863d148694 /docs | |
parent | 840e47eabdcf41239d55d6bf046ea8cc9e2065da (diff) | |
parent | 26b999b76ac564b89f21e6f80cc3052f57b60aa2 (diff) |
Merge branch 'bs3-input-groups' into 3.0.0-wip
Conflicts:
docs/assets/css/bootstrap.css
Diffstat (limited to 'docs')
-rw-r--r-- | docs/assets/css/bootstrap.css | 343 | ||||
-rw-r--r-- | docs/css.html | 232 | ||||
-rw-r--r-- | docs/templates/pages/css.mustache | 232 |
3 files changed, 254 insertions, 553 deletions
diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css index 33581659dd..829c270393 100644 --- a/docs/assets/css/bootstrap.css +++ b/docs/assets/css/bootstrap.css @@ -1336,63 +1336,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; @@ -1400,243 +1375,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; - 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, +.input-group-btn.btn-group:first-child > .btn { + border-right: 0; } -.form-horizontal .help-block { - margin-bottom: 0; +.input-group-btn:first-child > .btn, +.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, +.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, +.input-group-btn.btn-group:last-child > .btn { + border-radius: 0 4px 4px 0; } table { @@ -2657,7 +2458,6 @@ table th[class*="span"] { .typeahead { z-index: 1051; - margin-top: 2px; } .well { @@ -2748,21 +2548,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); @@ -2774,12 +2575,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 { @@ -3200,7 +3001,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 87c8d4f856..9b23a836cd 100644 --- a/docs/css.html +++ b/docs/css.html @@ -1119,13 +1119,15 @@ For example, <code><section></code> should be wrapped as inlin <label class="control-label" for="inputPassword">Password</label> <div class="controls"> <input type="password" id="inputPassword" placeholder="Password"> + <div class="checkbox"> + <label> + <input type="checkbox"> Remember me + </label> + </div> </div> </div> <div class="control-group"> <div class="controls"> - <label class="checkbox"> - <input type="checkbox"> Remember me - </label> <button type="submit" class="btn">Sign in</button> </div> </div> @@ -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> @@ -1296,85 +1300,82 @@ For example, <code><section></code> should be wrapped as inlin <h2 id="forms-extending">Extending form controls</h2> <p>Adding on top of existing browser controls, Bootstrap includes other useful form components.</p> - <h3>Prepended and appended inputs</h3> - <p>Add text or buttons before or after any text-based input. Do note that <code>select</code> elements are not supported here.</p> - - <h4>Default options</h4> - <p>Wrap an <code>.add-on</code> and an <code>input</code> with one of two classes to prepend or append text to an input.</p> + <h3>Input groups</h3> + <p>Add text or buttons before, after, or on both sides of any text-based input. Use <code>.input-group</code> with a <code>.add-on</code> to prepend or append elements to an <code><input></code>.</p> + <p>Avoid using <code><select></code> elements here as they cannot be fully styled in WebKit browsers.</p> <form class="bs-docs-example"> - <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> <br> - <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> + <br> + <div class="input-group span3"> + <span class="input-group-addon">$</span> + <input type="text"> + <span class="input-group-addon">.00</span> </div> </form> <pre class="prettyprint linenums"> -<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> -</pre> - <h4>Combined</h4> - <p>Use both classes and two instances of <code>.add-on</code> to prepend and append an input.</p> - <form class="bs-docs-example form-inline"> - <div class="input-prepend input-append"> - <span class="add-on">$</span> - <input id="appendedPrependedInput" type="text"> - <span class="add-on">.00</span> - </div> - </form> -<pre class="prettyprint linenums"> -<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> </pre> <h4>Buttons instead of text</h4> - <p>Instead of a <code><span></code> with text, use a <code>.btn</code> to attach a button (or two) to an input.</p> + <p>Buttons in input groups are a bit different and require one extra level of nesting. Instead of <code>.input-group-addon</code>, you'll need to use <code>.input-group-btn</code> to wrap the buttons. This is required due to default browser styles that cannot be overridden.</p> <form class="bs-docs-example"> - <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> - </form> -<pre class="prettyprint linenums"> -<div class="input-append"> - <input class="span3" id="appendedInputButton" type="text"> - <button class="btn" type="button">Go!</button> -</div> -</pre> - <form class="bs-docs-example"> - <div class="input-append"> - <input class="span3" id="appendedInputButtons" type="text"> - <button class="btn" type="button">Search</button> - <button class="btn" type="button">Options</button> + <br> + <div class="input-group span7"> + <input type="text"> + <span class="input-group-btn"> + <button class="btn" type="button">Go!</button> + </span> </div> </form> <pre class="prettyprint linenums"> -<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"> + <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> </pre> <h4>Button dropdowns</h4> <p></p> <form class="bs-docs-example"> - <div class="input-append"> - <input class="span3" id="appendedDropdownButton" type="text"> - <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></button> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> @@ -1384,27 +1385,12 @@ For example, <code><section></code> should be wrapped as inlin <li><a href="#">Separated link</a></li> </ul> </div><!-- /btn-group --> - </div><!-- /input-append --> - </form> -<pre class="prettyprint linenums"> -<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> -</pre> - - <form class="bs-docs-example"> - <div class="input-prepend"> - <div class="btn-group"> + <input type="text"> + </div><!-- /input-group --> + <br> + <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></button> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> @@ -1414,12 +1400,11 @@ For example, <code><section></code> should be wrapped as inlin <li><a href="#">Separated link</a></li> </ul> </div><!-- /btn-group --> - <input class="span2" id="prependedDropdownButton" type="text"> - </div><!-- /input-prepend --> + </div><!-- /input-group --> </form> <pre class="prettyprint linenums"> -<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> @@ -1428,48 +1413,12 @@ For example, <code><section></code> should be wrapped as inlin ... </ul> </div> - <input class="span2" id="prependedDropdownButton" type="text"> + <input type="text"> </div> -</pre> - <form class="bs-docs-example"> - <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"> - <li><a href="#">Action</a></li> - <li><a href="#">Another action</a></li> - <li><a href="#">Something else here</a></li> - <li class="divider"></li> - <li><a href="#">Separated link</a></li> - </ul> - </div><!-- /btn-group --> - <input class="span2" id="appendedPrependedDropdownButton" type="text"> - <div class="btn-group"> - <button class="btn dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button> - <ul class="dropdown-menu"> - <li><a href="#">Action</a></li> - <li><a href="#">Another action</a></li> - <li><a href="#">Something else here</a></li> - <li class="divider"></li> - <li><a href="#">Separated link</a></li> - </ul> - </div><!-- /btn-group --> - </div><!-- /input-prepend input-append --> - </form> -<pre class="prettyprint linenums"> -<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> @@ -1483,8 +1432,8 @@ For example, <code><section></code> should be wrapped as inlin <h4>Segmented dropdown groups</h4> <form class="bs-docs-example"> - <div class="input-prepend"> - <div class="btn-group"> + <div class="input-group span7"> + <div class="input-group-btn btn-group"> <button class="btn" tabindex="-1">Action</button> <button class="btn dropdown-toggle" data-toggle="dropdown" tabindex="-1"> <span class="caret"></span> @@ -1499,9 +1448,12 @@ For example, <code><section></code> should be wrapped as inlin </div> <input type="text" class="span3"> </div> - <div class="input-append"> - <input type="text" class="span3"> - <div class="btn-group"> + + <br> + + <div class="input-group span7"> + <input type="text"> + <div class="input-group-btn btn-group"> <button class="btn" tabindex="-1">Action</button> <button class="btn dropdown-toggle" data-toggle="dropdown" tabindex="-1"> <span class="caret"></span> @@ -1517,16 +1469,14 @@ For example, <code><section></code> should be wrapped as inlin </div> </form> <pre class="prettyprint linenums"> -<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> </pre> <h4>Search form</h4> diff --git a/docs/templates/pages/css.mustache b/docs/templates/pages/css.mustache index 73ab657a9f..ab1cd8c30d 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 <label class="control-label" for="inputPassword">Password</label> <div class="controls"> <input type="password" id="inputPassword" placeholder="Password"> + <div class="checkbox"> + <label> + <input type="checkbox"> Remember me + </label> + </div> </div> </div> <div class="control-group"> <div class="controls"> - <label class="checkbox"> - <input type="checkbox"> Remember me - </label> <button type="submit" class="btn">Sign in</button> </div> </div> @@ -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> @@ -1236,85 +1240,82 @@ For example, <code><section></code> should be wrapped as inlin <h2 id="forms-extending">Extending form controls</h2> <p>Adding on top of existing browser controls, Bootstrap includes other useful form components.</p> - <h3>Prepended and appended inputs</h3> - <p>Add text or buttons before or after any text-based input. Do note that <code>select</code> elements are not supported here.</p> - - <h4>Default options</h4> - <p>Wrap an <code>.add-on</code> and an <code>input</code> with one of two classes to prepend or append text to an input.</p> + <h3>Input groups</h3> + <p>Add text or buttons before, after, or on both sides of any text-based input. Use <code>.input-group</code> with a <code>.add-on</code> to prepend or append elements to an <code><input></code>.</p> + <p>Avoid using <code><select></code> elements here as they cannot be fully styled in WebKit browsers.</p> <form class="bs-docs-example"> - <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> <br> - <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> + <br> + <div class="input-group span3"> + <span class="input-group-addon">$</span> + <input type="text"> + <span class="input-group-addon">.00</span> </div> </form> <pre class="prettyprint linenums"> -<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> -</pre> - <h4>Combined</h4> - <p>Use both classes and two instances of <code>.add-on</code> to prepend and append an input.</p> - <form class="bs-docs-example form-inline"> - <div class="input-prepend input-append"> - <span class="add-on">$</span> - <input id="appendedPrependedInput" type="text"> - <span class="add-on">.00</span> - </div> - </form> -<pre class="prettyprint linenums"> -<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> </pre> <h4>Buttons instead of text</h4> - <p>Instead of a <code><span></code> with text, use a <code>.btn</code> to attach a button (or two) to an input.</p> + <p>Buttons in input groups are a bit different and require one extra level of nesting. Instead of <code>.input-group-addon</code>, you'll need to use <code>.input-group-btn</code> to wrap the buttons. This is required due to default browser styles that cannot be overridden.</p> <form class="bs-docs-example"> - <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> - </form> -<pre class="prettyprint linenums"> -<div class="input-append"> - <input class="span3" id="appendedInputButton" type="text"> - <button class="btn" type="button">Go!</button> -</div> -</pre> - <form class="bs-docs-example"> - <div class="input-append"> - <input class="span3" id="appendedInputButtons" type="text"> - <button class="btn" type="button">Search</button> - <button class="btn" type="button">Options</button> + <br> + <div class="input-group span7"> + <input type="text"> + <span class="input-group-btn"> + <button class="btn" type="button">Go!</button> + </span> </div> </form> <pre class="prettyprint linenums"> -<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"> + <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> </pre> <h4>Button dropdowns</h4> <p></p> <form class="bs-docs-example"> - <div class="input-append"> - <input class="span3" id="appendedDropdownButton" type="text"> - <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></button> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> @@ -1324,27 +1325,12 @@ For example, <code><section></code> should be wrapped as inlin <li><a href="#">Separated link</a></li> </ul> </div><!-- /btn-group --> - </div><!-- /input-append --> - </form> -<pre class="prettyprint linenums"> -<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> -</pre> - - <form class="bs-docs-example"> - <div class="input-prepend"> - <div class="btn-group"> + <input type="text"> + </div><!-- /input-group --> + <br> + <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></button> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> @@ -1354,12 +1340,11 @@ For example, <code><section></code> should be wrapped as inlin <li><a href="#">Separated link</a></li> </ul> </div><!-- /btn-group --> - <input class="span2" id="prependedDropdownButton" type="text"> - </div><!-- /input-prepend --> + </div><!-- /input-group --> </form> <pre class="prettyprint linenums"> -<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> @@ -1368,48 +1353,12 @@ For example, <code><section></code> should be wrapped as inlin ... </ul> </div> - <input class="span2" id="prependedDropdownButton" type="text"> + <input type="text"> </div> -</pre> - <form class="bs-docs-example"> - <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"> - <li><a href="#">Action</a></li> - <li><a href="#">Another action</a></li> - <li><a href="#">Something else here</a></li> - <li class="divider"></li> - <li><a href="#">Separated link</a></li> - </ul> - </div><!-- /btn-group --> - <input class="span2" id="appendedPrependedDropdownButton" type="text"> - <div class="btn-group"> - <button class="btn dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button> - <ul class="dropdown-menu"> - <li><a href="#">Action</a></li> - <li><a href="#">Another action</a></li> - <li><a href="#">Something else here</a></li> - <li class="divider"></li> - <li><a href="#">Separated link</a></li> - </ul> - </div><!-- /btn-group --> - </div><!-- /input-prepend input-append --> - </form> -<pre class="prettyprint linenums"> -<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> @@ -1423,8 +1372,8 @@ For example, <code><section></code> should be wrapped as inlin <h4>Segmented dropdown groups</h4> <form class="bs-docs-example"> - <div class="input-prepend"> - <div class="btn-group"> + <div class="input-group span7"> + <div class="input-group-btn btn-group"> <button class="btn" tabindex="-1">Action</button> <button class="btn dropdown-toggle" data-toggle="dropdown" tabindex="-1"> <span class="caret"></span> @@ -1439,9 +1388,12 @@ For example, <code><section></code> should be wrapped as inlin </div> <input type="text" class="span3"> </div> - <div class="input-append"> - <input type="text" class="span3"> - <div class="btn-group"> + + <br> + + <div class="input-group span7"> + <input type="text"> + <div class="input-group-btn btn-group"> <button class="btn" tabindex="-1">Action</button> <button class="btn dropdown-toggle" data-toggle="dropdown" tabindex="-1"> <span class="caret"></span> @@ -1457,16 +1409,14 @@ For example, <code><section></code> should be wrapped as inlin </div> </form> <pre class="prettyprint linenums"> -<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> </pre> <h4>Search form</h4> |