Bootstrap 事例

1 選項卡

<ul id="myTab" class="nav nav-tabs">
        <li class="active">
            <a href="#A" data-toggle="tab">生成批次查詢</a>
        </li>
        <li><a href="#B" data-toggle="tab">條碼查詢</a></li>
        <li><a href="#C" data-toggle="tab">時間軸</a></li>
    </ul>
    <!--選項卡A-->
    <div class="tab-pane fade in active" id="A">
        <label class="control-label" for="dropdown_apply_person_A">生成批次號</label>
        <div class="bootstrap-select">
            <select name="dropdown_apply_person_A" class="selectpicker" data-size="5" id="dropdown_apply_person_A" data-width="150px" data-live-search="true">
                <option> </option>
            </select>
        </div>
        <button type="button" class="btn btn-default">查詢</button>
    </div>
    <!--選項卡B-->
    <div class="tab-pane fade" id="B">

    </div>
    <!--選項卡C-->
    <div class="tab-pane fade" id="C">

    </div>