Emmetショートハンド集

Emmet(旧:Zen Coding)は、HTMLとCSSのワークフローを大幅に改善する多くの一般的なテキストエディタ用のプラグインであり、多くのエディタに実装されている。BootstrapのHTMLコーディングをする際に便利なEmmetショートハンドを掲載。

※参考

コンテンツ

文字の体裁

解説

見出し

見出し 1

<p class="h1">見出し 1</p>
p.h1

見出し 2

<p class="h2">見出し 2</p>
p.h2

見出し 3

<p class="h3">見出し 3</p>
p.h3

見出し 4

<p class="h4">見出し 4</p>
p.h4

見出し 5

<p class="h5">見出し 5</p>
p.h5

見出し 6

<p class="h6">見出し 6</p>
p.h6

表示見出し

表示見出し 1

<p class="display-1">表示見出し 1</p>
p.display-1

表示見出し 2

<p class="display-2">表示見出し 2</p>
p.display-2

表示見出し 3

<p class="display-3">表示見出し 3</p>
p.display-3

表示見出し 4

<p class="display-4">表示見出し 4</p>
p.display-4

表示見出し 5

<p class="display-5">表示見出し 5</p>
p.display-5

表示見出し 6

<p class="display-6">表示見出し 6</p>
p.display-6

リード文

これがリード文の字体です。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。

<p class="lead">これがリード文の字体です。...</p>
p.lead

引用

blockquote要素に含まれるよく知られた引用。

<figure>
	<blockquote class="blockquote">
		<p>blockquote要素に含まれるよく知られた引用。</p>
	</blockquote>
	<figcaption class="blockquote-footer"><cite title="引用元の名前">文章の引用元</cite></figcaption>
</figure>
fig>(bq.blockquote>p)+(figc.blockquote-footer>cite[title])

マークなしリスト

標準の設定
  • アイテム1
  • アイテム2
  • アイテム3
  • アイテム4
<ul class="list-unstyled">
	<li>アイテム1</li>
	<li>アイテム2</li>
	<li>アイテム3</li>
	<li>アイテム4</li>
</ul>
ul.list-unstyled>li*4(リストアイテムが4つの場合)
入れ子の設定
  • アイテム1
  • アイテム2
  • アイテム3
  • アイテム4
  • アイテム5
    • 子アイテム1
    • 子アイテム2
    • 子アイテム3
    • 子アイテム4
<ul class="list-unstyled">
	<li>アイテム1</li>
	<li>アイテム2</li>
	<li>アイテム3</li>
	<li>アイテム4</li>
	<li>アイテム5
		<ul>
			<li>子アイテム1</li>
			<li>子アイテム2</li>
			<li>子アイテム3</li>
			<li>子アイテム4</li>
		</ul>
	</li>
</ul>
ul.list-unstyled>li*4+li>ul>li*4(親アイテム4つ+子アイテム4つの場合)
親アイテム+子アイテム+親アイテムの設定
  • アイテム1
  • アイテム2
  • アイテム3
  • アイテム4
  • アイテム5
    • 子アイテム1
    • 子アイテム2
    • 子アイテム3
    • 子アイテム4
  • アイテム6
  • アイテム7
  • アイテム8
<ul class="list-unstyled">
	<li>アイテム1</li>
	<li>アイテム2</li>
	<li>アイテム3</li>
	<li>アイテム4</li>
	<li>アイテム5
		<ul>
			<li>子アイテム1</li>
			<li>子アイテム2</li>
			<li>子アイテム3</li>
			<li>子アイテム4</li>
		</ul>
	</li>
	<li>アイテム6</li>
	<li>アイテム7</li>
	<li>アイテム8</li>
</ul>
ul.list-unstyled>li*4+(li>ul>li*4)+li*3(親アイテム4つ+子アイテム4つ+親アイテム3つの場合)

横並びリスト

  • 横並びアイテム1
  • 横並びアイテム2
  • 横並びアイテム3
<ul class="list-inline">
	<li class="list-inline-item">横並びアイテム1</li>
	<li class="list-inline-item">横並びアイテム2</li>
	<li class="list-inline-item">横並びアイテム3</li>
</ul>
ul.list-inline>.list-inline-item*3(リストアイテムが3つの場合)

水平定義リスト

説明リスト
説明リストは、用語を定義するのに最適。
説明リスト2
説明リスト2の定義。
用語

用語の定義。

同じ用語の2番目の定義。

<dl class="row">
	<dt class="col-sm-3">説明リスト</dt>
	<dd class="col-sm-9">説明リストは、用語を定義するのに最適。</dd>
	<dt class="col-sm-3">説明リスト2</dt>
	<dd class="col-sm-9">説明リスト2の定義。</dd>
	<dt class="col-sm-3">用語</dt>
	<dd class="col-sm-9">
		<p>用語の定義。</p>
		<p>同じ用語の2番目の定義。</p>
	</dd>
</dl>
dl.row>(dt.col-sm-3+dd.col-sm-9)*2+(dt.col-sm-3+dd.col-sm-9>p*2)(通常のリスト2つ+長めの定義のリストの場合)

イメージ

解説

レスポンシブイメージ

レスポンシブ・イメージレスポンシブ・イメージ
<img src="..." alt="レスポンシブ・イメージ" class="img-fluid" loading="lazy">
img.img-fluid[loading="lazy"]

イメージのサムネイル

サムネイル画像200x200
<img src="..." alt="200x200" class="img-thumbnail" loading="lazy">
img.img-thumbnail[loading="lazy"]

ピクチャ

<picture>
	<source media="(min-width: )" srcset="..." type="image/...">
	<img src="..." alt="..." class="img-fluid img-thumbnail" loading="lazy">
</picture>
pic>src:mt+img.img-fluid.img-thumbnail[loading="lazy"]

テーブル

解説

標準の設定

# 見出し 見出し 見出し
1 テーブルのセル テーブルのセル テーブルのセル
2 テーブルのセル テーブルのセル テーブルのセル
3 テーブルのセル テーブルのセル テーブルのセル
<table class="table">
	<thead>
		<tr>
			<th scope="col">#</th>
			<th scope="col">見出し</th>
			<th scope="col">見出し</th>
			<th scope="col">見出し</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<th scope="row">1</th>
			<td>テーブルのセル</td>
			<td>テーブルのセル</td>
			<td>テーブルのセル</td>
		</tr>
		<tr>
			<th scope="row">2</th>
			<td>テーブルのセル</td>
			<td>テーブルのセル</td>
			<td>テーブルのセル</td>
		</tr>
		<tr>
			<th scope="row">3</th>
			<td>テーブルのセル</td>
			<td>テーブルのセル</td>
			<td>テーブルのセル</td>
		</tr>
	</tbody>
</table>
table.table>(thead>tr>th[scope="col"]*4)+(tbody>tr*3>th[scope="row"]+td*3)(見出し1行+3行×4列の場合)

水平方向の結合セルがある場合

# 名字 名前 ハンドルネーム
1 ブート 太郎 @taro
2 ストラップ 花子 @hanako
3 田中先生 @tanaka
<table class="table">
	<thead>
		<tr>
			<th scope="col">#</th>
			<th scope="col">名字</th>
			<th scope="col">名前</th>
			<th scope="col">ハンドルネーム</th>
		</tr>
		</thead>
		<tbody>
		<tr>
			<th scope="row">1</th>
			<td>ブート</td>
			<td>太郎</td>
			<td>@taro</td>
		</tr>
		<tr>
			<th scope="row">2</th>
			<td>ストラップ</td>
			<td>花子</td>
			<td>@hanako</td>
		</tr>
		<tr>
			<th scope="row">3</th>
			<td colspan="2">田中先生</td>
			<td>@tanaka</td>
		</tr>
	</tbody>
</table>
table.table>(thead>tr>th[scope="col"]*4)+(tbody>(tr*2>th[scope="row"]+td*3)+(tr>th[scope="row"]+td[colspan="2"]+td))(見出し1行+3行×4列の場合)

垂直方向の結合セルがある場合

# 名字 名前 ハンドルネーム
1 ブート 太郎 @taro
2 花子 @hanako
3 田中 次郎 @tanaka
<table class="table">
	<thead>
		<tr>
			<th scope="col">#</th>
			<th scope="col">名字</th>
			<th scope="col">名前</th>
			<th scope="col">ハンドルネーム</th>
		</tr>
		</thead>
		<tbody>
		<tr>
			<th scope="row">1</th>
			<td class="align-middle" rowspan="2">ブート</td>
			<td>太郎</td>
			<td>@taro</td>
		</tr>
		<tr>
			<th scope="row">2</th>
			<td>花子</td>
			<td>@hanako</td>
		</tr>
		<tr>
			<th scope="row">3</th>
			<td>田中</td>
			<td>次郎</td>
			<td>@tanaka</td>
		</tr>
	</tbody>
</table>
table.table>(thead>tr>th[scope="col"]*4)+(tbody>(tr>th[scope="row"]+td.align-middle[colspan="2"]+td*2)+(tr>th[scope="row"]+td*2)+(tr>th[scope="row"]+td*3))(見出し1行+3行×4列の場合)

Darkのテーブル

# 見出し 見出し 見出し
1 テーブルのセル テーブルのセル テーブルのセル
2 テーブルのセル テーブルのセル テーブルのセル
3 テーブルのセル テーブルのセル テーブルのセル
<table class="table table-dark">
	...
</table>
table.table.table-dark>(thead>tr>th[scope="col"]*4)+(tbody>tr*3>th[scope="row"]+td*3)(見出し1行+3行×4列の場合)

テーブルの上部にキャプションを配置

テーブルのキャプション
# 見出し 見出し 見出し
1 テーブルのセル テーブルのセル テーブルのセル
2 テーブルのセル テーブルのセル テーブルのセル
3 テーブルのセル テーブルのセル テーブルのセル
<table class="table caption-top">
	<caption>テーブルのキャプション</caption>
	...
</table>
table.table.caption-top>cap+(thead>tr>th[scope="col"]*4)+(tbody>tr*3>th[scope="row"]+td*3)(見出し1行+3行×4列の場合)

レスポンシブテーブル

# 見出し 見出し 見出し
1 テーブルのセル テーブルのセル テーブルのセル
2 テーブルのセル テーブルのセル テーブルのセル
3 テーブルのセル テーブルのセル テーブルのセル
<div class="table-responsive">
	<table class="table">
		...
	</table>
</div>
.table-responsive>table.table>(thead>tr>th[scope="col"]*4)+(tbody>tr*3>th[scope="row"]+td*3)(見出し1行+3行×4列の場合)

図表

解説
Placeholder400x300
上の画像のキャプション
<figure class="figure">
	<img src="..." alt="400x300" class="figure-img img-fluid rounded">
	<figcaption class="figure-caption">上の画像のキャプション</figcaption>
</figure>
fig.figure>img.figure-img.img-fluid.rounded+figc.figure-caption

フォーム

フォームコントロール

