github/bootstrap
1
1
Fork 0
mirror of https://github.com/jasny/bootstrap.git synced 2026-04-02 03:00:44 -04:00
Code Issues Packages Projects Releases Wiki 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
Download Patch File Download Diff File Expand all files Collapse all files

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">
<div class="input-prepend">
<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>
<br>
<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>
</div>
</form>
<pre class="prettyprint linenums">
&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 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;
</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">
<div class="input-prepend input-append">
<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>
</div>
</form>
<pre class="prettyprint linenums">
&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;
</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>
<form class="bs-docs-example">
<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>
</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">
<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">Options</button>
</div>
</form>
<pre class="prettyprint linenums">
&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;
</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;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;
</pre>