0
0
mirror of https://github.com/twbs/bootstrap.git synced 2025-03-02 02:29:24 +01:00

Merge pull request #9059 from twbs/nested-btn-groups-docs

adjust description & give source for nested `.btn-group`s example
This commit is contained in:
Chris Rebert 2013-08-03 23:45:08 -07:00
commit 509ffe110e

View File

@ -155,12 +155,11 @@ base_url: "../"
{% endhighlight %} {% endhighlight %}
<h3 id="btn-groups-nested">Nested button groups</h3> <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="bs-example">
<div class="btn-group"> <div class="btn-group">
<button type="button" class="btn btn-default">1</button> <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">2</button>
<button type="button" class="btn btn-default">3</button>
<div class="btn-group"> <div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
@ -170,11 +169,27 @@ base_url: "../"
<ul class="dropdown-menu"> <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> <li><a href="#">Dropdown link</a></li>
<li><a href="#">Dropdown link</a></li> </ul>
</ul>
</div> </div>
</div> </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> <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>