ボタングループ
Bootstrapあなたがボタングループに(一行に)一緒のグループに一連のボタンを可能にします:
使用し<div>
クラスを持つ要素を.btn-group
ボタングループを作成するには:
例
<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-*
サイズグループ内のすべてのボタンに:
例
<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>
»それを自分で試してみてください