基本のリストグループ(Basic example)
最も基本的なリストグループは、リストアイテムと適切なクラスを持つ順不同のリスト。それに続くオプションや必要に応じて独自のCSSを使って構築。
見本
- アイテム1
- アイテム2
- アイテム3
設定例
<ul class="list-group" style="max-width: 400px;">
<li class="list-group-item">アイテム1</li>
<li class="list-group-item">アイテム2</li>
<li class="list-group-item">アイテム3</li>
</ul>
【設定】
ul.list-group
>li.list-group-item
アクティブなアイテム(Active items)v5.0.0-alpha1設定変更
.active
を .list-group-item
に追加すると、現在のアクティブな選択を示す。
見本
- アイテム1
- アイテム2
- アイテム3
Bootstrap5.xの設定例 緑背景が変更箇所
<ul class="list-group" style="max-width: 400px;">
<li class="list-group-item active" aria-current="true">アイテム1</li>
<li class="list-group-item">アイテム2</li>
<li class="list-group-item">アイテム3</li>
</ul>
※Bootstrap4.xの設定例 赤背景が変更箇所
<ul class="list-group" style="max-width: 400px;">
<li class="list-group-item active">アイテム1</li>
<li class="list-group-item">アイテム2</li>
<li class="list-group-item">アイテム3</li>
</ul>
【設定】
- アクティブにしたいアイテムの
.list-group-item
に.active
を追加
【アクセシビリティの設定】
.active
と同じ要素にaria-current="true"
(支援技術に現在のアイテムであることを伝える)を入れる
【変更履歴】
- 【v5.0.0-alpha1】(v4.6.0でバックポート)
- アクセシビリティの設定を追加
無効のアイテム(Disabled items)
.disabled
を .list-group-item
に追加すると、無効に見えるようになる。.disabled
を持つ要素の中には、(リンクなど)クリックイベントを完全に無効にするカスタムJavaScriptが必要な場合がある。
見本
- アイテム1
- アイテム2
- アイテム3
設定例
<ul class="list-group" style="max-width: 400px;">
<li class="list-group-item disabled" aria-disabled="true">アイテム1</li>
<li class="list-group-item">アイテム2</li>
<li class="list-group-item">アイテム3</li>
</ul>
【設定】
- 無効にしたいアイテムの
.list-group-item
に.disabled
を追加
【アクセシビリティの設定】
.disabled
と同じ要素にaria-disabled="true"
(支援技術に要素が無効の状態であることを伝える)を入れる
リンク付き&ボタンによるリストグループ(Links and buttons)
.list-group-item-action
を追加することで、ホバー、無効、アクティブ状態のアクション可能なリストグループアイテムを作成するには、<a>
や <button>
を使用する。これらの擬似クラスを分離して、非対話型要素(<li>
や <div>
など)で作成されたリストグループがクリックやタップ機能を提供しないようにする。
ここでは、標準の .btn
クラスは使用しないこと。
1. リンク付きリストグループ
見本
Bootstrap5.xの設定例 緑背景が変更箇所
<div class="list-group" style="max-width: 400px;">
<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">リンクアイテム2</a>
<a href="#" class="list-group-item list-group-item-action">リンクアイテム3</a>
<a href="#" class="list-group-item list-group-item-action disabled" tabindex="-1" aria-disabled="true">無効のリンクアイテム</a>
</div>
【設定】
div.list-group
>a.list-group-item.list-group-item-action
- アクティブ化したいリンクには、
a.list-group-item.list-group-item-action
に.active
とaria-current="true"
を追加 - 無効化したいリンクには、
a.list-group-item.list-group-item-action
に.disabled
を追加
【注意】
- リンク付きリストグループはリスト形式(
ul
>li
>a
)ではなく、div
>a
で作成
【アクセシビリティの設定】
.active
と同じ要素にaria-current="true"
(支援技術に現在のアイテムであることを伝える)を入れる.disabled
と同じ要素にtabindex="-1" aria-disabled="true"
(支援技術に要素が無効の状態であることを伝える)を入れる
【変更履歴】
- 【v5.0.0-alpha1】(v4.6.0でバックポート)
.active
関連のアクセシビリティの設定を追加
2. ボタンによるリストグループ
<button>
では、.disabled
クラスの代わりに disabled
属性も使用可能。悲しいことに、<a>
は disabled
属性をサポートしていない。
見本
Bootstrap5.xの設定例 緑背景が変更箇所
<div class="list-group" style="max-width: 400px;">
<button type="button" class="list-group-item list-group-item-action active" aria-current="true">現在のボタンアイテム</button>
<button type="button" class="list-group-item list-group-item-action">ボタンアイテム2</button>
<button type="button" class="list-group-item list-group-item-action">ボタンアイテム3</button>
<button type="button" class="list-group-item list-group-item-action" disabled>無効のボタンアイテム</button>
</div>
【設定】
div.list-group
>button.list-group-item.list-group-item-action
- アクティブ化したいボタンには、
a.list-group-item.list-group-item-action
に.active
とaria-current="true"
を追加 - 無効化したいボタンには、
<button>
にdisabled
属性を追加
外枠なし(Flush)
.list-group-flush
を追加すると、親コンテナ(カードなど)内でリストグループアイテムを端から端まで描画するために、いくつかの枠線と丸みのある角を削除可能。
見本
- アイテム1
- アイテム2
- アイテム3
設定例
<ul class="list-group list-group-flush" style="max-width: 400px;">
<li class="list-group-item">アイテム1</li>
<li class="list-group-item">アイテム2</li>
<li class="list-group-item">アイテム3</li>
</ul>
水平スタイル(Horizontal)v5.0.0-alpha1クラス追加
全てのブレークポイントにわたってリストグループアイテムのレイアウトを縦並びから横並びに変更するには .list-group-horizontal
を追加する。あるいは、レスポンシブ形式の .list-group-horizontal-{sm|md|lg|xl|xxl}
を選択して、そのブレークポイントの min-width
で始まるリストグループを水平にする。今のところ水平リストグループは枠なしリストグループと組み合わせることは不可。
ヒント:横並びの場合、等幅のリストグループアイテムが必要なら、各リストグループアイテム(.list-group-item
)に .flex-fill
を追加すること。
定義済みクラスの種類
●全てのブレークポイントで水平スタイル .list-group-horizontal
- アイテム1
- アイテム2(長め)
- アイテム3
●ビューポートが576px以上で水平スタイル .list-group-horizontal-sm
- アイテム1
- アイテム2(長め)
- アイテム3
●ビューポートが768px以上で水平スタイル .list-group-horizontal-md
- アイテム1
- アイテム2(長め)
- アイテム3
●ビューポートが992px以上で水平スタイル .list-group-horizontal-lg
- アイテム1
- アイテム2(長め)
- アイテム3
●ビューポートが1200px以上で水平スタイル .list-group-horizontal-xl
- アイテム1
- アイテム2(長め)
- アイテム3
●ビューポートが1400px以上で水平スタイル .list-group-horizontal-xxl
v5.0.0-alpha1追加
- アイテム1
- アイテム2(長め)
- アイテム3
●等幅のリストグループ
- アイテム1
- アイテム2(長め)
- アイテム3
設定例
全てのブレークポイント<ul class="list-group list-group-horizontal">
<li class="list-group-item">アイテム1</li>
<li class="list-group-item">アイテム2(長め)</li>
<li class="list-group-item">アイテム3</li>
</ul>
特定のブレークポイント<ul class="list-group list-group-horizontal-**">
<li class="list-group-item">アイテム1</li>
<li class="list-group-item">アイテム2(長め)</li>
<li class="list-group-item">アイテム3</li>
</ul>
等幅のリストグループ<ul class="list-group list-group-horizontal">
<li class="list-group-item flex-fill">アイテム1</li>
<li class="list-group-item flex-fill">アイテム2(長め)</li>
<li class="list-group-item flex-fill">アイテム3</li>
</ul>
表示の範囲
ビューポートの幅 |
極小 <576px |
小 ≥576px |
中 ≥768px |
大 ≥992px |
特大 ≥1200px |
超特大 ≥1400px |
---|---|---|---|---|---|---|
.list-group.list-group-horizontal |
横並び | |||||
.list-group.list-group-horizontal-sm |
縦並び | 横並び | ||||
.list-group.list-group-horizontal-md |
縦並び | 横並び | ||||
.list-group.list-group-horizontal-lg |
縦並び | 横並び | ||||
.list-group.list-group-horizontal-xl |
縦並び | 横並び | ||||
.list-group.list-group-horizontal-xxl v5.0.0-alpha1追加 |
縦並び | 横並び |
【設定】
- 常にリストグループを水平スタイルにするには
.list-group
にlist-group-horizontal
を追加 - 特定のビューポートでリストグループを水平スタイルにするには
.list-group
に.list-group-horizontal-{breakpoint}
を追加{breakpoint}
(sm
(小),md
(中),lg
(大),xl
(特大),xxl
(超特大)のいずれかを選択)は、グリッド・システムのビューポイントに準ずる
- 水平リストの幅を等幅にするには、
.list-group-item
に.flex(-{breakpoint})-fill
を追加{breakpoint}
は、.list-group-horizontal-{breakpoint}
の{breakpoint}
に合わせる
【変更履歴】
- 【v5.0.0-alpha1】
.list-group-horizontal-xxl
が追加
リストグループの背景色(Contextual classes)
背景色のクラスを使用して、状態が反映された背景と色でリストアイテムのスタイルを設定。
背景色の種類
- Primary:
.list-group-item-primary
- Secondary:
.list-group-item-secondary
- Success:
.list-group-item-success
- Info:
.list-group-item-info
- Warning:
.list-group-item-warning
- Danger:
.list-group-item-danger
- Light:
.list-group-item-light
- Dark:
.list-group-item-dark
- ※通常のアイテム
設定例
<ul class="list-group" style="max-width: 500px;">
<li class="list-group-item list-group-item-primary">アイテム</li>
...
</ul>
背景色のクラスも .list-group-item-action
で動作。ここではホバースタイルも追加されていることに注意。.active
状態もサポートし、背景色のついたリストグループアイテムのアクティブな選択を示すためにそれを適用。
背景色の種類
.list-group-item-primary.active
Primary:.list-group-item-primary
Secondaryのアクティブ化:.list-group-item-secondary.active
Secondary:.list-group-item-secondary
Successのアクティブ化:.list-group-item-success.active
Success:.list-group-item-success
Infoのアクティブ化:.list-group-item-info.active
Info:.list-group-item-info
Warningのアクティブ化:.list-group-item-warning.active
Warning:.list-group-item-warning
Dangerのアクティブ化:.list-group-item-danger.active
Danger:.list-group-item-danger
Lightのアクティブ化:.list-group-item-light.active
Light:.list-group-item-light
Darkのアクティブ化:.list-group-item-dark.active
Dark:.list-group-item-dark
※通常のアクティブ化のアイテム
※通常のアイテム
設定例
<div class="list-group" style="max-width: 500px;">
<a href="#" class="list-group-item list-group-item-action list-group-item-primary active" aria-current="true">アクティブ化</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-primary">アイテム</a>
...
</div>
【設定】
- 基本のリストグループ:
li.list-group-item
に.list-group-item-{themecolor}
(.list-group-item-{themecolor}
は、上記の「背景色の種類」から選択)を追加 {themecolor}
は、primary
,secondary
,success
,info
,warning
,danger
,light
,dark
のいずれかを選択- リンク付きリストグループ:
a.list-group-item.list-group-item-action
に.list-group-item-{themecolor}
(上記の「背景色の種類」から選択)を追加し、さらに.active
を追加するとアクティブ用の背景色になる
支援技術への意味の伝達
意味を追加するのにカラー名を使用しても視覚的な指示を提供するだけであり、スクリーンリーダーなどの支援技術のユーザーには伝わらないだろう。カラー名で表示された情報をコンテンツ自体で明らかにするか(可視テキストなど)、代替手段として追加のテキストなどを .visually-hidden
クラスで隠すなどして入れるようにすること。
枠線の色 ※裏技
各リストの枠線の色を変える。
見本
- アイテム1
- アイテム2
- アイテム3
設定例
<ul class="list-group" style="max-width: 400px;">
<li class="list-group-item border-warning">アイテム1</li>
<li class="list-group-item border-info">アイテム2</li>
<li class="list-group-item border-danger">アイテム3</li>
</ul>
【設定】
.list-group-item
に.border-{themecolor}
を追加(.border-{themecolor}
は境界ユーティリティの枠の色の種類から選択)
※.list-group
に.border-{themecolor}
を追加しても無効。全て同じ枠の色に設定する場合は、全ての.list-group-item
に設定が必要
【注意】
- リストごとに色を変える場合、最後のリスト以外は上部の線は指定した色が反映されない(前のリストで指定した色が反映)
バッジ付きリストグループ(With badges)
いくつかのユーティリティの助けを借りて、未読の数、活動などを表示するために、リストグループアイテムにバッジを追加。
見本
- リストアイテム114
- リストアイテム22
- リストアイテム31
設定例
<ul class="list-group" style="max-width: 400px;">
<li class="list-group-item d-flex justify-content-between align-items-center">
リストアイテム1
<span class="badge bg-primary rounded-pill">14</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
リストアイテム2
<span class="badge bg-primary rounded-pill">2</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
リストアイテム3
<span class="badge bg-primary rounded-pill">1</span>
</li>
</ul>
【設定】
li.list-group-item.d-flex.justify-content-between.align-items-center
(Flexboxで両端に配置) >span.badge.badge-{themecolor}.rounded-pill
(.badge-{themecolor}
は、「バッジの種類」から選択)
【注意】
- 行末側にバッジをとりつける場合は、《アイテムの内容》⇒《バッジの表示》の順に記載する必要がある
ヘッダありリンク付きリストグループ(Custom content)
Flexユーティリティの助けを借りて、下記のようなリンクリストグループの場合でも、ほぼすべてのHTMLを追加すること。
見本
Bootstrap5.xの設定例 緑背景が変更箇所
<div class="list-group" style="max-width: 400px;">
<a href="#" class="list-group-item list-group-item-action active" aria-current="true">
<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>
【設定】
a.list-group-item.list-group-item-action
> {div.d-flex.w-100.justify-content-between
(アイテムの幅を100%にして両端揃えに) > [h5.mb-1
(下側のマージンを0.25remに) +<small>
《サブコンテンツ》]}《ヘッダ》 + [p.mb-1
(下側のマージンを0.25remに) +<small>
《サブコンテンツ》]《コンテンツ》
チェックボックスとラジオボタン(Checkboxes and radios)v5.0.0-alpha1新設、v5.0.0-beta1設定変更
Bootstrapのチェックボックスとラジオボタンをリストグループアイテム内に配置し、必要に応じてカスタマイズ。<label>
はなくても使用可能だが、アクセシビリティのために aria-label
属性と value
値は入れること。
1. 基本の設定
見本
- チェックボックス1
- チェックボックス2
- チェックボックス3
- チェックボックス4
- チェックボックス5
Bootstrap5.xの設定例 緑背景が変更箇所
<ul class="list-group">
<li class="list-group-item">
<input class="form-check-input me-1" type="checkbox" value="" aria-label="...">
チェックボックス1
</li>
<li class="list-group-item">
<input class="form-check-input me-1" type="checkbox" value="" aria-label="...">
チェックボックス2
</li>
<li class="list-group-item">
<input class="form-check-input me-1" type="checkbox" value="" aria-label="...">
チェックボックス3
</li>
<li class="list-group-item">
<input class="form-check-input me-1" type="checkbox" value="" aria-label="...">
チェックボックス4
</li>
<li class="list-group-item">
<input class="form-check-input me-1" type="checkbox" value="" aria-label="...">
チェックボックス5
</li>
</ul>
※Bootstrap4.xの設定例 赤背景が変更箇所
<ul class="list-group">
<li class="list-group-item">
<input class="form-check-input mr-1" type="checkbox" value="" aria-label="...">
チェックボックス1
</li>
<li class="list-group-item">
<input class="form-check-input mr-1" type="checkbox" value="" aria-label="...">
チェックボックス2
</li>
<li class="list-group-item">
<input class="form-check-input mr-1" type="checkbox" value="" aria-label="...">
チェックボックス3
</li>
<li class="list-group-item">
<input class="form-check-input mr-1" type="checkbox" value="" aria-label="...">
チェックボックス4
</li>
<li class="list-group-item">
<input class="form-check-input mr-1" type="checkbox" value="" aria-label="...">
チェックボックス5
</li>
</ul>
【設定】
ul.list-group
>li.list-group-item
>input[type="checkbox"].form-check-input.me-1
[type="checkbox"]
を[type="radio"]
に変更すれば、チェックボックスがラジオボタンになる
【アクセシビリティの設定】
- ラベルテキストの代替として
<input>
にaria-label
属性(要素に対してラベル付けを行う)を入れる
【変更履歴】
- 【v5.0.0-beta1】
- RTL(右書き)の設定追加に伴い空白ユーティリティのクラス名変更
.mr-1
⇒.me-1
- RTL(右書き)の設定追加に伴い空白ユーティリティのクラス名変更
2. ラベル付き
また、大きなヒットエリアの .list-group-item
として <label>
が必要な場合は、それも設定可能。
見本
Bootstrap5.xの設定例 緑背景が変更箇所
<div class="list-group">
<label class="list-group-item">
<input class="form-check-input me-1" type="checkbox" value="">
チェックボックス1
</label>
<label class="list-group-item">
<input class="form-check-input me-1" type="checkbox" value="">
チェックボックス2
</label>
<label class="list-group-item">
<input class="form-check-input me-1" type="checkbox" value="">
チェックボックス3
</label>
<label class="list-group-item">
<input class="form-check-input me-1" type="checkbox" value="">
チェックボックス4
</label>
<label class="list-group-item">
<input class="form-check-input me-1" type="checkbox" value="">
チェックボックス5
</label>
</div>
※Bootstrap4.xの設定例 赤背景が変更箇所
<div class="list-group">
<label class="list-group-item">
<input class="form-check-input mr-1" type="checkbox" value="">
チェックボックス1
</label>
<label class="list-group-item">
<input class="form-check-input mr-1" type="checkbox" value="">
チェックボックス2
</label>
<label class="list-group-item">
<input class="form-check-input mr-1" type="checkbox" value="">
チェックボックス3
</label>
<label class="list-group-item">
<input class="form-check-input mr-1" type="checkbox" value="">
チェックボックス4
</label>
<label class="list-group-item">
<input class="form-check-input mr-1" type="checkbox" value="">
チェックボックス5
</label>
</div>
【設定】
div.list-group
>label.list-group-item
>input[type="checkbox"].form-check-input.me-1
【変更履歴】
- 【v5.0.0-beta1】
- RTL(右書き)の設定追加に伴い空白ユーティリティのクラス名変更
.mr-1
⇒.me-1
- RTL(右書き)の設定追加に伴い空白ユーティリティのクラス名変更
JavaScriptの動作(JavaScript behavior)v5.0.0-beta1設定変更
個別かコンパイルされた bootstrap.js
ファイルを通じてタブJavaScriptプラグインを使用して、リストグループを拡張して、ローカルコンテンツのタブ切替パネルを作成。
見本
Bootstrap5.xの設定例 緑背景が変更箇所
<div class="row">
<div class="col-4">
<div class="list-group" id="list-tab" role="tablist">
<a class="list-group-item list-group-item-action active" aria-current="true" id="list-home-list" data-bs-toggle="list" href="#list-home" role="tab" aria-controls="list-home">ホーム</a>
<a class="list-group-item list-group-item-action" id="list-profile-list" data-bs-toggle="list" href="#list-profile" role="tab" aria-controls="list-profile">プロフィール</a>
<a class="list-group-item list-group-item-action" id="list-messages-list" data-bs-toggle="list" href="#list-messages" role="tab" aria-controls="list-messages">メッセージ</a>
<a class="list-group-item list-group-item-action" id="list-settings-list" data-bs-toggle="list" href="#list-settings" role="tab" aria-controls="list-settings">セッティング</a>
</div>
</div>
<div class="col-8">
<div class="tab-content" id="nav-tabContent">
<div class="tab-pane fade show active" id="list-home" role="tabpanel" aria-labelledby="list-home-list">「ホーム」に関連する段落のプレースホルダーコンテンツ。...</div>
<div class="tab-pane fade" id="list-profile" role="tabpanel" aria-labelledby="list-profile-list">「プロフィール」に関連する段落のプレースホルダーコンテンツ。...</div>
<div class="tab-pane fade" id="list-messages" role="tabpanel" aria-labelledby="list-messages-list">「メッセージ」に関連する段落のプレースホルダーコンテンツ。...</div>
<div class="tab-pane fade" id="list-settings" role="tabpanel" aria-labelledby="list-settings-list">「セッティング」に関連する段落のプレースホルダーコンテンツ。...</div>
</div>
</div>
</div>
【設定】
div.list-group
>a.list-group-item.list-group-item-action[data-bs-toggle="list"]
《リスト部分》 + [.tab-content
>.tab-pane
]《パネル部分》
【アクセシビリティの設定】
div.list-group
に、role="tablist"
(タブリストの役割を伝える)を入れるa.list-group-item.list-group-item-action
に、role="tab"
属性(支援技術にタブ部分の役割を伝える)aria-controls="パネルのID"
属性(タブパネルのタブ部分とパネル部分を関連付ける).active
を追加する場合は、[aria-current="true"]
(支援技術に現在のリストであることを伝える)
div.tab-pane
に、role="tabpanel"
属性(支援技術にパネル部分の役割を伝える)aria-labelledby="リストのID"
属性(タブパネルのタブ部分とパネル部分を関連付ける)
【変更履歴】
- 【v5.0.0-alpha1】
a.list-group-item.list-group-item-action.active
に[aria-current="true"]
を入れる
- 【v5.0.0-beta1】
data-
属性に名前空間bs-
を追加[data-toggle="list"]
⇒[data-bs-toggle="list"]
データ属性の使用(Using data attributes)
単に data-bs-toggle="list"
を指定するだけで、要素にJavaScriptを書くことなく、リストグループのナビゲーションを有効にすることが可能。これらのデータ属性は、.list-group-item
で使用。
設定例
<div role="tabpanel">
<!-- リストグループ -->
<div class="list-group" id="myList" role="tablist">
<a class="list-group-item list-group-item-action active" aria-current="true" data-bs-toggle="list" href="#home" role="tab">ホーム</a>
<a class="list-group-item list-group-item-action" data-bs-toggle="list" href="#profile" role="tab">プロフィール</a>
<a class="list-group-item list-group-item-action" data-bs-toggle="list" href="#messages" role="tab">メッセージ</a>
<a class="list-group-item list-group-item-action" data-bs-toggle="list" href="#settings" role="tab">セッティング</a>
</div>
<!-- パネル部分 -->
<div class="tab-content">
<div class="tab-pane active" id="home" role="tabpanel">...</div>
<div class="tab-pane" id="profile" role="tabpanel">...</div>
<div class="tab-pane" id="messages" role="tabpanel">...</div>
<div class="tab-pane" id="settings" role="tabpanel">...</div>
</div>
</div>
JavaScript経由で(Via JavaScript)v5.0.0-alpha1設定変更
JavaScriptを使用してタブ切替可能なリストアイテムを有効にする(各リストアイテムは個別に有効にする必要あり):
Bootstrap5.xの設定例
JavaScriptvar triggerTabList = [].slice.call(document.querySelectorAll('#myList a'))
triggerTabList.forEach(function (triggerEl) {
var tabTrigger = new bootstrap.Tab(triggerEl)
triggerEl.addEventListener('click', function (event) {
event.preventDefault()
tabTrigger.show()
})
})
※Bootstrap4.xの設定例
JavaScript$('#myList a').on('click',function (event) {
event.preventDefault()
$(this).tab('show')
})
いくつかの方法で個々のリストアイテムをアクティブにすることが可能:
Bootstrap5.xの設定例
JavaScriptvar triggerEl = document.querySelector('#myList a[href="#profile"]')
bootstrap.Tab.getInstance(triggerEl).show() // リストアイテム名で選択
var triggerFirstTabEl = document.querySelector('#myList li:first-child a')
bootstrap.Tab.getInstance(triggerFirstTabEl).show() // 最初のリストアイテムを選択
※Bootstrap4.xの設定例
JavaScript$('#myList a[href="#profile"]').tab('show') // リストアイテム名で選択
$('#myList a:first-child').tab('show') // 最初のリストアイテムを選択
【変更履歴】
- 【v5.0.0-alpha1】
- JavaScriptの設定がjQueryに依存しない方法に変更
フェード効果(Fade effect)
タブパネルをフェードインさせるには、各 .tab-pane
に .fade
を追加。最初のタブパネルには、最初のコンテンツを表示させるために .show
が必要。
メソッド(Methods)v5.0.0-alpha1設定変更、追加
コンストラクタ(constructor)
リストアイテム要素とコンテンツコンテナをアクティブにする。タブは、DOM内のコンテナの接点をターゲットとする data-bs-target
か href
が必要。
HTML<div class="list-group" id="myList" role="tablist">
<a class="list-group-item list-group-item-action active" aria-current="true" data-bs-toggle="list" href="#home" role="tab">ホーム</a>
<a class="list-group-item list-group-item-action" data-bs-toggle="list" href="#profile" role="tab">プロフィール</a>
<a class="list-group-item list-group-item-action" data-bs-toggle="list" href="#messages" role="tab">メッセージ</a>
<a class="list-group-item list-group-item-action" data-bs-toggle="list" href="#settings" role="tab">セッティング</a>
</div>
<div class="tab-content">
<div class="tab-pane active" id="home" role="tabpanel">...</div>
<div class="tab-pane" id="profile" role="tabpanel">...</div>
<div class="tab-pane" id="messages" role="tabpanel">...</div>
<div class="tab-pane" id="settings" role="tabpanel">...</div>
</div>
Bootstrap5.xの設定例
JavaScriptvar firstTabEl = document.querySelector('#myList a:last-child')
var firstTab = new bootstrap.Tab(firstTabEl)
firstTab.show()
※Bootstrap4.xの設定例
JavaScript<script>
$(function () {
$('#myList a:last-child').tab('show')
})
</script>
show
指定されたリストアイテムを選択し、関連するコンテンツを表示。その前に選択された他のリストアイテムは選択解除され、関連するコンテンツは非表示になる。タブパネル区画が実際に表示される前に(例えば、shown.bs.tab
イベント発動前)に呼び出し元に戻る。
JavaScript var someListItemEl = document.querySelector('#someListItem')
var tab = new bootstrap.Tab(someListItemEl)
tab.show()
dispose
要素のタブを破棄。
getInstance v5.0.0-alpha1追加
DOM要素に関連付けられたタブ・インスタンスを取得することを可能にする静的メソッド
JavaScriptvar triggerEl = document.querySelector('#trigger')
var tab = bootstrap.Tab.getInstance(triggerEl) // Bootstrapタブ・インスタンスを返す
【変更履歴】
- 【v5.0.0-alpha1】
$().tab('show')
⇒tab.show()
getInstance
メソッドが追加
イベント(Events)
新しいタブを表示すると、イベントは次の順序で発動:
hide.bs.tab
(現在のアクティブなタブに)show.bs.tab
(次に表示されるタブに)hidden.bs.tab
(前のアクティブなタブではhide.bs.tab
イベントと同じもの)shown.bs.tab
(新しくアクティブ化されて表示されるタブではshow.bs.tab
イベントと同じもの)
既にアクティブなタブがない場合、hide.bs.tab
と hidden.bs.tab
イベントは発動しない。
イベントタイプ | 説明 |
---|---|
show.bs.tab |
タブが表示される前に、タブの表示で発動。アクティブなタブと前のアクティブなタブ(使用可能な場合)をそれぞれターゲットにするには event.target と event.relatedTarget を使用 |
shown.bs.tab |
タブが表示された後、タブの表示で発動。アクティブなタブと前のアクティブなタブ(使用可能な場合)をそれぞれターゲットにするには event.target と event.relatedTarget を使用 |
hide.bs.tab |
新しいタブが表示されるときに発動(従って、前のアクティブなタブは非表示になる)。event.target と event.relatedTarget を使用して、現在のアクティブなタブと次にアクティブになる新しいタブをそれぞれターゲットにする |
hidden.bs.tab |
新しいタブが表示された後に発動(従って、前のアクティブなタブは非表示になる)。event.target と event.relatedTarget を使用して、前のアクティブなタブと新しいアクティブなタブをそれぞれターゲットにする |
使用例 v5.0.0-beta1設定変更
JavaScriptvar tabEl = document.querySelector('a[data-bs-toggle="list"]')
tabEl.addEventListener('shown.bs.tab', function (event) {
event.target // 新しくアクティブ化されたタブ
event.relatedTarget // 前のアクティブなタブ
})