Emmetショートハンド集

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

※参考

Emmetチートシート
「はじめて」でも簡単！Emmetの使い方とよく使うパターン集（HPcode）
Emmetでマークアップを効率化しよう（HTML&カスタマイズ編）（GRANFAIRSスタッフブログ）

コンテンツ

文字の体裁

解説

見出し

見出し 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"]

イメージのサムネイル

<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列の場合）

図表

解説

上の画像のキャプション

<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]

Eメールアドレス

<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

最初のチェック

2つ目のチェック

3つ目のチェック

<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つの場合）

横並び表示

1つ目

2つ目

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つの場合）

ラジオボタン

縦積み表示

通常のラジオボタン

2つ目のラジオボタン

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つの場合）

横並び表示

1つ目

2つ目

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#addonID（addonID名は揃えること）

ラベル付きアドオン

虚偽のURL

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 の部分はお好みのカラーを選んでください

フローティングラベル

解説

Eメールアドレス

<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 に修正してください

レイアウト

解説

ラベルつき

ラベルの例

もう1つのラベル

<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部分は揃えること）

アラート

解説

標準のアラート

単純なprimaryアラート。

単純なsecondaryアラート。

単純なsuccessアラート。

単純なdangerアラート。

単純なwarningアラート。

単純なinfoアラート。

単純なlightアラート。

単純なdarkアラート。

<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 text-bg-primary">New</span>

Primary：span.badge.text-bg-primary

Secondary：span.badge.text-bg-secondary

Success：span.badge.text-bg-success

Danger：span.badge.text-bg-danger

Warning：span.badge.text-bg-warning

Info：span.badge.text-bg-info

Light：span.badge.text-bg-light

Dark：span.badge.text-bg-dark

ピルバッジ

Primary Secondary Success Danger Warning Info Light Dark

<span class="badge rounded-pill text-bg-primary">New</span>

Primary：span.badge.rounded-pill.text-bg-primary

Secondary：span.badge.rounded-pill.text-bg-secondary

Success：span.badge.rounded-pill.text-bg-success

Danger：span.badge.rounded-pill.text-bg-danger

Warning：span.badge.rounded-pill.text-bg-warning

Info：span.badge.rounded-pill.text-bg-info

Light：span.badge.rounded-pill.text-bg-light

Dark：span.badge.rounded-pill.text-bg-dark

パンくずリスト

解説

<nav aria-label="パンくずリスト">
	<ol class="breadcrumb">
		<li class="breadcrumb-item"><a href="...">ホーム</a></li>
		<li class="breadcrumb-item"><a href="...">ライブラリ</a></li>
		<li class="breadcrumb-item active" aria-current="page">データ</li>
	</ol>
</nav>

nav[aria-label="パンくずリスト"]>ol.breadcrumb>(li.breadcrumb-item>a)*2+li.breadcrumb-item.active[aria-current="page"]（リストアイテムが親/子/孫の3つの場合）

ボタン

解説

標準のボタン

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

Primary：btn[type].btn.btn-primary

Secondary：btn[type].btn.btn-secondary

Success：btn[type].btn.btn-success

Danger：btn[type].btn.btn-danger

Warning：btn[type].btn.btn-warning.text-dark

Info：btn[type].btn.btn-info.text-dark

Light：btn[type].btn.btn-light.text-dark

Dark：btn[type].btn.btn-dark

Link：btn[type].btn.btn-link

アウトラインボタン

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

Primary：btn[type].btn.btn-outline-primary

Secondary：btn[type].btn.btn-outline-secondary

Success：btn[type].btn.btn-outline-success

Danger：btn[type].btn.btn-outline-danger

Warning：btn[type].btn.btn-outline-warning.text-dark

Info：btn[type].btn.btn-outline-info.text-dark

Light：btn[type].btn.btn-outline-light.text-dark

Dark：btn[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" type="button" data-bs-toggle="dropdown" aria-expanded="false">ドロップダウン</button>
		<ul class="dropdown-menu">
			<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[type="button" data-bs-toggle="dropdown" aria-expanded="false"]+ul.dropdown-menu>(li>a.dropdown-item)*2)（ボタン2つ＋ドロップダウンリンク2つの場合）
※.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)

水平スタイル

カードのタイトル

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

<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のタイトル

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

カード2のタイトル

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

カード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のタイトル

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

