BS4(4)-首頁(Vue結合)

二、設計學院內文【Table加入】

【Documentaion(文件)】>【Content(內容)】>【Tables(表格)】(連結處)

S1:html結構

        <div class="container">
<div class="table-responsive">
<table class="table table-bordered table-hover">
<thead>
<tr class="text-center">
<th>項目</th>
<th>課程名稱</th>
<th>課程內容</th>
</tr>
</thead>
<tr>
<td>
<img src="images/logo01.jpg" alt="ps">
</td>
<td>JQ12_Photoshop ACA國際認證
<br>課程時數:18.00hr</td>
<td>
<ul>
<li>ACA認證考試介紹</li>
<li>影像之取得、影像檔案管理</li>
<li>基礎工具介紹</li>
<li>圖層操作與應用</li>
<li>繪圖工具與文字工具應用</li>
<li>進階影像處理、合成應用</li>
<li>ACA認證模擬試題練習與解說</li>
</ul>
</td>
</tr>
<tr>
<td>
<img src="images/logo02.jpg" alt="ps">
</td>
<td>JQ11_Illustrator ACA國際認證
<br>課程時數:18.00hr</td>
<td>
<ul>
<li>設定專案要求</li>
<li>瞭解準備圖形時使用的設計元素</li>
<li>瞭解Illustrator介面</li>
<li>使用Illustrator建立圖形</li>
<li>進行圖形封存、匯出及出版</li>
</ul>
</td>
</tr>
<tr>
<td>
<img src="images/logo03.jpg" alt="ID">
</td>
<td>JQ10_InDesign ACA國際認證
<br>課程時數:18.00hr</td>
<td>
<ul>
<li>設定專案要求</li>
<li>瞭解準備頁面佈局時的設計元素</li>
<li>瞭解InDesign介面</li>
<li>使用InDesign建立頁面佈局</li>
<li>出版、匯出及封存頁面佈局</li>
</ul>
</td>
</tr>
<tr>
<td>
<img src="images/logo04.jpg" alt="dw">
</td>
<td>JQ13_Dreamweaver ACA國際認證
<br>課程時數:18.00hr</td>
<td>
<ul>
<li>ACA認證考試介紹</li>
<li>認識Dreamweaver操作環境
<br>HTML及網頁的圖片與色彩處理</li>
<li>超連結設定與表格的編輯、CSS樣式表</li>
<li>AP元素及網頁之編排、多媒體物件介紹</li>
<li>資源、片段與範本介紹及網站的上傳管理</li>
<li>ACA認證模擬試題練習與解說</li>
</ul>
</td>
</tr>
<tr>
<td>
<img src="images/logo05.jpg" alt="fl">
</td>
<td>JQ14_Flash ACA 國際認證
<br>課程時數:18.00hr</td>
<td>
<ul>
<li>ACA認證考試介紹</li>
<li>檔案管理、基礎繪圖、複習繪圖工具介紹</li>
<li>文字工具、時間軸、圖層功能介紹</li>
<li>元件管理與動畫製作、進階動畫設計</li>
<li>音效與播放設定
<br>ActionScript 3.0程式設計</li>
<li>ACA認證模擬試題練習與解說</li>
</ul>
</td>
</tr>
</table>
</div>
</div>

S2:Vue結合

        <div class="container">
<div class="table-responsive">
<table class="table table-bordered table-hover table-dark">
<thead>
<tr class="text-center">
<th>項目</th>
<th>課程名稱</th>
<th>課程內容</th>
</tr>
</thead>
<tr v-for="exam in classlists.exams">
<td>
<img :src="'images/logo'+exam.count+'.jpg'" :alt="exam.title">
</td>
<td>{{exam.title}}
<br>課程時數:{{exam.hr}}hr</td>
<td>
<ul>
<li v-for="item in exam.items" v-html="item"></li>
</ul>
</td>
</tr>
</table>
</div>
</div>

S3:CSS美化

S4:表格在手機呈現調整CSS美化

@media(max-width:768px){
#exam thead{
display: none;
}
#exam td{
display: block;
border: none;
}
#exam td:last-child{
border-bottom: 1px solid #fff;
}
#exam li{
list-style: none; text-align: center;
}
}