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を指定します