リストグループ - Bootstrap4移行ガイド
- 枠線で複数の要素が囲まれ、この要素ごとに仕切り線があるコンポーネント
- リストに
.list-group、リストの子要素に .list-group-item を指定することでこのコンポーネントは表示できる
- リストの子要素をアクティブな見た目にしたいときは
.active を指定する
- リストの子要素を非アクティブな見た目にしたいときは
.disabled を指定する
- マウスオーバーなどの状態をリストの子要素に持たせるには、HTML 要素を
a 要素や button 要素にした上で .list-group-item-action を指定する
- リスト周囲の余白を表示しないようにするには
.list-group-flush を指定する
- リストの背景色を変更するにはカラーユーティリティクラスを使う
- 背景色を変えても
.list-group-item-action は機能する
- リストの線の色を変更するには境界ユーティリティクラスを使う
- Flex ユーティリティクラスの力を借りながら、リストにバッジを表示することもできる
- リストの子要素にヘッダーをつけたい場合は、Flex ユーティリティクラスを使って配置を整える
- リストグループを拡張すればタブを実装できる
