Bootstrap 按鈕組
按鈕組
Bootstrap 允許您將一系列按鈕（在同一行上）組合在一起，形成一個按鈕組。
使用帶有類 .btn-group 的 <div> 元素來建立按鈕組。
示例
<div class="btn-group">
<button type="button" class="btn btn-primary">Apple</button>
<button type="button" class="btn btn-primary">Samsung</button>
<button type="button" class="btn btn-primary">Sony</button>
</div>
自己動手試一試 »
提示：不必為組中的每個按鈕單獨應用按鈕大小，而是使用類 .btn-group-lg|sm|xs 來調整組中所有按鈕的大小。
示例
<div class="btn-group btn-group-lg">
<button type="button" class="btn btn-primary">Apple</button>
<button type="button" class="btn btn-primary">Samsung</button>
<button type="button" class="btn btn-primary">Sony</button>
</div>
自己動手試一試 »
垂直按鈕組
Bootstrap 也支援垂直按鈕組。
使用類 .btn-group-vertical 來建立垂直按鈕組。
示例
<div class="btn-group-vertical">
<button type="button" class="btn btn-primary">Apple</button>
<button type="button" class="btn btn-primary">Samsung</button>
<button type="button" class="btn btn-primary">Sony</button>
</div>
自己動手試一試 »
佔滿整個寬度的按鈕組
要跨越整個螢幕寬度，請使用 .btn-group-justified 類。
使用 <a> 元素的示例
示例
<div class="btn-group btn-group-justified">
<a href="#" class="btn btn-primary">Apple</a>
<a href="#" class="btn btn-primary">Samsung</a>
<a href="#" class="btn btn-primary">Sony</a>
</div>
自己動手試一試 »
注意：對於 <button> 元素，您必須將每個按鈕包裝在 .btn-group 類中。
示例
<div class="btn-group btn-group-justified">
<div class="btn-group">
<button type="button" class="btn btn-primary">Apple</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-primary">Samsung</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-primary">Sony</button>
</div>
</div>
自己動手試一試 »
巢狀按鈕組和下拉選單
巢狀按鈕組以建立下拉選單。
示例
<div class="btn-group">
<button type="button" class="btn btn-primary">Apple</button>
<button type="button" class="btn btn-primary">Samsung</button>
<div class="btn-group">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
Sony <span class="caret"></span></button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Tablet</a></li>
<li><a href="#">Smartphone</a></li>
</ul>
</div>
</div>
自己動手試一試 »
拆分按鈕下拉選單
示例
<div class="btn-group">
<button type="button" class="btn btn-primary">Sony</button>
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Tablet</a></li>
<li><a href="#">Smartphone</a></li>
</ul>
</div>
自己動手試一試 »
