부트 스트랩 탭 사용하기

https://www.w3schools.com/bootstrap/bootstrap_tabs_pills.asp

Bootstrap Tabs and Pills

 

이 페이지에 대한 공부기록입니다 

부트스트랩 3 기준입니다.

 

1. 탭 생성하기

 

<ul class = "nav nav-tabs">
	<li class="active"><a href="#1">시작</a></li>
    <li><a href="#2">2</a></li>
    <li><a href="#3">3</a></li>
</ul>

 

1. 탭 생성하기

<ul class="nav nav-tabs">

 

2. 현재 페이지 active 표현

<li class="active">

 

2. 드롭다운 메뉴가 있는 탭

<ul class="nav nav-tabs">
	<li class="active"><a href="#">시작</a></li>
    <li class="dropdown">
    	<a class="dropdown-toggle" data-toggle="dropdown" href="#">menu1
        <span class=c"aret"></span></a> //아이콘
        <ul class = "dropdown-menu">
        	<li><a href="#" submenu1-1</a></li>
            <li><a href="#" submenu1-2</a></li>
            <li><a href="#" submenu1-3</a></li>
        </ul>
   </li>
   <li><a href="#">menu2</a></li>
   <li><a href="#">menu3</a></li>
   </ul>

 

3. pills 탭 생성

 

이렇게 둥글둥글 생긴 탭을 알약(pills)

1. nav-pills 로 생성하면 된다. 

 

<ul class="nav nav-pills">
	<li class="active"><a href="#">시작</a></li>
    <li ><a href="#">시작2</a></li>
</ul>

 

2. 수직으로 표현하고 싶다면 클래스에  nav-stacked  를 추가하면 됩니다

<ul class="nav nav-pills nav-stacked">
	<li class="active"><a href="#">시작</a></li>
    <li ><a href="#">시작2</a></li>
</ul>

 

3. 탭을 가운데 맞추거나, 정렬을 하고 싶다면 nav-justified  를 추가하면 됩니다. 

<ul class="nav nav-pills nav-justified">
	<li class="active"><a href="#">시작</a></li>
    <li ><a href="#">시작2</a></li>
</ul>

 

 

4. 탭 토글가능하게 하기

 

탭에 토글을 가능하게 하려면 data-toggle="tab" 를 링크에 속성을 추가하면 된다. 

-> 탭에 내용을 보였다가 안보였다가 하기 위해선 

 

 

1. data-toggle="tab" 를 링크에 속성을 추가

 

2. tab-pane  에 고유한 id 가 있는 클래스를 추가

 

3. 탭을 클릭할 때, 페이드 인, 페이드 아웃을 위해  fade 클래스 추가

 

<ul class="nav nav-tabs">
	<li class="active"><a data-toggle="tab" href="#home1">시작1</a></li>
    <li><a data-toggle="tab" href="#home2">시작2</a></li>
    <li ><a data-toggle="tab" href="#home3">시작3</a></li>
</ul>

<div class="tab-content">
	<div id="home1" class="tab-pane fade in active">
    <h3>시작1</h3>
    </div>
    <div id="home2" class="tab-pane fade">
    <h3>시작2</h3>
    </div>
    <div id="home3" class="tab-pane fade">
    <h3>시작3</h3>
    </div>
</div>