天天看點

Bootstrap4 清單組

大部分基礎清單組都是無序的。

Bootstrap4 清單組

要建立清單組,可以在 <ul> 元素上添加 .list-group 類, 在

<li> 元素上添加 .list-group-item 類:

<ul class="list-group">

<li class="list-group-item">First item</li>

<li class="list-group-item">Second item</li>

<li class="list-group-item">Third item</li>

</ul>

通過添加 .active 類來設定激活狀态的清單項:

<li class="list-group-item active">Active item</li>

.disabled 類用于設定禁用的清單項:

<li class="list-group-item disabled">Disabled item</li>

要建立一個連結的清單項,可以将 <ul> 替換為 <div>

, <a> 替換 <li>。如果你想滑鼠懸停顯示灰色背景就添加.list-group-item-action 類:

<div class="list-group">

<a href="#" class="list-group-item list-group-item-action">First item</a>

<a href="#" class="list-group-item list-group-item-action">Second item</a>

<a href="#" class="list-group-item list-group-item-action">Third item</a>

</div>

使用 .list-group-flush 類來删除清單的邊框和圓角:

<ul class="list-group list-group-flush">

<li class="list-group-item">Fourth item</li>

我們可以将 .list-group-horizontal 類添加到 .list-group 類後面來建立水準清單組:

<ul class="list-group list-group-horizontal">

Bootstrap4 清單組

清單項目的顔色可以通過以下列來設定:

.list-group-item-success, list-group-item-secondary, list-group-item-info,

list-group-item-warning, .list-group-item-danger, list-group-item-dark 和 list-group-item-light:

<li class="list-group-item list-group-item-success">成功清單項</li>

<li class="list-group-item list-group-item-secondary">次要清單項</li>

<li class="list-group-item list-group-item-info">資訊清單項</li>

<li class="list-group-item list-group-item-warning">警告清單項</li>

<li class="list-group-item list-group-item-danger">危險清單項</li>

<li class="list-group-item list-group-item-primary">主要清單項</li>

<li class="list-group-item list-group-item-dark">深灰色清單項</li>

<li class="list-group-item list-group-item-light">淺色清單項</li>

<a href="#" class="list-group-item list-group-item-action">激活清單項</a>

<a href="#" class="list-group-item list-group-item-success">成功清單項</a>

<a href="#" class="list-group-item list-group-item-secondary">次要清單項</a>

<a href="#" class="list-group-item list-group-item-info">資訊清單項</a>

<a href="#" class="list-group-item list-group-item-warning">警告清單項</a>

<a href="#" class="list-group-item list-group-item-danger">危險清單項</a>

<a href="#" class="list-group-item list-group-item-primary">主要清單項</a>

<a href="#" class="list-group-item list-group-item-dark">深灰色清單項</a>

<a href="#" class="list-group-item list-group-item-light">淺色清單項</a>