Button groups(ボタングループ表示)

サンプル01-ボタングループ表示

コーディング
.btn-group
01行目 グループ表示するボタンを.btn-groupで囲みます

サンプル02-ボタンツールバーを表示

機能

複数のボタングループを横に並べて表示します

コーディング
.btn-toolbar
01行目 .btn-group.btn-toolbarで囲みます

サンプル03-表示サイズを指定してボタングループを表示

コーディング
.btn-group-lg
01行目 LGサイズでボタングループを表示
指定なし
06行目 通常サイズでボタングループを表示
.btn-group-sm
11行目 SMサイズでボタングループを表示
.btn-group-xs
16行目 XSサイズでボタングループを表示

サンプル04-ボタングループ内にドロップダウンボタンを表示

コーディング
.btn-group
04-11行目 .btn-group内にドロップダウンボタン用の.btn-groupを記述します

サンプル05-ボタングループを縦に表示

コーディング
.btn-group-vertical
01行目 基本となる.btn-group.btn-group-verticalを記述します

サンプル06-均等サイズボタングループを表示

機能

表示するブロックの幅いっぱいを等分してボタングループを表示します
設定出来るタグは<a>だけで、<button>では期待通りの表示は行われません

コーディング
.btn-group-justified
01行目 基本となる.btn-group.btn-group-justifiedを記述します