diff options
| author | Mark Otto <[email protected]> | 2013-05-03 16:16:26 -0700 |
|---|---|---|
| committer | Mark Otto <[email protected]> | 2013-05-03 16:16:26 -0700 |
| commit | 7d41a387693c49347e06572ceb7ec2207ee30d46 (patch) | |
| tree | 12d3566c657efb04d4cd4021367f8aa61fd6fa35 /docs | |
| parent | ee0789ff8f7ac0c60d8f326894fef5fd9db90adc (diff) | |
| download | bootstrap-7d41a387693c49347e06572ceb7ec2207ee30d46.tar.xz bootstrap-7d41a387693c49347e06572ceb7ec2207ee30d46.zip | |
Fixes #7511: add support for nested button groups so you can use dropdowns in your button groups
Diffstat (limited to 'docs')
| -rw-r--r-- | docs/assets/css/bootstrap.css | 19 | ||||
| -rw-r--r-- | docs/docs.html | 22 |
2 files changed, 41 insertions, 0 deletions
diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css index 131b0c6fa..e1260c7d5 100644 --- a/docs/assets/css/bootstrap.css +++ b/docs/assets/css/bootstrap.css @@ -3889,6 +3889,25 @@ button.close { 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.open .dropdown-toggle { outline: 0; diff --git a/docs/docs.html b/docs/docs.html index cd90b1510..346725215 100644 --- a/docs/docs.html +++ b/docs/docs.html @@ -2919,6 +2919,28 @@ For example, <code><section></code> should be wrapped as inline. </div> {% 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> <p>Make a set of buttons appear vertically stacked rather than horizontally.</p> <div class="bs-docs-example"> |