Bootstrap之選項卡

<div class="container">
        <!-- nav-tabs作為選項卡頭部樣式 -->
        <ul class="nav nav-tabs">
            
            <li class="active"><a href="">one</a></li>
            <li><a href="">two</a></li>
            <li><a href="">three</a></li>

        </ul>

        <!-- nav-justified端點對齊 按鈕寬度總和等於父級寬度 -->
        <ul class="nav nav-tabs nav-justified">
            
            <li class="active"><a href="">one</a></li>
            <li><a href="">two</a></li>
            <li><a href="">three</a></li>

        </ul>

        <!-- nav-tabs-justified 底線端點對齊(自適應) -->
        <ul class="nav nav-tabs nav-tabs-justified">
            
            <li class="active"><a href="">one</a></li>
            <li><a href="">two</a></li>
            <li><a href="">three</a></li>

        </ul>

        <!-- nav-pills按鈕選項卡 加上nav-justified可端點對齊(自適應寬度) -->
        <ul class="nav nav-tabs nav-pills nav-justified">
            
            <li class="active"><a href="">one</a></li>
            <li><a href="">two</a></li>
            <li><a href="">three</a></li>

        </ul>

        <!-- nav-stacked豎向選項卡 配合nav-pills使用 -->
        <ul class="nav nav-tabs nav-pills nav-stacked">
            
            <li class="active"><a href="">one</a></li>
            <li><a href="">two</a></li>
            <li><a href="">three</a></li>

        </ul>

        <ul class="nav nav-tabs">
            <!-- data-toggle='tab'切換屬性 然后可通過錨點進行切換-->
            <li class="active"><a href="#a" data-toggle='tab'>one</a></li>
            <li><a href="#b" data-toggle='tab'>two</a></li>
            <li><a href="#c" data-toggle='tab'>three</a></li>

        </ul>
        <!-- tab-content內容部分 -->
        <ul class="tab-content">
        <!-- fade淡入淡出 in為一開始為顯示 -->
            <li id="a" class="tab-pane fade in active">aaaaa</li>
            <li id="b" class="tab-pane fade">bbbbb</li>
            <li id="c" class="tab-pane fade">ccccc</li>
        </ul>    

    </div>