F2E合作社｜卡片組件｜Bootstrap 5網頁框架開發入門

前言

常常出沒在各個網頁的基本構圖，現在只要套上通用類別，不用寫 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>