diff options
| author | Chris Rebert <[email protected]> | 2013-08-03 23:45:08 -0700 |
|---|---|---|
| committer | Chris Rebert <[email protected]> | 2013-08-03 23:45:08 -0700 |
| commit | 509ffe110ecf78998a32e5603abedc79d526235d (patch) | |
| tree | 3c42040ba111944dad6175ee5eb7018ddb42c37d | |
| parent | a84e07b27220eddb075d4df65fe24d26c722df7a (diff) | |
| parent | 19e8342c7a53a72057730d766293c1b8a74ee828 (diff) | |
| download | bootstrap-509ffe110ecf78998a32e5603abedc79d526235d.tar.xz bootstrap-509ffe110ecf78998a32e5603abedc79d526235d.zip | |
Merge pull request #9059 from twbs/nested-btn-groups-docs
adjust description & give source for nested `.btn-group`s example
| -rw-r--r-- | components.html | 23 |
1 files changed, 19 insertions, 4 deletions
diff --git a/components.html b/components.html index 3e1875852..7b0f0d0ed 100644 --- a/components.html +++ b/components.html @@ -155,12 +155,11 @@ base_url: "../" {% 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> + <p>Place a <code>.btn-group</code> within another <code>.btn-group</code> when you want dropdown menus mixed with a series of buttons.</p> <div class="bs-example"> <div class="btn-group"> <button type="button" class="btn btn-default">1</button> <button type="button" class="btn btn-default">2</button> - <button type="button" class="btn btn-default">3</button> <div class="btn-group"> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> @@ -170,11 +169,27 @@ base_url: "../" <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> + </ul> </div> </div> </div> +{% highlight html %} +<div class="btn-group"> + <button type="button" class="btn btn-default">1</button> + <button type="button" class="btn btn-default">2</button> + + <div class="btn-group"> + <button type="button" class="btn btn-default 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> + </ul> + </div> +</div> +{% endhighlight %} <h3 id="btn-groups-vertical">Vertical button groups</h3> <p>Make a set of buttons appear vertically stacked rather than horizontally.</p> |