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

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

【Documentaion(文件)】>【Components(元件)】>【Collapse(折疊)】(連結處)

S1:html結構

          <div class="row">
<h2 class="my-5 py-2 text-center text-white bg-info rounded w-100">課程介紹</h2>
</div>
<div class="row">
<div class="accordion" id="accordionExample">
<div class="card">
<div class="card-header" id="headingOne">
<h5 class="mb-0">
<button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
1.視覺設計
</button>
</h5>
</div>
<div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample">
<div class="card-body">
<img src="./images/listClass01.png" alt="">
<div>
<p>【來巨匠學視覺設計 實現你的創業理想!】從跨界創意視覺設計開始,打穩美學基礎。除了獲得軟體操作的基本概念,還能獲得核心工作能力及絕佳的應用技能。</p>
<p>美工平面套課課程的設計,將以設計的角度出發,運用Illustrator插畫工具的功能,深入說明點線面應用技巧,帶領您將虛擬想像,化為現實影像。結合Photoshop 中的強大影像處理技巧功能,您不但能將插畫作品,搭配相片作品進行影像創作,設計出更精緻的視覺影像。</p>
<p>最後,要將影像和插畫成品,應用在手冊、廣告文宣等刋物,透過Indesign 的強大編排功能,讓文字成為影像設計的一部份,為設計作品加分。</p>
</div>
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="headingTwo">
<h5 class="mb-0">
<button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
2.手機APP設計
</button>
</h5>
</div>
<div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample">
<div class="card-body">
<img src="./images/listClass02.png" alt="">
<div>
<p>【化手機為商機 成為首屈一指的APP開發者!】由淺入深逐步教你元件應用、畫面處理、檔案與資料庫建構。包含智慧手錶、智慧眼鏡等等穿戴式雲端APP都教你開發,征服IPHONE及Android系統市場成為人生勝利組!</p>
<p>隨著智慧型手機的普及,APP已經變成我們生活中不可缺的一部份。但當你還在當低頭族的時候,已經有許多人已經抬起頭,把「手機」轉換成「商機」,開發出許多APP供人下載。究竟行動APP還發展出哪些商機和可能性呢,請看看我們的影片。</p>
<p>獨立開發設計IOS應用程式與遊戲,能夠結合定位和導航等Google地圖運用,處理相機、聲音、影像等多媒體程式,以及操控感應器、閃光燈、陀螺儀等硬體設備,並熟練操作XML和JSON等常用網路檔案格式。</p>
</div>
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="headingThree">
<h5 class="mb-0">
<button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
3.程式/資料庫
</button>
</h5>
</div>
<div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample">
<div class="card-body">
<img src="./images/listClass03.png" alt="">
<div>
<p>【讓玩遊戲、逛網拍等日常行為 成為你的生財利器!】電腦的世界沒有距離,程式語言才是世界共通的語言!雲端資料庫程式設計課程,就是帶你擴充電腦領域的一把鑰匙!從程式語言到雲端資料庫開發,完整學習如何和電腦溝通,教你成為下個愛因斯坦。</p>
<p>電腦的世界沒有距離,打開你的筆記型電腦,輕鬆按下一個ENTER指令它就能幫你處理龐大的數據,動動滑鼠就可以把你連接到地球的另一端,甚至還足以打敗世界棋王!這麼多的指令,我們又是怎麼跟他溝通呢?靠的就是程式語言!對一般人來說,程式語言就像一部天書。</p>
<p>平常使用電腦不就是打打GAME、用用Word、Excel,卻很少去了解C+、JAVA,到底這些複雜的程式語言在說什麼呢? 哈哈它認識我、我不認識它...不過現在有很多學習方法可以讓你學會跟程式語言溝通哦...快來看看 !</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<h2 class="my-5 py-2 text-center text-white bg-info rounded w-100">Adobe ACA 國際認證</h2>
</div>

S2:調整結構

S2-1:文繞圖

CSS美化
.accordion .card-body img{
width: 300px;
}
html 結構加入
<img class="float-left mr-3 rounded" src="./images/listClass01.png" alt="">

S2-2:accordion全部收合時,畫面沒有滿版

            <div class="accordion w-100" id="accordionExample">
<div class="card">
...
</div>
<div class="card">
...
</div>
<div class="card">
...
</div>
</div>

S2-3:accordion左側加入icon圖示

 

.accordion .card-header button[aria-expanded="true"]:before{
content: "\f07c"; font-family: "FontAwesome";
color: #1201a8;
}
.accordion .card-header button[aria-expanded="false"]:before{
content: '\f108'; font-family: "FontAwesome";
color: green;
}
.accordion .card-header button:hover{
text-decoration: none;
color: red;
}
.btn-link {
font-weight: 400;
color: #007bff;
background-color: transparent;
font-size: 20px;
line-height: 20px;
}
.accordion button:focus{
text-decoration: none;
}

S3:結合Vue

S3-1:結合Vue

            <div class="accordion w-100" id="accordionExample">
<div class="card" v-for="(list,id) in classlists.class">
<div class="card-header" :id="list.title+list.count">
<h5 class="mb-0">
<button class="w-100 text-left btn btn-link" type="button" data-toggle="collapse" :data-target="'#'+list.title" :aria-expanded="id==0?'true':'false'" :aria-controls="list.title">
{{list.title}}#{{id+1}}
</button>
</h5>
</div>
<div :id="list.title" class="collapse show" :aria-labelledby="list.title+list.count" data-parent="#accordionExample" >
<div class="card-body">
<img class="float-left mr-3 rounded" :src="'./images/listClass'+list.count+'.png'" :alt="list.title">
<div v-html="list.desc">
</div>
</div>
</div>
</div>
</div>

S3-2:調整Vue【只開啟第一個面版,並只顯示前五筆】