資訊卡篇

Card

前面大家應該有看到一些卡片（Card）的應用，比如說首頁的教材。還有前面Css的程式碼顯示。

這些都是透過Bootstrap已經幫大家寫好的模組，來快速完成這個功能

範例：

早安

非洲每一分鐘就過去六十秒

See more info
<div class="card">
<div class="card-body">
<h5 class="card-title">早安</h5>
<p>非洲每一分鐘就過去六十秒</p>
<a href="#" class="card-link">See more info</a>
</div> /* body結尾 */
</div> /* card結尾 */

通常我們卡片都會配合grid使用，排版起來比較方便

比如說下面這個就是使用.col-md-4

他會維持有三個的排版，一直到螢幕尺寸小於md（768px），大家可以試看看xl（1200px）、lg（992px）、sm（576px）、col-xl/lg/md/sm-4

dog

總柴

：總有一天會有人用著我的照片，配上我沒講過的話

See Profile

總柴語錄

：ಠ_ಠ

a class="stretched-link"，整張卡片都可以點選

See Profile

總柴開示

class="card-body" 改為 card-img-overlay，則文字可以跟圖片重疊


如果這也無法滿足你，可以去這裡（看更多卡片樣式）

回首頁