kotovalexarian-likes-github/twbs--bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2022-11-09 12:25:43 -05:00
Code Releases Activity

fixes #5150: add btn-group support to input groups

Browse source
This commit is contained in:
Mark Otto 2012-09-20 11:37:34 -07:00
parent 443c43f6c4
commit 532ee08213
4 changed files with 300 additions and 24 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

23
docs/assets/css/bootstrap.css vendored
View file

@ -1648,8 +1648,17 @@ select:focus:required:invalid:focus {
border-radius: 4px 0 0 4px; 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 {
-webkit-border-radius: 0 4px 4px 0;
-moz-border-radius: 0 4px 4px 0;
border-radius: 0 4px 4px 0;
}
.input-append .add-on, .input-append .add-on,
.input-append .btn { .input-append .btn,
.input-append .btn-group {
margin-left: -1px; margin-left: -1px;
} }
@ -1668,6 +1677,14 @@ select:focus:required:invalid:focus {
border-radius: 0; 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 {
-webkit-border-radius: 0 4px 4px 0;
-moz-border-radius: 0 4px 4px 0;
border-radius: 0 4px 4px 0;
}
.input-prepend.input-append .add-on:first-child, .input-prepend.input-append .add-on:first-child,
.input-prepend.input-append .btn:first-child { .input-prepend.input-append .btn:first-child {
margin-right: -1px; margin-right: -1px;
@ -1684,6 +1701,10 @@ select:focus:required:invalid:focus {
border-radius: 0 4px 4px 0; border-radius: 0 4px 4px 0;
} }
.input-prepend.input-append .btn-group:first-child {
margin-left: 0;
}
input.search-query { input.search-query {
padding-right: 14px; padding-right: 14px;
padding-right: 4px \9; padding-right: 4px \9;

142
docs/base-css.html
View file

@ -1131,20 +1131,22 @@ For example, <code><section></code> should be wrapped as inlin
<form class="bs-docs-example"> <form class="bs-docs-example">
<div class="input-prepend"> <div class="input-prepend">
<span class="add-on">@</span> <span class="add-on">@</span>
<input class="span2" id="prependedInput" size="16" type="text" placeholder="Username"> <input class="span2" id="prependedInput" type="text" placeholder="Username">
</div> </div>
<br> <br>
<div class="input-append"> <div class="input-append">
<input class="span2" id="appendedInput" size="16" type="text"> <input class="span2" id="appendedInput" type="text">
<span class="add-on">.00</span> <span class="add-on">.00</span>
</div> </div>
</form> </form>
<pre class="prettyprint linenums"> <pre class="prettyprint linenums">
&lt;div class="input-prepend"&gt; &lt;div class="input-prepend"&gt;
&lt;span class="add-on"&gt;@&lt;/span&gt;&lt;input class="span2" id="prependedInput" size="16" type="text" placeholder="Username"&gt; &lt;span class="add-on"&gt;@&lt;/span&gt;
&lt;input class="span2" id="prependedInput" type="text" placeholder="Username"&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;div class="input-append"&gt; &lt;div class="input-append"&gt;
&lt;input class="span2" id="appendedInput" size="16" type="text"&gt;&lt;span class="add-on"&gt;.00&lt;/span&gt; &lt;input class="span2" id="appendedInput" type="text"&gt;
&lt;span class="add-on"&gt;.00&lt;/span&gt;
&lt;/div&gt; &lt;/div&gt;
</pre> </pre>
@ -1153,13 +1155,15 @@ For example, &lt;code&gt;&lt;section&gt;&lt;/code&gt; should be wrapped as inlin
<form class="bs-docs-example form-inline"> <form class="bs-docs-example form-inline">
<div class="input-prepend input-append"> <div class="input-prepend input-append">
<span class="add-on">$</span> <span class="add-on">$</span>
<input class="span2" id="appendedPrependedInput" size="16" type="text"> <input class="span2" id="appendedPrependedInput" type="text">
<span class="add-on">.00</span> <span class="add-on">.00</span>
</div> </div>
</form> </form>
<pre class="prettyprint linenums"> <pre class="prettyprint linenums">
&lt;div class="input-prepend input-append"&gt; &lt;div class="input-prepend input-append"&gt;
&lt;span class="add-on"&gt;$&lt;/span&gt;&lt;input class="span2" id="appendedPrependedInput" size="16" type="text"&gt;&lt;span class="add-on"&gt;.00&lt;/span&gt; &lt;span class="add-on"&gt;$&lt;/span&gt;
&lt;input class="span2" id="appendedPrependedInput" type="text"&gt;
&lt;span class="add-on"&gt;.00&lt;/span&gt;
&lt;/div&gt; &lt;/div&gt;
</pre> </pre>
@ -1167,23 +1171,139 @@ For example, &lt;code&gt;&lt;section&gt;&lt;/code&gt; should be wrapped as inlin
<p>Instead of a <code>&lt;span&gt;</code> with text, use a <code>.btn</code> to attach a button (or two) to an input.</p> <p>Instead of a <code>&lt;span&gt;</code> with text, use a <code>.btn</code> to attach a button (or two) to an input.</p>
<form class="bs-docs-example"> <form class="bs-docs-example">
<div class="input-append"> <div class="input-append">
<input class="span2" id="appendedInputButton" size="16" type="text"> <input class="span2" id="appendedInputButton" type="text">
<button class="btn" type="button">Go!</button> <button class="btn" type="button">Go!</button>
</div> </div>
<br> </form>
<pre class="prettyprint linenums">
&lt;div class="input-append"&gt;
&lt;input class="span2" id="appendedInputButton" type="text"&gt;
&lt;button class="btn" type="button"&gt;Go!&lt;/button&gt;
&lt;/div&gt;
</pre>
<form class="bs-docs-example">
<div class="input-append"> <div class="input-append">
<input class="span2" id="appendedInputButtons" size="16" type="text"> <input class="span2" id="appendedInputButtons" type="text">
<button class="btn" type="button">Search</button> <button class="btn" type="button">Search</button>
<button class="btn" type="button">Options</button> <button class="btn" type="button">Options</button>
</div> </div>
</form> </form>
<pre class="prettyprint linenums"> <pre class="prettyprint linenums">
&lt;div class="input-append"&gt; &lt;div class="input-append"&gt;
&lt;input class="span2" id="appendedInputButton" size="16" type="text"&gt;&lt;button class="btn" type="button"&gt;Go!&lt;/button&gt; &lt;input class="span2" id="appendedInputButtons" type="text"&gt;
&lt;button class="btn" type="button"&gt;Search&lt;/button&gt;
&lt;button class="btn" type="button"&gt;Options&lt;/button&gt;
&lt;/div&gt; &lt;/div&gt;
</pre>
<h4>Button dropdowns</h4>
<p></p>
<form class="bs-docs-example">
<div class="input-append">
<input class="span2" 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">
<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-append -->
</form>
<pre class="prettyprint linenums">
&lt;div class="input-append"&gt; &lt;div class="input-append"&gt;
&lt;input class="span2" id="appendedInputButtons" size="16" type="text"&gt;&lt;button class="btn" type="button"&gt;Search&lt;/button&gt;&lt;button class="btn" type="button"&gt;Options&lt;/button&gt; &lt;input class="span2" id="appendedDropdownButton" type="text"&gt;
&lt;div class="btn-group"&gt;
&lt;button class="btn dropdown-toggle" data-toggle="dropdown"&gt;
Action
&lt;span class="caret"&gt;&lt;/span&gt;
&lt;/button&gt;
&lt;ul class="dropdown-menu"&gt;
...
&lt;/ul&gt;
&lt;/div&gt;
&lt;/div&gt;
</pre>
<form class="bs-docs-example">
<div class="input-prepend">
<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="prependedDropdownButton" type="text">
</div><!-- /input-prepend -->
</form>
<pre class="prettyprint linenums">
&lt;div class="input-prepend"&gt;
&lt;div class="btn-group"&gt;
&lt;button class="btn dropdown-toggle" data-toggle="dropdown"&gt;
Action
&lt;span class="caret"&gt;&lt;/span&gt;
&lt;/button&gt;
&lt;ul class="dropdown-menu"&gt;
...
&lt;/ul&gt;
&lt;/div&gt;
&lt;input class="span2" id="prependedDropdownButton" type="text"&gt;
&lt;/div&gt;
</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">
&lt;div class="input-prepend input-append"&gt;
&lt;div class="btn-group"&gt;
&lt;button class="btn dropdown-toggle" data-toggle="dropdown"&gt;
Action
&lt;span class="caret"&gt;&lt;/span&gt;
&lt;/button&gt;
&lt;ul class="dropdown-menu"&gt;
...
&lt;/ul&gt;
&lt;/div&gt;
&lt;input class="span2" id="appendedPrependedDropdownButton" type="text"&gt;
&lt;div class="btn-group"&gt;
&lt;button class="btn dropdown-toggle" data-toggle="dropdown"&gt;
Action
&lt;span class="caret"&gt;&lt;/span&gt;
&lt;/button&gt;
&lt;ul class="dropdown-menu"&gt;
...
&lt;/ul&gt;
&lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;
</pre> </pre>

142
docs/templates/pages/base-css.mustache vendored
View file

@ -1068,20 +1068,22 @@
<form class="bs-docs-example"> <form class="bs-docs-example">
<div class="input-prepend"> <div class="input-prepend">
<span class="add-on">@</span> <span class="add-on">@</span>
<input class="span2" id="prependedInput" size="16" type="text" placeholder="{{_i}}Username{{/i}}"> <input class="span2" id="prependedInput" type="text" placeholder="{{_i}}Username{{/i}}">
</div> </div>
<br> <br>
<div class="input-append"> <div class="input-append">
<input class="span2" id="appendedInput" size="16" type="text"> <input class="span2" id="appendedInput" type="text">
<span class="add-on">.00</span> <span class="add-on">.00</span>
</div> </div>
</form> </form>
<pre class="prettyprint linenums"> <pre class="prettyprint linenums">
&lt;div class="input-prepend"&gt; &lt;div class="input-prepend"&gt;
&lt;span class="add-on"&gt;@&lt;/span&gt;&lt;input class="span2" id="prependedInput" size="16" type="text" placeholder="{{_i}}Username{{/i}}"&gt; &lt;span class="add-on"&gt;@&lt;/span&gt;
&lt;input class="span2" id="prependedInput" type="text" placeholder="{{_i}}Username{{/i}}"&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;div class="input-append"&gt; &lt;div class="input-append"&gt;
&lt;input class="span2" id="appendedInput" size="16" type="text"&gt;&lt;span class="add-on"&gt;.00&lt;/span&gt; &lt;input class="span2" id="appendedInput" type="text"&gt;
&lt;span class="add-on"&gt;.00&lt;/span&gt;
&lt;/div&gt; &lt;/div&gt;
</pre> </pre>
@ -1090,13 +1092,15 @@
<form class="bs-docs-example form-inline"> <form class="bs-docs-example form-inline">
<div class="input-prepend input-append"> <div class="input-prepend input-append">
<span class="add-on">$</span> <span class="add-on">$</span>
<input class="span2" id="appendedPrependedInput" size="16" type="text"> <input class="span2" id="appendedPrependedInput" type="text">
<span class="add-on">.00</span> <span class="add-on">.00</span>
</div> </div>
</form> </form>
<pre class="prettyprint linenums"> <pre class="prettyprint linenums">
&lt;div class="input-prepend input-append"&gt; &lt;div class="input-prepend input-append"&gt;
&lt;span class="add-on"&gt;$&lt;/span&gt;&lt;input class="span2" id="appendedPrependedInput" size="16" type="text"&gt;&lt;span class="add-on"&gt;.00&lt;/span&gt; &lt;span class="add-on"&gt;$&lt;/span&gt;
&lt;input class="span2" id="appendedPrependedInput" type="text"&gt;
&lt;span class="add-on"&gt;.00&lt;/span&gt;
&lt;/div&gt; &lt;/div&gt;
</pre> </pre>
@ -1104,23 +1108,139 @@
<p>{{_i}}Instead of a <code>&lt;span&gt;</code> with text, use a <code>.btn</code> to attach a button (or two) to an input.{{/i}}</p> <p>{{_i}}Instead of a <code>&lt;span&gt;</code> with text, use a <code>.btn</code> to attach a button (or two) to an input.{{/i}}</p>
<form class="bs-docs-example"> <form class="bs-docs-example">
<div class="input-append"> <div class="input-append">
<input class="span2" id="appendedInputButton" size="16" type="text"> <input class="span2" id="appendedInputButton" type="text">
<button class="btn" type="button">Go!</button> <button class="btn" type="button">Go!</button>
</div> </div>
<br> </form>
<pre class="prettyprint linenums">
&lt;div class="input-append"&gt;
&lt;input class="span2" id="appendedInputButton" type="text"&gt;
&lt;button class="btn" type="button"&gt;Go!&lt;/button&gt;
&lt;/div&gt;
</pre>
<form class="bs-docs-example">
<div class="input-append"> <div class="input-append">
<input class="span2" id="appendedInputButtons" size="16" type="text"> <input class="span2" id="appendedInputButtons" type="text">
<button class="btn" type="button">Search</button> <button class="btn" type="button">Search</button>
<button class="btn" type="button">Options</button> <button class="btn" type="button">Options</button>
</div> </div>
</form> </form>
<pre class="prettyprint linenums"> <pre class="prettyprint linenums">
&lt;div class="input-append"&gt; &lt;div class="input-append"&gt;
&lt;input class="span2" id="appendedInputButton" size="16" type="text"&gt;&lt;button class="btn" type="button"&gt;Go!&lt;/button&gt; &lt;input class="span2" id="appendedInputButtons" type="text"&gt;
&lt;button class="btn" type="button"&gt;Search&lt;/button&gt;
&lt;button class="btn" type="button"&gt;Options&lt;/button&gt;
&lt;/div&gt; &lt;/div&gt;
</pre>
<h4>{{_i}}Button dropdowns{{/i}}</h4>
<p>{{_i}}{{/i}}</p>
<form class="bs-docs-example">
<div class="input-append">
<input class="span2" id="appendedDropdownButton" type="text">
<div class="btn-group">
<button class="btn dropdown-toggle" data-toggle="dropdown">{{_i}}Action{{/i}} <span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#">{{_i}}Action{{/i}}</a></li>
<li><a href="#">{{_i}}Another action{{/i}}</a></li>
<li><a href="#">{{_i}}Something else here{{/i}}</a></li>
<li class="divider"></li>
<li><a href="#">{{_i}}Separated link{{/i}}</a></li>
</ul>
</div><!-- /btn-group -->
</div><!-- /input-append -->
</form>
<pre class="prettyprint linenums">
&lt;div class="input-append"&gt; &lt;div class="input-append"&gt;
&lt;input class="span2" id="appendedInputButtons" size="16" type="text"&gt;&lt;button class="btn" type="button"&gt;Search&lt;/button&gt;&lt;button class="btn" type="button"&gt;Options&lt;/button&gt; &lt;input class="span2" id="appendedDropdownButton" type="text"&gt;
&lt;div class="btn-group"&gt;
&lt;button class="btn dropdown-toggle" data-toggle="dropdown"&gt;
{{_i}}Action{{/i}}
&lt;span class="caret"&gt;&lt;/span&gt;
&lt;/button&gt;
&lt;ul class="dropdown-menu"&gt;
...
&lt;/ul&gt;
&lt;/div&gt;
&lt;/div&gt;
</pre>
<form class="bs-docs-example">
<div class="input-prepend">
<div class="btn-group">
<button class="btn dropdown-toggle" data-toggle="dropdown">{{_i}}Action{{/i}} <span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#">{{_i}}Action{{/i}}</a></li>
<li><a href="#">{{_i}}Another action{{/i}}</a></li>
<li><a href="#">{{_i}}Something else here{{/i}}</a></li>
<li class="divider"></li>
<li><a href="#">{{_i}}Separated link{{/i}}</a></li>
</ul>
</div><!-- /btn-group -->
<input class="span2" id="prependedDropdownButton" type="text">
</div><!-- /input-prepend -->
</form>
<pre class="prettyprint linenums">
&lt;div class="input-prepend"&gt;
&lt;div class="btn-group"&gt;
&lt;button class="btn dropdown-toggle" data-toggle="dropdown"&gt;
{{_i}}Action{{/i}}
&lt;span class="caret"&gt;&lt;/span&gt;
&lt;/button&gt;
&lt;ul class="dropdown-menu"&gt;
...
&lt;/ul&gt;
&lt;/div&gt;
&lt;input class="span2" id="prependedDropdownButton" type="text"&gt;
&lt;/div&gt;
</pre>
<form class="bs-docs-example">
<div class="input-prepend input-append">
<div class="btn-group">
<button class="btn dropdown-toggle" data-toggle="dropdown">{{_i}}Action{{/i}} <span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#">{{_i}}Action{{/i}}</a></li>
<li><a href="#">{{_i}}Another action{{/i}}</a></li>
<li><a href="#">{{_i}}Something else here{{/i}}</a></li>
<li class="divider"></li>
<li><a href="#">{{_i}}Separated link{{/i}}</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">{{_i}}Action{{/i}} <span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#">{{_i}}Action{{/i}}</a></li>
<li><a href="#">{{_i}}Another action{{/i}}</a></li>
<li><a href="#">{{_i}}Something else here{{/i}}</a></li>
<li class="divider"></li>
<li><a href="#">{{_i}}Separated link{{/i}}</a></li>
</ul>
</div><!-- /btn-group -->
</div><!-- /input-prepend input-append -->
</form>
<pre class="prettyprint linenums">
&lt;div class="input-prepend input-append"&gt;
&lt;div class="btn-group"&gt;
&lt;button class="btn dropdown-toggle" data-toggle="dropdown"&gt;
{{_i}}Action{{/i}}
&lt;span class="caret"&gt;&lt;/span&gt;
&lt;/button&gt;
&lt;ul class="dropdown-menu"&gt;
...
&lt;/ul&gt;
&lt;/div&gt;
&lt;input class="span2" id="appendedPrependedDropdownButton" type="text"&gt;
&lt;div class="btn-group"&gt;
&lt;button class="btn dropdown-toggle" data-toggle="dropdown"&gt;
{{_i}}Action{{/i}}
&lt;span class="caret"&gt;&lt;/span&gt;
&lt;/button&gt;
&lt;ul class="dropdown-menu"&gt;
...
&lt;/ul&gt;
&lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;
</pre> </pre>

17
less/forms.less
View file

@ -466,6 +466,7 @@ select:focus:required:invalid {
border-color: @green; border-color: @green;
} }
} }
.input-prepend { .input-prepend {
.add-on, .add-on,
.btn { .btn {
@ -473,17 +474,23 @@ select:focus:required:invalid {
} }
.add-on:first-child, .add-on:first-child,
.btn:first-child { .btn:first-child {
// FYI, `.btn:first-child` accounts for a button group that's prepended
.border-radius(@inputBorderRadius 0 0 @inputBorderRadius); .border-radius(@inputBorderRadius 0 0 @inputBorderRadius);
} }
} }
.input-append { .input-append {
input, input,
select, select,
.uneditable-input { .uneditable-input {
.border-radius(@inputBorderRadius 0 0 @inputBorderRadius); .border-radius(@inputBorderRadius 0 0 @inputBorderRadius);
+ .btn-group .btn {
.border-radius(0 @inputBorderRadius @inputBorderRadius 0);
}
} }
.add-on, .add-on,
.btn { .btn,
.btn-group {
margin-left: -1px; margin-left: -1px;
} }
.add-on:last-child, .add-on:last-child,
@ -491,12 +498,16 @@ select:focus:required:invalid {
.border-radius(0 @inputBorderRadius @inputBorderRadius 0); .border-radius(0 @inputBorderRadius @inputBorderRadius 0);
} }
} }
// Remove all border-radius for inputs with both prepend and append // Remove all border-radius for inputs with both prepend and append
.input-prepend.input-append { .input-prepend.input-append {
input, input,
select, select,
.uneditable-input { .uneditable-input {
.border-radius(0); .border-radius(0);
+ .btn-group .btn {
.border-radius(0 @inputBorderRadius @inputBorderRadius 0);
}
} }
.add-on:first-child, .add-on:first-child,
.btn:first-child { .btn:first-child {
@ -508,10 +519,14 @@ select:focus:required:invalid {
margin-left: -1px; margin-left: -1px;
.border-radius(0 @inputBorderRadius @inputBorderRadius 0); .border-radius(0 @inputBorderRadius @inputBorderRadius 0);
} }
.btn-group:first-child {
margin-left: 0;
}
} }
// SEARCH FORM // SEARCH FORM
// ----------- // -----------