カード2のタイトル

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

カード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つの場合）

カルーセル

解説

第1スライドラベル

1番目のスライドの代表的なプレースホルダーコンテンツ。

第2スライドラベル

2番目のスライドの代表的なプレースホルダーコンテンツ。

第3スライドラベル

3番目のスライドの代表的なプレースホルダーコンテンツ。

<div class="carousel slide" id="carouselID" data-bs-ride="carousel">
	<div class="carousel-indicators">
		<button class="active" type="button" data-bs-target="#carouselID" data-bs-slide-to="0" aria-current="true" aria-label="スライド 1"></button>
		<button type="button" data-bs-target="#carouselID" data-bs-slide-to="1" aria-label="スライド 2"></button>
		<button type="button" data-bs-target="#carouselID" data-bs-slide-to="2" aria-label="スライド 3"></button>
	</div>
	<div class="carousel-inner">
		<div class="carousel-item active">
			<img src="..." alt="第1スライド" class="d-block w-100">
			<div class="carousel-caption d-none d-md-block">
				<h5>第1スライド ラベル</h5>
				<p>1番目のスライドの代表的なプレースホルダーコンテンツ。</p>
			</div>
		</div>
		<div class="carousel-item">
			<img src="..." alt="第2スライド" class="d-block w-100">
			<div class="carousel-caption d-none d-md-block">
				<h5>第2スライド ラベル</h5>
				<p>2番目のスライドの代表的なプレースホルダーコンテンツ。</p>
			</div>
		</div>
		<div class="carousel-item">
			<img src="..." alt="第3スライド" class="d-block w-100">
			<div class="carousel-caption d-none d-md-block">
				<h5>第3スライド ラベル</h5>
				<p>3番目のスライドの代表的なプレースホルダーコンテンツ。</p>
			</div>
		</div>
	</div>
	<button class="carousel-control-prev" type="button" data-bs-target="#carouselID" data-bs-slide="prev">
		<span class="carousel-control-prev-icon" aria-hidden="true"></span>
		<span class="visually-hidden">前へ</span>
	</button>
	<button class="carousel-control-next" type="button" data-bs-target="#carouselID" data-bs-slide="next">
		<span class="carousel-control-next-icon" aria-hidden="true"></span>
		<span class="visually-hidden">次へ</span>
	</button>
</div>

.carousel.slide#carouselID[data-bs-ride="carousel"]>(.carousel-indicators>(btn.active[type="button" data-bs-target="#carouselID" data-bs-slide-to="0" aria-current="true" aria-label])+(btn[type="button" data-bs-target="#carouselID" data-bs-slide-to="$" aria-label])*2)+(.carousel-inner>(.carousel-item.active>img.d-block.w-100+(.carousel-caption.d-none.d-md-block>h5+p))+(.carousel-item>img.d-block.w-100+(.carousel-caption.d-none.d-md-block>h5+p))*2)+(btn.carousel-control-prev[type="button" data-bs-target="#carouselID" data-bs-slide="prev"]>span.carousel-control-prev-icon[aria-hidden="true"]+span.visually-hidden{前へ})+(btn.carousel-control-next[type="button" data-bs-target="#carouselID" data-bs-slide="next"]>span.carousel-control-next-icon[aria-hidden="true"]+span.visually-hidden{次へ})（アイテムが3つの場合。carouselID部分は揃えること）

折り畳み

解説

ボタン式の折り畳み

折り畳みコンポーネントのプレースホルダーコンテンツ。...

<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部分は揃えること）

ドロップダウン

解説

ボタンドロップダウン

<div class="dropdown">
	<button class="btn btn-primary dropdown-toggle"" type="button" data-bs-toggle="dropdown" aria-expanded="false">Primary</button>
	<ul class="dropdown-menu">
		<li><a href="..." class="dropdown-item">メニュー1</a></li>
		<li><a href="..." class="dropdown-item">メニュー2</a></li>
		<li><a href="..." class="dropdown-item">メニュー3</a></li>
	</ul>
</div>

Primary：.dropdown>btn.btn.btn-primary.dropdown-toggle[type="button" data-bs-toggle="dropdown" aria-expanded="false"]+ul.dropdown-menu>(li>a.dropdown-item)*3

Secondary：.dropdown>btn.btn.btn-secondary.dropdown-toggle[type="button" data-bs-toggle="dropdown" aria-expanded="false"]+ul.dropdown-menu>(li>a.dropdown-item)*3

