程式設計師應有的程式技能-BootStrap卡片-前端技術

BootStarp4實做入門

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>

三、快速產生

在 Visual Studio Code 中輸入b4-card-decks按 Enter 可以快速產生card-deck的語法

BootStarp4實做入門

18-1 調整卡片內容

1. 我們來調整一下卡片內容：

   <div class="card">

   <img class="card-img-top" src="images/part_37092_7280548_30803.jpg" alt="Card image cap">

   <div class="card-body p-0">

   </div>

   <div class="card-footer text-center px-2 bg-white">

   <a href="#" class="text-dark">慈大慈科大舉辦說明會 招攬人才</a>

   </div>

   </div>

2. 為了讓卡片文字可以互相對齊，我們將文字放在卡片頁尾.card-footer中，且加上.card-body才會有對齊的作用。
3. 為了不讓.card-body空一塊，我們加上.p-0，把內距設為 0。
4. 頁尾部份，我們用.text-center讓文字至中，用.px-2騰出文字上下的空間，並用.bg-white將底色設為白色。
5. 最後，為了讓連結看起來是黑色的，我們在連結中加入了.text-dark，把文字變成黑色。

【資料引用資訊】

google關鍵字:BootStarp4實做入門

網址:https://campus-xoops.tn.edu.tw/modules/tad_book3/html_all.php?tbsn=32