【初心者の方向け】 Bootstrap4の使い方 リストグループ

bootstrapでの基本的なリストグループの使い方になります。

Bootstrap4のバージョン4.3をベースに書いています。

基本的な使い方

• リスト１
• リスト２
• リスト３
• リスト４
• リスト５

見本ではul要素に.list-groupをli要素に.list-group-itemを指定しています。

アクティブと無効状態

リスト一覧の状態を指定する事もできます。

• リスト１（アクティブ）
• リスト２（無効）
• リスト３
• リスト４
• リスト５

.activeを追加しアクティブに.disabledを追加し無効化。

アイテムに上記のクラスを追加することによりアクティブ化・無効化を指定する事ができます。

リストをリンクやボタン化する

<a>要素を使用してリストをリンク化する事ができます。

同様に<button>にも使用する事ができます。

リンク

ボタン

横並びにリストを表示させる

.list-group-horizontalを追加することにより、横並びのリストにする事ができます。

• リスト１
• リスト２
• リスト３
• リスト４
• リスト５

.list-group-horizontalにはブレークポイントを指定する事ができます。
下の例では.list-group-horizontal-mdを指定しています。
デスクトップ等でご覧の場合は、ブラウザの幅を縮めて見てください。
一定の幅になると下のリストが縦に並ぶのが確認できます。

• リスト１
• リスト２
• リスト３
• リスト４
• リスト５

リストに背景色を指定

.list-group-item-○○で各リストに背景色を指定する事ができます。
○○の部分はあらかじめ用意されているカラー名を指定。

また、例では.list-group-item-actionを追加しています。
マウスオーバー時の変化も確認してください。

• .list-group-item-primary
• .list-group-item-secondary
• .list-group-item-success
• .list-group-item-danger
• .list-group-item-warning

バッジ付きリスト表示

ブログの投稿数やリストに関連する記事数などを表示する際に、メールアプリなどでよく見られるバッジでの表現もbootstrapで表現ができます。

• リスト１
  14
• リスト２
  102
• リスト３
  9