Bootstrap 4 / Tabs / 탭 만들기

제목들이 나열되어 있고, 제목을 클릭하면 같은 화면에서 내용이 바뀌는 것을 탭이라고 합니다. 탭을 이용하면 작은 공간에 많은 콘텐츠를 담을 수 있습니다.

아래는 간단한 탭 예제입니다. QWE의 내용이 보여지는 상태에서...

ASD나 ZXC를 클릭하면 화면 전환 없이 내용이 바뀝니다.

Bootstrap을 이용하면 탭을 쉽게 만들 수 있습니다. 위 탭을 만든 코드는 다음과 같습니다.

  • 클래스의 값이 active인 것이 페이지를 열었을 때 보여지는 제목과 내용입니다.
  • data-toggle="tab"이 탭으로 보여주게 만드는 코드입니다.

아래는 문서의 전체 코드입니다.

ul 요소의 클래스 값 중 nav-tabs를 nav-pills로 바꾸면 다음처럼 모양이 바뀝니다.