18. 卡片

一、關於卡片

1. BootStrap4 的卡片整合了 BootStrap3 的面板 (panels)、wells、縮圖 (thumbnails) ...等功能。
2. 基本的卡片結構（若沒指定尺寸，會是滿版）

   <div class="card">
     <div class="card-header">卡片頁首</div>
     <img class="card-img-top" src="上方圖片.jpg" alt="上方圖片">
     <div class="card-body">
       <h4 class="card-title">卡片主標題</h4>
       <h6 class="card-subtitle">卡片次標題</h6>
       <p class="card-text">卡片內文</p>
       <a href="#" class="card-link">卡片連結</a>
     </div>
     <img class="card-img-bottom" src="下方圖片.jpg" alt="下方圖片">
     <div class="card-footer">卡片頁尾</div>
   </div>

3. 基本上，卡片裡面的任何一個元件，沒用到的話都可以省略。簡單講，有需要再用即可。

4. 一個卡片內，可以有好幾個 .card-body

二、卡片的排版

1. 如果卡片之間不想要有空隙，可用.card-group將卡片包起來。若是有頁尾，會自動對齊，看起來很整齊。

   <div class="card-group">
       一堆卡片
   </div>

2. 若是不希望相連，則可改用.card-deck，如此，卡片之間會有縫隙。頁尾一樣會自動對齊。

   <div class="card-deck"> 
       一堆卡片 
   </div>

3. 上面這些都是橫式排列，亦可用直式排列，做出瀑布流的效果，只要改用.card-columns即可

   <div class="card-columns"> 
       一堆卡片 
   </div>

三、快速產生