mirrors/bootstrap
2
0
Fork 0
mirror of https://github.com/tenrok/bootstrap.git synced 2026-06-08 17:22:31 +03:00
Code 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
docs/templates/pages/base-css.mustache
Vendored
+131 -11
View File
@@ -1068,20 +1068,22 @@
<form class="bs-docs-example">
<div class="input-prepend">
<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>
<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="{{_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 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>
@@ -1090,13 +1092,15 @@
<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>
@@ -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>
<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>{{_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;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;
</pre>