bootstrap4.css
.form-control::-webkit-input-placeholder {
color: #6c757d;
opacity: 1;
}
bootstrap4.css
.form-control::-moz-placeholder {
color: #6c757d;
opacity: 1;
}
bootstrap4.css
.form-control:-ms-input-placeholder {
color: #6c757d;
opacity: 1;
}
bootstrap4.css
.form-control::-ms-input-placeholder {
color: #6c757d;
opacity: 1;
}
bootstrap4.css
.form-control::placeholder {
color: #6c757d;
opacity: 1;
}
■カード:card:コンポーネント:基本的な使用例 divでcard、card-body、imgでcard-img-top、pでcard-title、card-text
<!-- カードの枠:card -->
<div class="card" style="max-width: 25rem;">
<!-- カード上部にレイアウトされる画像:card-img-top -->
<img class="card-img-top" src="https://via.placeholder.com/318x180/FFFF00/000000?text=img" alt="...">
<!-- カード本文:card-body -->
<div class="card-body">
<!-- カードタイトル:card-title -->
<h4 class="card-title">カードのタイトル</h4>
<!-- カードの内容文:card-text -->
<p class="card-text">カードの内容</p>
<a href="#" class="btn btn-primary">ボタン</a>
</div>
</div>
■カード:card:コンポーネント:カードデッキによるレイアウトcard-deck
カード01
カードの内容
カード02
カードの内容
カード03
カードの内容
カードの内容
<div class="card-deck">
<!-- カード01 -->
<div class="card">
<img class="card-img-top" src="https://via.placeholder.com/318x180/FFFF00/000000?text=.card-img-top" alt="...">
<div class="card-body">
<h4 class="card-title">カード01</h4>
<p class="card-text">カードの内容</p>
</div>
<div class="card-footer">
<small class="text-muted">カードのフッター</small>
</div>
</div>
<!-- カード02 -->
<div class="card">
<img class="card-img-top" src="https://via.placeholder.com/318x180/FFFF00/000000?text=.card-img-top" alt="...">
<div class="card-body">
<h4 class="card-title">カード02</h4>
<p class="card-text">カードの内容</p>
</div>
<div class="card-footer">
<small class="text-muted">カードのフッター</small>
</div>
</div>
<!-- カード03 -->
<div class="card">
<img class="card-img-top" src="https://via.placeholder.com/318x180/FFFF00/000000?text=.card-img-top" alt="...">
<div class="card-body">
<h4 class="card-title">カード03</h4>
<p class="card-text">カードの内容</p>
<p class="card-text">カードの内容</p>
</div>
<div class="card-footer">
<small class="text-muted">カードのフッター</small>
</div>
</div>
</div>
■カード:card:コンポーネント:カードグループによるレイアウト card-group
カード01
カードの内容
カード02
カードの内容カードの内容
カード03
カードの内容
カードの内容
<div class="card-group">
<!-- カード01 -->
<div class="card">
<img class="card-img-top" src="https://via.placeholder.com/318x180/FFFF00/000000?text=.card-img-top" alt="...">
<div class="card-body">
<h4 class="card-title">カード01</h4>
<p class="card-text">カードの内容</p>
</div>
<div class="card-footer">
<small class="text-muted">カードのフッター</small>
</div>
</div>
<!-- カード02 -->
<div class="card">
<img class="card-img-top" src="https://via.placeholder.com/318x180/FFFF00/000000?text=.card-img-top" alt="...">
<div class="card-body">
<h4 class="card-title">カード02</h4>
<p class="card-text">カードの内容カードの内容</p>
</div>
<div class="card-footer">
<small class="text-muted">カードのフッター</small>
</div>
</div>
<!-- カード03 -->
<div class="card">
<img class="card-img-top" src="https://via.placeholder.com/318x180/FFFF00/000000?text=.card-img-top" alt="...">
<div class="card-body">
<h4 class="card-title">カード03</h4>
<p class="card-text">カードの内容</p>
<p class="card-text">カードの内容</p>
</div>
<div class="card-footer">
<small class="text-muted">カードのフッター</small>
</div>
</div>
</div>
■カード:card:コンポーネント:カードカラムによるレイアウト card-columns
カード01
ここに文章が入ります
カード02
ここに文章が入ります
カード03
ここに文章が入ります
ここに文章が入ります
カード04
ここに文章が入ります
カード05
ここに文章が入ります
この文章はダミーです。
カード07
ここに文章が入ります
カード08
ここに文章が入ります
ここに文章が入ります
<div class="card-columns">
<!-- カード01 -->
<div class="card"> <img class="card-img-top" src="https://via.placeholder.com/640x480/FFFF00/000000?text=.card-img-top" alt="...">
<div class="card-body">
<h4 class="card-title">カード01</h4>
<p class="card-text">ここに文章が入ります</p>
</div>
</div>
<!-- カード02 -->
<div class="card p-3">
<blockquote class="blockquote mb-0 card-body">
<p>カード02</p>
<p>ここに文章が入ります</p>
<footer class="blockquote-footer"> <small class="text-muted"> ここに文章が入ります </small> </footer>
</blockquote>
</div>
<!-- カード03 -->
<div class="card"> <img class="card-img-top" src="https://via.placeholder.com/640x480/FFFF00/000000?text=.card-img-top" alt="...">
<div class="card-body">
<h4 class="card-title">カード03</h4>
<p class="card-text">ここに文章が入ります</p>
<p class="card-text"><small class="text-muted">ここに文章が入ります</small></p>
</div>
</div>
<!-- カード04 -->
<div class="card bg-secondary text-white text-center p-3">
<blockquote class="blockquote mb-0">
<p>カード04</p>
<p>ここに文章が入ります</p>
<footer class="blockquote-footer"> <small> ここに文章が入ります </small> </footer>
</blockquote>
</div>
<!-- カード05 -->
<div class="card text-center">
<div class="card-body">
<h4 class="card-title">カード05</h4>
<p class="card-text">ここに文章が入ります</p>
<p class="card-text"><small class="text-muted">この文章はダミーです。</small></p>
</div>
</div>
<!-- カード06 -->
<div class="card"> <img class="card-img" src="https://via.placeholder.com/640x480/FFFF00/000000?text=Card 06" alt="..."> </div>
<!-- カード07 -->
<div class="card p-3 text-right">
<blockquote class="blockquote mb-0">
<p>カード07</p>
<p>ここに文章が入ります</p>
<footer class="blockquote-footer"> <small class="text-muted"> この文章はダミーです。 </small> </footer>
</blockquote>
</div>
<!-- カード08 -->
<div class="card">
<div class="card-body">
<h4 class="card-title">カード08</h4>
<p class="card-text">ここに文章が入ります</p>
<p class="card-text"><small class="text-muted">ここに文章が入ります</small></p>
</div>
</div>
</div>
■カード:card:コンポーネント:カードに画像を配置する card-img-top card-img-bottom
カードの内容
カードの内容
<!-- カード上部に画像を配置:card-img-top -->
<div class="card mb-3" style="max-width: 25rem;">
<img class="card-img-top" src="https://via.placeholder.com/318x180/FFFF00/000000?text=.card-img-top" alt="...">
<div class="card-body">
<p class="card-text">カードの内容</p>
</div>
</div>
<!-- カード下部に画像を配置:card-img-bottom -->
<div class="card" style="max-width: 25rem;">
<div class="card-body">
<p class="card-text">カードの内容</p>
</div>
<img class="card-img-bottom" src="https://via.placeholder.com/318x180/FFFF00/000000?text=.card-img-bottom" alt="..."> </div>
</div>
■カード:card:コンポーネント:カードの画像とテキストを重ね合わせる card-img-overlay
<div class="card">
<img class="card-img" src="https://via.placeholder.com/960x450/FFFF00/000000?text=card-img" alt="...">
<div class="card-img-overlay">
<h4 class="card-title">カードのタイトル</h4>
<p class="card-text">カードの内容</p>
</div>
</div>
■カード:card:コンポーネント:カード内にコンテンツを複合する
<div class="card" style="max-width: 25rem;">
<img class="card-img-top" src="https://via.placeholder.com/318x180/FFFF00/000000?text=.card-img-top" alt="Card image cap">
<div class="card-body">
<h4 class="card-title">カードのタイトル</h4>
<p class="card-text">カードの内容</p>
</div>
<!-- カード内のリストグループ:list-group-flush -->
<ul class="list-group list-group-flush">
<li class="list-group-item">リスト01</li>
<li class="list-group-item">リスト02</li>
<li class="list-group-item">リスト03</li>
</ul>
<!-- カードの本文:card-body -->
<div class="card-body">
<a href="#" class="card-link">カード内リンク</a>
<a href="#" class="card-link">カード内リンク</a>
</div>
</div>
■幅、高さ:Sizing:ユーティリティ:最大高を指定するクラス mh-100
<img class="mh-100" src="https://via.placeholder.com/318x180/FFFF00/000000?text=img" alt="">
■幅、高さ:Sizing:ユーティリティ:最大幅を指定するクラス mw-100
<img class="mw-100" src="https://via.placeholder.com/318x180/FFFF00/000000?text=img" alt="">
■親要素でフロートを解除する:Clearfix:ユーティリティ:Floatクラス float-left float-right clearfixはあってもなくても同じみたい
<div class="clearfix">
<img src="https://via.placeholder.com/200x200" class="float-left" alt="左寄せ画像">
<img src="https://via.placeholder.com/200x200" class="float-right" alt="右寄せ画像">
</div>
■ドロップダウン:dropdown-menu:コンポーネント:ドロップダウンメニューに様々な要素を追加する
<div class="btn-group">
<!-- 切り替えボタン -->
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">ドロップダウン</button>
<!-- ドロップダウンメニュー -->
<div class="dropdown-menu">
<h6 class="dropdown-header">ドロップダウンメニューのタイトル</h6>
<form class="px-4 py-3">
<div class="form-group">
<label for="email">メールアドレス</label>
<input type="email" class="form-control" id="email" placeholder="email@example.com"> </div>
<div class="form-group">
<label for="password">パスワード</label>
<input type="password" class="form-control" id="password" placeholder="Password"> </div>
<div class="form-check">
<input type="checkbox" class="form-check-input" id="check">
<label class="form-check-label" for="check"> ログイン情報を記憶 </label>
</div>
<button type="submit" class="btn btn-secondary">ログイン</button>
</form>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">初めての方</a>
<a class="dropdown-item" href="#">パスワードをお忘れの方</a>
</div>
</div>
■ドロップダウン:dropdown-menu:js:自動サイズ調整のカラムを作成する col-auto
<form>
<div class="form-row align-items-center">
<div class="col-auto">
<label class="sr-only" for="inputName">氏名</label>
<input type="text" class="form-control mb-2" id="inputName" placeholder="氏名を入力">
</div>
<div class="col-auto">
<label class="sr-only" for="inputUsername">ユーザーネーム</label>
<div class="input-group mb-2">
<div class="input-group-prepend">
<div class="input-group-text">@</div>
</div>
<input type="text" class="form-control" id="inputUsername" placeholder="ユーザーネームを入力">
</div>
</div>
<div class="col-auto">
<div class="form-check mb-2">
<input type="checkbox" class="form-check-input" id="check">
<label class="form-check-label" for="check"> チェックする </label>
</div>
</div>
<div class="col-auto">
<button type="submit" class="btn btn-primary mb-2">送信</button>
</div>
</div>
</form>
■図表キャプション:figure:図表の基本的なスタイリング
<figure class="figure">
<img src="https://via.placeholder.com/400x300/FFFF00/000000?text=img" class="figure-img img-fluid" alt="図表コンテンツ内の画像">
<figcaption class="figure-caption">図表キャプション</figcaption>
</figure>
■図表キャプション:figure:図表キャプション:左寄せ(デフォルト)
<figure class="figure">
<img src="https://via.placeholder.com/400x300/FFFF00/000000?text=img" class="figure-img img-fluid" alt="図表コンテンツ内の画像">
<figcaption class="figure-caption text-left">図表キャプション左寄せ(デフォルト)(text-left:デフォルト)</figcaption>
</figure>
■図表キャプション:figure:図表キャプション:中央寄せ
<figure class="figure">
<img src="https://via.placeholder.com/400x300/FFFF00/000000?text=img" class="figure-img img-fluid" alt="図表コンテンツ内の画像">
<figcaption class="figure-caption text-center">図表キャプション中央寄せ(text-center)</figcaption>
</figure>
■図表キャプション:figure:図表キャプション:右寄せ
<figure class="figure">
<img src="https://via.placeholder.com/400x300/FFFF00/000000?text=img" class="figure-img img-fluid" alt="図表コンテンツ内の画像">
<figcaption class="figure-caption text-right">図表キャプション右寄せ(text-right)</figcaption>
</figure>
■レスポンシブ画像:img::レスポンシブ画像(img-fluid)
<img src="https://via.placeholder.com/710x250/FFFF00/000000?text=img" class="img-fluid" alt="レスポンシブ画像">
■レスポンシブ画像:img::Spacingユーティリティークラスを使用した配置例 mx-auto d-block
<img src="https://via.placeholder.com/200x200" class="mx-auto d-block" alt="中央寄せ画像">
■レスポンシブ画像:img::Textユーティリティークラスを使用した配置例 text-center
<div class="text-center">
<img src="https://via.placeholder.com/200x200" alt="中央寄せ画像">
</div>
■レスポンシブ画像:img::サムネイル画像 img-thumbnail
<img src="https://via.placeholder.com/200x200" alt="サムネイル画像" class="img-thumbnail">
■フォーム:form-group:コンポーネント:フォームの基本要素
<form>
<div class="form-group">
<label for="email1">メールアドレス</label>
<input type="email" class="form-control" id="email1" aria-describedby="emailHelp" placeholder="メールアドレスを入力">
<small id="emailHelp" class="form-text text-muted">キャリアメールは届かない場合があります。</small>
</div>
<div class="form-group">
<label for="password1">パスワード</label>
<input type="password" class="form-control" id="password1" placeholder="パスワードを入力"> </div>
<div class="form-group">
<label for="select1">プルダウンメニューから選んでください</label>
<select class="form-control" id="select1">
<option>メニュー1</option>
<option>メニュー2</option>
<option>メニュー3</option>
<option>メニュー4</option>
<option>メニュー5</option>
</select>
</div>
<!-- 複数選択のプルダウンメニュー -->
<div class="form-group">
<label for="select2">複数選択のプルダウンメニュー</label>
<select multiple class="form-control" id="select2">
<option>複数選択可A</option>
<option>複数選択可B</option>
<option>複数選択可C</option>
<option>複数選択可D</option>
<option>複数選択可E</option>
</select>
</div>
<div class="form-group">
<label for="textarea1">複数行のテキスト入力欄</label>
<textarea class="form-control" id="textarea1" rows="3"></textarea>
</div>
<div class="form-group">
<label for="file1">ファイルを選択</label>
<input type="file" class="form-control-file" id="file1">
</div>
<div class="form-check">
<input type="checkbox" class="form-check-input" id="checkbox01">
<label class="form-check-label" for="">チェックする</label>
</div>
<button type="submit" class="btn btn-primary">送信</button>
</form>
■フォーム:form-group:コンポーネント:読み取り専用テキストの枠を非表示にする
<form>
<div class="form-group row">
<label for="staticEmail" class="col-sm-2 col-form-label">メールアドレス</label>
<div class="col-sm-10">
<input type="text" class="form-control-plaintext" readonly id="staticEmail" value="email@example.com">
</div>
</div>
<div class="form-group row">
<label for="inputPassword" class="col-sm-2 col-form-label">パスワード</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword" placeholder="パスワードを入力">
</div>
</div>
</form>
■フォーム:form-group:コンポーネント:入力コントロールのサイズを調整する -lg,-sm
<form>
<!-- 大サイズのテキスト入力欄 -->
<div class="form-group">
<label for="input1">大サイズのテキスト入力欄 form-control-lg</label>
<input type="text" class="form-control form-control-lg" id="input1" placeholder="form-control-lg">
</div>
<!-- 標準サイズのテキスト入力欄 -->
<div class="form-group">
<label for="input2">標準サイズのテキスト入力欄</label>
<input type="text" class="form-control" id="input2" placeholder="Default size">
</div>
<!-- 小サイズのテキスト入力欄 -->
<div class="form-group">
<label for="input3">小サイズのテキスト入力欄 form-control-sm</label>
<input type="text" class="form-control form-control-sm" id="input3" placeholder="form-control-sm">
</div>
<hr>
<!-- 大サイズのプルダウンメニュー -->
<div class="form-group">
<label for="select1">大サイズのプルダウンメニュー form-control-lg</label>
<select class="form-control form-control-lg" id="select1">
<option>form-control-lg</option>
</select>
</div>
<!-- 標準サイズのプルダウンメニュー -->
<div class="form-group">
<label for="select2">標準サイズのプルダウンメニュー</label>
<select class="form-control" id="select2">
<option>Default size</option>
</select>
</div>
<!-- 小サイズのプルダウンメニュー -->
<div class="form-group">
<label for="select3">小サイズのプルダウンメニュー form-control-sm</label>
<select class="form-control form-control-sm" id="select3">
<option>form-control-sm</option>
</select>
</div>
</form>
■フォーム:form-group:コンポーネント:読み取り専用のテキストを表示する readonly
<form>
<!-- 読み取り専用のテキストを表示する -->
<div class="form-group">
<label for="input1">読み取り専用のテキストを表示</label>
<input type="text" class="form-control" id="input1" placeholder="読み取り専用のテキスト" readonly> </div>
</form>
■フォーム:form-group:コンポーネント:グリッドレイアウトを利用する 2グリット限定?
<form>
<div class="row">
<div class="col">
<input type="text" class="form-control" placeholder="姓">
</div>
<div class="col">
<input type="text" class="form-control" placeholder="名">
</div>
</div>
</form>
■フォーム:form-group:コンポーネント:コンパクトなカラム間隔のフォーム form-row form-group col-md-6
<form>
<div class="form-row">
<div class="form-group col-md-6">
<label for="inputEmail">メールアドレス</label>
<input type="email" class="form-control" id="inputEmail" placeholder="メールアドレスを入力"> </div>
<div class="form-group col-md-6">
<label for="inputPassword">パスワード</label>
<input type="password" class="form-control" id="inputPassword" placeholder="パスワードを入力"> </div>
</div>
<div class="form-row">
<div class="form-group col-md-4">
<label for="inputState">国</label>
<select id="inputState" class="form-control">
<option selected>Choose...</option>
<option>...</option>
</select>
</div>
<div class="form-group col-md-2">
<label for="inputZip">郵便番号</label>
<input type="text" class="form-control" id="inputZip"> </div>
<div class="form-group col-md-6">
<label for="inputCity">都道府県</label>
<input type="text" class="form-control" id="inputCity"> </div>
</div>
<div class="form-group">
<label for="inputAddress1">住所1</label>
<input type="text" class="form-control" id="inputAddress1" placeholder="市町村"> </div>
<div class="form-group">
<label for="inputAddress2">住所2</label>
<input type="text" class="form-control" id="inputAddress2" placeholder="マンション名"> </div>
<div class="form-group">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="check">
<label class="form-check-label" for="check">チェックする</label>
</div>
</div>
<button type="submit" class="btn btn-primary">サインイン</button>
</form>
■フォーム:form-group:コンポーネント:一連の入力グループをまとめて無効にする
<form>
<fieldset disabled>
<div class="form-group">
<label for="disabledTextInput">無効な入力欄</label>
<input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input"> </div>
<div class="form-group">
<label for="disabledSelect">無効なプルダウンメニュー</label>
<select id="disabledSelect" class="form-control">
<option>Disabled select</option>
</select>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" id="disabledCheck" disabled>
<label class="form-check-label" for="disabledCheck">無効なチェックボックス</label>
</div>
<button type="submit" class="btn btn-primary">無効な送信ボタン</button>
</fieldset>
</form>
■フォーム:form-group:コンポーネント:水平配置のフォームを作成する
<form>
<div class="form-group row">
<label for="inputEmail" class="col-sm-2 col-form-label">メールアドレス</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="inputEmail" placeholder="メールアドレスを入力">
</div>
</div>
<div class="form-group row">
<label for="inputPassword" class="col-sm-2 col-form-label">パスワード</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword" placeholder="パスワードを入力">
</div>
</div>
<fieldset class="form-group">
<div class="row">
<legend class="col-form-label col-sm-2 pt-0">ラジオボタン</legend>
<div class="col-sm-10">
<div class="form-check">
<input class="form-check-input" type="radio" name="radios" id="radios1" value="option1" checked>
<label class="form-check-label" for="radios1">
オプション1
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="radios" id="radios2" value="option2">
<label class="form-check-label" for="radios2">
オプション2
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="radios" id="radios3" value="option3" disabled>
<label class="form-check-label" for="radios3">
オプション3(無効)
</label>
</div>
</div>
</div>
</fieldset>
<div class="form-group row">
<div class="col-sm-2">チェックボックス</div>
<div class="col-sm-10">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="check1">
<label class="form-check-label" for="check1">
チェックする
</label>
</div>
</div>
</div>
<div class="form-group row">
<div class="col-sm-10">
<button type="submit" class="btn btn-primary">サインイン</button>
</div>
</div>
</form>
■フォーム:form-group:コンポーネント:インラインのフォームを作成する
<form class="form-inline">
<label class="sr-only" for="name">氏名</label>
<input type="text" class="form-control mb-2 mr-sm-2" id="name" placeholder="氏名を入力">
<label class="sr-only" for="username">ユーザーネーム</label>
<div class="input-group mb-2 mr-sm-2">
<div class="input-group-prepend">
<div class="input-group-text">@</div>
</div>
<input type="text" class="form-control" id="username" placeholder="ユーザーネームを入力">
</div>
<div class="form-check mb-2 mr-sm-2">
<input class="form-check-input" type="checkbox" id="checkbox20">
<label class="form-check-label" for="checkbox20">
チェックする
</label>
</div>
<button type="submit" class="btn btn-primary mb-2">送信</button>
</form>
■フォーム:form-group:コンポーネント:ラベルサイズを調整する
<form>
<div class="form-group row">
<!-- 小サイズのラベル -->
<label for="labelSm" class="col-sm-3 col-form-label col-form-label-sm">小サイズ:col-form-label-sm</label>
<div class="col-sm-9">
<input type="email" class="form-control form-control-sm" id="labelSm" placeholder="form-control-sm"> </div>
</div>
<div class="form-group row">
<!-- 標準サイズのラベル -->
<label for="labelDefault" class="col-sm-3 col-form-label">標準サイズ</label>
<div class="col-sm-9">
<input type="email" class="form-control" id="labelDefault" placeholder="Default size"> </div>
</div>
<div class="form-group row">
<!-- 大サイズのラベル -->
<label for="labelLg" class="col-sm-3 col-form-label col-form-label-lg">大サイズ:col-form-label-lg</label>
<div class="col-sm-9">
<input type="email" class="form-control form-control-lg" id="labelLg" placeholder="form-control-lg"> </div>
</div>
</form>
■フォーム:form-group:コンポーネント:サーバー側で入力検証を行う場合のフィードバック例
<form>
<div class="form-row">
<div class="col-md-6 mb-3">
<label for="validationServer01">姓</label>
<input type="text" class="form-control is-valid" id="validationServer01" placeholder="First name" value="山田" required> </div>
<div class="col-md-6 mb-3">
<label for="validationServer02">名</label>
<input type="text" class="form-control is-valid" id="validationServer02" placeholder="Last name" value="太郎" required> </div>
</div>
<div class="form-row">
<div class="col-md-6 mb-3">
<label for="validationServer03">市町村</label>
<input type="text" class="form-control is-invalid" id="validationServer03" placeholder="市町村名を入力" required>
<div class="invalid-feedback">市町村名を入力してください</div>
</div>
<div class="col-md-3 mb-3">
<label for="validationServer04">都道府県</label>
<input type="text" class="form-control is-invalid" id="validationServer04" placeholder="都道府県名を入力" required>
<div class="invalid-feedback">都道府県名を入力してください</div>
</div>
<div class="col-md-3 mb-3">
<label for="validationServer05">郵便番号</label>
<input type="text" class="form-control is-invalid" id="validationServer05" placeholder="郵便番号を入力" required>
<div class="invalid-feedback">郵便番号を入力してください</div>
</div>
</div>
<button class="btn btn-primary" type="submit">送信する</button>
</form>
■フォーム:form-group:コンポーネント:入力グループ ボタン付きアドオン
<div class="input-group mb-3">
<input type="text" class="form-control" placeholder="検索キーワード" aria-label="検索キーワード" aria-describedby="basic-addon1">
<div class="input-group-append">
<button class="btn btn-secondary" type="button">検索</button>
</div>
</div>
<div class="input-group mb-3">
<div class="input-group-prepend">
<button class="btn btn-secondary" type="button">好き</button>
</div>
<input type="text" class="form-control" placeholder="商品名" aria-label="商品名" aria-describedby="basic-addon2">
<div class="input-group-append">
<button class="btn btn-secondary" type="button">嫌い</button>
</div>
</div>
■フォーム:form-group:コンポーネント:入力グループ 複数の入力コントロール
姓名
<div class="input-group">
<div class="input-group-prepend"> <span class="input-group-text" id="...">姓名</span> </div>
<input type="text" class="form-control" placeholder="姓">
<input type="text" class="form-control" placeholder="名">
</div>
■フォーム:form-group:コンポーネント:Bootstrap フォームバリデーション(入力検証機能) needs-validation
<form class="needs-validation" novalidate>
<div class="form-row">
<div class="col-md-6 mb-3">
<label for="validation01">姓</label>
<input type="text" class="form-control" id="validation01" placeholder="First name" value="山田" required>
<div class="valid-feedback">
入力済!
</div>
</div>
<div class="col-md-6 mb-3">
<label for="validation02">名</label>
<input type="text" class="form-control" id="validation02" placeholder="Last name" value="太郎" required>
<div class="valid-feedback">
入力済!
</div>
</div>
</div>
<div class="form-row">
<div class="col-md-6 mb-3">
<label for="validation03">市町村</label>
<input type="text" class="form-control" id="validation03" placeholder="市町村名を入力" required>
<div class="invalid-feedback">
市町村名を入力してください
</div>
</div>
<div class="col-md-3 mb-3">
<label for="validation04">都道府県</label>
<input type="text" class="form-control" id="validation04" placeholder="都道府県名を入力" required>
<div class="invalid-feedback">
都道府県名を入力してください
</div>
</div>
<div class="col-md-3 mb-3">
<label for="validation05">郵便番号</label>
<input type="text" class="form-control" id="validation05" placeholder="郵便番号を入力" required>
<div class="invalid-feedback">
郵便番号を入力してください
</div>
</div>
</div>
<button class="btn btn-primary" type="submit">送信する</button>
</form>
<!-- 無効な入力がある場合にフォームの送信を無効にする -->
<script>
(function() {
'use strict';
window.addEventListener('load', function() {
// Bootstrapのフォームの入力検証スタイルを適用するフォームを取得
var forms = document.getElementsByClassName('needs-validation');
// ループして帰順を防ぐ
var validation = Array.prototype.filter.call(forms, function(form) {
form.addEventListener('submit', function(event) {
if (form.checkValidity() === false) {
event.preventDefault();
event.stopPropagation();
}
form.classList.add('was-validated');
}, false);
});
}, false);
})();
</script>
■フォーム:form-group:コンポーネント:フォームツールチップ:valid-tooltip:JS
<form class="needs-validation" novalidate>
<div class="form-row">
<div class="col-md-6 mb-3">
<label for="validation01">姓</label>
<input type="text" class="form-control" id="validation01" placeholder="First name" value="山田" required>
<div class="valid-tooltip"> 入力済! </div>
</div>
<div class="col-md-6 mb-3">
<label for="validation02">名</label>
<input type="text" class="form-control" id="validation02" placeholder="Last name" value="太郎" required>
<div class="valid-tooltip"> 入力済! </div>
</div>
</div>
<div class="form-row">
<div class="col-md-6 mb-3">
<label for="validation03">市町村</label>
<input type="text" class="form-control" id="validation03" placeholder="市町村名を入力" required>
<div class="invalid-tooltip"> 市町村名を入力してください </div>
</div>
<div class="col-md-3 mb-3">
<label for="validation04">都道府県</label>
<input type="text" class="form-control" id="validation04" placeholder="都道府県名を入力" required>
<div class="invalid-tooltip"> 都道府県名を入力してください </div>
</div>
<div class="col-md-3 mb-3">
<label for="validation05">郵便番号</label>
<input type="text" class="form-control" id="validation05" placeholder="郵便番号を入力" required>
<div class="invalid-tooltip"> 郵便番号を入力してください </div>
</div>
</div>
<button class="btn btn-primary" type="submit">送信する</button>
</form>
<!-- 無効な入力がある場合にフォームの送信を無効にする -->
<script>
(function() {
'use strict';
window.addEventListener('load', function() {
// Bootstrapのフォームの入力検証スタイルを適用するフォームを取得
var forms = document.getElementsByClassName('needs-validation');
// ループして帰順を防ぐ
var validation = Array.prototype.filter.call(forms, function(form) {
form.addEventListener('submit', function(event) {
if (form.checkValidity() === false) {
event.preventDefault();
event.stopPropagation();
}
form.classList.add('was-validated');
}, false);
});
}, false);
})();
</script>
■メディアオブジェクト:media:メディアオブジェクトmedia-bodyは画像と説明を配置すること
タイトル
ここに文章が入ります <div class="media">
<img class="mr-3" alt="" src="https://via.placeholder.com/60x60/FFFF00/000000?text=img">
<div class="media-body">
<h5>タイトル</h5>
ここに文章が入ります
</div>
</div>
■メディアオブジェクト:media:メディアオブジェクトの上部に画像を配置
タイトル
ここに文章が入りますここに文章が入りますここに文章が入りますここに文章が入りますここに文章が入りますここに文章が入りますここに文章が入りますここに文章が入ります <div class="media">
<img class="align-self-start mr-3" alt="" src="https://via.placeholder.com/120x120/FFFF00/000000?text=img">
<div class="media-body">
<h5>タイトル</h5>
ここに文章が入りますここに文章が入りますここに文章が入りますここに文章が入りますここに文章が入りますここに文章が入りますここに文章が入りますここに文章が入ります
</div>
</div>
■メディアオブジェクト:media:メディアオブジェクト:並べ替え order
タイトル
HTMLの構造上、画像を先に、メディア本文を後に記述していますが、order-*クラスを使用して表示上の順序を入れ替えています。 <div class="media">
<img class="order-2 ml-3" alt="" src="https://via.placeholder.com/60x60/FFFF00/000000?text=img">
<div class="media-body order-1">
<h5>タイトル</h5>
HTMLの構造上、画像を先に、メディア本文を後に記述していますが、order-*クラスを使用して表示上の順序を入れ替えています。
</div>
</div>
■メディアオブジェクト:media:ulリストにメディアオブジェクト
-
タイトル
ここに文章が入ります -
タイトル
ここに文章が入ります -
タイトル
ここに文章が入ります
<ul class="list-unstyled">
<li class="media mb-4">
<img class="mr-3" src="https://via.placeholder.com/60x60/FFFF00/000000?text=img" alt="">
<div class="media-body">
<h5>タイトル</h5>
ここに文章が入ります
</div>
</li>
<li class="media mb-4">
<img class="mr-3" src="https://via.placeholder.com/60x60/FFFF00/000000?text=img" alt="">
<div class="media-body">
<h5>タイトル</h5>
ここに文章が入ります
</div>
</li>
<li class="media mb-4">
<img class="mr-3" src="https://via.placeholder.com/60x60/FFFF00/000000?text=img" alt="">
<div class="media-body">
<h5>タイトル</h5>
ここに文章が入ります
</div>
</li>
</ul>
■メディアオブジェクト:media:メディアオブジェクトの入れ子media-bodyの中にさらにmedia
<div class="media">
<img class="mr-3" alt="" src="https://via.placeholder.com/60x60/FFFF00/000000?text=img">
<div class="media-body">
<h5>タイトル</h5>
ここに文章が入りますここに文章が入ります
<div class="media mt-3">
<a href="#"><img class="mr-3" alt="" src="https://via.placeholder.com/60x60/FFFF00/000000?text=img"></a>
<div class="media-body">
<h5>子のタイトル</h5>
ここに文章が入りますここに文章が入ります
</div>
</div>
</div>
</div>
■ナビゲーションバー:navbar:コンポーネント:レスポンシブ対応の設定
<nav class="navbar navbar-expand navbar-dark bg-dark">
<a class="navbar-brand" href="#">ブランド</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="ナビゲーション切替">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav mr-auto mt-2 mt-lg-0">
<li class="nav-item active"><a class="nav-link" href="#">リンク1<span class="sr-only">(現位置)</span></a></li>
<li class="nav-item"><a class="nav-link" href="#">リンク2</a></li>
<li class="nav-item"><a class="nav-link" href="#">リンク3</a></li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="検索" aria-label="検索">
<button class="btn btn-light my-2 my-sm-0" type="submit">検索</button>
</form>
</div>
</nav>
■ナビゲーションバー:navbar:コンポーネント:ナビバーの中にフォーム検索
<nav class="navbar navbar-dark bg-dark">
<a class="navbar-brand" href="#">ブランド</a>
<form class="form-inline">
<input class="form-control mr-sm-2" type="search" placeholder="検索キーワード" aria-label="検索キーワード">
<button class="btn btn-light my-2 my-sm-0" type="submit">検索</button>
</form>
</nav>
■ナビゲーションバー:navbar:コンポーネント:ナビバーの中に入力グループ
<nav class="navbar navbar-dark bg-dark">
<form class="form-inline">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text" id="basic-addon1">@</span>
</div>
<input type="text" class="form-control" placeholder="ユーザー名" aria-label="ユーザー名" aria-describedby="basic-addon1">
</div>
</form>
</nav>
■ナビゲーションバー:navbar:コンポーネント:ナビバーの基本例 navbar
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="#">ブランド</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#target_div" aria-controls="target_div" aria-expanded="false" aria-label="ナビゲーション切替">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="target_div">
<ul class="navbar-nav mr-auto">
<li class="nav-item active"><a class="nav-link" href="#">リンク1</a></li>
<li class="nav-item active"><a class="nav-link" href="#">リンク2</a></li>
<li class="nav-item active"><a class="nav-link" href="#">リンク3</a></li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="検索" aria-label="検索">
<button class="btn btn-light my-2 my-sm-0" type="submit">検索</button>
</form>
</div>
</nav>
■ナビゲーションバー:navbar:コンポーネント:ナビゲーションバー レスポンシブにブランドを左寄せ、切替ボタンを右寄せに表示
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="#">ブランド</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav01" aria-controls="navbarNav01" aria-expanded="false" aria-label="ナビゲーション切替">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav01">
<ul class="navbar-nav mr-auto mt-2 mt-lg-0">
<li class="nav-item active"><a class="nav-link" href="#">リンク1<span class="sr-only">(現位置)</span></a></li>
<li class="nav-item"><a class="nav-link" href="#">リンク2</a></li>
<li class="nav-item"><a class="nav-link" href="#">リンク3</a></li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="検索" aria-label="検索">
<button class="btn btn-light my-2 my-sm-0" type="submit">検索</button>
</form>
</div>
</nav>
■ナビゲーションバー:navbar:コンポーネント:ナビゲーションバー レスポンシブにブランドを右寄せ、切替ボタンを左寄せに表示
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav02" aria-controls="navbarNav02" aria-expanded="false" aria-label="ナビゲーション切替">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#">ブランド</a>
<div class="collapse navbar-collapse" id="navbarNav02">
<ul class="navbar-nav mr-auto mt-2 mt-lg-0">
<li class="nav-item active"><a class="nav-link" href="#">リンク1<span class="sr-only">(現位置)</span></a></li>
<li class="nav-item"><a class="nav-link" href="#">リンク2</a></li>
<li class="nav-item"><a class="nav-link" href="#">リンク3</a></li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="検索" aria-label="検索">
<button class="btn btn-light my-2 my-sm-0" type="submit">検索</button>
</form>
</div>
</nav>
■ナビゲーションバー:navbar:コンポーネント:ブランドの表示・非表示 初期設定のナビゲーションバー
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="#">ブランドを表示</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav2" aria-controls="navbarNav2" aria-expanded="false" aria-label="ナビゲーション切替">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav2">
<ul class="navbar-nav mr-auto mt-2 mt-lg-0">
<li class="nav-item active"><a class="nav-link" href="#">リンク1<span class="sr-only">(現位置)</span></a></li>
<li class="nav-item"><a class="nav-link" href="#">リンク2</a></li>
<li class="nav-item"><a class="nav-link" href="#">リンク3</a></li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="検索" aria-label="検索">
<button class="btn btn-light my-2 my-sm-0" type="submit">検索</button>
</form>
</div>
</nav>
■ナビゲーションバー:navbar:コンポーネント:ブランドの表示・非表示 ブランドを折り畳んで隠すナビゲーションバ
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="ナビゲーション切替">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<a class="navbar-brand" href="#">ブランドを隠す</a>
<ul class="navbar-nav mr-auto mt-2 mt-lg-0">
<li class="nav-item active"><a class="nav-link" href="#">リンク1<span class="sr-only">(現位置)</span></a></li>
<li class="nav-item"><a class="nav-link" href="#">リンク2</a></li>
<li class="nav-item"><a class="nav-link" href="#">リンク3</a></li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="検索" aria-label="検索">
<button class="btn btn-light my-2 my-sm-0" type="submit">検索</button>
</form>
</div>
</nav>
■ナビゲーションバー:navbar:コンポーネント:navbar-darkで文字色を明るくし、bg-darkで暗い背景色を設定
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="#">ブランド</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="ナビゲーション切替">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav mr-auto">
<li class="nav-item"><a class="nav-link" href="#">リンク1</a></li>
<li class="nav-item"><a class="nav-link" href="#">リンク2</a></li>
<li class="nav-item"><a class="nav-link" href="#">リンク3</a></li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="検索" aria-label="検索">
<button class="btn btn-outline-info my-2 my-sm-0" type="submit">検索</button>
</form>
</div>
</nav>
■ナビゲーションバー:navbar:コンポーネント:navbar-darkで文字色を明るくし、bg-primaryで青い背景色を設定
<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
<a class="navbar-brand" href="#">ブランド</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent2" aria-controls="navbarSupportedContent2" aria-expanded="false" aria-label="ナビゲーション切替">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent2">
<ul class="navbar-nav mr-auto">
<li class="nav-item"><a class="nav-link" href="#">リンク1</a></li>
<li class="nav-item"><a class="nav-link" href="#">リンク2</a></li>
<li class="nav-item"><a class="nav-link" href="#">リンク3</a></li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="検索" aria-label="検索">
<button class="btn btn-outline-light my-2 my-sm-0" type="submit">検索</button>
</form>
</div>
</nav>
■ナビゲーションバー:navbar:コンポーネント:navbar-lightで文字色を暗くし、背景色をCSSで設定
<nav class="navbar navbar-expand-lg navbar-light" style="background-color: #e3f2fd;">
<a class="navbar-brand" href="#">ブランド</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent3" aria-controls="navbarSupportedContent3" aria-expanded="false" aria-label="ナビゲーション切替">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent3">
<ul class="navbar-nav mr-auto">
<li class="nav-item"><a class="nav-link" href="#">リンク1</a></li>
<li class="nav-item"><a class="nav-link" href="#">リンク2</a></li>
<li class="nav-item"><a class="nav-link" href="#">リンク3</a></li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="検索" aria-label="検索">
<button class="btn btn-outline-primary my-2 my-sm-0" type="submit">検索</button>
</form>
</div>
</nav>
■カルーセル回転木馬:carousel:JavaScript:カルーセル基本的な使用例
<div class="container">
<div 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>
</div>
</div>
■カルーセル回転木馬:carousel:JavaScript:タイトル、キャプション付きカルーセル
<div id="carouselSample" class="carousel slide" data-ride="carousel">
<!-- インジケーター部分 -->
<ol class="carousel-indicators">
<li data-target="#carouselSample" data-slide-to="0" class="active"></li>
<li data-target="#carouselSample" data-slide-to="1"></li>
<li data-target="#carouselSample" data-slide-to="2"></li>
</ol>
<!-- カルーセル部分 -->
<div class="carousel-inner">
<!-- First slide -->
<div class="carousel-item active">
<img class="d-block w-100" alt="slide" src="https://via.placeholder.com/1600x900/666666/FFFF00/000000?text=First slide">
<!-- キャプション -->
<div class="carousel-caption d-none d-md-block">
<h5>スライドタイトル</h5>
<p>スライドのキャプション文</p>
</div>
</div>
<!-- Second slide -->
<div class="carousel-item">
<img class="d-block w-100" alt="slide" src="https://via.placeholder.com/1600x900/666666/FFFF00/000000?text=Second slide">
<!-- キャプション -->
<div class="carousel-caption d-none d-md-block">
<h5>スライドタイトル</h5>
<p>スライドのキャプション文</p>
</div>
</div>
<!-- Third slide -->
<div class="carousel-item">
<img class="d-block w-100" alt="slide" src="https://via.placeholder.com/1600x900/666666/FFFF00/000000?text=Third slide">
<!-- キャプション -->
<div class="carousel-caption d-none d-md-block">
<h5>スライドタイトル</h5>
<p>スライドのキャプション文</p>
</div>
</div>
</div>
<!-- コントローラー部分 -->
<!-- 前に戻るアイコン -->
<a class="carousel-control-prev" href="#carouselSample" 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="#carouselSample" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">次に送る</span>
</a>
</div>
■カルーセル回転木馬: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>
■カルーセル回転木馬:carousel:JavaScript:インジケーターによるフェード遷移(好きな場所にクリックでいける)
<div class="container">
<div id="carouselSample2" class="carousel slide carousel-fade" data-ride="carousel">
<!-- インジケーター部分 -->
<ol class="carousel-indicators">
<li data-target="#carouselSample2" data-slide-to="0" class="active"></li>
<li data-target="#carouselSample2" data-slide-to="1"></li>
<li data-target="#carouselSample2" data-slide-to="2"></li>
</ol>
<!-- カルーセル部分 -->
<div class="carousel-inner">
<!-- First slide -->
<div class="carousel-item active">
<img class="d-block w-100" alt="slide" src="https://via.placeholder.com/1600x900/666666/FFFF00/000000?text=First slide">
<!-- キャプション -->
<div class="carousel-caption d-none d-md-block">
<h5>スライドタイトル</h5>
<p>スライドのキャプション文</p>
</div>
</div>
<!-- Second slide -->
<div class="carousel-item">
<img class="d-block w-100" alt="slide" src="https://via.placeholder.com/1600x900/666666/FFFF00/000000?text=Second slide">
<!-- キャプション -->
<div class="carousel-caption d-none d-md-block">
<h5>スライドタイトル</h5>
<p>スライドのキャプション文</p>
</div>
</div>
<!-- Third slide -->
<div class="carousel-item">
<img class="d-block w-100" alt="slide" src="https://via.placeholder.com/1600x900/666666/FFFF00/000000?text=Third slide">
<!-- キャプション -->
<div class="carousel-caption d-none d-md-block">
<h5>スライドタイトル</h5>
<p>スライドのキャプション文</p>
</div>
</div>
</div>
<!-- コントローラー部分 -->
<!-- 前に戻るアイコン -->
<a class="carousel-control-prev" href="#carouselSample2" 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="#carouselSample2" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">次に送る</span>
</a>
</div>
</div>
■カルーセル回転木馬:carousel:JavaScript:イベント:slid.bs.carousel
<div class="container">
<div id="carouselExample" class="carousel slide">
<!-- インジケーター部分 -->
<ol class="carousel-indicators">
<li data-target="#carouselExample" data-slide-to="0" class="active"></li>
<li data-target="#carouselExample" data-slide-to="1"></li>
<li data-target="#carouselExample" data-slide-to="2"></li>
</ol>
<!-- カルーセル部分 -->
<div class="carousel-inner">
<!-- First slide -->
<div class="carousel-item active"> <img class="d-block w-100" alt="slide" src="https://via.placeholder.com/1600x900/666666/FFFF00/000000?text=First slide">
<!-- キャプション -->
<div class="carousel-caption">
<h5>スライドタイトル</h5>
<p>スライドのキャプション文</p>
</div>
</div>
<!-- Second slide -->
<div class="carousel-item"> <img class="d-block w-100" alt="slide" src="https://via.placeholder.com/1600x900/666666/FFFF00/000000?text=Second slide">
<!-- キャプション -->
<div class="carousel-caption">
<h5>スライドタイトル</h5>
<p>スライドのキャプション文</p>
</div>
</div>
<!-- Third slide -->
<div class="carousel-item"> <img class="d-block w-100" alt="slide" src="https://via.placeholder.com/1600x900/666666/FFFF00/000000?text=Third slide">
<!-- キャプション -->
<div class="carousel-caption">
<h5>スライドタイトル</h5>
<p>スライドのキャプション文</p>
</div>
</div>
</div>
<!-- コントローラー部分 -->
<!-- 前に戻るアイコン -->
<a class="carousel-control-prev" href="#carouselExample" 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="#carouselExample" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">次に送る</span>
</a>
</div>
</div>
<script>
$('#carouselExample').on('slide.bs.carousel', function () {
$('#carouselExample .carousel-caption').hide();
});
$('#carouselExample').on('slid.bs.carousel', function () {
$('#carouselExample .carousel-caption').show();
});
</script>
■カルーセル回転木馬:carousel:JavaScript:インジケーター付きカルーセル
<div class="container">
<div id="carouselIndicators" class="carousel slide" data-ride="carousel">
<!-- インジケーター部分 -->
<ol class="carousel-indicators">
<li data-target="#carouselIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselIndicators" data-slide-to="1"></li>
<li data-target="#carouselIndicators" data-slide-to="2"></li>
</ol>
<!-- カルーセル部分 -->
<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/666666/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/666666/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/666666/FFFF00/000000?text=Third slide">
</div>
</div>
<!-- コントローラー部分 -->
<!-- 前に戻るアイコン -->
<a class="carousel-control-prev" href="#carouselIndicators" 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="#carouselIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">次に送る</span>
</a>
</div>
</div>
■カルーセル回転木馬:carousel:JavaScript:カルーセルをJavaScript経由で呼び出す
<div class="container">
<div id="carouselExample" class="carousel slide"><!-- data-ride="carousel"は不要 -->
<!-- インジケーター部分 -->
<ol class="carousel-indicators">
<li data-target="#carouselExample" data-slide-to="0" class="active"></li>
<li data-target="#carouselExample" data-slide-to="1"></li>
<li data-target="#carouselExample" data-slide-to="2"></li>
</ol>
<!-- カルーセル部分 -->
<div class="carousel-inner">
<!-- First slide -->
<div class="carousel-item active"> <img class="d-block w-100" alt="slide" src="https://via.placeholder.com/1600x900/666666/FFFF00/000000?text=First slide">
<!-- キャプション -->
<div class="carousel-caption">
<h5>スライドタイトル</h5>
<p>スライドのキャプション文</p>
</div>
</div>
<!-- Second slide -->
<div class="carousel-item"> <img class="d-block w-100" alt="slide" src="https://via.placeholder.com/1600x900/666666/FFFF00/000000?text=Second slide">
<!-- キャプション -->
<div class="carousel-caption">
<h5>スライドタイトル</h5>
<p>スライドのキャプション文</p>
</div>
</div>
<!-- Third slide -->
<div class="carousel-item"> <img class="d-block w-100" alt="slide" src="https://via.placeholder.com/1600x900/666666/FFFF00/000000?text=Third slide">
<!-- キャプション -->
<div class="carousel-caption">
<h5>スライドタイトル</h5>
<p>スライドのキャプション文</p>
</div>
</div>
</div>
<!-- コントローラー部分 -->
<!-- 前に戻るアイコン -->
<a class="carousel-control-prev" href="#carouselExample" 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="#carouselExample" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">次に送る</span>
</a>
</div>
</div>
<script>
$(function(){
$('#carouselExample').carousel({
interval: 1000
});
});
</script>
■カルーセル回転木馬:carousel:JavaScript:コントローラー付きカルーセル
<div class="container">
<div id="carousel" class="carousel slide">
<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/666666/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/666666/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/666666/FFFF00/000000?text=Third slide">
</div>
</div>
<!-- コントローラー部分 -->
<!-- 前に戻るアイコン -->
<a class="carousel-control-prev" href="#carouselIndicators" 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="#carouselIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">次に送る</span>
</a>
</div>
<!-- コントロールボタン -->
<div class="control-buttons my-3">
<input type="button" class="btn btn-primary start-slide" value="開始">
<input type="button" class="btn btn-primary pause-slide" value="停止">
<input type="button" class="btn btn-primary prev-slide" value="前へ">
<input type="button" class="btn btn-primary next-slide" value="次へ">
<input type="button" class="btn btn-primary slide-first" value="第1スライドに">
<input type="button" class="btn btn-primary slide-second" value="第2スライドに">
<input type="button" class="btn btn-primary slide-third" value="第3スライドに">
</div>
</div>
<script>
$(function(){
// 循環開始
$(".start-slide").on('click',function(){
$("#carousel").carousel('cycle');
});
// 一時停止
$(".pause-slide").on('click',function(){
$("#carousel").carousel('pause');
});
// 前へ循環
$(".prev-slide").on('click',function(){
$("#carousel").carousel('prev');
});
// 次へ循環
$(".next-slide").on('click',function(){
$("#carousel").carousel('next');
});
// 特定のフレームに循環
$(".slide-first").on('click',function(){
$("#carousel").carousel(0);
});
$(".slide-second").on('click',function(){
$("#carousel").carousel(1);
});
$(".slide-third").on('click',function(){
$("#carousel").carousel(2);
});
});
</script>
■カルーセル回転木馬:carousel:JavaScript:データ属性でオプションを指定
<div class="container">
<div id="carouselExample" class="carousel slide" data-ride="carousel" data-interval="1000">
<!-- インジケーター部分 -->
<ol class="carousel-indicators">
<li data-target="#carouselExample" data-slide-to="0" class="active"></li>
<li data-target="#carouselExample" data-slide-to="1"></li>
<li data-target="#carouselExample" data-slide-to="2"></li>
</ol>
<!-- カルーセル部分 -->
<div class="carousel-inner">
<!-- First slide -->
<div class="carousel-item active"> <img class="d-block w-100" alt="slide" src="https://via.placeholder.com/1600x900/666666/FFFF00/000000?text=First slide">
<!-- キャプション -->
<div class="carousel-caption">
<h5>スライドタイトル</h5>
<p>スライドのキャプション文</p>
</div>
</div>
<!-- Second slide -->
<div class="carousel-item"> <img class="d-block w-100" alt="slide" src="https://via.placeholder.com/1600x900/666666/FFFF00/000000?text=Second slide">
<!-- キャプション -->
<div class="carousel-caption">
<h5>スライドタイトル</h5>
<p>スライドのキャプション文</p>
</div>
</div>
<!-- Third slide -->
<div class="carousel-item"> <img class="d-block w-100" alt="slide" src="https://via.placeholder.com/1600x900/666666/FFFF00/000000?text=Third slide">
<!-- キャプション -->
<div class="carousel-caption">
<h5>スライドタイトル</h5>
<p>スライドのキャプション文</p>
</div>
</div>
</div>
<!-- コントローラー部分 -->
<!-- 前に戻るアイコン -->
<a class="carousel-control-prev" href="#carouselExample" 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="#carouselExample" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">次に送る</span>
</a>
</div>
</div>