F2E合作社｜清單群組｜Bootstrap 5網頁框架開發入門

前言

去餐廳排隊點餐、去夜店排隊入場，做網頁同類型的也要排隊歸類。
「 男生站左邊，女生站右邊，沒有身份證的站中間。 」因為打部落格意外知道一首好ㄎㄧㄤ的歌，我要學起來去KTV唱！

官方網站的 list group 頁面

（ 圖片來源 ）

基本清單群組

HTML

<ul class="list-group">
    <li class="list-group-item">An item</li>
    <li class="list-group-item">A second item</li>
    <li class="list-group-item">A third item</li>
    <li class="list-group-item">A fourth item</li>
    <li class="list-group-item">And a fifth one</li>
</ul>

作用中項目

只需要在 list-group-item 的 class 名稱後加上 active ，然後為了實現無障礙設計，所以加上 aria-current="true" 就完成了。

HTML

<ul class="list-group">
    <li class="list-group-item">An item</li>
    <li class="list-group-item active" aria-current="true">A second item</li>
    <li class="list-group-item">A third item</li>
    <li class="list-group-item">A fourth item</li>
    <li class="list-group-item">And a fifth one</li>
</ul>

禁用中項目

在 list-group-item 後加上 disabled ，然後為了實現無障礙設計，所以加上 aria-disabled="true" 即可。

HTML

<ul class="list-group">
    <li class="list-group-item">An item</li>
    <li class="list-group-item">A second item</li>
    <li class="list-group-item disabled" aria-disabled="true">A third item</li>
    <li class="list-group-item">A fourth item</li>
    <li class="list-group-item">And a fifth one</li>
</ul>

具連結功能項目

把 list-group 的 ul 標籤改成 <div> ，然後裡面的 li 標籤改成 <a> 或 <button> ，即具有連結功能。

HTML

<div class="list-group">
    <a href="#" class="list-group-item list-group-item-action active" aria-current="true">
    The current link item</a>
    <a href="#" class="list-group-item list-group-item-action">A second link item</a>
    <a href="#" class="list-group-item list-group-item-action">A third link item</a>
    <a href="#" class="list-group-item list-group-item-action">A fourth link item</a>
    <a href="#" class="list-group-item list-group-item-action disabled" tabindex="-1" aria-disabled="true">A disabled link item</a>
</div>

刪除項目邊框與圓角

添加 list-group-flush 刪除一些邊框和圓角。

HTML

<ul class="list-group list-group-flush">
    <li class="list-group-item">An item</li>
    <li class="list-group-item">A second item</li>
    <li class="list-group-item">A third item</li>
    <li class="list-group-item">A fourth item</li>
    <li class="list-group-item">And a fifth one</li>
</ul>

與卡片組件搭配使用

因為 card-body 本身有內間距（ padding ），所以把 list-group-flush 放在它之後比較不會影響視覺。

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">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>
    <ul class="list-group list-group-flush">
        <li class="list-group-item">An item</li>
        <li class="list-group-item">A second item</li>
        <li class="list-group-item">A third item</li>
    </ul>
</div>

參考資料

1. List group · Bootstrap v5.0
2. Bootstrap5 清單群組快速入門-金魚都能懂的Bootstrap5網頁框架開發入門 | 網頁開發 | 網頁教學
3. 列表群組 (List group) · Bootstrap 5 繁體中文文件 - 六角學院 v5.0