List Groups

為了可以有一個彈性的清單列表,可以同時使用 <span> , <a> 或是 <button>,你可以使用 List Group,同時也能搭配 Drops

預設樣式

List Group 中,所有元件都以 .list-grp- 為開頭。
建立一個 .list-grp,你可以使用 <span> 加上 .list-grp-item

Item Item Item Item Item
<div class="list-grp">
    <span class="list-grp-item">Item</span>
    <span class="list-grp-item">Item</span>
    <span class="list-grp-item">Item</span>
    <span class="list-grp-item">Item</span>
    <span class="list-grp-item">Item</span>
</div>

使用連結

也可以將 <span> 替換成 <a>,讓清單能夠有連結功能,同時也能擁有 :hover 效果。

<div class="list-grp">
    <a class="list-grp-item">Item</a>
    <a class="list-grp-item">Item</a>
    <a class="list-grp-item">Item</a>
    <a class="list-grp-item">Item</a>
    <a class="list-grp-item">Item</a>
</div>

使用按鈕

這裏指的按鈕包含 <button> 以及 <input type="button">,這裏的按鈕可以不用加上 .btn,一樣使用 .list-grp-item,同時也能和連結一樣擁有 :hover 效果。如果要用按鈕元件,會建議你使用 <button>,但每個人習慣不同,就像 <input type="submit"> 我會習慣用 <a> 來處理。

<div class="list-grp">
    <button class="list-grp-item">Item</button>
    <button class="list-grp-item">Item</button>
    <button class="list-grp-item">Item</button>
    <button class="list-grp-item">Item</button>
    <input type="button" value="Item" class="list-grp-item" />
</div>

使用狀態

對於 .list-grp-item 來說,都會有一個作用中的 .active 以及禁用的 .disabled[disabled]

<div class="list-grp">
    <a class="list-grp-item active">Active item</a>
    <a class="list-grp-item">Item</a>
    <a class="list-grp-item">Item</a>
    <a class="list-grp-item">Item</a>
    <a class="list-grp-item disabled">Disabled item</a>
</div>

List Groups 與 Badge

可以直接將 Badge 放置在 .list-grp-item 內。

<div class="list-grp">
    <a class="list-grp-item">Item <span class="badge">10</span></a>
    <a class="list-grp-item">Item</a>
    <a class="list-grp-item">Item</a>
    <a class="list-grp-item">Item</a>
    <a class="list-grp-item">Item</a>
</div>

List Groups 與 Drops

直接在 .list-grp-item 上增加 .drop,並且將 .drop-box 放置在 .list-grp-item 內。

<div class="list-grp">
    <div class="list-grp-item drop drop-hover">
        Item <span class="caret caret-right"></span>
        <ul class="drop-box drop-right menu">
            <li class="menu-item"><a class="menu-link">Item</a></li>
        </ul>
    </div>
    <a class="list-grp-item">Item</a>
    <a class="list-grp-item">Item</a>
    <a class="list-grp-item">Item</a>
    <a class="list-grp-item">Item</a>
</div>