■リストグループ:list-group:コンポーネント:基本的な使用例 list-group
- リスト項目1
- リスト項目2
- リスト項目3
<section class="w-50 m-auto">
<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>
</section>
■リストグループ:list-group:コンポーネント:インラインリスト list-inline
- インラインリスト項目
- インラインリスト項目
- インラインリスト項目
<ul class="list-inline">
<li class="list-inline-item">インラインリスト項目</li>
<li class="list-inline-item">インラインリスト項目</li>
<li class="list-inline-item">インラインリスト項目</li>
</ul>
■リストグループ:list-group:コンポーネント:リストマーカーのないリスト list-unstyled
- リストマーカーの無いリスト項目
- リストマーカーの無いリスト項目
- ネストされたリスト項目
- ネストされたリスト項目
- ネストされたリスト項目
- リストマーカーの無いリスト項目
- リストマーカーの無いリスト項目
<ul class="list-unstyled">
<li>リストマーカーの無いリスト項目</li>
<li>リストマーカーの無いリスト項目
<ul>
<li>ネストされたリスト項目</li>
<li>ネストされたリスト項目</li>
<li>ネストされたリスト項目</li>
</ul>
</li>
<li>リストマーカーの無いリスト項目</li>
<li>リストマーカーの無いリスト項目</li>
</ul>
■リストグループ:list-group:コンポーネント:バッジ付きリストグループ
- リスト項目1 14
- リスト項目2 2
- リスト項目3 1
<section class="w-50 m-auto my-5">
<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-primary badge-pill">2</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
リスト項目3
<span class="badge badge-primary badge-pill">1</span>
</li>
</ul>
</section>
■リストグループ:list-group:コンポーネント:リスト項目をアクティブ状態にする
- リスト項目1
- リスト項目2
- リスト項目3
<section class="w-50 m-auto">
<ul class="list-group">
<li class="list-group-item active">リスト項目1</li>
<li class="list-group-item">リスト項目2</li>
<li class="list-group-item">リスト項目3</li>
</ul>
</section>
■リストグループ:list-group:コンポーネント:リストグループの背景色
- これは「primary」のリスト項目です。
- これは「secondary」のリスト項目です。
- これは「success」のリスト項目です。
- これは「danger」のリスト項目です。
- これは「warning」のリスト項目です。
- これは「info」のリスト項目です。
- これは「light」のリスト項目です。
- これは「dark」のリスト項目です。
- これは「デフォルト」のリスト項目です。
<section class="w-50 m-auto my-5">
<ul class="list-group">
<li class="list-group-item list-group-item-primary">これは「primary」のリスト項目です。</li>
<li class="list-group-item list-group-item-secondary">これは「secondary」のリスト項目です。</li>
<li class="list-group-item list-group-item-success">これは「success」のリスト項目です。</li>
<li class="list-group-item list-group-item-danger">これは「danger」のリスト項目です。</li>
<li class="list-group-item list-group-item-warning">これは「warning」のリスト項目です。</li>
<li class="list-group-item list-group-item-info">これは「info」のリスト項目です。</li>
<li class="list-group-item list-group-item-light">これは「light」のリスト項目です。</li>
<li class="list-group-item list-group-item-dark">これは「dark」のリスト項目です。</li>
<li class="list-group-item">これは「デフォルト」のリスト項目です。</li>
</ul>
</section>
■リストグループ:list-group:コンポーネント:定義リスト dl dt dd
- 用語1
- 用語1の説明。
- 用語2の長いテキストは切り捨てて省略
- 用語2の説明。
- 用語3
-
- ネストされた用語4
- ネストされた用語4の説明
<dl class="row">
<dt class="col-sm-3">用語1</dt>
<dd class="col-sm-9">用語1の説明。</dd>
<dt class="col-sm-3 text-truncate">用語2の長いテキストは切り捨てて省略</dt>
<dd class="col-sm-9">用語2の説明。</dd>
<dt class="col-sm-3">用語3</dt>
<dd class="col-sm-9">
<dl class="row">
<dt class="col-sm-4">ネストされた用語4</dt>
<dd class="col-sm-8">ネストされた用語4の説明</dd>
</dl>
</dd>
</dl>
■リストグループ:list-group:コンポーネント:リスト項目を無効状態にする
- リスト項目1
- リスト項目2
- リスト項目3
<section class="w-50 m-auto">
<ul class="list-group">
<li class="list-group-item disabled">リスト項目1</li>
<li class="list-group-item">リスト項目2</li>
<li class="list-group-item">リスト項目3</li>
</ul>
</section>
■リストグループ:list-group:コンポーネント:aタグ リストグループ
<section class="w-50 m-auto">
<div 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 disabled">リスト項目3</a>
</div>
</section>
■リストグループ:list-group:コンポーネント:アクティブ状態のアクション可能な背景色クラスのリストグループ
<section class="w-50 m-auto my-5">
<div class="list-group">
<a href="#" class="list-group-item list-group-item-action list-group-item-primary active">これはアクティブ状態の「primary」のリスト項目です。</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-secondary active">これはアクティブ状態の「secondary」のリスト項目です。</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-success active">これはアクティブ状態の「success」のリスト項目です。</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-danger active">これはアクティブ状態の「danger」のリスト項目です。</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-warning active">これはアクティブ状態の「warning」のリスト項目です。</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-info active">これはアクティブ状態の「info」のリスト項目です。</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-light active">これはアクティブ状態の「light」のリスト項目です。</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-dark active">これはアクティブ状態の「dark」のリスト項目です。</a>
<a href="#" class="list-group-item list-group-item-action active">これはアクティブ状態の「デフォルト」のリスト項目です。</a>
</div>
</section>
■リストグループ:list-group:コンポーネント:アクション可能な背景色クラスのリストグループ
<section class="w-50 m-auto my-5">
<div class="list-group">
<a href="#" class="list-group-item list-group-item-action list-group-item-primary">これは「primary」のリスト項目です。</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-secondary">これは「secondary」のリスト項目です。</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-success">これは「success」のリスト項目です。</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-danger">これは「danger」のリスト項目です。</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-warning">これは「warning」のリスト項目です。</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-info">これは「info」のリスト項目です。</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-light">これは「light」のリスト項目です。</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-dark">これは「dark」のリスト項目です。</a>
<a href="#" class="list-group-item list-group-item-action">これは「デフォルト」のリスト項目です。</a>
</div>
</section>
■リストグループ:list-group:コンポーネント:リストグループ aタグ
<section class="w-50 m-auto">
<div 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 disabled">リスト項目3</a>
</div>
</section>
■リストグループ:list-group:コンポーネント:カスタムコンテンツの リストグループ aタグ
<section class="w-50 m-auto my-5">
<div class="list-group">
<a href="#" class="list-group-item list-group-item-action flex-column align-items-start active">
<div class="d-flex w-100 justify-content-between">
<h5 class="mb-1">リスト項目1のヘッダ</h5>
<small>3日前</small>
</div>
<p class="mb-1">リスト項目1のコンテンツの見本です。</p>
<small>リスト項目1のサブコンテンツです</small>
</a>
<a href="#" class="list-group-item list-group-item-action flex-column align-items-start">
<div class="d-flex w-100 justify-content-between">
<h5 class="mb-1">リスト項目2のヘッダ</h5>
<small class="text-muted">3日前</small>
</div>
<p class="mb-1">リスト項目2のコンテンツの見本です。</p>
<small class="text-muted">リスト項目2のサブコンテンツです。</small>
</a>
<a href="#" class="list-group-item list-group-item-action flex-column align-items-start">
<div class="d-flex w-100 justify-content-between">
<h5 class="mb-1">リスト項目3のヘッダ</h5>
<small class="text-muted">3日前</small>
</div>
<p class="mb-1">リスト項目3のコンテンツの見本です。</p>
<small class="text-muted">リスト項目3のサブコンテンツです。</small>
</a>
</div>
</section>
■リストグループ:list-group:コンポーネント:li 枠なしのリストグループ
- リスト項目1
- リスト項目2
- リスト項目3
<section class="w-50 m-auto">
<div>
<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>
</div>
</section>
■リストグループ:list-group:コンポーネント:ボタンのリストグループ button
<section class="w-50 m-auto my-5">
<div class="list-group">
<button type="button" class="list-group-item list-group-item-action">リスト項目1</button>
<button type="button" class="list-group-item list-group-item-action">リスト項目2</button>
<button type="button" class="list-group-item list-group-item-action" disabled>リスト項目3</button>
</div>
</section>