昨天已經說明CSS製作卡片的過程，接下來就是應用Bootstrap 5的框架來實際製作卡片，在昨天努力的製作卡片後，會發現套用框架是多麼的簡單。

Bootstrap 5卡片範例

挑選喜歡的卡片樣式

首先，可以先到Bootstrap 5的文件，來挑選喜歡的卡片，文件連結：https://getbootstrap.com/docs/5.2/components/card/

找到喜歡的樣式後，只要將語法複製起來，貼在HTML的地方，卡片就做好了！可參考以下HTML語法範例：

<div class="card" style="width: 18rem;">
  <img src="..." class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

不要忘記導入Bootstrap 5的框架

修改內文

接下來要做的，就只是更改卡片的內文而已。在經歷過之前的學習，應該不難找出那些段落會出現在哪邊吧？這邊簡單說明一下，class的名稱由於是抓框架內的樣式，若要更改例如換字體顏色、背景顏色、大小等必須參考文件，或是新增飛框架內的class，再透過套用CSS嘗試將蓋過去，這部分需要反覆試驗才會知道那些蓋得過去。
語法的部分img scr="..."的部分就是放圖片來源，修改class card-title的內容就是改變卡片標題；修改class card-text的內容就是修改卡片內容文字；修改class btn的內容就是改變按鈕的文字，a href="#" 這邊是放點下按鈕會前往的連結。

卡片實作

一樣可以利用之前所學的Bootstrap 5的排版和CSS的語法，製作卡片與排版，以下語法是將原本的卡片語法帶入卡片內容，可參考以下HTML語法：

  <div class="row">
    <div class="col-6">
      <div class="card" style="width: 18rem;">
        <div class="cat">
        <img  src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/25/Siam_lilacpoint.jpg/220px-Siam_lilacpoint.jpg" class="card-img-top" alt="喵">
              </div>
        <div class="card-body">
          <h5 class="card-title">暹羅貓</h5>
          <p class="card-text ">暹羅貓（英語：Siamese cat）是很早便被承認的東方短毛貓品種之一，品種的由來尚未確定，相信是來自東南亞，據稱是源自暹羅（今泰國）寺廟裏飼養的貓。在泰國被稱作「Wichien-maat（วิเชียรมาศ）」，即「月亮鑽石」之意。暹羅貓在現今已成為歐美最受歡迎的貓品種之一。</p>
          <a href="https://zh.m.wikipedia.org/zh-tw/%E6%9A%B9%E7%BD%97%E7%8C%AB" class="btn btn-primary">更多資訊</a>
        </div>
      </div>
    </div>

CSS樣式取代Bootstrap 5的樣式

若有更喜歡的樣式可以嘗試透拓CSS語法撰寫，蓋掉Bootstrap 5的樣式，但有些項目是無法蓋掉的。以下「範例參考」有使用CSS改變樣式，目前筆者嘗試改變按鈕顏色發現，按鈕的樣式無法透過CSS覆蓋，想改變按鈕顏色除了修改Bootstrap 5的架構外，也可以透過HTML與CSS製作美美的按鈕，後續會提到怎麼用HTML與CSS製作按鈕。

範例參考

以下範例為今天說明內容的實作頁面，包含前述所有案例的演示，請參考：
https://codepen.io/hamagawa76/pen/oNqVmqd

是不是很簡單！明天會說明CSS背景套用的部分了，我們明天見囉！