Class(2017-1)練習1

三、【Banner】區塊

BS:【元件Components】>【大銀幕效果Jumbotron】

確認項目:

1.加入圖片:【CSS】>【圖片Images】

2.不同行動裝置元素排列方式【CSS】>【格線系統Grid system】>【格線選項Grid options】

3.增加按鈕【CSS】>【按鈕Buttons】

4.影片加入【元件 Components】>【自適應嵌入內容 Responsive embed】

課程影片:【https://www.youtube.com/watch?v=g3US2zv2uTE

5.增加文字色彩【CSS】>【輔助類別Helper classes】>【情境顏色Contextual colors】

6.增加JS物件:提示訊息【JavaScript】>【提示訊息Tooltips】

學習目的:

(1)透過【data-toggle】屬性,與JQ結合:

將元素條件寫入於HTML結構上,減少JQ陳述
(參考HTML data-* 屬性、JQ Mobile Data屬性應用範例)

(2)透過JavaScript自訂元素觸發

 

<!--  Home ===================================================================== -->
<div class="jumbotron">
    <div class="container-fluid">
        <div class="col-xs-12 col-md-6">
            <!-- 16:9 aspect ratio -->
            <div class="embed-responsive embed-responsive-16by9">
                <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/g3US2zv2uTE" frameborder="0" allowfullscreen></iframe>
            </div>
        </div>
        <div class="col-xs-12 col-md-6">
            <h3 class="h2 text-center text-danger">電腦課程開班囉!!</h3>
            <p>不論文化美學、有價值及競爭力創意視覺或商業設計,最重要的是「維持創作的戰鬥力!」跨界創意視覺設計、響應式跨平台網頁設計、PHP購物網站設計、Adobe ACA國際認證等課程,一步步打好基礎,用多媒體能力替自己的創意代言!</p>
            <ul class="h5 text-warning">
                <li>視覺設計</li>
                <li>手機APP設計</li>
                <li>程式/資料庫</li>
                <li>建築室內設計</li>
                <li>3D多媒體動畫</li>
                <li>影視特效</li>
                <li>工業設計</li>
                <li>網路管理</li>
                <li>辦公室應用軟體</li>
                <li  class="list-inline">...</li>
            </ul>
            <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
        </div>
    </div>
</div>

 

/* Home===================================================================*/
.jumbotron .container-fluid{
    display: flex; flex-wrap: wrap;
}
 
.jumbotron .container-fluid div{
    /* background: #ffbbbb;*/
    display: flex;
}
.jumbotron .container-fluid .img-thumbnail{
    border: 10px solid #ffffff; border-radius: 20px;
}
.jumbotron .container-fluid div:nth-child(1){/* background: #ffbbbb;*/
    flex: 1; align-items: center;
}
.jumbotron .container-fluid div:nth-child(2){flex-direction: column;}
.jumbotron .container-fluid div:nth-child(2) p:last-child{
    margin-top: auto; margin-bottom: 20px; align-self: center;
    align-self: flex-end;
}

 

//tooltip
$(function() {
    $('[data-toggle="tooltip"]').tooltip()
})

//tooltip
$(function() {
    $('[data-toggle="popover"]').popover()
})

四、footer加入及美化

<!--===================================================================-->
<footer class="container-fluid">
    Practice for education only.Please notify the webmaster for any picture violations.<br>網站圖文主要源自:巨匠電腦官網
</footer>

 

/* footer ===============================================================*/
footer{ background: #fff; text-align: center; padding: 10px 0; }
span{color: #a5a5a5; font-size: 12px;}