Success：.dropdown>btn.btn.btn-success.dropdown-toggle[type="button" data-bs-toggle="dropdown" aria-expanded="false"]+ul.dropdown-menu>(li>a.dropdown-item)*3

Danger：.dropdown>btn.btn.btn-danger.dropdown-toggle[type="button" data-bs-toggle="dropdown" aria-expanded="false"]+ul.dropdown-menu>(li>a.dropdown-item)*3

Warning：.dropdown>btn.btn.btn-warning.dropdown-toggle[type="button" data-bs-toggle="dropdown" aria-expanded="false"]+ul.dropdown-menu>(li>a.dropdown-item)*3

Info：.dropdown>btn.btn.btn-info.dropdown-toggle[type="button" data-bs-toggle="dropdown" aria-expanded="false"]+ul.dropdown-menu>(li>a.dropdown-item)*3

Light：.dropdown>btn.btn.btn-light.dropdown-toggle[type="button" data-bs-toggle="dropdown" aria-expanded="false"]+ul.dropdown-menu>(li>a.dropdown-item)*3

Dark：.dropdown>btn.btn.btn-dark.dropdown-toggle[type="button" data-bs-toggle="dropdown" aria-expanded="false"]+ul.dropdown-menu>(li>a.dropdown-item)*3

（ドロップダウンアイテムが3つの場合）

分離ボタンドロップダウン

<div class="btn-group">
	<button class="btn btn-primary" type="button">Primary</button>
	<button class="btn btn-primary dropdown-toggle dropdown-toggle-split" type="button" data-bs-toggle="dropdown" aria-expanded="false"><span class="visually-hidden">ドロップダウンの切替</span></button>
	<ul class="dropdown-menu">
			<li><a href="..." class="dropdown-item">メニュー1</a></li>
			<li><a href="..." class="dropdown-item">メニュー2</a></li>
			<li><a href="..." class="dropdown-item">その他リンク</a></li>
	</ul>
</div>

Primary：.btn-group>(btn.btn.btn-primary[type="button"])+(btn.btn.btn-primary.dropdown-toggle.dropdown-toggle-split[type="button" data-bs-toggle="dropdown" aria-expanded="false"]>span.visually-hidden{ドロップダウンの切替})+(ul.dropdown-menu>(li>a.dropdown-item)*3)

Secondary：.btn-group>(btn.btn.btn-secondary[type="button"])+(btn.btn.btn-secondary.dropdown-toggle.dropdown-toggle-split[type="button" data-bs-toggle="dropdown" aria-expanded="false"]>span.visually-hidden{ドロップダウンの切替})+(ul.dropdown-menu>(li>a.dropdown-item)*3)

Success：.btn-group>(btn.btn.btn-success[type="button"])+(btn.btn.btn-success.dropdown-toggle.dropdown-toggle-split[type="button" data-bs-toggle="dropdown" aria-expanded="false"]>span.visually-hidden{ドロップダウンの切替})+(ul.dropdown-menu>(li>a.dropdown-item)*3)

Danger：.btn-group>(btn.btn.btn-danger[type="button"])+(btn.btn.btn-danger.dropdown-toggle.dropdown-toggle-split[type="button" data-bs-toggle="dropdown" aria-expanded="false"]>span.visually-hidden{ドロップダウンの切替})+(ul.dropdown-menu>(li>a.dropdown-item)*3)

Warning：.btn-group>(btn.btn.btn-warning[type="button"])+(btn.btn.btn-warning.dropdown-toggle.dropdown-toggle-split[type="button" data-bs-toggle="dropdown" aria-expanded="false"]>span.visually-hidden{ドロップダウンの切替})+(ul.dropdown-menu>(li>a.dropdown-item)*3)

Info：.btn-group>(btn.btn.btn-info[type="button"])+(btn.btn.btn-info.dropdown-toggle.dropdown-toggle-split[type="button" data-bs-toggle="dropdown" aria-expanded="false"]>span.visually-hidden{ドロップダウンの切替})+(ul.dropdown-menu>(li>a.dropdown-item)*3)

Light：.btn-group>(btn.btn.btn-light[type="button"])+(btn.btn.btn-light.dropdown-toggle.dropdown-toggle-split[type="button" data-bs-toggle="dropdown" aria-expanded="false"]>span.visually-hidden{ドロップダウンの切替})+(ul.dropdown-menu>(li>a.dropdown-item)*3)

