學習網站w3c:https://www.w3schools.com/bootstrap4/bootstrap_cards.asp
OS:
期末來了，每天還有這個要寫。最近今天應該都會發一些很短的文XD。

Cards是一種常用的工具，常常會出現在介紹作者或某些產品上。
Basic Card:

<div class="card">
  <div class="card-body">Basic card</div>
</div>

就是外部是card，內部在一個card-body的class。用div就能做出。
card裡面可以有很多html元素，p,a,h1,img...etc。也可以用bootstrap自己的東西，EX:class="btn btn-primary"。

header and footer:

<div class="card">
    <div class="card-header">Header</div>
    <div class="card-body">Content</div> 
    <div class="card-footer">Footer</div>
</div>

body頭部可加header，尾端也能有footer。就是再把Card分三區塊。

Contextual Cards:
也能加入背景顏色，EX:bg-primary,bg-success...etc。雖然說這些顏色有表達這區塊的含意，不過我目前都只拿來當一般的顏色使用XD。也可以統一字體顏色，EX:text-success。
有關BS4的顏色運用可以看這裡:https://www.w3schools.com/bootstrap4/bootstrap_colors.asp

<div class="card bg-info text-warning">
    <div class="card-body">Content</div> 
</div>

Titles, text, and links:
class="card-title"可以和h1~h6搭。class="card-text"則是和<p>搭。但剛剛試了一下，似乎用p或h1~都可以。大小還是要自己控制。class="card-link"則是和<a href="" class="card-link"></a>這樣搭。就是弄出一般連結的效果。這些記得要選在card-body,card-header,card-footer裡面其中一個放。

<div class="card">
    <div class="card-body">
        <h4 class="card-title">Card title</h4>
        <p class="card-text">Some example text. Some example text.</p>
        <a href="#" class="card-link">Card link</a>
        <a href="#" class="card-link">Another link</a>
    </div>
</div>

Card Images:
你可以在card裡加圖片，並給<img>標籤加class="card-img-top"或class="card-img-bottom"，看你要放在卡片的上面或下面。不過似乎跟<img>元素在card裡的順序比較有關(bug?= =)。
注意:圖片會和Card的寬做不等比例縮放(跟card一樣寬)

<div class="card bg-info text-warning" style="width:700px">
    <img src="5Pikachu.png">
    <div class="card-header">Header</div>
    <div class="card-body">Content</div>
    <div class="card-footer">Footer</div>
</div>

Card Image Overlays:
想把圖片當card背景用的話，使用card-img-overlay。就可以在圖片上加字、連結和其他有的沒的了。
注意:不能同時使用在"card-body",footer,header。就只能放在class為"card-img-overlay"的div元素裡，不然不會正常顯示。(???= =?)

<div class="card bg-info text-warning">
    <img class="card-img-top" src="5Pikachu.png">
    <div class="card-img-overlay">
        <h4 class="card-title">PIKACHU</h4>
        <p class="card-text">PIKACHU PIKACHU PIKACHU PIKACHU PIKACHU</p>
        <a href="#" class="btn btn-primary">See PIKACHU</a>
    </div>
</div>

動手做一張:這樣就是一張簡單的卡片了。

<div class="card bg-success" style="width:400px;">
    <div class="card-header">
        <h4 class="card-title">茶語咖啡</h4>
    </div>
    
    <div class="card-body">
        <img class="card-img-top" src="./imgs/TEA1.jpg">
        <p style="font-size:120%;">我推薦的第一名。
        牧場的牛奶味道非常濃郁，鮮奶茶很有味道。目前喝過最推的。</p>
    </div>
    
    <div class="card-footer">
        <a href="https://www.facebook.com/%E8%8C%B6%E8%AA%9E%E5%92%96%E5%95%A1-587574827995580/"
        style="color:#001a4d;font-size:120%;">FB連結</a>
    </div>
</div>