PetHouse(2016)練習2

套用【網頁前端框架】讓網站設計更快捷

範例結果

一、第二段階準備工作

BS:【JavaScript】>【頁籤Tabs】

前置作業:

S1:將【頁籤Tabs】Html結構貼入,並整理(如下圖)

<!--Tabs Start=====================================================================================-->
<div class="container-filud" id="tabs">
    <div role="tabpanel">
        <!-- Nav tabs -->
        <ul class="nav nav-tabs" role="tablist">
            <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">簡介</a></li>
            <li role="presentation"><a href="#BgSize" aria-controls="BgSize" role="tab" data-toggle="tab">背景尺寸設定</a></li>
            <li role="presentation"><a href="#Table" aria-controls="Table" role="tab" data-toggle="tab">Table</a></li>
            <li role="presentation"><a href="#Accordion" aria-controls="Accordion" role="tab" data-toggle="tab">Accordion</a></li>
            <li role="presentation"><a href="#slider" aria-controls="slider" role="tab" data-toggle="tab">Slider</a></li>
            <li role="presentation"><a href="#news" aria-controls="news" role="tab" data-toggle="tab">news最新消息</a></li>
        </ul>
        <!-- Tab panes -->
        <div class="container">
            <div class="tab-content">
                <div role="tabpanel" class="tab-pane active" id="home">
                    <!--簡介 Start=======================================-->     

                    <!--簡介 End-->
                </div>
                <div role="tabpanel" class="tab-pane" id="BgSize">
                    <!--背景尺寸設定 Start=======================================-->

                    <!--背景尺寸設定 End-->
                </div>
                <div role="tabpanel" class="tab-pane" id="Table">
                    <!--Table表格 Start=======================================-->

                    <!--Table表格 End-->
                </div>
                <div role="tabpanel" class="tab-pane" id="Accordion">
                    <!--Accordion Start=======================================-->

                    <!--Accordion End-->
                </div>
                <div role="tabpanel" class="tab-pane" id="slider">
                    <!--slider Start=======================================-->

                    <!--slider End-->
                </div>
                <div role="tabpanel" class="tab-pane" id="news">
                    <!--news Start=======================================-->

                    <!--news End-->
                </div>
            </div><!-- class="tab-content"-->
        </div><!--class="container" End-->
    </div><!-- role="tabpanel" End-->      
</div>
<!--Tabs End-->

S2:將【簡介】內容移至【Tabs第一頁內】