Dark：.btn-group>(btn.btn.btn-dark[type="button"])+(btn.btn.btn-dark.dropdown-toggle.dropdown-toggle-split[type="button" data-bs-toggle="dropdown" aria-expanded="false"]>span.visually-hidden{ドロップダウンの切替})+(ul.dropdown-menu>(li>a.dropdown-item)*3)

（それぞれドロップダウンアイテムが3つの場合）

ドロップメニューコンテンツ

<div class="dropdown">
	<button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">ドロップダウンボタン</button>
	<ul class="dropdown-menu">
		<h6 class="dropdown-header">ドロップダウンの見出し</h6>
		<li><span class="dropdown-item-text">非対話型のドロップダウンテキスト</span></li>
		<li><a href="..." class="dropdown-item">通常のアイテム</a></li>
		<li><a href="..." class="dropdown-item active" aria-current="true">アクティブアイテム</a></li>
		<li><hr class="dropdown-divider"></li>
		<li><a href="..." class="dropdown-item disabled" tabindex="-1" aria-disabled="true">無効のアイテム</a></li>
	</ul>
</div>

ドロップダウンの見出し：h6.dropdown-header

非対話型のドロップダウンテキスト：li>span.dropdown-item-text

アクティブアイテム：li>a.dropdown-item.active[aria-current="true"]

横仕切り線：li>hr.dropdown-divider

無効のアイテム：li>a.dropdown-item.disabled[tabindex="-1" aria-disabled="true"]

リストグループ

解説

基本のリストグループ

アイテム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"]

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

リンクアイテム1 リンクアイテム2 リンクアイテム3 アクティブリンクアイテム無効のリンクアイテム

<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"]

番号付きリストアイテム

アイテム
アイテム
アイテム

<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 text-bg-primary rounded-pill">14</span>
	</li>
	<li class="list-group-item d-flex justify-content-between align-items-center">
		リストアイテム2
		<span class="badge text-bg-primary rounded-pill">2</span>
	</li>
	<li class="list-group-item d-flex justify-content-between align-items-center">
		リストアイテム3
		<span class="badge text-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 の部分はお好みのバッジカラーを選んでください

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

リストグループ1のヘッダ

3日前

段落内のプレースホルダーコンテンツ。

サブコンテンツ

リストグループ2のヘッダ

3日前

段落内のプレースホルダーコンテンツ。

サブコンテンツ

リストグループ3のヘッダ

3日前

段落内のプレースホルダーコンテンツ。

サブコンテンツ

<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つの場合）

チェックボックス

チェックボックス1 チェックボックス2 チェックボックス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" tabindex="0">「ホーム」に関連する段落のプレースホルダーコンテンツ。...</div>
			<div class="tab-pane fade" id="tabpanelID2" role="tabpanel" aria-labelledby="itemID2" tabindex="0">「プロフィール」に関連する段落のプレースホルダーコンテンツ。...</div>
			<div class="tab-pane fade" id="tabpanelID3" role="tabpanel" aria-labelledby="itemID3" tabindex="0">「メッセージ」に関連する段落のプレースホルダーコンテンツ。...</div>
			<div class="tab-pane fade" id="tabpanelID4" role="tabpanel" aria-labelledby="itemID4" tabindex="0">「セッティング」に関連する段落のプレースホルダーコンテンツ。...</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" tabindex="0"])+(.tab-pane.fade#tabpanelID$@2[role="tabpanel" aria-labelledby="itemID$@2" tabindex="0"]*3))（切替リストが4つの場合。itemID, tabpanelIDの部分は揃えてください）

モーダル

解説

<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#modalID">モーダルを起動</button>
<div class="modal fade" id="modalID" tabindex="-1" aria-labelledby="labelID" aria-hidden="true">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<h5 class="modal-title" id="labelID">モーダルのタイトル</h5>
				<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="閉じる"></button>
			</div>
			<div class="modal-body">
				モーダルのコンテンツ...
			</div>
			<div class="modal-footer">
				<button class="btn btn-secondary" type="button" data-bs-dismiss="modal">閉じる</button>
				<button type="submit" class="btn btn-primary">変更を保存</button>
			</div>
		</div>
	</div>
</div>

