부트스트랩4 동적 탭 인터페이스

1 개요[ | ]

Bootstrap4 Dynamic Tabbed Interface
부트스트랩4 동적 탭 인터페이스
부트스트랩4 다이나믹 탭

<link rel="stylesheet" href="//unpkg.com/bootstrap@4/dist/css/bootstrap.min.css">
<script src='//unpkg.com/jquery@3/dist/jquery.min.js'></script>
<script src='//unpkg.com/popper.js@1/dist/umd/popper.min.js'></script>
<script src='//unpkg.com/bootstrap@4/dist/js/bootstrap.min.js'></script>

<ul class="nav nav-tabs">
  <li class="nav-item">
    <a class="nav-link active" data-toggle="tab" href="#id1">탭1</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-toggle="tab" href="#id2">탭2</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-toggle="tab" href="#id3">탭3</a>
  </li>
</ul>
<div class="tab-content">
  <div class="tab-pane fade show active" id="id1">내용1</div>
  <div class="tab-pane fade" id="id2">내용2</div>
  <div class="tab-pane fade" id="id3">내용3</div>
</div>

2 같이 보기[ | ]

3 참고[ | ]

https://getbootstrap.com/docs/4.3/components/navs/#javascript-behavior