解説
<div class="mb-3">
	<label for="ID" class="form-label">名前</label>
	<input type="text" name="..." id="ID" class="form-control" placeholder="...">
</div>
.mb-3>label.form-label+inp.form-control[placeholder]
<div class="mb-3">
	<label for="ID" class="form-label">Eメールアドレス</label>
	<input type="text" name="..." id="ID" class="form-control" placeholder="name@example.com">
</div>
.mb-3>label.form-label+input:email.form-control[placeholder]
<div class="mb-3">
	<label for="ID" class="form-label">パスワード</label>
	<input type="password" name="..." id="ID" class="form-control" placeholder="...">
</div>
.mb-3>label.form-label+input:p.form-control[placeholder]
<div class="mb-3">
	<label for="ID" class="form-label">テキストエリアの例</label>
	<textarea name="..." id="ID" rows="3" class="form-control"></textarea>
</div>
.mb-3>label.form-label+textarea.form-control[rows="3"]
<textarea>cols="30" の設定は不要なので展開後に削除してください
<div class="mb-3">
	<label for="ID" class="form-label">アップロード</label>
	<input type="file" name="..." id="ID" class="form-control">
</div>
.mb-3>label.form-label+input:f.form-control
<div class="mb-3">
	<label for="ID" class="form-label">カラーピッカー</label>
	<input type="color" name="..." id="ID" class="form-control form-control-color" value="...">
</div>
.mb-3>label.form-label+input:color.form-control.form-control-color[value]

選択メニュー

解説
<div class="mb-3">
	<label for="ID" class="form-label">選択の例</label>
	<select name="..." id="ID" class="form-select">
		<option value="..." selected>この選択メニューを開く</option>
		<option value="1">その1</option>
		<option value="2">その2</option>
		<option value="3">その3</option>
	</select>
</div>
.mb-3>label.form-label+select.form-select>option[selected]+option*3(選択済みオプション+オプション3つの場合)
※展開後 selected="selected"selected="" になっていたら selected に修正してください

チェック&ラジオ

解説

チェックボックス

縦積み表示
<div class="mb-3 form-check">
	<input type="checkbox" name="..." id="ID" class="form-check-input">
	<label for="ID" class="form-check-label">記憶する</label>
</div>
.mb-3.form-check>input:c.form-check-input+label.form-check-label
<div class="form-check">
	<input type="checkbox" name="..." id="ID1" class="form-check-input">
	<label for="ID1" class="form-check-label">最初のチェック</label>
</div>
<div class="form-check">
	<input type="checkbox" name="..." id="ID2" class="form-check-input">
	<label for="ID2" class="form-check-label">2つ目のチェック</label>
</div>
<div class="mb-3 form-check">
	<input type="checkbox" name="..." id="ID3" class="form-check-input">
	<label for="ID3" class="form-check-label">3つ目のチェック</label>
</div>
(.form-check>input:c.form-check-input+label.form-check-label)*2+(.mb-3.form-check>input:c.form-check-input+label.form-check-label)(チェックが3つの場合)
横並び表示
<div class="form-check form-check-inline">
	<input type="checkbox" name="..." id="ID1" class="form-check-input" value="...">
	<label for="ID1" class="form-check-label">1つ目</label>
</div>
<div class="form-check form-check-inline">
	<input type="checkbox" name="..." id="ID2" class="form-check-input" value="...">
	<label for="ID2" class="form-check-label">2つ目</label>
</div>
<div class="form-check form-check-inline">
	<input type="checkbox" name="..." id="ID3" class="form-check-input" value="...">
	<label for="ID3" class="form-check-label">3つ目</label>
</div>
(.form-check.form-check-inline>input:c.form-check-input[value]+label.form-check-label)*3(チェックが3つの場合)

ラジオボタン

縦積み表示
<div class="form-check">
	<input type="radio" name="radios" id="ID1" class="form-check-input">
	<label for="ID1" class="form-check-label">通常のラジオボタン</label>
</div>
	<div class="form-check">
		<input type="radio" name="radios" class="form-check-input" id="ID2">
		<label class="form-check-label" for="ID2">2つ目のラジオボタン</label>
	</div>
	<div class="mb-3 form-check">
		<input type="radio" name="radios" class="form-check-input" id="ID3">
		<label class="form-check-label" for="ID3">3つ目のラジオボタン</label>
	</div>
(.form-check>input:r.form-check-input+label.form-check-label)*2+(.mb-3.form-check>input:r.form-check-input+label.form-check-label)(ラジオボタンが3つの場合)
横並び表示
<div class="form-check form-check-inline">
	<input type="radio" name="..." id="ID1" class="form-check-input" value="...">
	<label for="ID1" class="form-check-label">1つ目</label>
</div>
<div class="form-check form-check-inline">
	<input type="radio" name="..." id="ID2" class="form-check-input" value="...">
	<label for="ID2" class="form-check-label">2つ目</label>
</div>
<div class="form-check form-check-inline">
	<input type="radio" name="..." id="ID3" class="form-check-input" value="...">
	<label for="ID3" class="form-check-label">3つ目</label>
</div>
(.form-check.form-check-inline>input:r.form-check-input[value]+label.form-check-label)*3(ラジオボタンが3つの場合)

切替スイッチ

<div class="mb-3 form-check form-switch">
	<input type="checkbox" name="..." id="ID" class="form-check-input">
	<label for="ID" class="form-check-label">チェックボックス入力をチェック</label>
</div>
.mb-3.form-check.form-switch>input:c.form-check-input+label.form-check-label

レンジ入力

解説
<div class="mb-3">
	<label for="ID" class="form-label">レンジ入力</label>
	<input type="range" name="..." id="ID" class="form-range" min="0" max="5" step="0.5">
</div>
.mb-3>label.form-label+input:range.form-range[min max step]

インプットグループ

解説

標準の設定

前にアドオン
@
<div class="input-group mb-3">
	<span class="input-group-text" id="addonID">@</span>
	<input type="text" name="..." class="form-control" placeholder="ユーザー名" aria-label="ユーザー名" aria-describedby="addonID">
</div>
.input-group.mb-3>span.input-group-text#addonID+input.form-control[placeholder aria-label aria-describedby="addonID"]addonID名は揃えること)
後にアドオン
@example.com
<div class="input-group mb-3">
	<input type="text" name="..." class="form-control" placeholder="受信者のユーザー名" aria-label="受信者のユーザー名" aria-describedby="addonID">
	<span class="input-group-text" id="addonID">@example.com</span>
</div>
.input-group.mb-3>input.form-control[placeholder aria-label aria-describedby="addonID"]+span.input-group-text#addonIDaddonID名は揃えること)
ラベル付きアドオン
https://example.com/users/
<label for="ID" class="form-label">虚偽のURL</label>
<div class="input-group mb-3">
	<span class="input-group-text" id="addonID">https://example.com/users/</span>
	<input type="text" name="..." id="ID" class="form-control" aria-describedby="addonID">
</div>
label.form-label+.input-group.mb-3>span.input-group-text#addonID+inp.form-control[placeholder aria-label aria-describedby="addonID"]addonID名は揃えること)
前後にアドオン
$ .00
<div class="input-group mb-3">
	<span class="input-group-text">$</span>
	<input type="text" class="form-control" aria-label="金額(最も近いドル)">
	<span class="input-group-text">.00</span>
</div>
.input-group.mb-3>span.input-group-text+input.form-control[aria-label]+span.input-group-text
間にアドオン
@
<div class="input-group mb-3">
	<input type="text" class="form-control" placeholder="ユーザー名">
	<span class="input-group-text">@</span>
	<input type="text" class="form-control" placeholder="サーバー">
</div>
.input-group.mb-3>input.form-control[placeholder]+span.input-group-text+input.form-control[placeholder]
コントロールがテキストエリア
textarea付き
<div class="input-group mb-3">
	<span class="input-group-text" id="addonID">textarea付き</span>
	<textarea class="form-control" aria-label="textarea付き" aria-describedby="addonID"></textarea>
</div>
.input-group.mb-3>span.input-group-text#addonID+tarea.form-control[aria-label aria-describedby="addonID"]addonID名は揃えること)
<textarea>cols="30" rows="10" の設定は不要なので展開後に削除してください(id="" も不要なら削除)

ボタンアドオン

前にボタン
<div class="input-group mb-3">
	<button type="button" class="btn btn-outline-secondary" id="addonID">ボタン</button>
	<input type="text" name="..." class="form-control" placeholder="..." aria-label="..." aria-describedby="addonID">
</div>
.input-group.mb-3>btn[type="button"].btn.btn-outline-secondary#addonID+input.form-control[placeholder aria-label aria-describedby="addonID"]addonID名は揃えること)
.btn-outline-secondary の部分はお好みのカラーを選んでください
後にボタン
<div class="input-group mb-3">
	<input type="text" name="..." class="form-control" placeholder="..." aria-label="..." aria-describedby="addonID">
	<button class="btn btn-outline-secondary" id="addonID" type="button">ボタン</button>
</div>
.input-group.mb-3>input.form-control[placeholder aria-label aria-describedby="addonID"]+btn.btn.btn-outline-secondary#addonID[type="button"]addonID名は揃えること)
.btn-outline-secondary の部分はお好みのカラーを選んでください

フローティングラベル

解説
<div class="form-floating mb-3">
	<input type="email" name="..." id="ID" class="form-control" placeholder="name@example.com">
	<label for="ID">Eメールアドレス</label>
</div>
.form-floating.mb-3>input:email.form-control[placeholder]+label
<div class="form-floating mb-3">
	<input type="password" name="..." id="ID" class="form-control" placeholder="パスワード">
	<label for="ID">パスワード</label>
</div>
.form-floating.mb-3>input:p.form-control[placeholder]+label
<div class="form-floating mb-3">
	<textarea name="..." id="ID" class="form-control" placeholder="ここにコメントを残す"></textarea>
	<label for="ID">コメント</label>
</div>
.form-floating.mb-3>textarea.form-control[placeholder]+label
<textarea>cols="30" rows="10" の設定は不要なので展開後に削除してください
<div class="form-floating mb-3">
	<select name="..." id="ID" class="form-select" aria-label="フローティングラベル選択例">
		<option selected>この選択メニューを開く</option>
		<option value="1">その1</option>
		<option value="2">その2</option>
		<option value="3">その3</option>
	</select>
	<label for="ID">選択で動作</label>
</div>
.form-floating.mb-3>(select.form-select[aria-label]>option[selected]+option*3)+label(選択済みオプション+オプション3つの場合)
※展開後 selected="selected"selected="" になっていたら selected に修正してください

レイアウト

解説

ラベルつき

<div class="mb-3">
	<label for="ID" class="form-label">ラベルの例</label>
	<input type="text" name="..." class="form-control" id="ID" placeholder="入力プレースホルダーの例">
</div>
<div class="mb-3">
	<label for="ID2" class="form-label">もう1つのラベル</label>
	<input type="text" name="..." class="form-control" id="ID2" placeholder="もう1つの入力プレースホルダー">