btn.btn.btn-primary[type="button" data-bs-toggle="modal" data-bs-target="#modalID"]+.modal.fade#modalID[tabindex="-1" aria-labelledby="labelID" aria-hidden="true"]>.modal-dialog>.modal-content>(.modal-header>h5.modal-title#labelID+btn.btn-close[type="button" data-bs-dismiss="modal" aria-label="閉じる"])+.modal-body+(.modal-footer>btn.btn.btn-secondary[type="button" data-bs-dismiss="modal"]{閉じる}+btn:s.btn.btn-primary{変更を保存})（modalID, labelIDの部分は揃えてください）
※.btn-primary, .btn-secondary の部分はお好みのボタンカラーを選んでください

ナビゲーションバー

解説

Lightのナビゲーションバー

<nav class="navbar navbar-expand-lg bg-light">
	<div class="container-fluid">
		<a href="..." class="navbar-brand">
			<img src="..." alt="ロゴマーク" class="d-inline-block align-text-top" loading="lazy">
		</a>
		<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#contentID" aria-controls="contentID" aria-expanded="false" aria-label="ナビゲーションの切替"><span class="navbar-toggler-icon"></span></button>
		<div class="collapse navbar-collapse" id="contentID">
			<ul class="navbar-nav me-auto mb-2 mb-lg-0">
				<li class="nav-item"><a href="..." class="nav-link active" aria-current="page">ホーム</a></li>
				<li class="nav-item"><a href="..." class="nav-link">リンク1</a></li>
				<li class="nav-item"><a href="..." class="nav-link">リンク2</a></li>
				<li class="nav-item dropdown">
					<a href="#" class="nav-link dropdown-toggle" role="button" data-bs-toggle="dropdown" aria-expanded="false">ドロップダウン</a>
					<ul class="dropdown-menu">
						<li><a href="..." class="dropdown-item">メニュー1</a></li>
						<li><a href="..." class="dropdown-item">メニュー2</a></li>
					</ul>
				</li>
				<li class="nav-item"><a href="..." class="nav-link disabled" tabindex="-1" aria-disabled="true">無効</a></li>
			</ul>
			<form action="" class="d-flex">
				<input type="search" class="form-control me-2" placeholder="検索" aria-label="検索">
				<button type="submit" class="btn btn-outline-dark flex-shrink-0">検索</button>
			</form>
		</div>
	</div>
</nav>

