前言
常常出沒在各個網頁的基本構圖，現在只要套上通用類別，不用寫 CSS 就可以製作完成，日後若再稍加調整即可產出多種變化。
（ 圖片來源 ）
官方網站的 cards 頁面
上下圖文卡片
可以給 <img> 元素添加 .card-image-top （ 圖片在文字上方 ） 或 .card-image-bottom （ 圖片在文字下方 ） 來創建一個圖文卡片，兩者差別在圖片的圓角位置。
HTML
<div class="card">
<img src="https://picsum.photos/300/200?ramdom=10" class="card-img-top">
<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>
HTML
<div class="card">
<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>
<img src="https://picsum.photos/300/200?ramdom=10" class="card-img-bottom">
</div>
圖片背景卡片
如果圖片要設置為背景，可以使用 .card-img-overlay 代替 .card-body
HTML
<div class="card">
<img src="https://picsum.photos/300/200?ramdom=10" class="card-img">
<div class="card-img-overlay">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class="card-text">Last updated 3 mins ago</p>
</div>
</div>
左右圖文卡片
HTML
<div class="card">
<div class="row g-0">
<div class="col-md-4">
<img src="https://picsum.photos/175/200?ramdom=10">
</div>
<div class="col-md-8">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
</div>
</div>
卡片群組
在最外面包一層 <div class="card-group"></div> ，若一列裡欄數過多，在平板上看起來會顯得擁擠，故比較不適合。
HTML
<div class="card-group">
<div class="card">
<img src="https://picsum.photos/300/200?ramdom=10" class="card-img-top">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
<div class="card">
<img src="https://picsum.photos/300/200?ramdom=11" class="card-img-top">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
<div class="card">
<img src="https://picsum.photos/300/200?ramdom=12" class="card-img-top">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
</div>
網格卡片
使用 Bootstrap 網格系統及其 .row-cols 類來控制每行顯示多少個網格列。
HTML
<div class="row row-cols-1 row-cols-md-3 g-4">
<div class="col">
<div class="card">
<img src="https://picsum.photos/300/200?ramdom=10" class="card-img-top">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
</div>
<div class="col">
<div class="card">
<img src="https://picsum.photos/300/200?ramdom=10" class="card-img-top">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
</div>
<div class="col">
<div class="card">
<img src="https://picsum.photos/300/200?ramdom=10" class="card-img-top">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content.</p>
</div>
</div>
</div>
<div class="col">
<div class="card">
<img src="https://picsum.photos/300/200?ramdom=10" class="card-img-top">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
</div>
</div>
