Button dropdowns(ボタンドロップダウン)

サンプル01-ボタンドロップダウン表示

コーディング
.btn-group
01行目 ドロップダウン表示のトリガーとなるボタン・表示するメニューを.btn-groupで囲みます
.dropdown-toggle
02行目 ドロップダウン表示のトリガーとなるボタンを設定します
.dropdown
.caret
03行目 ドロップダウン表示がある事を知らせる為にキャレット表示(▼)を行います
.dropdown-menu
05行目 表示するメニューを設定します

サンプル02-分割ボタンドロップダウン表示

機能

分割となっていますが、単純にボタンが2個並んでいるだけです

コーディング
<button ~
02行目 通常ボタン部分を表示します
<button ~
03-05行目 ドロップダウン表示のトリガーとなるボタンの設定とキャレット表示(▼)を行います

サンプル03-サイズを指定してボタンドロップダウンを表示する

コーディング
.btn-lg
02行目 LGサイズでボタンドロップダウンを表示
指定なし
13行目 通常サイズでボタンドロップダウンを表示
.btn-sm
17行目 SMサイズでボタンドロップダウンを表示
.btn-xs
21行目 XSサイズでボタンドロップダウンを表示

サンプル04-ボタンドロップアップ表示

機能

メニューを下ではなく上に表示します

コーディング
.dropup
01行目 ドロップアップするボタンに.dropupを指定します