Skip to content

Commit 532ee08

Browse files
mdomdo
committed
fixes twbs#5150: add btn-group support to input groups
1 parent 443c43f commit 532ee08

File tree

4 files changed

+300
-24
lines changed

4 files changed

+300
-24
lines changed

‎docs/assets/css/bootstrap.css

Lines changed: 22 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1648,8 +1648,17 @@ select:focus:required:invalid:focus {
16481648
border-radius: 4px 0 0 4px;
16491649
}
16501650

1651+
.input-append input + .btn-group .btn,
1652+
.input-append select + .btn-group .btn,
1653+
.input-append .uneditable-input + .btn-group .btn {
1654+
-webkit-border-radius: 0 4px 4px 0;
1655+
-moz-border-radius: 0 4px 4px 0;
1656+
border-radius: 0 4px 4px 0;
1657+
}
1658+
16511659
.input-append .add-on,
1652-
.input-append .btn {
1660+
.input-append .btn,
1661+
.input-append .btn-group {
16531662
margin-left: -1px;
16541663
}
16551664

@@ -1668,6 +1677,14 @@ select:focus:required:invalid:focus {
16681677
border-radius: 0;
16691678
}
16701679

1680+
.input-prepend.input-append input + .btn-group .btn,
1681+
.input-prepend.input-append select + .btn-group .btn,
1682+
.input-prepend.input-append .uneditable-input + .btn-group .btn {
1683+
-webkit-border-radius: 0 4px 4px 0;
1684+
-moz-border-radius: 0 4px 4px 0;
1685+
border-radius: 0 4px 4px 0;
1686+
}
1687+
16711688
.input-prepend.input-append .add-on:first-child,
16721689
.input-prepend.input-append .btn:first-child {
16731690
margin-right: -1px;
@@ -1684,6 +1701,10 @@ select:focus:required:invalid:focus {
16841701
border-radius: 0 4px 4px 0;
16851702
}
16861703

1704+
.input-prepend.input-append .btn-group:first-child {
1705+
margin-left: 0;
1706+
}
1707+
16871708
input.search-query {
16881709
padding-right: 14px;
16891710
padding-right: 4px \9;

‎docs/base-css.html

Lines changed: 131 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1131,20 +1131,22 @@ <h4>Default options</h4>
11311131
<form class="bs-docs-example">
11321132
<div class="input-prepend">
11331133
<span class="add-on">@</span>
1134-
<input class="span2" id="prependedInput" size="16" type="text" placeholder="Username">
1134+
<input class="span2" id="prependedInput" type="text" placeholder="Username">
11351135
</div>
11361136
<br>
11371137
<div class="input-append">
1138-
<input class="span2" id="appendedInput" size="16" type="text">
1138+
<input class="span2" id="appendedInput" type="text">
11391139
<span class="add-on">.00</span>
11401140
</div>
11411141
</form>
11421142
<pre class="prettyprint linenums">
11431143
&lt;div class="input-prepend"&gt;
1144-
&lt;span class="add-on"&gt;@&lt;/span&gt;&lt;input class="span2" id="prependedInput" size="16" type="text" placeholder="Username"&gt;
1144+
&lt;span class="add-on"&gt;@&lt;/span&gt;
1145+
&lt;input class="span2" id="prependedInput" type="text" placeholder="Username"&gt;
11451146
&lt;/div&gt;
11461147
&lt;div class="input-append"&gt;
1147-
&lt;input class="span2" id="appendedInput" size="16" type="text"&gt;&lt;span class="add-on"&gt;.00&lt;/span&gt;
1148+
&lt;input class="span2" id="appendedInput" type="text"&gt;
1149+
&lt;span class="add-on"&gt;.00&lt;/span&gt;
11481150
&lt;/div&gt;
11491151
</pre>
11501152

@@ -1153,37 +1155,155 @@ <h4>Combined</h4>
11531155
<form class="bs-docs-example form-inline">
11541156
<div class="input-prepend input-append">
11551157
<span class="add-on">$</span>
1156-
<input class="span2" id="appendedPrependedInput" size="16" type="text">
1158+
<input class="span2" id="appendedPrependedInput" type="text">
11571159
<span class="add-on">.00</span>
11581160
</div>
11591161
</form>
11601162
<pre class="prettyprint linenums">
11611163
&lt;div class="input-prepend input-append"&gt;
1162-
&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;
1164+
&lt;span class="add-on"&gt;$&lt;/span&gt;
1165+
&lt;input class="span2" id="appendedPrependedInput" type="text"&gt;
1166+
&lt;span class="add-on"&gt;.00&lt;/span&gt;
11631167
&lt;/div&gt;
11641168
</pre>
11651169

11661170
<h4>Buttons instead of text</h4>
11671171
<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>
11681172
<form class="bs-docs-example">
11691173
<div class="input-append">
1170-
<input class="span2" id="appendedInputButton" size="16" type="text">
1174+
<input class="span2" id="appendedInputButton" type="text">
11711175
<button class="btn" type="button">Go!</button>
11721176
</div>
1173-
<br>
1177+
</form>
1178+
<pre class="prettyprint linenums">
1179+
&lt;div class="input-append"&gt;
1180+
&lt;input class="span2" id="appendedInputButton" type="text"&gt;
1181+
&lt;button class="btn" type="button"&gt;Go!&lt;/button&gt;
1182+
&lt;/div&gt;
1183+
</pre>
1184+
<form class="bs-docs-example">
11741185
<div class="input-append">
1175-
<input class="span2" id="appendedInputButtons" size="16" type="text">
1186+
<input class="span2" id="appendedInputButtons" type="text">
11761187
<button class="btn" type="button">Search</button>
11771188
<button class="btn" type="button">Options</button>
11781189
</div>
11791190
</form>
11801191
<pre class="prettyprint linenums">
11811192
&lt;div class="input-append"&gt;
1182-
&lt;input class="span2" id="appendedInputButton" size="16" type="text"&gt;&lt;button class="btn" type="button"&gt;Go!&lt;/button&gt;
1193+
&lt;input class="span2" id="appendedInputButtons" type="text"&gt;
1194+
&lt;button class="btn" type="button"&gt;Search&lt;/button&gt;
1195+
&lt;button class="btn" type="button"&gt;Options&lt;/button&gt;
11831196
&lt;/div&gt;
1197+
</pre>
11841198

1199+
<h4>Button dropdowns</h4>
1200+
<p></p>
1201+
<form class="bs-docs-example">
1202+
<div class="input-append">
1203+
<input class="span2" id="appendedDropdownButton" type="text">
1204+
<div class="btn-group">
1205+
<button class="btn dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
1206+
<ul class="dropdown-menu">
1207+
<li><a href="#">Action</a></li>
1208+
<li><a href="#">Another action</a></li>
1209+
<li><a href="#">Something else here</a></li>
1210+
<li class="divider"></li>
1211+
<li><a href="#">Separated link</a></li>
1212+
</ul>
1213+
</div><!-- /btn-group -->
1214+
</div><!-- /input-append -->
1215+
</form>
1216+
<pre class="prettyprint linenums">
11851217
&lt;div class="input-append"&gt;
1186-
&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;
1218+
&lt;input class="span2" id="appendedDropdownButton" type="text"&gt;
1219+
&lt;div class="btn-group"&gt;
1220+
&lt;button class="btn dropdown-toggle" data-toggle="dropdown"&gt;
1221+
Action
1222+
&lt;span class="caret"&gt;&lt;/span&gt;
1223+
&lt;/button&gt;
1224+
&lt;ul class="dropdown-menu"&gt;
1225+
...
1226+
&lt;/ul&gt;
1227+
&lt;/div&gt;
1228+
&lt;/div&gt;
1229+
</pre>
1230+
1231+
<form class="bs-docs-example">
1232+
<div class="input-prepend">
1233+
<div class="btn-group">
1234+
<button class="btn dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
1235+
<ul class="dropdown-menu">
1236+
<li><a href="#">Action</a></li>
1237+
<li><a href="#">Another action</a></li>
1238+
<li><a href="#">Something else here</a></li>
1239+
<li class="divider"></li>
1240+
<li><a href="#">Separated link</a></li>
1241+
</ul>
1242+
</div><!-- /btn-group -->
1243+
<input class="span2" id="prependedDropdownButton" type="text">
1244+
</div><!-- /input-prepend -->
1245+
</form>
1246+
<pre class="prettyprint linenums">
1247+
&lt;div class="input-prepend"&gt;
1248+
&lt;div class="btn-group"&gt;
1249+
&lt;button class="btn dropdown-toggle" data-toggle="dropdown"&gt;
1250+
Action
1251+
&lt;span class="caret"&gt;&lt;/span&gt;
1252+
&lt;/button&gt;
1253+
&lt;ul class="dropdown-menu"&gt;
1254+
...
1255+
&lt;/ul&gt;
1256+
&lt;/div&gt;
1257+
&lt;input class="span2" id="prependedDropdownButton" type="text"&gt;
1258+
&lt;/div&gt;
1259+
</pre>
1260+
1261+
<form class="bs-docs-example">
1262+
<div class="input-prepend input-append">
1263+
<div class="btn-group">
1264+
<button class="btn dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
1265+
<ul class="dropdown-menu">
1266+
<li><a href="#">Action</a></li>
1267+
<li><a href="#">Another action</a></li>
1268+
<li><a href="#">Something else here</a></li>
1269+
<li class="divider"></li>
1270+
<li><a href="#">Separated link</a></li>
1271+
</ul>
1272+
</div><!-- /btn-group -->
1273+
<input class="span2" id="appendedPrependedDropdownButton" type="text">
1274+
<div class="btn-group">
1275+
<button class="btn dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
1276+
<ul class="dropdown-menu">
1277+
<li><a href="#">Action</a></li>
1278+
<li><a href="#">Another action</a></li>
1279+
<li><a href="#">Something else here</a></li>
1280+
<li class="divider"></li>
1281+
<li><a href="#">Separated link</a></li>
1282+
</ul>
1283+
</div><!-- /btn-group -->
1284+
</div><!-- /input-prepend input-append -->
1285+
</form>
1286+
<pre class="prettyprint linenums">
1287+
&lt;div class="input-prepend input-append"&gt;
1288+
&lt;div class="btn-group"&gt;
1289+
&lt;button class="btn dropdown-toggle" data-toggle="dropdown"&gt;
1290+
Action
1291+
&lt;span class="caret"&gt;&lt;/span&gt;
1292+
&lt;/button&gt;
1293+
&lt;ul class="dropdown-menu"&gt;
1294+
...
1295+
&lt;/ul&gt;
1296+
&lt;/div&gt;
1297+
&lt;input class="span2" id="appendedPrependedDropdownButton" type="text"&gt;
1298+
&lt;div class="btn-group"&gt;
1299+
&lt;button class="btn dropdown-toggle" data-toggle="dropdown"&gt;
1300+
Action
1301+
&lt;span class="caret"&gt;&lt;/span&gt;
1302+
&lt;/button&gt;
1303+
&lt;ul class="dropdown-menu"&gt;
1304+
...
1305+
&lt;/ul&gt;
1306+
&lt;/div&gt;
11871307
&lt;/div&gt;
11881308
</pre>
11891309

0 commit comments

Comments
 (0)