bootstrap4.css
ol,
ul,
dl {
margin-top: 0;
margin-bottom: 1rem;
}
bootstrap4.css
ol ol,
ul ul,
ol ul,
ul ol {
margin-bottom: 0;
}
bootstrap4.css
pre,
code,
kbd,
samp {
font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
font-size: 1em;
}
bootstrap4.css
select.form-control[size], select.form-control[multiple] {
height: auto;
}
bootstrap4.css
.custom-select[multiple], .custom-select[size]:not([size="1"]) {
height: auto;
padding-right: 0.75rem;
background-image: none;
}
bootstrap4.css
.custom-range:disabled::-webkit-slider-runnable-track {
cursor: default;
}
bootstrap4.css
.custom-range:disabled::-moz-range-track {
cursor: default;
}
bootstrap4.css
.nav-link.disabled {
color: #6c757d;
pointer-events: none;
cursor: default;
}
bootstrap4.css
.text-monospace {
font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !important;
}
■カード: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>
■カード:card:コンポーネント:カードにナビゲーションを組み込む ピル型のナビゲーション
<div class="card">
<!-- カードのヘッダー -->
<div class="card-header">
<!-- ピル型のナビゲーション:card-header-pills -->
<ul class="nav nav-pills card-header-pills">
<li class="nav-item"> <a class="nav-link active" href="#">アクティブ</a> </li>
<li class="nav-item"> <a class="nav-link" href="#">リンク</a> </li>
<li class="nav-item"> <a class="nav-link" href="#">リンク</a> </li>
</ul>
</div>
<!-- カードの本文 -->
<div class="card-body">
<h4 class="card-title">カードのタイトル</h4>
<p class="card-text">カードの内容</p> <a href="#" class="btn btn-primary">ボタン</a> </div>
</div>
■カード:card:コンポーネント:カードにナビゲーションを組み込む タブ型のナビゲーション
<div class="card">
<!-- カードのヘッダー -->
<div class="card-header">
<!-- タブ型のナビゲーション:card-header-tabs -->
<ul class="nav nav-tabs card-header-tabs">
<li class="nav-item"><a class="nav-link active" href="#">アクティブ</a></li>
<li class="nav-item"><a class="nav-link" href="#">リンク</a></li>
<li class="nav-item"><a class="nav-link" href="#">リンク</a></li>
</ul>
</div>
<!-- カードの本文 -->
<div class="card-body">
<h4 class="card-title">カードのタイトル</h4>
<p class="card-text">カードの内容</p>
<a href="#" class="btn btn-primary">ボタン</a>
</div>
</div>
■ディスプレー:Display:ユーティリティ:Embedユーティリティ 埋め込みクラス アスペクト比 16:9
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0" allowfullscreen></iframe>
</div>
■リストグループ: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:コンポーネント:リスト項目を無効状態にする
- リスト項目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:コンポーネント: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>
■ページネーション:pagination:コンポーネント:ページネーション:pagination
<nav aria-label="ページネーションの例">
<ul class="pagination">
<li class="page-item"><a class="page-link" href="#">前</a></li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item"><a class="page-link" href="#">次</a></li>
</ul>
</nav>
■ページネーション:pagination:コンポーネント:ページネーションの配置 中央寄せ(justify-content-center)
<nav aria-label="ページネーションの例">
<ul class="pagination justify-content-center">
<li class="page-item disabled"><a class="page-link" href="#" tabindex="-1">前</a></li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item"><a class="page-link" href="#">次</a></li>
</ul>
</nav>
■ページネーション:pagination:コンポーネント:ページネーションの配置 右寄せ(justify-content-end)
<nav aria-label="Page navigation example">
<ul class="pagination justify-content-end">
<li class="page-item disabled"><a class="page-link" href="#" tabindex="-1">前</a> </li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item"><a class="page-link" href="#">次</a></li>
</ul>
</nav>
■ページネーション:pagination:コンポーネント:ページネーションにアイコンを使用する
<nav aria-label="ページネーションの例">
<ul class="pagination">
<li class="page-item"><a class="page-link" href="#" aria-label="前へ"><span aria-hidden="true">«</span><span class="sr-only">前へ</span></a></li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item"><a class="page-link" href="#" aria-label="次へ"><span aria-hidden="true">»</span><span class="sr-only">次へ</span></a></li>
</ul>
</nav>
■ページネーション:pagination:コンポーネント:リンクの無効状態やアクティブ状態を指定する
<nav aria-label="ページネーションの例">
<ul class="pagination">
<li class="page-item disabled"><a class="page-link" href="#" tabindex="-1">前</a></li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item active"><a class="page-link" href="#">2 <span class="sr-only">(現ページ)</span></a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item"><a class="page-link" href="#">次</a></li>
</ul>
</nav>
■ページネーション:pagination:コンポーネント:ページネーションのサイズ pagination-lg
<nav aria-label="ページネーションの例">
<ul class="pagination pagination-lg">
<li class="page-item disabled"><a class="page-link" href="#" tabindex="-1">前</a></li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item"><a class="page-link" href="#">次</a></li>
</ul>
</nav>
■ページネーション:pagination:コンポーネント:ページネーションのサイズ pagination-sm
<nav aria-label="ページネーションの例">
<ul class="pagination pagination-sm">
<li class="page-item disabled"><a class="page-link" href="#" tabindex="-1">次</a></li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item"><a class="page-link" href="#">前</a></li>
</ul>
</nav>
■ページネーション:pagination:コンポーネント:span要素でリンクの無効状態やアクティブ状態を指定する
<nav aria-label="ページネーションの例">
<ul class="pagination">
<li class="page-item disabled"><span class="page-link">前</span></li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item active"><span class="page-link">2<span class="sr-only">(現ページ)</span></span></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item"><a class="page-link" href="#">次</a></li>
</ul>
</nav>
<script>
$(function() {
$('.disabled > a.page-link').click(function() {
return false;
});
});
</script>
■ドロップダウン:dropdown-menu:コンポーネント:切り替えボタンにaタグ要素を使用したドロップダウン
<!-- ドロップダウン -->
<div class="dropdown">
<!-- 切り替えボタン -->
<a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
ドロップダウン
</a>
<!-- ドロップダウンメニュー -->
<div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
<a class="dropdown-item" href="#">メニュー01</a>
<a class="dropdown-item" href="#">メニュー02</a>
<a class="dropdown-item" href="#">メニュー03</a>
</div>
</div>
■ドロップダウン:dropdown-menu:コンポーネント:ドロップダウン方向を変更する
<div class="container py-5 d-flex justify-content-center">
<!-- 上方向へのドロップ -->
<div class="btn-group dropup">
<!-- 切り替えボタン -->
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">上方向へのドロップ</button>
<!-- ドロップダウンメニュー -->
<div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
<a class="dropdown-item" href="#">メニュー01</a>
<a class="dropdown-item" href="#">メニュー02</a>
<a class="dropdown-item" href="#">メニュー03</a>
</div>
</div>
</div>
■フォーム: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:コンポーネント:入力コントロールのサイズを調整する -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:コンポーネント:ファイル選択
<div class="container">
<form>
<div class="default-file mb-5">
<input type="file" id="dafaultFile" lang="ja">
<label for="dafaultFile">ファイル選択...</label>
</div>
<div class="custom-file">
<input type="file" class="custom-file-input" id="customFile" lang="ja">
<label class="custom-file-label" for="customFile">ファイル選択...</label>
</div>
</form>
■フォーム:form-group:コンポーネント:プルダウンメニュー 複数選択メニュー
<form>
<select class="custom-select" multiple>
<option selected>選択してください</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</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:コンポーネント:入力グループのサイズ調整 大、(中/標準)、小 input-group
Small
Default
Large
<div class="input-group input-group-sm mb-3">
<div class="input-group-prepend">
<span class="input-group-text" id="inputGroup-sizing-sm">Small</span>
</div>
<input type="text" class="form-control" aria-label="Small" aria-describedby="inputGroup-sizing-sm">
</div>
<!-- 標準サイズの入力グループ -->
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text" id="inputGroup-sizing-default">Default</span>
</div>
<input type="text" class="form-control" aria-label="Default" aria-describedby="inputGroup-sizing-default">
</div>
<!-- 大サイズの入力グループ -->
<div class="input-group input-group-lg">
<div class="input-group-prepend">
<span class="input-group-text" id="inputGroup-sizing-lg">Large</span>
</div>
<input type="text" class="form-control" aria-label="Large" aria-describedby="inputGroup-sizing-sm">
</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>
■フォーム:form-group:コンポーネント:カスタムレンジ入力
<form>
<div class="form-group mb-5">
<label for="formControlRange">レンジ入力の例</label>
<input type="range" class="form-control-range" id="defaultRange"> </div>
<div class="form-group mb-5">
<label for="customRange1">カスタムレンジ入力の例</label>
<input type="range" class="custom-range" id="customRange1"> </div>
<div class="form-group mb-5">
<label for="customRange2">カスタムレンジ入力の例(min="0",max="5")</label>
<input type="range" class="custom-range" min="0" max="5" id="customRange2"> </div>
<div class="form-group mb-5">
<label for="customRange3">カスタムレンジ入力の例(step="0.5")</label>
<input type="range" class="custom-range" min="0" max="5" step="0.5" id="customRange3"> </div>
</form>
■メディアオブジェクト: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>
■ナビゲーション:nav:JavaScript:タブとコンテンツ(データ属性API)
ホームのコンテンツ
プロフィールのコンテンツ
コンタクトのコンテンツ
<!-- タブ部分 -->
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item"><a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">ホーム</a></li>
<li class="nav-item"><a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">プロフィール</a></li>
<li class="nav-item"><a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">コンタクト</a></li>
</ul>
<!-- パネル部分 -->
<div class="tab-content mt-3" id="myTabContent">
<div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">ホームのコンテンツ</div>
<div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">プロフィールのコンテンツ</div>
<div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">コンタクトのコンテンツ</div>
</div>
■ナビゲーション:nav:JavaScript:タブ型ナビゲーション(JavaScript経由)
ホームのコンテンツが入ります。
プロフィールのコンテンツが入ります。
コンタクトのコンテンツが入ります。
<ul class="nav nav-tabs" id="myTab_js" role="tablist">
<li class="nav-item"><a class="nav-link active" id="home-tab" href="#home_js" role="tab" aria-controls="home" aria-selected="true">ホーム</a></li>
<li class="nav-item"><a class="nav-link" id="profile-tab" href="#profile_js" role="tab" aria-controls="profile" aria-selected="false">プロフィール</a></li>
<li class="nav-item"><a class="nav-link" id="contact-tab" href="#contact_js" role="tab" aria-controls="contact" aria-selected="false">コンタクト</a></li>
</ul>
<!-- パネル部分 -->
<div class="tab-content mt-3" id="myTabContent">
<div class="tab-pane fade show active" id="home_js" role="tabpanel" aria-labelledby="home-tab">ホームのコンテンツが入ります。</div>
<div class="tab-pane fade" id="profile_js" role="tabpanel" aria-labelledby="profile-tab">プロフィールのコンテンツが入ります。</div>
<div class="tab-pane fade" id="contact_js" role="tabpanel" aria-labelledby="contact-tab">コンタクトのコンテンツが入ります。</div>
</div>
<script>
$('#myTab_js a').on('click', function(e) {
e.preventDefault()
$(this).tab('show')
})
</script>
■ナビゲーションバー:navbar:コンポーネント:ナビゲーションバー 初期設定
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="#">ブランド</a>
<button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navbarNav1" aria-controls="navbarNav" aria-expanded="false" aria-label="ナビゲーションの切替">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav1">
<ul class="navbar-nav">
<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>
<li class="nav-item"><a class="nav-link" href="#">リンク4</a></li>
<li class="nav-item"><a class="nav-link" href="#">リンク5</a></li>
</ul>
</div>
</nav>
■ナビゲーションバー:navbar:コンポーネント:ナビゲーションバーを水平中央に配置
<nav class="navbar navbar-expand-lg navbar-dark bg-dark"> <a class="navbar-brand" href="#">ブランド</a>
<button type="button" class="navbar-toggler" 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">
<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>
<li class="nav-item"><a class="nav-link" href="#">リンク4</a></li>
<li class="nav-item"><a class="nav-link" href="#">リンク5</a></li>
</ul>
</div>
</nav>
■ナビゲーションバー:navbar:コンポーネント:サブコンポーネントを水平中央に配置
コンテンツ
コンテナの幅が分かりやすいよう背景色を付けています。コンテナの幅が分かりやすいよう背景色を付けています。コンテナの幅が分かりやすいよう背景色を付けています。コンテナの幅が分かりやすいよう背景色を付けています。コンテナの幅が分かりやすいよう背景色を付けています。コンテナの幅が分かりやすいよう背景色を付けています。コンテナの幅が分かりやすいよう背景色を付けています。コンテナの幅が分かりやすいよう背景色を付けています。コンテナの幅が分かりやすいよう背景色を付けています。コンテナの幅が分かりやすいよう背景色を付けています。
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container">
<a class="navbar-brand" href="#">ブランド</a>
<button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navbarNav22" aria-controls="navbarNav2" aria-expanded="false" aria-label="ナビゲーションの切替">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav22">
<ul class="navbar-nav">
<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>
<li class="nav-item"><a class="nav-link" href="#">リンク4</a></li>
<li class="nav-item"><a class="nav-link" href="#">リンク5</a></li>
</ul>
</div>
</div>
</nav>
<div class="container bg-light">
<h4>コンテンツ</h4>
<p>コンテナの幅が分かりやすいよう背景色を付けています。コンテナの幅が分かりやすいよう背景色を付けています。コンテナの幅が分かりやすいよう背景色を付けています。コンテナの幅が分かりやすいよう背景色を付けています。コンテナの幅が分かりやすいよう背景色を付けています。コンテナの幅が分かりやすいよう背景色を付けています。コンテナの幅が分かりやすいよう背景色を付けています。コンテナの幅が分かりやすいよう背景色を付けています。コンテナの幅が分かりやすいよう背景色を付けています。コンテナの幅が分かりやすいよう背景色を付けています。</p>
</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-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">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
ドロップダウン切替
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenu">
<a class="dropdown-item" href="#">ドロップダウンリンク1</a>
<a class="dropdown-item" href="#">ドロップダウンリンク2</a>
<a class="dropdown-item" href="#">ドロップダウンリンク3</a>
</div>
</li>
<li class="nav-item active"><a class="nav-link" href="#">リンク1</a></li>
<li class="nav-item active"><a class="nav-link" href="#">リンク2<span class="sr-only">(現位置)</span></a></li>
<li class="nav-item"><a class="nav-link" href="#">リンク3</a></li>
</ul>
</div>
</nav>
■ナビゲーションバー:navbar:コンポーネント:ナビゲーション:ul要素を使用したナビゲーション
<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">
<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>
<li class="nav-item"><a class="nav-link disabled" href="#">無効</a></li>
</ul>
</div>
</nav>
■ナビゲーションバー:navbar:コンポーネント:テキスト
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="#">ブランド</a>
<button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="ナビゲーションの切替">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarText">
<ul class="navbar-nav">
<li class="nav-item active"><a class="nav-link" href="#">ホーム <span class="sr-only">(現位置)</span></a></li>
<li class="nav-item"><a class="nav-link" href="#">リンク1</a></li>
<li class="nav-item"><a class="nav-link" href="#">リンク2</a></li>
</ul>
<span class="navbar-text ml-auto">ナビゲーションバー内テキスト</span>
</div>
</nav>
■ナビゲーションバー:navbar:コンポーネント:ナビゲ―ション項目の幅を調整 nav-fillクラスが無い時
<ul class="nav nav-pills">
<li class="nav-item"><a class="nav-link active" href="#">アクティブ</a></li>
<li class="nav-item"><a class="nav-link" href="#">リンク</a></li>
<li class="nav-item"><a class="nav-link disabled" href="#">無効</a></li>
</ul>
■ナビゲーションバー:navbar:コンポーネント:ナビゲ―ション項目の幅を調整 nav-fillクラスを追加した時
<ul class="nav nav-pills nav-fill">
<li class="nav-item"><a class="nav-link active" href="#">アクティブ</a></li>
<li class="nav-item"><a class="nav-link" href="#">リンク</a></li>
<li class="nav-item"><a class="nav-link disabled" href="#">無効</a></li>
</ul>
■ナビゲーションバー:navbar:コンポーネント:ピル型ナビゲーション
<ul class="nav nav-pills">
<li class="nav-item"><a class="nav-link active" href="#">アクティブ</a></li>
<li class="nav-item"><a class="nav-link" href="#">リンク</a></li>
<li class="nav-item"><a class="nav-link disabled" href="#">無効</a></li>
</ul>
■ナビゲーションバー:navbar:コンポーネント:ドロップダウンを組み込んだピル型ナビゲーション
<ul class="nav nav-pills">
<li class="nav-item"><a class="nav-link active" href="#">アクティブ</a></li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">ドロップダウン</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">リンク1</a>
<a class="dropdown-item" href="#">リンク2</a>
<a class="dropdown-item" href="#">リンク3</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">その他リンク</a>
</div>
</li>
<li class="nav-item"><a class="nav-link" href="#">リンク</a></li>
<li class="nav-item"><a class="nav-link disabled" href="#">無効</a></li>
</ul>
■ナビゲーションバー:navbar:コンポーネント:タブ型ナビゲーション
<ul class="nav nav-tabs">
<li class="nav-item"><a class="nav-link active" href="#">アクティブ</a></li>
<li class="nav-item"><a class="nav-link" href="#">リンク</a></li>
<li class="nav-item"><a class="nav-link disabled" href="#">無効</a></li>
</ul>
■ナビゲーションバー:navbar:コンポーネント:ドロップダウンを組み込んだタブ型ナビゲーション
<ul class="nav nav-tabs">
<li class="nav-item"><a class="nav-link active" href="#">アクティブ</a></li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">ドロップダウン</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">リンク1</a>
<a class="dropdown-item" href="#">リンク2</a>
<a class="dropdown-item" href="#">リンク3</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">その他リンク</a>
</div>
</li>
<li class="nav-item"><a class="nav-link" href="#">リンク</a></li>
<li class="nav-item"><a class="nav-link disabled" href="#">無効</a></li>
</ul>
■ナビゲーションバー: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>
■ナビゲーション水平方向、均等:nav:コンポーネント:ナビゲーション:水平方向
<ul class="nav">
<li class="nav-item"><a class="nav-link active" href="#">アクティブ</a></li>
<li class="nav-item"><a class="nav-link" href="#">リンク</a></li>
<li class="nav-item"><a class="nav-link disabled" href="#">無効</a></li>
</ul>
■ナビゲーション水平方向、均等:nav:コンポーネント:ナビゲーション:中央寄せ
<ul class="nav justify-content-center"><!-- 中央寄せ -->
<li class="nav-item"><a class="nav-link active" href="#">アクティブ</a></li>
<li class="nav-item"><a class="nav-link" href="#">リンク</a></li>
<li class="nav-item"><a class="nav-link disabled" href="#">無効</a></li>
</ul>
■ナビゲーション水平方向、均等:nav:コンポーネント:ナビゲーション:右寄せ
<ul class="nav justify-content-end">
<li class="nav-item"><a class="nav-link active" href="#">アクティブ</a></li>
<li class="nav-item"><a class="nav-link" href="#">リンク</a></li>
<li class="nav-item"><a class="nav-link disabled" href="#">無効</a></li>
</ul>
■ナビゲーション水平方向、均等:nav:コンポーネント:ナビゲーションを垂直(縦)に並べる:ul要素
<ul class="nav flex-column">
<li class="nav-item"><a class="nav-link active" href="#">アクティブ</a></li>
<li class="nav-item"><a class="nav-link" href="#">リンク</a></li>
<li class="nav-item"><a class="nav-link disabled" href="#">無効</a></li>
</ul>
■モーダル:modal:モーダルを閉じるときにメッセージを出す:JavaScript使用