mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-22 05:03:16 +02:00
Code Issues Releases Wiki Activity

Fixes #7511: add support for nested button groups so you can use dropdowns in your button groups

Browse Source
This commit is contained in:
Mark Otto
2013-05-03 16:16:26 -07:00
parent ee0789ff8f
commit 7d41a38769
3 changed files with 56 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -3889,6 +3889,25 @@ button.close {
border-bottom-right-radius: 6px; border-bottom-right-radius: 6px;
} }
.btn-group > .btn-group {
float: left;
}
.btn-group > .btn-group > .btn {
border-radius: 0;
}
.btn-group > .btn-group:last-child > .btn {
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
}
.btn-group > .btn-group:first-child > .btn {
margin-left: 0;
border-bottom-left-radius: 4px;
border-top-left-radius: 4px;
}
.btn-group .dropdown-toggle:active, .btn-group .dropdown-toggle:active,
.btn-group.open .dropdown-toggle { .btn-group.open .dropdown-toggle {
outline: 0; outline: 0;

22
docs/docs.html
View File

@@ -2919,6 +2919,28 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
</div> </div>
{% endhighlight %} {% endhighlight %}
<h3 id="btn-groups-nested">Nested button groups</h3>
<p>Place buttons groups within button groups when you want dropdown menus mixed with a series of buttons.</p>
<div class="bs-docs-example">
<div class="btn-group">
<button type="button" class="btn">1</button>
<button type="button" class="btn">2</button>
<button type="button" class="btn">3</button>
<div class="btn-group">
<button type="button" class="btn dropdown-toggle" data-toggle="dropdown">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">Dropdown link</a></li>
<li><a href="#">Dropdown link</a></li>
<li><a href="#">Dropdown link</a></li>
</ul>
</div>
</div>
</div>
<h3 id="btn-groups-vertical">Vertical button groups</h3> <h3 id="btn-groups-vertical">Vertical button groups</h3>
<p>Make a set of buttons appear vertically stacked rather than horizontally.</p> <p>Make a set of buttons appear vertically stacked rather than horizontally.</p>
<div class="bs-docs-example"> <div class="bs-docs-example">

15
less/button-groups.less
View File

@@ -73,6 +73,21 @@
.border-right-radius(@border-radius-large); .border-right-radius(@border-radius-large);
} }
// Custom edits for including btn-groups within btn-groups (useful for including dropdown buttons within a btn-group)
.btn-group > .btn-group {
float: left;
}
.btn-group > .btn-group > .btn {
border-radius: 0;
}
.btn-group > .btn-group:last-child > .btn {
.border-right-radius(@border-radius-base);
}
.btn-group > .btn-group:first-child > .btn {
margin-left: 0;
.border-left-radius(@border-radius-base);
}
// On active and open, don't show outline // On active and open, don't show outline
.btn-group .dropdown-toggle:active, .btn-group .dropdown-toggle:active,
.btn-group.open .dropdown-toggle { .btn-group.open .dropdown-toggle {