bootstrap4.css
article, aside, figcaption, figure, footer, header, hgroup, main, nav, section {
display: block;
}
■レイアウト:rowとcol:なにもしなければ等幅カラムになる、レスポンシブなし、そのまま縮小される
1列目
2列目
1列目
2列目
3列目
<section>
<div class="row">
<div class="col">1列目</div>
<div class="col">2列目</div>
</div>
<div class="row">
<div class="col">1列目</div>
<div class="col">2列目</div>
<div class="col">3列目</div>
</div>
</section>
■リストグループ: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:コンポーネント:バッジ付きリストグループ
- リスト項目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:コンポーネント:リスト項目を無効状態にする
- リスト項目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>
■カルーセル回転木馬:carousel:JavaScript:前と次のアイコン付きカルーセル
<section>
<div class="container">
<div id="carouselControls" class="carousel slide" data-ride="carousel">
<!-- カルーセル部分 -->
<div class="carousel-inner">
<!-- First slide -->
<div class="carousel-item active">
<img class="d-block w-100" alt="First slide" src="https://via.placeholder.com/1600x900/FFFF00/000000?text=First slide">
</div>
<!-- Second slide -->
<div class="carousel-item">
<img class="d-block w-100" alt="Second slide" src="https://via.placeholder.com/1600x900/FFFF00/000000?text=Second slide">
</div>
<!-- Third slide -->
<div class="carousel-item">
<img class="d-block w-100" alt="Third slide" src="https://via.placeholder.com/1600x900/FFFF00/000000?text=Third slide">
</div>
</div>
<!-- コントローラー部分 -->
<!-- 前に戻るアイコン -->
<a class="carousel-control-prev" href="#carouselControls" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">前に戻る</span>
</a>
<!-- 次に送るアイコン -->
<a class="carousel-control-next" href="#carouselControls" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">次に送る</span>
</a>
</div>
</div>
</section>