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

この記事は【2022年7月21日】が最後の更新のため、記事の内容が古い可能性があります。

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

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

基本的な使い方

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

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

<ul class="list-group">
  <li class="list-group-item">リスト１</li>
  <li class="list-group-item">リスト２</li>
  <li class="list-group-item">リスト３</li>
  <li class="list-group-item">リスト４</li>
  <li class="list-group-item">リスト５</li>
</ul>

アクティブと無効状態

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

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

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

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

<ul class="list-group">
 	<li class="list-group-item active">リスト１（アクティブ）</li>
 	<li class="list-group-item disabled">リスト２（無効）</li>
 	<li class="list-group-item">リスト３</li>
 	<li class="list-group-item">リスト４</li>
 	<li class="list-group-item">リスト５</li>
</ul>

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

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

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

リンク

リンク１
リンク２
リンク３

<div class="list-group">
 	<a href="#" class="list-group-item list-group-item-action">リンク１</a>
 	<a href="#" class="list-group-item list-group-item-action">リンク２</a>
 	<a href="#" class="list-group-item list-group-item-action">リンク３</a>
</div>

ボタン

<div class="list-group">
 	<button type="button" class="list-group-item list-group-item-action">ボタン１</button>
 	<button type="button" class="list-group-item list-group-item-action">ボタン２</button>
 	<button type="button" class="list-group-item list-group-item-action">ボタン３</button>
</div>

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

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

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

<ul class="list-group list-group-horizontal">
 	<li class="list-group-item">リスト１</li>
 	<li class="list-group-item">リスト２</li>
 	<li class="list-group-item">リスト３</li>
 	<li class="list-group-item">リスト４</li>
 	<li class="list-group-item">リスト５</li>
</ul>

.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

<ul class="list-group">
 	<li class="list-group-item list-group-item-action list-group-item-primary">.list-group-item-primary</li>
 	<li class="list-group-item list-group-item-action list-group-item-secondary">.list-group-item-secondary</li>
 	<li class="list-group-item list-group-item-action list-group-item-success">.list-group-item-success</li>
 	<li class="list-group-item list-group-item-action list-group-item-danger">.list-group-item-danger</li>
 	<li class="list-group-item list-group-item-action list-group-item-warning">.list-group-item-warning</li>
</ul>

バッジ付きリスト表示

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

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

<ul class="list-group">
  <li class="list-group-item d-flex justify-content-between align-items-center">
    リスト１
    <span class="badge badge-primary badge-pill">14</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-center">
    リスト２
    <span class="badge badge-secondary badge-pill">102</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-center">
    リスト３
    <span class="badge badge-danger badge-pill">9</span>
  </li>
</ul>