bootstrap_toggle

 

<toggle>

 

 

• 내용과 탭을 id값으로 연결
• 탭 리스트는 ul - li 태그를 사용하여 만듬

 

<div class="container" >
        <ul class="nav nav-tabs">
            <li class="active"><a href="#home" data-toggle="tab">홈</a></li> <!--id값으로 연결--> 
            <li><a href="#tab1" data-toggle="tab">탭1</a></li>
            <li><a href="#tab2" data-toggle="tab">탭2</a></li>
            <li><a href="#tab3" data-toggle="tab">탭3</a></li>
        </ul>

        <div class="tab-content">
            <div class="tab-pane active" id="home">
                <h3>홈</h3>
                    <p>1번</p>
                </div>
            <div class="tab-pane" id="tab1">
                <h3>홈</h3>
                <p>2번</p>
            </div>
            <div class="tab-pane" id="tab2">
                <h3>홈</h3>
                <p>3번</p>
            </div>
            <div class="tab-pane" id="tab3">
                <h3>홈</h3>
                <p>4번</p>
            </div>
        </div>
    </div>