rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2024-11-29 11:24:18 +01:00
Code Issues Actions Packages Releases Activity

Fixes #5785: allow for segmented button groups in input groups

Browse Source
This commit is contained in:
Mark Otto 2012-11-04 19:08:02 -08:00
parent 51f293ba4c
commit 7e6cc0bf7e
4 changed files with 109 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
docs/assets/css/bootstrap.css vendored
View File

@ -1703,7 +1703,9 @@ select:focus:required:invalid:focus {
.input-append .add-on,
.input-prepend .add-on,
.input-append .btn,
.input-prepend .btn {
.input-prepend .btn,
.input-append .btn-group > .dropdown-toggle,
.input-prepend .btn-group > .dropdown-toggle {
vertical-align: top;
-webkit-border-radius: 0;
-moz-border-radius: 0;
@ -1736,9 +1738,9 @@ select:focus:required:invalid:focus {
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 {
-webkit-border-radius: 0 4px 4px 0;
-moz-border-radius: 0 4px 4px 0;
border-radius: 0 4px 4px 0;
@ -1751,7 +1753,8 @@ select:focus:required:invalid:focus {
}
.input-append .add-on:last-child,
.input-append .btn:last-child {
.input-append .btn:last-child,
.input-append .btn-group:last-child > .dropdown-toggle {
-webkit-border-radius: 0 4px 4px 0;
-moz-border-radius: 0 4px 4px 0;
border-radius: 0 4px 4px 0;

48
docs/base-css.html
View File

@ -1323,6 +1323,54 @@ For example, <code><section></code> should be wrapped as inlin
</ul>
</div>
</div>
</pre>
<h4>Segmented dropdown groups</h4>
<form class="bs-docs-example">
<div class="input-prepend">
<div class="btn-group">
<button class="btn" tabindex="-1">Action</button>
<button class="btn dropdown-toggle" data-toggle="dropdown" tabindex="-1">
<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>
<input type="text">
</div>
<div class="input-append">
<input type="text">
<div class="btn-group">
<button class="btn" tabindex="-1">Action</button>
<button class="btn dropdown-toggle" data-toggle="dropdown" tabindex="-1">
<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>
</div>
</form>
<pre class="prettyprint linenums">
&lt;form&gt;
&lt;div class="input-prepend"&gt;
&lt;div class="btn-group"&gt;...&lt;/div&gt;
&lt;input type="text"&gt;
&lt;/div&gt;
&lt;div class="input-append"&gt;
&lt;input type="text"&gt;
&lt;div class="btn-group"&gt;...&lt;/div&gt;
&lt;/div&gt;
&lt;/form&gt;
</pre>
<h4>Search form</h4>

48
docs/templates/pages/base-css.mustache vendored
View File

@ -1260,6 +1260,54 @@
&lt;/ul&gt;
&lt;/div&gt;
&lt;/div&gt;
</pre>
<h4>{{_i}}Segmented dropdown groups{{/i}}</h4>
<form class="bs-docs-example">
<div class="input-prepend">
<div class="btn-group">
<button class="btn" tabindex="-1">Action</button>
<button class="btn dropdown-toggle" data-toggle="dropdown" tabindex="-1">
<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>
<input type="text">
</div>
<div class="input-append">
<input type="text">
<div class="btn-group">
<button class="btn" tabindex="-1">Action</button>
<button class="btn dropdown-toggle" data-toggle="dropdown" tabindex="-1">
<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>
</div>
</form>
<pre class="prettyprint linenums">
&lt;form&gt;
&lt;div class="input-prepend"&gt;
&lt;div class="btn-group"&gt;...&lt;/div&gt;
&lt;input type="text"&gt;
&lt;/div&gt;
&lt;div class="input-append"&gt;
&lt;input type="text"&gt;
&lt;div class="btn-group"&gt;...&lt;/div&gt;
&lt;/div&gt;
&lt;/form&gt;
</pre>
<h4>{{_i}}Search form{{/i}}</h4>

8
less/forms.less
View File

@ -462,7 +462,8 @@ select:focus:required:invalid {
border: 1px solid #ccc;
}
.add-on,
.btn {
.btn,
.btn-group > .dropdown-toggle {
vertical-align: top;
.border-radius(0);
}
@ -489,7 +490,7 @@ select:focus:required:invalid {
select,
.uneditable-input {
.border-radius(@inputBorderRadius 0 0 @inputBorderRadius);
+ .btn-group .btn {
+ .btn-group .btn:last-child {
.border-radius(0 @inputBorderRadius @inputBorderRadius 0);
}
}
@ -499,7 +500,8 @@ select:focus:required:invalid {
margin-left: -1px;
}
.add-on:last-child,
.btn:last-child {
.btn:last-child,
.btn-group:last-child > .dropdown-toggle {
.border-radius(0 @inputBorderRadius @inputBorderRadius 0);
}
}