Class(2017-1)練習2

二、【課程主題】區塊

2-1 課程主題 html 結構加入

BS:【元件Components】>【縮圖Thumbnails】>【自訂內容Custom content】

確認項目:

1.Html5之下viedo加入

2.CSS【Flex】再應用

 <!--  課程主題  ===================================================================== -->
<div class="container">
<div class="row" id="classlist">
<h2 class="text-center">課程主題</h2>
<div class="col-xs-12 col-sm-6 col-md-4">
<div class="thumbnail">
<div class="embed-responsive embed-responsive-16by9">
<video class="embed-responsive-item" autoplay loop muted>
<source src="images/class01.mp4" type="video/mp4">
</video>
</div>
<div class="caption">
<h3>1視覺設計</h3>
<ul class="text-primary">
<li>跨界創意視覺設計</li>
<li>響應式跨平台網頁設計</li>
<li>Painter原畫美術設計</li>
<li>行動裝置UI設計</li>
</ul>
<p><a href="#" class="btn btn-primary" role="button">課程查詢</a></p>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-4">
<div class="thumbnail">
<div class="embed-responsive embed-responsive-16by9">
<video class="embed-responsive-item" autoplay loop muted>
<source src="images/class02.mp4" type="video/mp4">
</video>
</div>
<div class="caption">
<h3>2.手機APP設計</h3>
<ul class="text-primary">
<li>iOS APP企業實務應用開發</li>
<li>Android穿戴式雲端應用開發</li>
<li>行動裝置UI視覺設計</li>
<li>iOS APP程式實務應用</li>
</ul>
<p><a href="#" class="btn btn-primary" role="button">課程查詢</a></p>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-4">
<div class="thumbnail">
<div class="embed-responsive embed-responsive-16by9">
<video class="embed-responsive-item" autoplay loop muted>
<source src="images/class03.mp4" type="video/mp4">
</video>
</div>
<div class="caption">
<h3>3.程式/資料庫</h3>
<ul class="text-primary">
<li>Java OCP JP程式設計認證</li>
<li>智慧物聯網程式設計</li>
<li>程式設計先修</li>
</ul>
<p><a href="#" class="btn btn-primary" role="button">課程查詢</a></p>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-4">
<div class="thumbnail">
<div class="embed-responsive embed-responsive-16by9">
<video class="embed-responsive-item" autoplay loop muted>
<source src="images/class04.mp4" type="video/mp4">
</video>
</div>
<div class="caption">
<h3>4.建築室內設計</h3>
<ul class="text-primary">
<li>AutoCAD室內設計師</li>
<li>SketchUp超簡單室內設計</li>
<li>3ds Max室內建築設計</li>
<li>室內設計實務</li>
</ul>
<p><a href="#" class="btn btn-primary" role="button">課程查詢</a></p>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-4">
<div class="thumbnail">
<div class="embed-responsive embed-responsive-16by9">
<video class="embed-responsive-item" autoplay loop muted>
<source src="images/class05.mp4" type="video/mp4">
</video>
</div>
<div class="caption">
<h3>5.3D多媒體動畫</h3>
<ul class="text-primary">
<li>3ds Max跨平台遊戲動畫設計</li>
<li>Unity VR、3D互動式遊戲</li>
<li>Painter 遊戲原畫設計師</li>
<li>Maya動畫特效設計</li>
</ul>
<p><a href="#" class="btn btn-primary" role="button">課程查詢</a></p>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-4">
<div class="thumbnail">
<div class="embed-responsive embed-responsive-16by9">
<video class="embed-responsive-item" autoplay loop muted>
<source src="images/class06.mp4" type="video/mp4">
</video>
</div>
<div class="caption">
<h3>6.影視特效</h3>
<ul class="text-primary">
<li>Unity VR虛擬實境</li>
<li>3ds Max跨平台遊戲場景設計</li>
</ul>
<p><a href="#" class="btn btn-primary" role="button">課程查詢</a></p>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-4">
<div class="thumbnail">
<div class="embed-responsive embed-responsive-16by9">
<video class="embed-responsive-item" autoplay loop muted>
<source src="images/class07.mp4" type="video/mp4">
</video>
</div>
<div class="caption">
<h3>7.工業設計</h3>
<ul class="text-primary">
<li>AutoCAD機械繪圖設計師</li>
<li>Pro/E 產品機構工程師</li>
<li>AutoCAD認證輔導</li>
<li>AutoCAD先修</li>
</ul>
<p><a href="#" class="btn btn-primary" role="button">課程查詢</a></p>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-4">
<div class="thumbnail">
<div class="embed-responsive embed-responsive-16by9">
<video class="embed-responsive-item" autoplay loop muted>
<source src="images/class08.mp4" type="video/mp4">
</video>
</div>
<div class="caption">
<h3>8.網路管理</h3>
<ul class="text-primary">
<li>網路管理先修</li>
<li>MCSA雲端網路實務認證</li>
<li>MCSE網路伺服器國際認證</li>
<li>Cisco網路工程師實戰班</li>
</ul>
<p><a href="#" class="btn btn-primary" role="button">課程查詢</a></p>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-4">
<div class="thumbnail">
<div class="embed-responsive embed-responsive-16by9">
<video class="embed-responsive-item" autoplay loop muted>
<source src="images/class09.mp4" type="video/mp4">
</video>
</div>
<div class="caption">
<h3>9.認證輔導</h3>
<ul class="text-primary">
<li>MOS認證</li>
<li>TQC+專業認證</li>
<li>國家技術士認證</li>
</ul>
<p><a href="#" class="btn btn-primary" role="button">課程查詢</a></p>
</div>
</div>
</div>
</div>
</div>

2-2 課程主題 Flex 應用 CSS美化

/* 課程主題 thumbnail==============================================================*/
#classlist{ display: flex; flex-wrap: wrap;}
#classlist>div{ display: flex; align-items: stretch;}
#classlist .thumbnail{ display: flex; flex-direction: column;
  background: #ffa2a2; width: 100%;}
#classlist h2{width: 100%;}
#classlist .thumbnail .caption{ background: #bdeafa;
display: flex; flex-direction: column; flex: 1;}
#classlist .thumbnail .caption p:last-child{ margin-top: auto; align-self: flex-end;}