</div>
(.mb-3>label.form-label+inp.form-control[placeholder])*2(項目が2つの場合)

フォームグリッド

<div class="row">
	<div class="col">
		<input type="text" name="..." class="form-control" placeholder="名字" aria-label="名字">
	</div>
	<div class="col">
		<input type="text" name="..." class="form-control" placeholder="名前" aria-label="名前">
	</div>
</div>
.row>(.col>inp.form-control[placeholder aria-label])*2(コントロールが2つの場合)

ガターつき(ラベルあり)

<form action="" class="row g-3">
	<div class="col-md-6">
		<label for="EmailID" class="form-label">Eメール</label>
		<input type="email" name="..." id="EmailID" class="form-control" placeholder="...">
	</div>
	<div class="col-md-6">
		<label for="PasswordID" class="form-label">パスワード</label>
		<input type="password" name="..." id="PasswordID" class="form-control" placeholder="...">
	</div>
	<div class="col-md-2">
		<label for="ZipID" class="form-label">郵便番号</label>
		<input type="text" name="..." id="ZipID" class="form-control" placeholder="...">
	</div>
	<div class="col-md-4">
		<label for="StateID" class="form-label">都道府県</label>
		<select name="..." id="StateID" class="form-select">
			<option value="..." selected>選択...</option>
			<option>...</option>
			<option>...</option>
			<option>...</option>
		</select>
	</div>
	<div class="col-md-6">
		<label for="CityID" class="form-label">市町村</label>
		<input type="text" name="..." id="CityID" class="form-control" placeholder="...">
	</div>
	<div class="col-12">
		<label for="AddressID" class="form-label">住所</label>
		<input type="text" name="..." id="AddressID" class="form-control" placeholder="1丁目2番3号">
	</div>
	<div class="col-12">
		<label for="Address2ID" class="form-label">住所2</label>
		<input type="text" name="..." id="Address2ID" class="form-control" placeholder="マンション名,部屋番号など">
	</div>
	<div class="col-12">
		<div class="form-check">
			<input type="checkbox" name="..." id="CheckID" class="form-check-input">
			<label for="CheckID" class="form-check-label">保存する</label>
		</div>
	</div>
	<div class="col-12">
		<button type="submit" class="btn btn-primary">サインイン</button>
	</div>
</form>
form.row.g-3>(.col-md-6>label.form-label+input:email.form-control[placeholder])+(.col-md-6>label.form-label+input:p.form-control[placeholder])+(.col-md-2>label.form-label+inp.form-control[placeholder])+(.col-md-4>label.form-label+select.form-select>option[selected]+option*3)+(.col-md-6>label.form-label+inp.form-control[placeholder])+(.col-12>label.form-label+inp.form-control[placeholder])*2+(.col-12.form-check>input:c.form-check-input+label.form-check-label)+(.col-12>btn:s.btn.btn-primary)(選択済みオプション+オプション3つ、.col-12 のコントロールが2つの場合)
※展開後 selected="" になっていたら selected に修正してください

水平フォーム

ラジオボタン
<form action="">
	<div class="row mb-3">
		<label for="EmailID" class="col-sm-2 col-form-label">Eメール</label>
		<div class="col-sm-10">
			<input type="email" name="..." id="EmailID" class="form-control" placeholder="...">
		</div>
	</div>
	<div class="row mb-3">
		<label for="PasswordID" class="col-sm-2 col-form-label">パスワード</label>
		<div class="col-sm-10">
			<input type="password" name="..." id="PasswordID" class="form-control" placeholder="...">
		</div>
	</div>
	<fieldset class="row mb-3">
		<legend class="col-sm-2 col-form-label pt-0">ラジオボタン</legend>
		<div class="col-sm-10">
			<div class="form-check">
				<input type="radio" name="Radios" id="Radios1ID" class="form-check-input" placeholder="..." value="option1">
				<label for="Radios1ID" class="form-check-label">オプション1</label>
			</div>
			<div class="form-check">
				<input type="radio" name="Radios" id="Radios2ID" class="form-check-input" placeholder="..." value="option2">
				<label for="Radios2ID" class="form-check-label">オプション2</label>
			</div>
			<div class="form-check">
				<input type="radio" name="Radios" id="RadiosID3" class="form-check-input" placeholder="..." value="option3">
				<label for="RadiosID3" class="form-check-label">オプション3</label>
			</div>
		</div>
	</fieldset>
	<div class="row mb-3">
		<div class="col-sm-10 offset-sm-2">
			<div class="form-check">
				<input type="checkbox" name="..." id="CheckID" class="form-check-input" placeholder="...">
				<label for="CheckID" class="form-check-label">ココをチェック</label>
			</div>
		</div>
	</div>
	<button type="submit" class="btn btn-primary">登録</button>
</form>
form>(.row.mb-3>label.col-sm-2.col-form-label+.col-sm-10>input:email.form-control[placeholder])+(.row.mb-3>label.col-sm-2.col-form-label+.col-sm-10>input:p.form-control[placeholder])+(fst.row.mb-3>leg.col-sm-2.col-form-label.pt-0+col-sm-10>(.form-check>input:r.form-check-input[placeholder value]+label.form-check-label)*3)+(.row.mb-3>.col-sm-10.offset-sm-2>.form-check>input:c.form-check-input+label.form-check-label)+btn:s.btn.btn-primary(ラジオボタンが3つの場合)

自動サイズ設定

@
<form action="" class="row gy-2 gx-3 align-items-center">
	<div class="col-auto">
		<label for="InputID" class="visually-hidden">名前</label>
		<input type="text" name="..." id="InputID" class="form-control" placeholder="ブート太郎">
	</div>
	<div class="col-auto">
		<label for="InputGroupID" class="visually-hidden">ユーザー名</label>
		<div class="input-group">
			<span class="input-group-text">@</span>
			<input type="text" name="..." id="InputGroupID" class="form-control" placeholder="ユーザー名">
		</div>
	</div>
	<div class="col-auto">
		<label for="SelectID" class="visually-hidden">好み</label>
		<select name="..." id="SelectID" class="form-select">
			<option value="..." selected>選択...</option>
			<option value="1">1:</option>
			<option value="2">2:</option>
			<option value="3">3:</option>
		</select>
	</div>
	<div class="col-auto">
		<div class="form-check">
			<input type="checkbox" name="..." id="CheckID" class="form-check-input">
			<label for="CheckID" class="form-check-label">記憶する</label>
		</div>
	</div>
	<div class="col-auto">
		<button type="submit" class="btn btn-primary">登録</button>
	</div>
</form>
form.row.gy-2.gx-3.align-items-center>(.col-auto>label.visually-hidden+inp.form-control[placeholder])+(.col-auto>label.visually-hidden+.input-group>span.input-group-text>+inp.form-control[placeholder])+(.col-auto>label.visually-hidden+select.form-select>option[selected]+option*3)+(.col-auto>.form-check>input:c.form-check-input+label.form-check-label)+(.col-auto>btn:s.btn.btn-primary)(選択済みオプション+オプション3つの場合)
※展開後 selected="" になっていたら selected に修正してください

横並びフォーム

@
<form action="" class="row row-cols-lg-auto g-3 align-items-center">
	<div class="col-12">
		<label for="InputID" class="visually-hidden">名前</label>
		<input type="text" name="..." id="InputID" class="form-control" placeholder="ブート太郎">
	</div>
	<div class="col-12">
		<label for="InputGroupID" class="visually-hidden">ユーザー名</label>
		<div class="input-group">
			<span class="input-group-text">@</span>
			<input type="text" name="..." id="InputGroupID" class="form-control" placeholder="ユーザー名">
		</div>
	</div>
	<div class="col-12">
		<label for="SelectID" class="visually-hidden">好み</label>
		<select name="..." id="Select" class="form-select">
			<option value="..." selected>選択...</option>
			<option value="1">1:</option>
			<option value="2">2:</option>
			<option value="3">3:</option>
		</select>
	</div>
	<div class="col-12">
		<div class="form-check">
			<input type="checkbox" name="..." id="CheckID" class="form-check-input">
			<label for="CheckID" class="form-check-label">記憶する</label>
		</div>
	</div>
	<div class="col-12">
		<button type="submit" class="btn btn-primary">登録</button>
	</div>
</form>
form.row.row-cols-lg-auto.g-3.align-items-center>(.col-12>label.visually-hidden+inp.form-control[placeholder])+(.col-12>label.visually-hidden+.input-group>span.input-group-text+inp.form-control[placeholder])+(.col-12>label.visually-hidden+select.form-select>option[selected]+option*3)+(.col-12>.form-check>input:c.form-check-input+label.form-check-label)+(.col-12>btn:s.btn.btn-primary)(選択済みオプション+オプション3つの場合)
※展開後 selected="" になっていたら selected に修正してください

入力検証

解説

カスタムスタイル

入力完了!
名字を入力してください
入力完了!
名前を入力してください
@
入力完了!
ユーザー名を入力してください
入力完了!
有効な郵便番号を入力してください
入力完了!
有効な都道府県を選択してください
入力完了!
有効な住所を入力してください
送信する前に同意する必要があります。
<form action="" class="row g-3 needs-validation" novalidate>
	<div class="col-md-4">
		<label for="ID1" class="form-label">名字</label>
		<input type="text" name="..." id="ID1" class="form-control" value="ブート" required>
		<div class="valid-feedback">入力完了!</div>
		<div class="invalid-feedback">名字を入力してください</div>
	</div>
	<div class="col-md-4">
		<label for="ID2" class="form-label">名前</label>
		<input type="text" name="..." id="ID2" class="form-control" value="太郎" required>
		<div class="valid-feedback">入力完了!</div>
		<div class="invalid-feedback">名前を入力してください</div>
	</div>
	<div class="col-md-4">
		<label for="ID3" class="form-label">ユーザー名</label>
		<div class="input-group has-validation">
			<span class="input-group-text" id="addonID">@</span>
			<input type="text" name="..." class="form-control" id="ID3" aria-describedby="addonID" value="..." required>
			<div class="valid-feedback">入力完了!</div>
			<div class="invalid-feedback">ユーザー名を入力してください</div>
		</div>
	</div>
	<div class="col-md-3">
		<label for="ID4" class="form-label">郵便番号</label>
		<input type="text" name="..." id="ID4" class="form-control" value="..." required>
		<div class="valid-feedback">入力完了!</div>
		<div class="invalid-feedback">有効な郵便番号を入力してください</div>
	</div>
	<div class="col-md-3">
		<label for="ID5" class="form-label">都道府県</label>
		<select id="ID5" name="..." class="form-select" required>
			<option value="..." selected>選択...</option>
			<option value="...">...</option>
		</select>
		<div class="valid-feedback">入力完了!</div>
		<div class="invalid-feedback">有効な都道府県を選択してください</div>
	</div>
	<div class="col-md-6">
		<label for="ID6" class="form-label">住所</label>
		<input type="text" name="..." id="ID6" class="form-control" value="..." required>
		<div class="valid-feedback">入力完了!</div>
		<div class="invalid-feedback">有効な住所を入力してください</div>
	</div>
	<div class="col-12">
		<div class="form-check">
			<input class="form-check-input" type="checkbox" id="ID7" value="..." required>
			<label for="ID7" name="..." class="form-check-label">利用規約に同意する</label>
			<div class="invalid-feedback">送信する前に同意する必要があります。</div>
		</div>
	</div>
	<div class="col-12">
		<button class="btn btn-primary" type="submit">フォームの送信</button>
	</div>
