Class(2017-1)練習2

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

一、頁籤Tabs

BS:【JavaScript】>【頁籤Tabs】

<!-- Tab 頁籤 ========================================================= -->
<div class="container-fluid">
    <!-- 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">
                <span class="nav1">Home</span>
                <span class="nav2"><i class="fa fa-home" aria-hidden="true"></i></span>
            </a>
        </li>
        <li role="presentation">
            <a href="#thumbnail" aria-controls="thumbnail" role="tab" data-toggle="tab">
                <span class="nav1">學習相簿</span>
                <span class="nav2"><i class="fa fa-picture-o" aria-hidden="true"></i></span>
            </a>
        </li>
        <li role="presentation">
            <a href="#Coursetopics" aria-controls="Coursetopics" role="tab" data-toggle="tab">
                <span class="nav1">課程主題</span>
                <span class="nav2"><i class="fa fa-book" aria-hidden="true"></i></span>
            </a>
        </li>
        <li role="presentation">
            <a href="#designschool" aria-controls="designschool" role="tab" data-toggle="tab">
                <span class="nav1">設計學院</span>
                <span class="nav2"><i class="fa fa-bar-chart" aria-hidden="true"></i></span>
            </a>
        </li>
        <li role="presentation">
            <a href="#news" aria-controls="news" role="tab" data-toggle="tab">
                <span class="nav1">最新消息</span>
                <span class="nav2"><i class="fa fa-newspaper-o" aria-hidden="true"></i></span>
            </a>
        </li>
    </ul>

    <!-- Tab panes -->
    <div class="tab-content">
        <div role="tabpanel" class="tab-pane active" id="home">Home內文</div>

        <div role="tabpanel" class="tab-pane" id="thumbnail">學習相簿內文</div>

        <div role="tabpanel" class="tab-pane" id="Coursetopics">課程主題內文</div>            
        <div role="tabpanel" class="tab-pane" id="designschool">設計學院內文</div>
        <div role="tabpanel" class="tab-pane" id="news">最新消息內文</div>
    </div>

</div>

 

/*Tab 頁籤 ===========================================================*/
.nav-tabs { text-align: center; }
.nav-tabs > li { display: inline-block; float: none;}

.nav-tabs>li>a>span.nav2 { display: none; }



@media( max-width:550px ){
    /* 寬度768px以上時, navbar選單區中的不同設定 */
    /* 小於550px以下時的tab部份 */
    .nav-tabs>li>a { padding:5px; }
    .nav-tabs>li>a>span.nav2 { display:block; color: #16016d; font-size: 20px; }
    .nav-tabs>li>a>span.nav1 { display:none; }
}