Class(2017-1)練習2

四、【設計學院】區塊

4-1 Accordion折疊面板加上圖示

BS:【JavaScript】>【折疊效果Collapse】>【Accordion example】

<div class="container">
<!--    Accordion   -->
<div class="row">
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingOne">
<h4 class="panel-title">
<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">室內設計接案 全修班 #1</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
<div class="panel-body">
<div class="col-xs-12 col-sm-6 col-md-4">
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/geErI-V8b3M" frameborder="0" allowfullscreen></iframe>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-8">
<h3 class="text-danger text-center">【就算從0開始也能成為職場搶手人才!】</h3>
<p class="text-primary">從AutoCAD設計師基礎開始教學,甚至風水學,到Autodesk 3Ds MAX室內建築設計課程,另外還有Revit綠建築設計班統整所學成為全方位人才。你該煩惱的不是找不到工作,而是該選哪個工作!</p>
<p class="text-primary">巨匠電腦規劃了一連串室內建築設計類課程,由多位擁有國際認可、專業實務技能的老師,帶領你打好地基,一步步朝向實踐擁有甜蜜家園的未來夢想前進。</p>
</div>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingTwo">
<h4 class="panel-title">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">網站設計接案 全修班 #2</a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
<div class="panel-body">
<div class="col-xs-12 col-sm-6 col-md-4">
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/ACOGVj4En0k" frameborder="0" allowfullscreen></iframe>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-8">
<h3 class="text-danger text-center">【全國最大的IT教育培訓機構!】</h3>
<p class="text-success">帶你從建立品牌形象下手,接著CIS品牌計畫到網站設計讓你能一條龍獨力完成,在人人都能作文創的市場中成為更具<a href="#" data-toggle="tooltip" title="商業設計tooltip!!">有價值及競爭力</a>的設計師,創業工作一手包辦。</p>
<p class="text-success">不論文化美學、創意視覺或<button type="button" class="btn btn-default" data-toggle="tooltip" title="Some 商業設計123456">商業設計</button>,最重要的是「維持創作的戰鬥力!」跨界創意視覺設計、響應式跨平台網頁設計、PHP購物網站設計、<a href="javascript:;" data-trigger="hover" data-toggle="popover" title="Adobe ACA國際認證項目" data-content="PS、Ai、Dw...ACA國際認證">Adobe ACA國際認證</a>等課程,一步步打好基礎,用多媒體能力替自己的創意代言!</p>
</div>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingThree">
<h4 class="panel-title">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">影視特效 剪輯 #3</a>
</h4>
</div>
<div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
<div class="panel-body">
<div class="col-xs-12 col-sm-6 col-md-4">
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/bc3bYrEe8qY" frameborder="0" allowfullscreen></iframe>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-8">
<h3 class="text-danger text-center">【40天成為頂級特效動畫師,你也能前進好萊塢!】</h3>
<p class="text-warning">手把手帶你從maya動畫特效設計的基礎開始,透過跨媒體影音特效剪輯,了解影片從0-100的過程,建立正確觀念及實務經驗。不只教會你一身本領,也透過國際認證讓大家見識你的能力,大幅提升你提案及求職成功率,找到你一展長才的舞台。</p>
<p class="text-warning">還記得小時候,總是在塗鴉本上「華麗的冒險」?長大後現實的壓力,讓你忘記了這樣的感動。不過,誰說埋著頭塗鴉的小孩,不能變成名揚國際的動畫師呢?別放棄你的天分與夢想,未來就掌握在自己手中。</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

利用【瀏覽器的檢查元件,確認元件】加入圖示,如下圖

/* 設計學院 Accordion =======================================================================*/ 
.panel-title>a {
display: block; width: 100%; height: 100%; text-decoration: none;
}
.panel-title>a:before {
content: "\f108"; font-family: "FontAwesome";
display: inline-block;   padding-right: 10px;
}
.panel-title>a[aria-expanded="true"]:before {
content: "\f1d9"; font-family: "FontAwesome";
padding-right: 10px; color: #f80000;
}