nav.navbar.navbar-expand-lg.bg-light>.container-fluid>(a.navbar-brand>img.d-inline-block.align-text-top[loading="lazy"])+(btn.navbar-toggler[type="button" data-bs-toggle="collapse" data-bs-target="#contentID" aria-controls="contentID" aria-expanded="false" aria-label="ナビゲーションの切替"]>span.navbar-toggler-icon)+(.collapse.navbar-collapse#contentID>ul.navbar-nav.me-auto.mb-2.mb-lg-0>(li.nav-item>a.nav-link.active[aria-current="page"]{ホーム})+(li.nav-item>a.nav-link)*2)（リンクが2つの場合。contentIDの部分は揃えてください）

ドロップダウンリンク：li.nav-item.dropdown>a.nav-link.dropdown-toggle[href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false"]+ul.dropdown-menu>(li>a.dropdown-item)*2（メニューが2つの場合）

無効リンク：li.nav-item>a.nav-link.disabled[tabindex="-1" aria-disabled="true"]

検索フォーム：form.d-flex>input.form-control.me-2[type="search" placeholder="検索" aria-label="検索"]>btn:s.btn.btn-outline-dark.flex-shrink-0{検索}
※.btn-outline-dark の部分はお好みのボタンカラーを選んでください

Darkのナビゲーションバー

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
	<div class="container-fluid">
		<a href="..." class="navbar-brand"><img src="..." alt="ロゴマーク" class="d-inline-block align-text-top" loading="lazy"></a>
		<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#contentID" aria-controls="contentID" aria-expanded="false" aria-label="ナビゲーションの切替"><span class="navbar-toggler-icon"></span></button>
		<div class="collapse navbar-collapse" id="contentID">
			<ul class="navbar-nav me-auto mb-2 mb-lg-0">
				<li class="nav-item"><a href="..." class="nav-link active" aria-current="page">ホーム</a></li>
				<li class="nav-item"><a href="..." class="nav-link">リンク1</a></li>
				<li class="nav-item"><a href="..." class="nav-link">リンク2</a></li>
			</ul>
		</div>
	</div>
</nav>

nav.navbar.navbar-expand-lg.navbar-dark.bg-dark>.container-fluid>(a.navbar-brand>img.d-inline-block.align-top[loading="lazy"])+(btn.navbar-toggler[type="button" data-bs-toggle="collapse" data-bs-target="#contentID" aria-controls="contentID" aria-expanded="false" aria-label="ナビゲーションの切替"]>span.navbar-toggler-icon)+(.collapse.navbar-collapse#contentID>ul.navbar-nav.me-auto.mb-2.mb-lg-0>(li.nav-item>a.nav-link.active[aria-current="page"]{ホーム})+(li.nav-item>a.nav-link)*2)（リンクが2つの場合。contentIDの部分は揃えてください）

ナビ&タブ

解説

リストで設定

<ul class="nav">
	<li class="nav-item"><a href="..." class="nav-link">リンク1</a></li>
	<li class="nav-item"><a href="..." class="nav-link">リンク2</a></li>
	<li class="nav-item"><a href="..." class="nav-link">リンク3</a></li>
	<li class="nav-item"><a href="..." class="nav-link active" aria-current="page">アクティブ</a></li>
	<li class="nav-item"><a href="..." class="nav-link disabled" tabindex="-1" aria-disabled="true">無効</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="..." class="dropdown-item">メニュー1</a></li>
			<li><a href="..." class="dropdown-item">メニュー2</a></li>
			<li><a href="..." class="dropdown-item">メニュー3</a></li>
		</ul>
	</li>
</ul>

ul.nav>(li.nav-item>a.nav-link)*3（リンクアイテムが3つの場合）

アクティブリンクアイテム：li.nav-item>a.nav-link.active[aria-current="page"]

無効のリンクアイテム：li.nav-item>a.nav-link.disabled[tabindex="-1" aria-disabled="true"]

ドロップダウン：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)*3（メニューが3つの場合）

ナビゲーションで設定

<nav class="nav">
	<a href="..." class="nav-link">リンク1</a>
	<a href="..." class="nav-link">リンク2</a>
	<a href="..." class="nav-link">リンク3</a>
	<a href="..." class="nav-link active" aria-current="page">アクティブ</a>
	<a href="..." class="nav-link disabled" tabindex="-1" aria-disabled="true">無効</a>
</nav>

nav.nav>a.nav-link*3（リンクアイテムが3つの場合）

アクティブリンクアイテム：a.nav-link.active[aria-current="page"]

無効のリンクアイテム：a.nav-link.disabled[tabindex="-1" aria-disabled="true"]

タブナビゲーション

タブパネルのプレースホルダーコンテンツ。これはホームタブに関連している。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。

タブパネルのプレースホルダーコンテンツ。これはプロフィールタブに関連している。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。

タブパネルのプレースホルダーコンテンツ。これはコンタクトタブに関連している。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。

<ul class="nav nav-tabs mb-3" id="navID" role="tablist">
	<li class="nav-item" role="presentation"><button class="nav-link active" id="tabID1" data-bs-toggle="tab" data-bs-target="#tabpanelID1" type="button" role="tab" aria-controls="tabpanelID1" aria-selected="true">ホーム</button></li>
	<li class="nav-item" role="presentation"><button class="nav-link" id="tabID2" data-bs-toggle="tab" data-bs-target="#tabpanelID2" type="button" role="tab" aria-controls="tabpanelID2" aria-selected="false">プロフィール</button></li>
	<li class="nav-item" role="presentation"><button class="nav-link" id="tabID3" data-bs-toggle="tab" data-bs-target="#tabpanelID3" type="button" role="tab" aria-controls="tabpanelID3" aria-selected="false">コンタクト</button></li>
</ul>
<div class="tab-content" id="contentID">
	<div class="tab-pane fade show active" id="tabpanelID1" role="tabpanel" aria-labelledby="tabID1" tabindex="0">
		<p class="px-3">タブパネルのプレースホルダーコンテンツ。これはホームタブに関連している。...</p>
	</div>
	<div class="tab-pane fade" id="tabpanelID2" role="tabpanel" aria-labelledby="tabID2" tabindex="0">
		<p class="px-3">タブパネルのプレースホルダーコンテンツ。これはプロフィールタブに関連している。...</p>
	</div>
	<div class="tab-pane fade" id="tabpanelID3" role="tabpanel" aria-labelledby="tabID3" tabindex="0">
		<p class="px-3">タブパネルのプレースホルダーコンテンツ。これはコンタクトタブに関連している。...</p>
	</div>
</div>

(ul.nav.nav-tabs.mb-3#navID[role="tablist"]>(li.nav-item[role="presentation"]>btn.nav-link.active#tabID1[data-bs-toggle="tab" data-bs-target="#tabpanelID1" type="button" role="tab" aria-controls="tabpanelID1" aria-selected="true"])+(li.nav-item[role="presentation"]>btn.nav-link#tabID$@2[data-bs-toggle="tab" data-bs-target="#tabpanelID$@2" type="button" role="tab" aria-controls="tabpanelID$@2" aria-selected="false"])*2)+(.tab-content#contentID>(.tab-pane.fade.show.active#tabpanelID1[role="tabpanel" aria-labelledby="tabID1" tabindex="0"]>p.px-3)+(.tab-pane.fade#tabpanelID$@2[role="tabpanel" aria-labelledby="tabID$@2" tabindex="0"]>p.px-3)*2)（タブが3つの場合。tabID, tabpanelIDの部分は揃えてください）

ピルナビゲーション

タブパネルのプレースホルダーコンテンツ。これはホームピルに関連している。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。

タブパネルのプレースホルダーコンテンツ。これはプロフィールピルに関連している。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。

タブパネルのプレースホルダーコンテンツ。これはコンタクトピルに関連している。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。

<ul class="nav nav-pills mb-3" id="navID" role="tablist">
	<li class="nav-item" role="presentation"><button class="nav-link active" id="pillID1" data-bs-toggle="pill" data-bs-target="#tabpanelID1" type="button" role="tab" aria-controls="tabpanelID1" aria-selected="true">ホーム</button></li>
	<li class="nav-item" role="presentation"><button class="nav-link" id="pillID2" data-bs-toggle="pill" data-bs-target="#tabpanelID2" role="tab" aria-controls="tabpanelID2" aria-selected="false">プロフィール</button></li>
	<li class="nav-item" role="presentation"><button class="nav-link" id="pillID3" data-bs-toggle="pill" data-bs-target="#tabpanelID3" role="tab" aria-controls="tabpanelID3" aria-selected="false">コンタクト</button></li>
</ul>
<div class="tab-content" id="contentID">
	<div class="tab-pane fade show active" id="tabpanelID1" role="tabpanel" aria-labelledby="pillID1" tabindex="0">
		<p class="px-3">タブパネルのプレースホルダーコンテンツ。これはホームピルに関連している。...</p>
	</div>
	<div class="tab-pane fade" id="tabpanelID2" role="tabpanel" aria-labelledby="pillID2" tabindex="0">
		<p class="px-3">タブパネルのプレースホルダーコンテンツ。これはプロフィールピルに関連している。...</p>
	</div>
	<div class="tab-pane fade" id="tabpanelID3" role="tabpanel" aria-labelledby="pillID3" tabindex="0">
		<p class="px-3">タブパネルのプレースホルダーコンテンツ。これはコンタクトピルに関連している。...</p>
	</div>
</div>

(ul.nav.nav-pills.mb-3#navID[role="tablist"]>(li.nav-item[role="presentation"]>btn.nav-link.active#pillID1[data-bs-toggle="pill" data-bs-target="#tabpanelID1" type="button" role="tab" aria-controls="tabpanelID1" aria-selected="true"])+(li.nav-item[role="presentation"]>btn.nav-link#pillID$@2[data-bs-toggle="pill" data-bs-target="#tabpanelID$@2" type="button" role="tab" aria-controls="tabpanelID$@2" aria-selected="false"])*2)+(.tab-content#contentID>(.tab-pane.fade.show.active#tabpanelID1[role="tabpanel" aria-labelledby="pillID1" tabindex="0"]>p.px-3)+(.tab-pane.fade#tabpanelID$@2[role="tabpanel" aria-labelledby="pillID$@2" tabindex="0"]>p.px-3)*2)（ピルが3つの場合。pillID, tabpanelIDの部分は揃えてください）

縦積みのピルナビゲーション

タブパネルのプレースホルダーコンテンツ。これはメッセージピルに関連している。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。

<div class="d-flex align-items-start">
	<div class="nav flex-column nav-pills flex-shrink-0 me-3" id="navID" role="tablist" aria-orientation="vertical">
		<button class="nav-link active" id="pillID1" data-bs-toggle="pill" data-bs-target="#tabpanelID1" type="button" role="tab" aria-controls="tabpanelID1" aria-selected="true">ホーム</button>
		<button class="nav-link" id="pillID2" data-bs-toggle="pill" data-bs-target="#tabpanelID2" type="button" role="tab" aria-controls="tabpanelID2" aria-selected="false">プロフィール</button>
		<button class="nav-link" id="pillID3" data-bs-toggle="pill" data-bs-target="#tabpanelID3" type="button" role="tab" aria-controls="tabpanelID3" aria-selected="false">メッセージ</button>
	</div>
	<div class="tab-content" id="contentID">
		<div class="tab-pane fade show active" id="tabpanelID1" role="tabpanel" aria-labelledby="pillID1" tabindex="0">
			<p>タブパネルのプレースホルダーコンテンツ。これはホームピルに関連している。...</p>
		</div>
		<div class="tab-pane fade" id="tabpanelID2" role="tabpanel" aria-labelledby="pillID2" tabindex="0">
			<p>タブパネルのプレースホルダーコンテンツ。これはプロフィールピルに関連している。...</p>
		</div>
		<div class="tab-pane fade" id="tabpanelID3" role="tabpanel" aria-labelledby="pillID3" tabindex="0">
			<p>タブパネルのプレースホルダーコンテンツ。これはメッセージピルに関連している。...</p>
		</div>
	</div>
</div>

.d-flex.align-items-start>(.nav.flex-column.nav-pills.flex-shrink-0.me-3#navID[role="tablist" aria-orientation="vertical"]>(btn.nav-link.active#pillID1[data-bs-toggle="pill" data-bs-target="#tabpanelID1" type="button" role="tab" aria-controls="tabpanelID1" aria-selected="true"])+(btn.nav-link#pillID$@2[data-bs-toggle="pill" data-bs-target="#tabpanelID$@2" type="button" role="tab" aria-controls="tabpanelID$@2" aria-selected="false"])*2)+(.tab-content#contentID>(.tab-pane.fade.show.active#tabpanelID1[role="tabpanel" aria-labelledby="pillID1" tabindex="0"]>p)+(.tab-pane.fade#tabpanelID$@2[role="tabpanel" aria-labelledby="pillID$@2" tabindex="0"]>p)*2)（ピルが3つの場合。pillID, 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" 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[type="button" data-bs-dismiss="offcanvas" aria-label="閉じる"])>.offcanvas-body（offcanvasID, 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"]{«})+(li.page-item>a.page-link{$})*3+(li.page-item>a.page-link[aria-label="次へ"]>span[aria-hidden="true"]{»})（ページが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-1（style="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になると上部のナビゲーションバーのアクティブの部分がドロップダウンに変わり、ドロップメニューのメニュー1がアクティブになります。

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

メニュー2

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

メニュー3

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

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

<nav id="navbarID" class="navbar bg-light px-3 mb-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-smooth-scroll="true" tabindex="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.bg-light.px-3.mb-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-smooth-scroll="true" tabindex="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="h-100 flex-column align-items-stretch pe-4 border-end" id="navbarID">
			<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-smooth-scroll="true" 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>.h-100.flex-column.align-items-stretch.pe-4.border-end#navbarID>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-smooth-scroll="true" tabindex="0"]>(h4#itemID1+p)+(h5#itemID1-$+p)*2+(h4#itemID$@2+p)*2+(h5#itemID3-$+p)*2)（親アイテムが3つ+親アイテム1の子アイテムが2つ+親アイテム3の子アイテムが2つの場合）

リストグループでの設定

アイテム 1 アイテム 2 アイテム 3

アイテム 1

アイテム 2

アイテム 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-smooth-scroll="true" tabindex="0"]>(h4#list-itemID$+p)*3)（リストアイテムが3つの場合。listID, list-itemIDの部分はそれぞれ揃えてください）

スピナー

解説

回転型スピナー

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

.spinner-border[role="status"]>span.visually-hidden{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 position-static">
	<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.position-static>(.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 の部分はお好みのボタンカラーを選んでください