Bootstrap4 教程
Bootstrap4 列表組
列表組是一個靈活且強(qiáng)大的功能，不僅僅可以用來顯示簡單的元素列表，還可以顯示復(fù)雜的自定義內(nèi)容，不過大部分的基礎(chǔ)列表都是無序的。
在Bootstrap4中，要創(chuàng)建列表組，可以在 <ul> 元素上添加 .list-group 類, 在 <li> 元素上添加 .list-group-item 類:
實(shí)例
<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>
運(yùn)行代碼 ?
激活狀態(tài)的列表項
通過添加 .active 類來設(shè)置激活狀態(tài)的列表項：
實(shí)例
<ul class="list-group">
<li class="list-group-item active">Active item</li>
<li class="list-group-item">Second item</li>
<li class="list-group-item">Third item</li>
</ul>
運(yùn)行代碼 ?
禁用的列表項
.disabled 類用于設(shè)置禁用的列表項:
實(shí)例
<ul class="list-group">
<li class="list-group-item disabled">Disabled item</li>
<li class="list-group-item">Second item</li>
<li class="list-group-item">Third item</li>
</ul>
運(yùn)行代碼 ?
鏈接列表項
要創(chuàng)建一個鏈接的列表項，可以將 <ul> 替換為 <div> ， <a> 替換 <li>。如果你想鼠標(biāo)懸停顯示灰色背景就添加.list-group-item-action 類:
實(shí)例
<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>
運(yùn)行代碼 ?
多種顏色列表項
列表項目的顏色可以通過以下列來設(shè)置： .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:
實(shí)例
<ul class="list-group">
<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>
</ul>
運(yùn)行代碼 ?
鏈接的多種顏色列表項
實(shí)例
<div class="list-group">
<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>
</div>
運(yùn)行代碼 ?