Bootstrap4 列表组

列表组

Bootstrap4 学习笔记

发布日期: 2020-08-16

更新日期: 2021-07-19

文章字数: 648

阅读时长: 3 分

Bootstrap4 列表组

大部分基础列表组都是无序的。

要创建列表组，可以在

.list-group

元素上添加 .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">First item</li>

禁用的列表项

.disabled 类用于设置禁用的列表项

<li class="list-group-item disabled">First 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-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:

两种方式：1.是ul形式；2.链接的多种颜色列表项

<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>
<div class="list-group ">
    <a href="#" class="list-group-item list-group-item-secondary">1</a>
    <a href="#" class="list-group-item list-group-item-info">2</a>
    <a href="#" class="list-group-item list-group-item-warning">3</a>
    <a href="#" class="list-group-item list-group-item-danger">4</a>
    <a href="#" class="list-group-item list-group-item-primary">5</a>
    <a href="#" class="list-group-item list-group-item-dark">6</a>
    <a href="#" class="list-group-item list-group-item-success">7</a>
    <a href="#" class="list-group-item list-group-item-light">8</a>
</div>