</form>
form.row.g-3.needs-validation[novalidate]>(.col-md-4>label.form-label+inp.form-control[value required]+.valid-feedback+.invalid-feedback)*2+(.col-md-4>label.form-label+.input-group.has-validation>span.input-group-text#addonID+inp.form-control[value placeholder aria-describedby="addonID" required]+.valid-feedback+.invalid-feedback)+(.col-md-3>label.form-label+inp.form-control[value required]+.valid-feedback+.invalid-feedback)+(.col-md-3>label.form-label+(select.form-select[value required]>option[selected]+option)+.valid-feedback+.invalid-feedback)+(.col-md-6>label.form-label+inp.form-control[value required]+.valid-feedback+.invalid-feedback)+(.col-12>.form-check>input:c.form-check-input[value required]+label.form-check-label+.invalid-feedback)+(.col-12>btn:s.btn.btn-primary).col-md-4 のコントロールが2つの場合、インプットグループのaddonID部分は揃えること)
※展開後 novalidate="", required="", selected="" になっていたら novalidate, required, selected にそれぞれ修正してください

ツールチップスタイル

入力完了!
名字を入力してください
入力完了!
名前を入力してください
@
入力完了!
ユーザー名を入力してください
入力完了!
有効な郵便番号を入力してください
入力完了!
有効な都道府県を選択してください
入力完了!
有効な住所を入力してください
送信する前に同意する必要があります。
<form action="" class="row g-3 needs-validation" novalidate>
	<div class="col-md-4 position-relative">
		<label for="ID1" class="form-label">名字</label>
		<input type="text" name="..." id="ID1" class="form-control" value="ブート" required>
		<div class="valid-tooltip">入力完了!</div>
		<div class="invalid-tooltip">名字を入力してください</div>
	</div>
	<div class="col-md-4 position-relative">
		<label for="ID2" class="form-label">名前</label>
		<input type="text" name="..." id="ID2" class="form-control" value="太郎" required>
		<div class="valid-tooltip">入力完了!</div>
		<div class="invalid-tooltip">名前を入力してください</div>
	</div>
	<div class="col-md-4 position-relative">
		<label for="ID3" class="form-label">ユーザー名</label>
		<div class="input-group has-validation">
			<span class="input-group-text" id="addonID">@</span>
			<input type="text" name="..." class="form-control" id="ID3" aria-describedby="addonID" value="..." required>
			<div class="valid-tooltip">入力完了!</div>
			<div class="invalid-tooltip">ユーザー名を入力してください</div>
		</div>
	</div>
	<div class="col-md-3 position-relative">
		<label for="ID4" class="form-label">郵便番号</label>
		<input type="text" name="..." id="ID4" class="form-control" value="..." required>
		<div class="valid-tooltip">入力完了!</div>
		<div class="invalid-tooltip">有効な郵便番号を入力してください</div>
	</div>
	<div class="col-md-3 position-relative">
		<label for="ID5" class="form-label">都道府県</label>
		<select id="ID5" name="..." class="form-select" required>
			<option value="..." selected>選択...</option>
			<option value="...">...</option>
		</select>
		<div class="valid-tooltip">入力完了!</div>
		<div class="invalid-tooltip">有効な都道府県を選択してください</div>
	</div>
	<div class="col-md-6 position-relative">
		<label for="ID6" class="form-label">住所</label>
		<input type="text" name="..." id="ID6" class="form-control" value="..." required>
		<div class="valid-tooltip">入力完了!</div>
		<div class="invalid-tooltip">有効な住所を入力してください</div>
	</div>
	<div class="col-12 position-relative">
		<div class="form-check">
			<input class="form-check-input" type="checkbox" id="ID7" value="..." required>
			<label for="ID7" name="..." class="form-check-label">利用規約に同意する</label>
			<div class="invalid-tooltip">送信する前に同意する必要があります。</div>
		</div>
	</div>
	<div class="col-12">
		<button class="btn btn-primary" type="submit">フォームの送信</button>
	</div>
</form>
form.row.g-3.needs-validation[novalidate]>(.col-md-4.position-relative>label.form-label+inp.form-control[value required]+.valid-tooltip+.invalid-tooltip)*2+(.col-md-4.position-relative>label.form-label+.input-group.has-validation>span.input-group-text#addonID+inp.form-control[value placeholder aria-describedby="addonID" required]+.valid-tooltip+.invalid-tooltip)+(.col-md-3.position-relative>label.form-label+inp.form-control[value required]+.valid-tooltip+.invalid-tooltip)+(.col-md-3.position-relative>label.form-label+(select.form-select[value required]>option[selected]+option)+.valid-tooltip+.invalid-tooltip)+(.col-md-6.position-relative>label.form-label+inp.form-control[value required]+.valid-tooltip+.invalid-tooltip)+(.col-12.position-relative>.form-check>input:c.form-check-input[value required]+label.form-check-label+.invalid-tooltip)+(.col-12>btn:s.btn.btn-primary).col-md-4 のコントロールが2つの場合、インプットグループのaddonID部分は揃えること)
※展開後 novalidate="", required="", selected="" になっていたら novalidate, required, selected にそれぞれ修正してください

コンポーネント

アコーディオン

解説

これが最初のアイテムのアコーディオン本体。折り畳みプラグインが各要素のスタイル設定に使用する適切なクラスを追加するまで、デフォルトでは非表示になっている。これらのクラスは、CSSトランジションを経由した表示と非表示だけでなく、全体的な外観を制御。カスタムCSSを使用するか、デフォルトの変数を上書きして、これらのいずれかが変更可能。遷移によってオーバーフローが制限されるが、ほぼすべてのHTMLが .accordion-body 内に入る可能性があることにも注意。

これは2番目のアイテムのアコーディオン本体。折り畳みプラグインが各要素のスタイル設定に使用する適切なクラスを追加するまで、デフォルトでは非表示になっている。これらのクラスは、CSSトランジションを経由した表示と非表示だけでなく、全体的な外観を制御。カスタムCSSを使用するか、デフォルトの変数を上書きして、これらのいずれかが変更可能。遷移によってオーバーフローが制限されるが、ほぼすべてのHTMLが .accordion-body 内に入る可能性があることにも注意。

これは3番目のアイテムのアコーディオン本体。折り畳みプラグインが各要素のスタイル設定に使用する適切なクラスを追加するまで、デフォルトでは非表示になっている。これらのクラスは、CSSトランジションを経由した表示と非表示だけでなく、全体的な外観を制御。カスタムCSSを使用するか、デフォルトの変数を上書きして、これらのいずれかが変更可能。遷移によってオーバーフローが制限されるが、ほぼすべてのHTMLが .accordion-body 内に入る可能性があることにも注意。
<div class="accordion" id="accordionID">
	<div class="accordion-item">
		<h4 class="accordion-header" id="headerID1"><button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseID1" aria-expanded="false" aria-controls="collapseID1">アコーディオン・アイテム #1</button></h4>
		<div id="collapseID1" class="accordion-collapse collapse" aria-labelledby="headerID1" data-bs-parent="#accordionID">
			<div class="accordion-body">
				<strong>これが最初のアイテムのアコーディオン本体。</strong>...
			</div>
		</div>
	</div>
	<div class="accordion-item">
		<h4 class="accordion-header" id="headerID2"><button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseID2" aria-expanded="false" aria-controls="collapseID2">アコーディオン・アイテム #2</button></h4>
		<div id="collapseID2" class="accordion-collapse collapse" aria-labelledby="headerID2" data-bs-parent="#accordionID">
			<div class="accordion-body">
				<strong>これは2番目のアイテムのアコーディオン本体。</strong>...
			</div>
		</div>
	</div>
	<div class="accordion-item">
		<h4 class="accordion-header" id="headerID3"><button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseID3" aria-expanded="false" aria-controls="collapseID3">アコーディオン・アイテム #3</button></h4>
		<div id="collapseID3" class="accordion-collapse collapse" aria-labelledby="headerID3" data-bs-parent="#accordionID">
			<div class="accordion-body">
				<strong>これは3番目のアイテムのアコーディオン本体。</strong>...
			</div>
		</div>
	</div>
</div>
.accordion#accordionID>(.accordion-item>(h4.accordion-header#headerID$>btn.accordion-button.collapsed[type="button" data-bs-toggle=collapse data-bs-target="#collapseID$" aria-expanded="false" aria-controls="collapseID$"])+.accordion-collapse.collapse#collapseID$[aria-labelledby="headerID$" data-bs-parent="#accordionID"]>.accordion-body)*3(アイテムが3つの場合。accordionID, headerID, collapseID部分は揃えること)

アラート

解説

標準のアラート

<div class="alert alert-primary alert-dismissible fade show" role="alert">
	単純なprimaryアラート。
	<button class="btn-close" type="button" data-bs-dismiss="alert" aria-label="閉じる"></button>
</div>

primary.alert.alert-primary.alert-dismissible.fade.show[role="alert"]>{}+btn.btn-close[type="button" data-bs-dismiss="alert" aria-label="閉じる"]

secondary.alert.asecondarylert-secondary.alert-dismissible.fade.show[role="alert"]>{}+btn.btn-close[type="button" data-bs-dismiss="alert" aria-label="閉じる"]

success.alert.alert-success.alert-dismissible.fade.show[role="alert"]>{}+btn.btn-close[type="button" data-bs-dismiss="alert" aria-label="閉じる"]

danger.alert.alert-danger.alert-dismissible.fade.show[role="alert"]>{}+btn.btn-close[type="button" data-bs-dismiss="alert" aria-label="閉じる"]

warning.alert.alert-warning.alert-dismissible.fade.show[role="alert"]>{}+btn.btn-close[type="button" data-bs-dismiss="alert" aria-label="閉じる"]

info.alert.alert-info.alert-dismissible.fade.show[role="alert"]>{}+btn.btn-close[type="button" data-bs-dismiss="alert" aria-label="閉じる"]

light.alert.alert-light.alert-dismissible.fade.show[role="alert"]>{}+btn.btn-close[type="button" data-bs-dismiss="alert" aria-label="閉じる"]

dark.alert.alert-dark.alert-dismissible.fade.show[role="alert"]>{}+btn.btn-close[type="button" data-bs-dismiss="alert" aria-label="閉じる"]

追加コンテンツ

<div class="alert alert-success" role="alert">
	<h4 class="alert-heading">よくやった!</h4>
	<p>ええ、あなたはこの重要な警告メッセージを正常に読むことができます。このサンプルテキストは、少し長く実行されるため、アラート内の空白がこの種のコンテンツでどのように動作するかを確認することができます。</p>
	<hr>
	<p class="mb-0">必要なときはいつでもマージンユーティリティを使用して、素敵に整えてください。</p>
</div>
.alert.alert-success[role="alert"]>h4.alert-heading+p+hr+p.mb-0
.alert-success の部分はお好みのアラートカラーを選んでください

バッジ

解説

標準のバッジ

Primary Secondary Success Danger Warning Info Light Dark
<span class="badge bg-primary">New</span>

Primaryspan.badge.bg-primary

Secondaryspan.badge.bg-secondary

Successspan.badge.bg-success

Dangerspan.badge.bg-danger

Warningspan.badge.bg-warning.text-dark

Infospan.badge.bg-info.text-dark

Lightspan.badge.bg-light.text-dark

Darkspan.badge.bg-dark

ピルバッジ

Primary Secondary Success Danger Warning Info Light Dark
<span class="badge rounded-pill bg-primary">New</span>

Primaryspan.badge.rounded-pill.bg-primary

Secondaryspan.badge.rounded-pill.bg-secondary

Successspan.badge.rounded-pill.bg-success

Dangerspan.badge.rounded-pill.bg-danger

Warningspan.badge.rounded-pill.bg-warning.text-dark

Infospan.badge.rounded-pill.bg-info.text-dark

Lightspan.badge.rounded-pill.bg-light.text-dark

Darkspan.badge.rounded-pill.bg-dark

ボタン

解説

標準のボタン

<button type="..." class="btn btn-primary">Primary</button>

Primarybtn[type].btn.btn-primary

Secondarybtn[type].btn.btn-secondary

Successbtn[type].btn.btn-success

Dangerbtn[type].btn.btn-danger

Warningbtn[type].btn.btn-warning.text-dark

Infobtn[type].btn.btn-info.text-dark

Lightbtn[type].btn.btn-light.text-dark

Darkbtn[type].btn.btn-dark

Linkbtn[type].btn.btn-link

アウトラインボタン

<button type="..." class="btn btn-outline-primary">Primary</button>

Primarybtn[type].btn.btn-outline-primary

Secondarybtn[type].btn.btn-outline-secondary

Successbtn[type].btn.btn-outline-success

Dangerbtn[type].btn.btn-outline-danger

Warningbtn[type].btn.btn-outline-warning.text-dark

Infobtn[type].btn.btn-outline-info.text-dark

Lightbtn[type].btn.btn-outline-light.text-dark

Darkbtn[type].btn.btn-outline-dark

ボタンタグ

リンク
<a href="..." class="btn btn-primary" role="button">リンク</a>
a.btn.btn-primary[role="button"]
.btn-primary の部分はお好みのボタンカラーを選んでください
<input type="button" value="入力する" class="btn btn-primary">
input:b.btn.btn-primary
.btn-primary の部分はお好みのボタンカラーを選んでください
<input type="submit" value="登録する" class="btn btn-primary">
input:s.btn.btn-primary
.btn-primary の部分はお好みのボタンカラーを選んでください
<input type="reset" value="リセット" class="btn btn-primary">
input:reset.btn.btn-primary
.btn-primary の部分はお好みのボタンカラーを選んでください

ブロックボタン

<div class="d-grid gap-2">
	<button type="button" class="btn btn-primary">ボタン</button>
	<button type="button" class="btn btn-primary">ボタン</button>
</div>
.d-grid.gap-2>btn[type].btn.btn-primary*2(ボタンが2つの場合)
.btn-primary の部分はお好みのボタンカラーを選んでください
<button type="button" class="btn btn-primary w-100">ボタン</button>
btn[type].btn.btn-primary.w-100
.btn-primary の部分はお好みのボタンカラーを選んでください
ボタン
<a href="..." class="btn btn-primary w-100" role="button">ボタン</a>
a.btn.btn-primary.w-100[role="button"]
.btn-primary の部分はお好みのボタンカラーを選んでください

モバイルではブロックボタン

<div class="d-grid gap-2 d-md-block">
	<button class="btn btn-primary" type="button">ボタン</button>
	<button class="btn btn-primary" type="button">ボタン</button>
</div>
.d-grid.gap-2.d-md-block>btn[type].btn.btn-primary*2(ボタンが2つの場合)
.btn-primary の部分はお好みのボタンカラーを選んでください
<div class="d-flex flex-column flex-md-row gap-2">
	<a href="..." class="btn btn-primary" role="button">ボタン</a>
	<a href="..." class="btn btn-primary" role="button">ボタン</a>
</div>
.d-flex.flex-column.flex-md-row.gap-2>a.btn.btn-primary.w-100[role="button"]*2(ボタンが2つの場合)
.btn-primary の部分はお好みのボタンカラーを選んでください

ボタングループ

解説

基本のボタングループ

<div class="btn-group" role="group" aria-label="ボタングループ">
	<button class="btn btn-primary" type="button">1</button>
	<button class="btn btn-primary" type="button">2</button>
	<button class="btn btn-primary" type="button">3</button>
</div>
.btn-group[role="group" aria-label]>btn.btn.btn-primary[type="button"]*3(ボタンが3つの場合)
.btn-primary の部分はお好みのボタンカラーを選んでください

ボタンツールバー

<div class="btn-toolbar" role="toolbar" aria-label="ボタングループつきツールバー">
	<div class="btn-group me-2" role="group" aria-label="第1グループ">
		<button class="btn btn-secondary" type="button">1</button>
		<button class="btn btn-secondary" type="button">2</button>
		<button class="btn btn-secondary" type="button">3</button>
		<button class="btn btn-secondary" type="button">4</button>
	</div>
	<div class="btn-group me-2" role="group" aria-label="第2グループ">
		<button class="btn btn-secondary" type="button">5</button>
		<button class="btn btn-secondary" type="button">6</button>
		<button class="btn btn-secondary" type="button">7</button>
	</div>
	<div class="btn-group" role="group" aria-label="第3グループ">
		<button class="btn btn-secondary" type="button">8</button>
		<button class="btn btn-secondary" type="button">9</button>
	</div>
</div>
.btn-toolbar[role="toolbar" aria-label]>(.btn-group.me-2[role="group" aria-label]>btn.btn.btn-secondary[type="button"]*4)+(.btn-group.me-2[role="group" aria-label]>btn.btn.btn-secondary[type="button"]*3)+(.btn-group[role="group" aria-label]>btn.btn.btn-secondary[type="button"]*2)(ボタンが4,3,2の3つのグループの場合)
.btn-secondary の部分はお好みのカラーを選んでください

ドロップダウンボタン付きボタングループ

<div class="btn-group" role="group" aria-label="ボタングループ">
	<button class="btn btn-primary" type="button">1</button>
	<button class="btn btn-primary" type="button">2</button>
	<div class="btn-group" role="group">
		<button class="btn btn-primary dropdown-toggle" id="dropID" type="button" data-bs-toggle="dropdown" aria-expanded="false">ドロップダウン</button>
		<ul class="dropdown-menu" aria-labelledby="dropID">
			<li><a href="..." class="dropdown-item">ドロップダウンリンク</a></li>
			<li><a href="..." class="dropdown-item">ドロップダウンリンク</a></li>
		</ul>
	</div>
</div>
.btn-group[role="group" aria-label]>(btn.btn.btn-primary[type="button"])*2+(.btn-group[role="group"]>btn.btn.btn-primary.dropdown-toggle#dropID[type="button" data-bs-toggle="dropdown" aria-expanded="false"]+ul.dropdown-menu[aria-labelledby="dropID"]>(li>a.dropdown-item)*2)(ボタン2つ+ドロップダウンリンク2つの場合。ドロップダウンのdropID部分は揃えること)
.btn-primary の部分はお好みのボタンカラーを選んでください

縦積みボタングループ

<div class="btn-group-vertical" role="group" aria-label="ボタングループ">
	<button class="btn btn-primary" type="button">1</button>
	<button class="btn btn-primary" type="button">2</button>
	<button class="btn btn-primary" type="button">3</button>
</div>
.btn-group-vertical[role="group" aria-label]>btn.btn.btn-primary[type="button"]*3(ボタンが3つの場合)
.btn-primary の部分はお好みのボタンカラーを選んでください

カード

解説

基本の設定

カードのタイトル
カードのサブタイトル

以下のテキストを追加のコンテンツへの自然な導入としてサポート。カードのコンテンツ。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。

最終更新3分前

リンク1 リンク2
<div class="card">
	<div class="card-body">
		<h5 class="card-title">カードのタイトル</h5>
		<h6 class="card-subtitle mb-2 text-muted">カードのサブタイトル</h6>
		<p class="card-text">カードのコンテンツ。...</p>
		<p class="card-text"><small class="text-muted">最終更新3分前</small></p>
		<a href="..." class="card-link">リンク1</a>
		<a href="..." class="card-link">リンク2</a>
	</div>
</div>

.card>.card-body>p.card-text

カードのタイトル:h5.card-title

カードのサブタイトル:h6.card-subtitle.mb-2.text-muted

小さめのテキストp.card-text>small.text-muted

リンクの横並びa.card-link*2(リンクが2つの場合)

リストグループ付き

カードのタイトルに基づいて作成し、カードのコンテンツの大部分を構成する簡単なサンプルテキスト。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。

  • アイテム1
  • アイテム2
  • アイテム3
<div class="card">
	<div class="card-body">
		<p class="card-text">カードのコンテンツ。...</p>
	</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>
.card>(.card-body>p.card-text)+(ul.list-group.list-group-flush>li.list-group-item*3)(リストアイテムが3つの場合)

ヘッダ・フッタ付き

カードのヘッダ

カードのタイトルに基づいて作成し、カードのコンテンツの大部分を構成する簡単なサンプルテキスト。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。

<div class="card">
	<div class="card-header">カードのヘッダ</div>
	<div class="card-body">
		<p class="card-text">カードのコンテンツ。...</p>
	</div>
	<div class="card-footer text-muted">カードのフッタ</div>
</div>
.card>.card-header+(.card-body>p.card-text)+.card-footer.text-muted

画像の配置

カードの上部に画像
プレースホルダカードの画像
カードのタイトル

これは、追加コンテンツへの自然な導入として以下のテキストをサポートする、より幅広いカードです。このコンテンツはもう少し長くなります。

<div class="card">
	<img src="..." alt="カードの画像" class="card-img-top">
	<div class="card-body">
		<h5 class="card-title">カードのタイトル</h5>
		<p class="card-text">カードのコンテンツ。...</p>
	</div>
</div>
.card>img.card-img-top+(.card-body>h5.card-title+p.card-text)
カードの下部に画像
カードのタイトル

これは、追加コンテンツへの自然な導入として以下のテキストをサポートする、より幅広いカードです。このコンテンツはもう少し長くなります。

プレースホルダカードの画像
<div class="card">
	<div class="card-body">
		<h5 class="card-title">カードのタイトル</h5>
		<p class="card-text">カードのコンテンツ。...</p>
	</div>
	<img src="..." alt="カードの画像" class="card-img-bottom">
</div>
.card>(.card-body>h5.card-title+p.card-text)+img.card-img-bottom
画像のみのカード
プレースホルダカードの画像
<div class="card">
	<img src="..." alt="カードの画像" class="card-img">
</div>
.card>img.card-img
画像のオーバーレイ
プレースホルダカードの画像
カードのタイトル

これは、追加コンテンツへの自然な導入として以下のテキストをサポートする、より幅広いカードです。このコンテンツはもう少し長くなります。

<div class="card">
	<img src="..." alt="カードの画像" class="card-img">
	<div class="card-img-overlay">
		<h5 class="card-title">カードのタイトル</h5>
		<p class="card-text">カードのコンテンツ。...</p>
	</div>
</div>
.card>img.card-img+(.card-img-overlay>h5.card-title+p.card-text)

水平スタイル

Placeholder画像
カードのタイトル

これは、追加コンテンツへの自然な導入として、以下のサポートテキストを含む幅の広いカード。このコンテンツは少し長くなっている 。

<div class="card">
	<div class="row g-0">
		<div class="col-md-4">
			<img src="..." alt="..." class="card-img">
		</div>
		<div class="col-md-8">
			<div class="card-body">
				<h5 class="card-title">カードのタイトル</h5>
				<p class="card-text">カードのコンテンツ。...</p>
			</div>
		</div>
	</div>
</div>
.card>.row.g-0>(.col-md-4>img.card-img)+(.col-md-8>.card-body>h5.card-title+p.card-text)

カードグループ

プレースホルダカード1の画像
カード1のタイトル

これは、追加コンテンツへの自然な導入として以下のテキストをサポートする、より幅広いカードです。このコンテンツはもう少し長くなります。

プレースホルダカード2の画像
カード2のタイトル

このカードには、追加のコンテンツへの自然な導入として以下のサポートテキストがあります。

プレースホルダカード3の画像
カード3のタイトル

これは、追加コンテンツへの自然な導入として以下のテキストをサポートする、より幅広いカードです。 このカードは、同じ高さのアクションを示す最初のものよりも長いコンテンツを持っています。

<div class="card-group">
	<div class="card">
		<img src="..." alt="カード1の画像" class="card-img-top">
		<div class="card-body">
			<h5 class="card-title">カード1のタイトル</h5>
			<p class="card-text">カード1のコンテンツ。...</p>
		</div>
	</div>
	<div class="card">
		<img src="..." alt="カード2の画像" class="card-img-top">
		<div class="card-body">
			<h5 class="card-title">カード2のタイトル</h5>
			<p class="card-text">カード2のコンテンツ。...</p>
		</div>
	</div>
	<div class="card">
		<img src="..." alt="カード3の画像" class="card-img-top">
		<div class="card-body">
			<h5 class="card-title">カード3のタイトル</h5>
			<p class="card-text">カード3のコンテンツ。...</p>
		</div>
	</div>
</div>
.card-group>(.card>img.card-img-top+(.card-body>h5.card-title+p.card-text))*3(カードが3つの場合)

グリッドカード

プレースホルダカード1の画像
カード1のタイトル

これは、追加コンテンツへの自然な導入として以下のテキストをサポートする、より幅広いカードです。このコンテンツはもう少し長くなります。

プレースホルダカード2の画像
カード2のタイトル

これは、追加コンテンツへの自然な導入として以下のテキストをサポートする、より幅広いカードです。このコンテンツはもう少し長くなります。

プレースホルダカード3の画像
カード3のタイトル

これは、追加コンテンツへの自然な導入として以下のテキストをサポートする、より幅広いカードです。このコンテンツはもう少し長くなります。

<div class="row row-cols-1 row-cols-md-3 g-4">
	<div class="col">
		<div class="card">
			<img src="..." alt="..." class="card-img-top">
			<div class="card-body">
				<h5 class="card-title">カード1のタイトル</h5>
				<p class="card-text">カード1のコンテンツ。...</p>
			</div>
		</div>
	</div>
	<div class="col">
		<div class="card">
			<img src="..." alt="..." class="card-img-top">
			<div class="card-body">
				<h5 class="card-title">カード2のタイトル</h5>
				<p class="card-text">カード2のコンテンツ。...</p>
			</div>
		</div>
	</div>
	<div class="col">
		<div class="card">
			<img src="..." alt="..." class="card-img-top">
			<div class="card-body">
				<h5 class="card-title">カード3のタイトル</h5>
				<p class="card-text">カード3のコンテンツ。...</p>
			</div>
		</div>
	</div>
</div>
.row.row-cols-1.row-cols-md-3.g-4>(.col>.card>img.card-img-top+(.card-body>h5.card-title+p.card-text))*3(カードが3つの場合)

折り畳み

解説

ボタン式の折り畳み

折り畳みコンポーネントのプレースホルダーコンテンツ。...
<button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseID" aria-expanded="false" aria-controls="collapseID">ボタン</button>
<div class="collapse mt-3" id="collapseID">
	<div class="card card-body">
		折り畳みコンポーネントのプレースホルダーコンテンツ。...
	</div>
</div>
btn.btn.btn-primary[type="button" data-bs-toggle="collapse" data-bs-target="#collapseID" aria-expanded="false" aria-controls="collapseID"]+(.collapse.mt-3#collapseID>.card.card-body)collapseID部分は揃えること)
.btn-primary の部分はお好みのボタンカラーを選んでください

リンク式の折り畳み

折り畳みコンポーネントのプレースホルダーコンテンツ。...
<a href="#collapseID" data-bs-toggle="collapse" aria-expanded="false" aria-controls="collapseID">リンク</a>
<div class="collapse mt-3" id="collapseID">
	<div class="card card-body">
		折り畳みコンポーネントのプレースホルダーコンテンツ。...
	</div>
</div>
a[href="#collapseID" data-bs-toggle="collapse" aria-expanded="false" aria-controls="collapseID"]+(.collapse.mt-3#collapseID>.card.card-body)collapseID部分は揃えること)

リストグループ

解説

基本のリストグループ

  • アイテム1
  • アイテム2
  • アイテム3
  • アクティブアイテム
  • 無効のアイテム
<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>
	<li class="list-group-item active" aria-current="true">アクティブアイテム</li>
	<li class="list-group-item disabled" aria-disabled="true">無効のアイテム</li>
</ul>

ul.list-group>li.list-group-item*3(リストアイテムが3つの場合)

アクティブアイテム:li.list-group-item.active[aria-current="true"]

無効のアイテム:li.list-group-item.disabled[aria-disabled="true"]

リンク付きリストグループ

<div class="list-group">
	<a href="..." class="list-group-item list-group-item-action">リンクアイテム1</a>
	<a href="..." class="list-group-item list-group-item-action">リンクアイテム2</a>
	<a href="..." class="list-group-item list-group-item-action">リンクアイテム3</a>
	<a href="..." class="list-group-item list-group-item-action active" aria-current="true">アクティブリンクアイテム</a>
	<a href="..." class="list-group-item list-group-item-action disabled" tabindex="-1" aria-disabled="true">無効のリンクアイテム</a>
</div>

.list-group>a.list-group-item.list-group-item-action*3(リンクアイテムが3つの場合)

アクティブリンクアイテム:a.list-group-item.list-group-item-action.active[aria-current="true"]

無効のリンクアイテム:a.list-group-item.list-group-item-action.disabled[tabindex="-1" aria-disabled="true"]

番号付きリストアイテム

  1. アイテム
  2. アイテム
  3. アイテム
<ol class="list-group list-group-numbered">
	<li class="list-group-item">アイテム</li>
	<li class="list-group-item">アイテム</li>
	<li class="list-group-item">アイテム</li>
</ol>
ol.list-group.list-group-numbered>li.list-group-item*3(リストアイテムが3つの場合)

バッジ付きリストグループ

  • リストアイテム1 14
  • リストアイテム2 2
  • リストアイテム3 1
<ul class="list-group">
	<li class="list-group-item d-flex justify-content-between align-items-center">
		リストアイテム1
		<span class="badge bg-primary rounded-pill">14</span>
	</li>
	<li class="list-group-item d-flex justify-content-between align-items-center">
		リストアイテム2
		<span class="badge bg-primary rounded-pill">2</span>
	</li>
	<li class="list-group-item d-flex justify-content-between align-items-center">
		リストアイテム3
		<span class="badge bg-primary rounded-pill">1</span>
	</li>
</ul>
ul.list-group>(li.list-group-item.d-flex.justify-content-between.align-items-center>{}+span.badge.bg-primary.rounded-pill)*3(リストアイテムが3つの場合)
.bg-primary の部分はお好みのバッジカラーを選んでください

ヘッダありリンク付きリストグループ

<div class="list-group">
	<a href="..." class="list-group-item list-group-item-action">
		<div class="d-flex w-100 justify-content-between">
			<h5 class="mb-1">リストグループ1のヘッダ</h5>
			<small>3日前</small>
		</div>
		<p class="mb-1">段落内のプレースホルダーコンテンツ。</p>
		<small>サブコンテンツ</small>
	</a>
	<a href="..." class="list-group-item list-group-item-action">
		<div class="d-flex w-100 justify-content-between">
			<h5 class="mb-1">リストグループ2のヘッダ</h5>
			<small>3日前</small>
		</div>
		<p class="mb-1">段落内のプレースホルダーコンテンツ。</p>
		<small>サブコンテンツ</small>
	</a>
	<a href="..." class="list-group-item list-group-item-action">
		<div class="d-flex w-100 justify-content-between">
			<h5 class="mb-1">リストグループ3のヘッダ</h5>
			<small>3日前</small>
		</div>
		<p class="mb-1">段落内のプレースホルダーコンテンツ。</p>
		<small>サブコンテンツ</small>
	</a>
</div>
.list-group>(a.list-group-item.list-group-item-action>(div.d-flex.w-100.justify-content-between>h5.mb-1+small)+p.mb-1+small)*3(リストアイテムが3つの場合)

チェックボックス

<div class="list-group">
	<label for="..." class="list-group-item">
		<input type="checkbox" name="..." id="..." class="form-check-input me-1" value="...">
		チェックボックス1
	</label>
	<label for="..." class="list-group-item">
		<input type="checkbox" name="..." id="..." class="form-check-input me-1" value="...">
		チェックボックス2
	</label>
	<label for="..." class="list-group-item">
		<input type="checkbox" name="..." id="..." class="form-check-input me-1" value="...">
		チェックボックス3
	</label>
</div>
.list-group>(label.list-group-item>input:c.form-check-input.me-1[value]+{})*3(リストアイテムが3つの場合)

タブ切替パネル

<div class="row">
	<div class="col-4">
		<div class="list-group" id="listID" role="tablist">
			<a href="#tabpanelID1" class="list-group-item list-group-item-action active" aria-current="true" id="itemID1" data-bs-toggle="list" role="tab" aria-controls="tabpanelID1">ホーム</a>
			<a href="#tabpanelID2" class="list-group-item list-group-item-action" id="itemID2" data-bs-toggle="list" role="tab" aria-controls="tabpanelID2">プロフィール</a>
			<a href="#tabpanelID3" class="list-group-item list-group-item-action" id="itemID3" data-bs-toggle="list" role="tab" aria-controls="tabpanelID3">メッセージ</a>
			<a href="#tabpanelID4" class="list-group-item list-group-item-action" id="itemID4" data-bs-toggle="list" role="tab" aria-controls="tabpanelID4">セッティング</a>
		</div>
	</div>
	<div class="col-8">
		<div class="tab-content" id="contentID">
			<div class="tab-pane fade show active" id="tabpanelID1" role="tabpanel" aria-labelledby="itemID1">「ホーム」に関連する段落のプレースホルダーコンテンツ。...</div>
			<div class="tab-pane fade" id="tabpanelID2" role="tabpanel" aria-labelledby="itemID2">「プロフィール」に関連する段落のプレースホルダーコンテンツ。...</div>
			<div class="tab-pane fade" id="tabpanelID3" role="tabpanel" aria-labelledby="itemID3">「メッセージ」に関連する段落のプレースホルダーコンテンツ。...</div>
			<div class="tab-pane fade" id="tabpanelID4" role="tabpanel" aria-labelledby="itemID4">「セッティング」に関連する段落のプレースホルダーコンテンツ。...</div>
		</div>
	</div>
</div>
.row>(.col-4>.list-group#listID[role="tablist"]>(a.list-group-item.list-group-item-action.active#itemID1[href="#tabpanelID1" aria-current="true" data-bs-toggle="list" role="tab" aria-controls="tabpanelID1"])+(a.list-group-item.list-group-item-action#itemID$@2[href="#tabpanelID$@2" data-bs-toggle="list" role="tab" aria-controls="tabpanelID$@2"]*3))+(.col-8>.tab-content#contentID>(.tab-pane.fade.show.active#tabpanelID1[role="tabpanel" aria-labelledby="itemID1"])+(.tab-pane.fade#tabpanelID$@2[role="tabpanel" aria-labelledby="itemID$@2"]*3))(切替リストが4つの場合。itemID, tabpanelIDの部分は揃えてください)

オフキャンバス

解説
オフキャンバスのタイトル

プレースホルダーとしてのテキスト。...

<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasID" aria-expanded="false" aria-controls="offcanvasID">
	オフキャンバスを起動
</button>
<div class="offcanvas offcanvas-start" id="offcanvasID" tabindex="-1" aria-labelledby="labelID">
	<div class="offcanvas-header">
		<h5 class="offcanvas-title" id="labelID">オフキャンバスのタイトル</h5>
		<button class="btn-close text-reset" type="button" data-bs-dismiss="offcanvas" aria-label="閉じる"></button>	 
	</div>
	<div class="offcanvas-body">
		<p>プレースホルダーとしてのテキスト。...</p>
	</div>
</div>
btn.btn.btn-primary[type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasID" aria-expanded="false" aria-controls="offcanvasID"]+.offcanvas.offcanvas-start#offcanvasID[tabindex="-1" aria-labelledby="labelID"]>(.offcanvas-header>h5.offcanvas-title#labelID+btn.btn-close.text-reset[type="button" data-bs-dismiss="offcanvas" aria-label="閉じる"])>.offcanvas-bodyoffcanvasID, labelIDの部分は揃えてください)
.btn-primary の部分はお好みのボタンカラーを選んでください

ページ送り

解説

標準の設定

<nav aria-label="ページ送り">
	<ul class="pagination">
		<li class="page-item active" aria-current="page"><a href="..." class="page-link">1</a></li>
		<li class="page-item"><a href="..." class="page-link">2</a></li>
		<li class="page-item"><a href="..." class="page-link">3</a></li>
	</ul>
</nav>
nav[aria-label="ページ送り"]>ul.agination>(li.page-item.active[aria-current="page"]>a.page-link{1})+(li.page-item>a.page-link{$@2})*2(ページが3つの場合)

アイコン付き

<nav aria-label="ページ送り">
	<ul class="pagination">
		<li class="page-item"><a href="..." class="page-link" aria-label="前へ"><span aria-hidden="true">&laquo;</span></a></li>
		<li class="page-item"><a href="..." class="page-link">1</a></li>
		<li class="page-item"><a href="..." class="page-link">2</a></li>
		<li class="page-item"><a href="..." class="page-link">3</a></li>
		<li class="page-item"><a href="..." class="page-link" aria-label="次へ"><span aria-hidden="true">&raquo;</span></a></li>
	</ul>
</nav>
nav[aria-label="ページ送り"]>ul.pagination>(li.page-item>a.page-link[aria-label="前へ"]>span[aria-hidden="true"]{&laquo;})+(li.page-item>a.page-link{$})*3+(li.page-item>a.page-link[aria-label="次へ"]>span[aria-hidden="true"]{&raquo;})(ページが3つの場合)

無効リンク付き

<nav aria-label="ページ送り">
	<ul class="pagination">
		<li class="page-item disabled"><a href="..." class="page-link" tabindex="-1" aria-disabled="true">前へ</a></li>
		<li class="page-item active" aria-current="page"><a href="..." class="page-link">1</a></li>
		<li class="page-item"><a href="..." class="page-link">2</a></li>
		<li class="page-item"><a href="..." class="page-link">3</a></li>
		<li class="page-item"><a href="..." class="page-link">次へ</a></li>
	</ul>
</nav>
nav[aria-label="ページ送り"]>ul.pagination>(li.page-item.disabled>a.page-link[tabindex="-1" aria-disabled="true"]{前へ})+(li.page-item.active[aria-current="page"]>a.page-link>{1})+(li.page-item>a.page-link>{$@2})*2+(li.page-item>a.page-link{次へ})(ページが3つの場合)

ポップオーバー

解説

タイトル付きポップオーバー

<button class="btn btn-danger" type="button" data-bs-toggle="popover" title="ポップオーバーのタイトル" data-bs-content="ポップオーバーのコンテンツ。">ポップオーバーの起動</button>
btn.btn.btn-danger[type="button" data-bs-toggle="popover" title data-bs-content]
.btn-danger の部分はお好みのボタンカラーを選んでください

ポップオーバーの方向設定

<button class="btn btn-secondary" type="button" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="top" data-bs-content="上に出るポップオーバー">上へポップオーバー</button>

上に出るポップオーバー:btn.btn.btn-secondary[type="button" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="top" data-bs-content]

下に出るポップオーバー:btn.btn.btn-secondary[type="button" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="bottom" data-bs-content]

右に出るポップオーバー:btn.btn.btn-secondary[type="button" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="right" data-bs-content]

左に出るポップオーバー:btn.btn.btn-secondary[type="button" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="left" data-bs-content]

.btn-secondary の部分はお好みのボタンカラーを選んでください

プログレスバー

解説

標準の設定

<div class="progress">
	<div class="progress-bar" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width:75%"></div>
</div>
.progress>.progress-bar[role="progressbar" aria-valuenow aria-valuemin="0" aria-valuemax="100" style="width:%"]style="width:%" の部分に幅の設定を入れてください)

バーの外にラベルを表示

75%
<div class="progress">
	<div class="progress-bar" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width:75%"></div>
	<span class="ms-1">75%</span>
</div>
.progress>.progress-bar[role="progressbar" aria-valuenow aria-valuemin="0" aria-valuemax="100" style="width:%"]+span.ms-1style="width:%" の部分に幅の設定を入れてください)

太さの設定

<div class="progress" style="height:20px">
	<div class="progress-bar" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width:75%"></div>
</div>
.progress[style="height:"]>.progress-bar[role="progressbar" aria-valuenow aria-valuemin="0" aria-valuemax="100" style="width:%"]style="height:"の部分に高さの設定、style="width:%" の部分に幅の設定をそれぞれ入れてください)

複数バー

15%
30%
20%
<div class="progress">
	<div class="progress-bar" role="progressbar" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100" style="width:15%">15%</div>
	<div class="progress-bar bg-success" role="progressbar" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100" style="width:30%">30%</div>
	<div class="progress-bar bg-danger" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width:20%">20%</div>
</div>
.progress>.progress-bar[role="progressbar" aria-valuenow aria-valuemin="0" aria-valuemax="100" style="width:%"]+.progress-bar.bg-success[role="progressbar" aria-valuenow aria-valuemin="0" aria-valuemax="100" style="width:%"]+.progress-bar.bg-danger[role="progressbar" aria-valuenow aria-valuemin="0" aria-valuemax="100" style="width:%"](積み重ねるバーが3つの場合。各バーの style="width:%" の部分に幅の設定を入れてください)
.bg-success, .bg-danger の部分はお好みの背景色ユーティリティクラスを選んでください

スクロールスパイ

解説

ナビゲーションバーでの設定

リンク1

ゆっくり下へスクロールしてみて下さい。

この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。

リンク2

スクロールの一番上がリンク2になると上部のナビゲーションバーのアクティブの部分がリンク2に変わります。

この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。

スクロールの一番上がメニュー1になると上部のナビゲーションバーのアクティブの部分がドロップダウンに変わり、ドロップメニューのメニュー1がアクティブになります。

この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。

この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。

スクロールの一番上がメニュー2になると上部のナビゲーションバーのアクティブの部分がドロップダウンに変わり、ドロップメニューのメニュー2がアクティブになります。

この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。

スクロールの一番上がメニュー3になると上部のナビゲーションバーのアクティブの部分がドロップダウンに変わり、ドロップメニューのメニュー3がアクティブになります。

この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。

この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。

<nav id="navbarID" class="navbar navbar-light bg-light px-3">
	<a href="..." class="navbar-brand">ナビゲーションバー</a>
	<ul class="nav nav-pills">
		<li class="nav-item">
			<a href="#linkID1" class="nav-link">リンク1</a>
		</li>
		<li class="nav-item">
			<a href="#linkID2" class="nav-link">リンク2</a>
		</li>
		<li class="nav-item dropdown">
			<a href="#" class="nav-link dropdown-toggle" data-bs-toggle="dropdown" role="button" aria-expanded="false">ドロップダウン</a>
			<ul class="dropdown-menu">
				<li><a href="#menuID1" class="dropdown-item">メニュー1</a></li>
				<li><a href="#menuID2" class="dropdown-item">メニュー2</a></li>
				<li><a href="#menuID3" class="dropdown-item">メニュー3</a></li>
			</ul>
		</li>
	</ul>
</nav>
<div data-bs-spy="scroll" data-bs-target="#navbarID" data-bs-offset="0">
	<h4 id="linkID1">リンク1</h4>
	<p>ゆっくり下へスクロールしてみて下さい。</p>
	...
	<h4 id="llinkID2">リンク2</h4>
	<p>スクロールの一番上がリンク2になると上部のナビゲーションバーのアクティブの部分がリンク2に変わります。</p>
	...
	<h4 id="menuID1">メニュー1</h4>
	<p>スクロールの一番上がメニュー1になると上部のナビゲーションバーのアクティブの部分がドロップダウンに変わり、ドロップメニューのメニュー1がアクティブになります。</p>
	...
	<h4 id="menuID2">メニュー2</h4>
	<p>スクロールの一番上がメニュー2になると上部のナビゲーションバーのアクティブの部分がドロップダウンに変わり、ドロップメニューのメニュー2がアクティブになります。</p>
	...
	<h4 id="menuID3">メニュー3</h4>
	<p>スクロールの一番上がメニュー3になると上部のナビゲーションバーのアクティブの部分がドロップダウンに変わり、ドロップメニューのメニュー3がアクティブになります。</p>
	...
</div>
nav.navbar.navbar-light.bg-light.px-3#navbarID>a.navbar-brand+ul.nav.nav-pills>(li.nav-item>a.nav-link[href="#linkID$"])*2+(li.nav-item.dropdown>a.nav-link.dropdown-toggle[href="#" data-bs-toggle="dropdown" role="button" aria-expanded="false"]+ul.dropdown-menu>(li>a.dropdown-item[href="#menuID$"])*3)+(div[data-bs-spy="scroll" data-bs-target="#navbarID" data-bs-offset="0"]>(h4#linkID$+p)*2+(h4#menuID$+p)*3)(リンクが2つ、ドロップダウンメニューが3つの場合。navbarID, linkID, menuIDの各部分は揃えてください)

入れ子になったナビゲーションバーでの設定

アイテム 1

アイテム 1の文章です。
この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。

アイテム 1-1

アイテム 1の子リストであるアイテム 1-1の文章です。
この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。

アイテム 1-2

同じくアイテム 1の子リストであるアイテム 1-2の文章です。
この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。

アイテム 2

アイテム 2の文章です。
この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。

アイテム 3

アイテム 3の文章です。
この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。

アイテム 3-1

アイテム 3の子リストであるアイテム 3-1の文章です。
この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。

アイテム 3-2

同じくアイテム 3の子リストであるアイテム 3-2の文章です。
この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。

<div class="row">
	<div class="col-4">
		<nav class="navbar navbar-light bg-light flex-column" id="navbarID">
			<a href="..." class="navbar-brand">ナビバー</a>
			<nav class="nav nav-pills flex-column">
				<a href="#itemID1" class="nav-link active">アイテム 1</a>
				<nav class="nav nav-pills flex-column">
					<a href="#itemID1-1" class="nav-link ms-3 my-1">アイテム 1-1</a>
					<a href="#itemID1-2" class="nav-link ms-3 my-1">アイテム 1-2</a>
				</nav>
				<a href="#itemID2" class="nav-link">アイテム 2</a>
				<a href="#itemID3" class="nav-link">アイテム 3</a>
				<nav class="nav nav-pills flex-column">
					<a href="#itemID3-1" class="nav-link ms-3 my-1">アイテム 3-1</a>
					<a href="#itemID3-2" class="nav-link ms-3 my-1">アイテム 3-2</a>
				</nav>
			</nav>
		</nav>
	</div>
	<div class="col-8">
		<div class="scrollspy" data-bs-spy="scroll" data-bs-target="#navbarID" data-bs-offset="0" tabindex="0">
			<h4 id="itemID1">アイテム 1</h4>
			<p>アイテム 1の文章です。...</p>
			<h5 id="itemID1-1">アイテム 1-1</h5>
			<p>アイテム 1の子リストであるアイテム 1-1の文章です。...</p>
			<h5 id="itemID1-2">アイテム 1-2</h5>
			<p>同じくアイテム 1の子リストであるアイテム 1-2の文章です。...</p>
			<h4 id="itemID2">アイテム 2</h4>
			<p>アイテム 2の文章です。...</p>
			<h4 id="itemID3">アイテム 3</h4>
			<p>アイテム 3の文章です。...</p>
			<h5 id="itemID3-1">アイテム 3-1</h5>
			<p>アイテム 3の子リストであるアイテム 3-1の文章です。...</p>
			<h5 id="itemID3-2">アイテム 3-2</h5>
			<p>同じくアイテム 3の子リストであるアイテム 3-2の文章です。...</p>
		</div>
	</div>
</div>
.row>(.col-4>.navbar.navbar-light.bg-light.flex-column#navbarID>a.navbar-brand+nav.nav.nav-pills.flex-column>a.nav-link.active[href="#itemID1"]+(nav.nav.nav-pills.flex-column>(a.nav-link.ms-3.my-1[href="#itemID1-$"])*2)+(a.nav-link[href="#itemID$@2"])*2+(nav.nav.nav-pills.flex-column>(a.nav-link.ms-3.my-1[href="#itemID3-$"])*2))+(.col-8>.scrollspy[data-bs-spy="scroll" data-bs-target="#navbarID" data-bs-offset="0" tabindex="0"]>(h4#itemID1+p)+(h5#itemID1-$+p)*2+(h4#itemID$@2+p)*2+(h5#itemID3-$+p)*2)(親アイテムが3つ+親アイテム1の子アイテムが2つ+親アイテム3の子アイテムが2つの場合)

リストグループでの設定

アイテム 1

アイテム 1の文章です。
この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。

アイテム 2

アイテム 2の文章です。
この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。

アイテム 3

アイテム 3の文章です。
この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。

<div class="row">
	<div class="col-4">
		<div class="list-group" id="listID">
			<a href="#list-itemID1" class="list-group-item active list-group-item-action">アイテム 1</a>
			<a href="#list-itemID2" class="list-group-item list-group-item-action">アイテム 2</a>
			<a href="#list-itemID3" class="list-group-item list-group-item-action">アイテム 3</a>
		</div>
	</div>
	<div class="col-8">
		<div class="scrollspy" data-bs-spy="scroll" data-bs-target="#listID" data-bs-offset="0" tabindex="0">
			<h4 id="list-itemID1">アイテム 1</h4>
			<p>アイテム 1の文章です。...</p>
			<h4 id="list-itemID2">アイテム 2</h4>
			<p>アイテム 2の文章です。...</p>
			<h4 id="list-itemID3">アイテム 3</h4>
			<p>アイテム 3の文章です。...</p>
		</div>
	</div>
</div>
.row>(.col-4>.list-group#listID>(a.list-group-item.active.list-group-item-action[href="#list-itemID1"])+(a.list-group-item.list-group-item-action[href="#list-itemID$@2"])*2)+(.col-8>.scrollspy[data-bs-spy="scroll" data-bs-target="#listID" data-bs-offset="0" tabindex="0"]>(h4#list-itemID$+p)*3)(リストアイテムが3つの場合。listID, list-itemIDの部分はそれぞれ揃えてください)

スピナー

解説

回転型スピナー

Loading...
<div class="spinner-border" role="status">
	<span class="visually-hidden">Loading...</span>
</div>
.spinner-border[role="status"]>span.visually-hidden{Loading...}

放射型スピナー

Loading...
<div class="spinner-grow" role="status">
	<span class="visually-hidden">Loading...</span>
</div>
.spinner-grow[role="status"]>span.visually-hidden{Loading...}

トースト

解説

標準の設定

<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
	<div class="toast-header">
		<img src="..." alt="" class="rounded me-2">
		<strong class="me-auto">Bootstrap</strong>
		<small>11分前</small>
		<button class="btn-close" type="button" data-bs-dismiss="toast" aria-label="閉じる"></button>
	</div>
	<div class="toast-body">
		こんにちは! これはトーストのメッセージです。
	</div>
</div>
.toast[role="alert" aria-live="assertive" aria-atomic="true"]>(.toast-header>img.rounded.me-2>strong.me-auto+small+btn.btn-close[type="button" data-bs-dismiss="toast" aria-label="閉じる"])+.toast-body

縦積み

<div class="toast-container">
	<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
		<div class="toast-header">
			<img src="..." alt="" class="rounded me-2">
			<strong class="me-auto">Bootstrap</strong>
			<small>たった今</small>
			<button class="btn-close" type="button" data-bs-dismiss="toast" aria-label="閉じる"></button>
		</div>
		<div class="toast-body">
			見る? ちょうどこのような。
		</div>
	</div>
	<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
		<div class="toast-header">
			<img src="..." alt="" class="rounded me-2">
			<strong class="me-auto">Bootstrap</strong>
			<small>2秒前</small>
			<button class="btn-close" type="button" data-bs-dismiss="toast" aria-label="閉じる"></button>
		</div>
		<div class="toast-body">
			注意喚起、トーストは自動的に縦積みになる
		</div>
	</div>
</div>
.toast-container>(.toast[role="alert" aria-live="assertive" aria-atomic="true"]>(.toast-header>img.rounded.me-2>strong.me-auto+small+btn.btn-close[type="button" data-bs-dismiss="toast" aria-label="閉じる"])+.toast-body)*2(トーストが2つの場合)

.toast-header なし

<div class="toast align-items-center" role="alert" aria-live="assertive" aria-atomic="true">
	<div class="d-flex">
		<div class="toast-body">
			こんにちは! これはトーストのメッセージです。
	 </div>
		<button type="button" class="btn-close me-2 m-auto" data-bs-dismiss="toast" aria-label="閉じる"></button>
	</div>
</div>
.toast.align-items-center[role="alert" aria-live="assertive" aria-atomic="true"]>.d-flex>.toast-body+btn.btn-close.me-2.m-auto[type="button" data-bs-dismiss="toast" aria-label="閉じる"]

ツールチップ

解説

リンク上のツールチップ

ツールチップを使用した横並びリンクを示すプレースホルダーテキスト。

<p>ツールチップを使用した<a href="#" data-bs-toggle="tooltip" title="標準のツールチップ">横並びリンク</a>を示すプレースホルダーテキスト。</p>
a[href="#" data-bs-toggle="tooltip" title]

ツールチップの方向設定

<button class="btn btn-secondary" type="button" data-bs-toggle="tooltip" data-bs-placement="top" title="上に出るツールチップ">上へツールチップ</button>

上に出るツールチップ:btn.btn.btn-secondary[type="button" data-bs-toggle="tooltip" data-bs-placement="top" title]

下に出るツールチップ:btn.btn.btn-secondary[type="button" data-bs-toggle="tooltip" data-bs-placement="bottom" title]

右に出るツールチップ:btn.btn.btn-secondary[type="button" data-bs-toggle="tooltip" data-bs-placement="right" title]

左に出るツールチップ:btn.btn.btn-secondary[type="button" data-bs-toggle="tooltip" data-bs-placement="left" title]

.btn-secondary の部分はお好みのボタンカラーを選んでください