• タブ実装の際には .tnav .mt-tabs の 2 クラスを記述してください。
  • アクセシビリティ配慮のためにタブには role="tablist"を追記してください。
  • タブコンテンツ .tab-pane には、role="tabpanel"を追記してください。
  • 本ドキュメンテーションでは JavaScript を使った操作は含まれていません。Bootstrap の tab.js を利用するか、別の手段で実装してください。
  • 選択中の情報にはタブリンク、コンテンツエリア共に .active が追記されます。
  • 情報又は機能でグループ分けできない場合はタブを使用しないようにしてください。単にスペースを節約するためだけに使う場合は、分類する方法はないか考慮した上で実装してください。

基本形

<ul class="nav mt-tabs" id="myTab" role="tablist">
  <li class="nav-item"><a class="nav-link active" href="#tabContent1">アクティブ</a></li>
  <li class="nav-item"><a class="nav-link" href="#tabContent2">リンク</a></li>
  <li class="nav-item"><a class="nav-link" href="#tabContent3">リンク</a></li>
</ul>
<div class="tab-content" id="myTabContent">
  <div class="tab-pane show active" role="tabpanel" id="tabContent1" aria-labelledby="myTabContent-tab">1</div>
  <div class="tab-pane" role="tabpanel" id="tabContent2" aria-labelledby="tabContent2-tab">2</div>
  <div class="tab-pane" role="tabpanel" id="tabContent3" aria-labelledby="tabContent3-tab">3</div>
</div>