同じボタングループのボタンを一行、もしくは、一列に並べることができる。
ポイントは1つだけ。
div要素など)のclass属性に、btn-groupを指定する。
<div class="btn-group" role="group">
<button type="button" class="btn btn-default">左</button>
<button type="button" class="btn btn-default">中央</button>
<button type="button" class="btn btn-default">右</button>
</div>
button要素をボタンに使うスタイル。
<div class="btn-group" role="group">
<button type="button" class="btn btn-default">左</button>
<button type="button" class="btn btn-default">中央</button>
<button type="button" class="btn btn-default">右</button>
</div>
a要素をボタンに使うスタイル。
<div class="btn-group" role="group">
<a href="#" class="btn btn-default" role="button">左</a>
<a href="#" class="btn btn-default" role="button">中央</a>
<a href="#" class="btn btn-default" role="button">右</a>
</div>
ツールバーの中で、ボタングループを使うこともできる。
<div class="btn-toolbar" role="toolbar"> <div class="btn-group" role="group"> <button type="button" class="btn btn-default">A</button> <button type="button" class="btn btn-default">B</button> <button type="button" class="btn btn-default">C</button> </div> <div class="btn-group" role="group"> <button type="button" class="btn btn-default">D</button> <button type="button" class="btn btn-default">E</button> </div> <div class="btn-group" role="group"> <button type="button" class="btn btn-default">F</button> <button type="button" class="btn btn-default">G</button> <button type="button" class="btn btn-default">H</button> </div> </div>
ボタン群を覆う要素(div要素など)のclass属性に、btn-group-lg(大)やbtn-group-sm(小)を追加するだけで、グループ内のボタンの大きさを変更できる。
<div class="btn-group btn-group-lg" role="group"> <button type="button" class="btn btn-default">大A</button> <button type="button" class="btn btn-default">大B</button> <button type="button" class="btn btn-default">大C</button> </div> <div class="btn-group" role="group"> <button type="button" class="btn btn-default">通常A</button> <button type="button" class="btn btn-default">通常B</button> <button type="button" class="btn btn-default">通常C</button> </div> <div class="btn-group btn-group-sm" role="group"> <button type="button" class="btn btn-default">小A</button> <button type="button" class="btn btn-default">小B</button> <button type="button" class="btn btn-default">小C</button> </div> <div class="btn-group btn-group-xs" role="group"> <button type="button" class="btn btn-default">極小A</button> <button type="button" class="btn btn-default">極小B</button> <button type="button" class="btn btn-default">極小C</button> </div>
ボタングループを表す要素(class属性にbtn-groupを指定したdiv要素)を入れ子(ネスト)にすることで、ボタングループ内にドロップダウン・ボタンを実装できる。
<div class="btn-group" role="group"> <button type="button" class="btn btn-default">A</button> <button type="button" class="btn btn-default">B</button> <div class="btn-group" role="group"> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false"> C <span class="caret"></span> </button> <ul class="dropdown-menu" role="menu"> <li><a href="#">C−1</a></li> <li><a href="#">C−2</a></li> </ul> </div> <button type="button" class="btn btn-default">D</button> </div>
ボタン群を覆った要素(div要素)のclass属性にbtn-group-verticalを指定することで、垂直方向にボタンを並べる縦型のボタングループとなる。
<div class="btn-group-vertical" role="group">
<button type="button" class="btn btn-default">A</button>
<button type="button" class="btn btn-default">B</button>
<div class="btn-group" role="group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
C
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">C−1</a></li>
<li><a href="#">C−2</a></li>
</ul>
</div>
<div class="btn-group" role="group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
D
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">D−1</a></li>
<li><a href="#">D−2</a></li>
</ul>
</div>
<button type="button" class="btn btn-default">E</button>
</div>
ボタンにa要素を使う場合、ボタン群を覆った要素(div要素)のclass属性にbtn-group-justifiedを追加することで、両端揃えボタングループとなる。
<div class="btn-group btn-group-justified" role="group">
<a href="#" class="btn btn-default" role="button">A</a>
<a href="#" class="btn btn-default" role="button">B</a>
<div class="btn-group" role="group">
<a href="#" class="btn btn-default dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">
C <span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">C−1</a></li>
<li><a href="#">C−2</a></li>
<li><a href="#">C−3</a></li>
</ul>
</div>
<div class="btn-group" role="group">
<a href="#" class="btn btn-default dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">
D <span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">D−1</a></li>
<li><a href="#">D−2</a></li>
<li><a href="#">D−3</a></li>
</ul>
</div>
<a href="#" class="btn btn-default" role="button">E</a>
</div>
ボタンにbutton要素を使う場合、各ボタン(button要素)をボタングループで覆い、更にそのボタン群をボタングループで覆い、入れ子にする。ボタン群を覆った要素(div要素)のclass属性にbtn-group-justifiedを追加することで、両端揃えボタングループとなる。
<div class="btn-group btn-group-justified" role="group">
<div class="btn-group" role="group">
<button type="button" class="btn btn-default">A</button>
</div>
<div class="btn-group" role="group">
<button type="button" class="btn btn-default">B</button>
</div>
<div class="btn-group" role="group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
C
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">C−1</a></li>
<li><a href="#">C−2</a></li>
<li><a href="#">C−3</a></li>
</ul>
</div>
<div class="btn-group" role="group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
D
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">D−1</a></li>
<li><a href="#">D−2</a></li>
<li><a href="#">D−3</a></li>
</ul>
</div>
<div class="btn-group" role="group">
<button type="button" class="btn btn-default">E</button>
</div>
</div>