Bootstrap4 リストグループ

Bootstrap4 のリストグループは、リストアイテムのリストを作成するために使用されます。リストグループは柔軟なコンポーネントであり、さまざまなリストアイテムのスタイルを作成するために使用できます。

基礎リストグループ

.list-group クラスを使用してリストグループコンテナを作成します。.list-group-item クラスを使用してリストアイテムを作成します。

<ul class="list-group">
  <li class="list-group-item">アイテム 1</li>
  <li class="list-group-item">アイテム 2</li>
  <li class="list-group-item">アイテム 3</li>
</ul>

アクティブなリストアイテム

.active クラスを使用してアクティブなリストアイテムを作成します。

<ul class="list-group">
  <li class="list-group-item active">アクティブなアイテム</li>
  <li class="list-group-item">アイテム 2</li>
  <li class="list-group-item">アイテム 3</li>
</ul>

無効化されたリストアイテム

.disabled クラスを使用して無効化されたリストアイテムを作成します。

<ul class="list-group">
  <li class="list-group-item disabled">無効化されたアイテム</li>
  <li class="list-group-item">アイテム 2</li>
  <li class="list-group-item">アイテム 3</li>
</ul>

リンクリストアイテム

リストアイテムにはリンクを含めることができます。リンクには .list-group-item-action クラスを使用します。ホバーおよびフォーカス状態では、リンクリストアイテムの背景色が変わります。

<ul class="list-group">
  <a href="#" class="list-group-item list-group-item-action">リンク 1</a>
  <a href="#" class="list-group-item list-group-item-action">リンク 2</a>
  <a href="#" class="list-group-item list-group-item-action">リンク 3</a>
</ul>

情景クラス

.list-group-item-{color} クラスを使用して、さまざまな情景色のリストアイテムを作成できます。たとえば、.list-group-item-success です。

<ul class="list-group">
  <li class="list-group-item list-group-item-success">成功</li>
  <li class="list-group-item list-group-item-danger">危険</li>
  <li class="list-group-item list-group-item-warning">警告</li>
</ul>

バッジ

<span class="badge ..."> を使用して、リストアイテムの右側にバッジを追加できます。

<ul class="list-group">
  <li class="list-group-item d-flex justify-content-between align-items-center">
    アイテム 1
    <span class="badge badge-primary badge-pill">14</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-center">
    アイテム 2
    <span class="badge badge-secondary badge-pill">2</span>
  </li>
</ul>

カスタムコンテンツ

リストアイテムには、見出し、段落、画像など、さまざまな HTML 要素を含めることができます。

<ul class="list-group">
  <li class="list-group-item">
    <h5 class="mb-1">アイテムのタイトル</h5>
    <p class="mb-1">アイテムの説明</p>
    <small>アイテムの詳細</small>
  </li>
</ul>

水平リストグループ

.list-group-horizontal クラスを使用して水平リストグループを作成します。レスポンシブに、小さな画面では自動的に垂直リストグループに変換されます。

<ul class="list-group list-group-horizontal">
  <li class="list-group-item">アイテム 1</li>
  <li class="list-group-item">アイテム 2</li>
  <li class="list-group-item">アイテム 3</li>
</ul>

フラッシュリストグループ

.list-group-flush クラスを使用して、リストグループのボーダーと角丸を除去します。

<ul class="list-group list-group-flush">
  <li class="list-group-item">アイテム 1</li>
  <li class="list-group-item">アイテム 2</li>
  <li class="list-group-item">アイテム 3</li>
</ul>

参考資料

• https://getbootstrap.com/docs/4.0/components/list-group/

よくある質問

リストグループのアイテムの高さを変更するにはどうすればよいですか？

リストグループのアイテムの高さは、パディングやマージンなどのCSSプロパティを使用して調整できます。

リストグループを特定の幅に設定するにはどうすればよいですか？

リストグループの幅は、CSSのwidthプロパティを使用して設定できます。パーセンテージやピクセルなど、さまざまな単位を使用できます。

リストグループのアイテムを中央揃えにするにはどうすればよいですか？

リストグループのアイテムを中央揃えにするには、.justify-content-center クラスをリストグループに追加します。ただし、これは水平リストグループの場合にのみ機能します。