ドロップダウン - Bootstrap4移行ガイド
- スイッチを押すとメニューの表示・非表示が切り替わるコンポーネント
- マウスオーバーではなくクリックすることで表示を切り替える。任意でマウスオーバーの切替に変更可能
- 動作させるにはpopper.jsが必要
- ソースファイルからJavaScriptを構築する場合は、util.js が必要
- このコンポーネントを使うには、スイッチとメニューを
.dropdown で囲む
- キャレットまわりの余白を広げたいときは
.dropdown-toggle-split を指定する
.dropup でスイッチの上部にメニューを表示することもできる.dropright でスイッチの右側にメニューを表示することもできる.dropleft でスイッチの左側にメニューを表示することもできる- メニューには
a 要素以外に button 要素が指定できる
- メニューの配置は
.dropdown-menu-right を使って移動できる
.dropdown-header を挿入すればメニューに見出しがつけれる- メニューのグループを境界線で区切るには
.dropdown-divider を指定する
- メニュー内にフォームを挿入することもできる（たとえばログインフォームをいれてみたり）
- メニューの要素に
.active を指定すればアクティブ状態の見た目になる
- メニューの要素に
.disabled を指定すれば非アクティブ状態の見た目になる
