nav.html

nav. html

    <div class="container">
        <div class="page-header">
            <h1>bs3-tabs</h1>
        </div>
 
        <div role="tabpanel">
            <!-- Nav tabs -->
            <!-- 
                .nav-tabs 대신 .nav-pills를 적용하면 탭이 버튼형태로 변경됨
                .nav-justified 적용 여부에 따라 화면을 가득 채울지 결정됨-->
            <ul class="nav nav-tabs" nav-justified role="tablist">
                <li class="active">
                    <a href="#home" data-toggle="tab">home</a>
                </li>
                <li>
                    <a href="#tab" data-toggle="tab">tab</a>
                </li>
            </ul>
        
            <!-- Tab panes -->
            <div class="tab-content">
                <!-- 화면 전환시 fade 효과를 부여할 경우 
                    1) 첫 화면은 fain, in 클래스 적용
                    2) 나머지 화면은 fade 클래스만 적용 -->
                <div class="tab-pane fade in active" id="home">Hello Bootstrap</div>
                <div class="tab-pane fade" id="tab">안녕 부트스트랩</div>
            </div>
        </div>
        
    </div>

<결과물>

---