bootstrap学习列表组list-group

最新推荐文章于 2024-12-02 13:08:12 发布

卡西莫多的礼物

最新推荐文章于 2024-12-02 13:08:12 发布

阅读量4.9k

点赞数

分类专栏： bootstrap

本文链接：https://blog.csdn.net/qq_35696312/article/details/83713868

版权

bootstrap 专栏收录该内容

4 篇文章

订阅专栏

本文详细介绍了如何使用Bootstrap的list-group类创建不同样式的列表组，包括无序列表、链接、按钮及定制内容，并展示了具体的HTML代码实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

列表组学习

列表组可以通过list-group类来使用其样式，实际上，我们有三种不同的实现方式，第一种是ul+li的方式，即使用具有list-group的ul和list-group-item的li来实现，另外两种分别是使用具有list-group的div和list-group-item的a标签或者button标签来实现。具体可用的相关类罗列如下：

列表组常用类
list-group	将一个ul变成列表组
list-group-item	列表组的每一个元素
list-group-item-heading	为a标签或者button标签添加一个title
list-group-item-text	为列表组添加内容，和list-group-item-heading一同放到一个a标签或者button标签中
list-group-item-success list-group-item-info list-group-item-warning list-group-item-danger	为列表组的元素添加颜色
badge	通过给列表组元素添加带有.badge类的span来指定徽章，默认自动放到右边

列表组的格式分为几种：

上述几种列表的实现如下所示：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>bootstrap list-group test</title>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
    <!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap-theme.min.css">
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
</head>

<body>
    <div class='container'>
        <div class='col-md-8 col-xs-8 col-md-offset-2'>
            <!-- 无序列表 -->
            <h3>无序列表</h3>
            <ul class='list-group'>
                <li class='list-group-item active'>list-group-item-1
                    <span class='badge'>badge</span>
                </li>
                <li class='list-group-item disabled'>list-group-item-2</li>
                <li class='list-group-item'>list-group-item-3</li>
                <li class='list-group-item'>list-group-item-4</li>
            </ul>
            <!-- 链接 -->
            <h3>链接</h3>
            <div class='list-group'>
                <a href="#" class='list-group-item active'>list-group-item-1
                    <span class='badge'>badge</span>
                </a>
                <a href="#" class='list-group-item disabled'>list-group-item-2</a>
                <a href="#" class='list-group-item'>list-group-item-3</a>
                <a href="#" class='list-group-item'>list-group-item-4</a>
            </div>
            <!-- 按钮 -->
            <h3>按钮</h3>
            <div class='list-group'>
                <button class='list-group-item active'>list-group-item-1
                    <span class='badge'>badge</span>
                </button>
                <button class='list-group-item disabled'>list-group-item-2</button>
                <button class='list-group-item'>list-group-item-3</button>
                <button class='list-group-item'>list-group-item-4</button>
            </div>
            <!-- 订制内容 -->
            <h3>订制内容</h3>
            <div class='list-group'>
                <a href="#" class='list-group-item'>
                    <h4 class='list-group-item-heading'>list-group-item-heading</h4>
                    <p class='list-group-item-text'>list-group-item-text</p>
                </a>
                <a href="#" class='list-group-item'>
                    <h4 class='list-group-item-heading'>list-group-item-heading</h4>
                    <p class='list-group-item-text'>list-group-item-text</p>
                </a>
                <a href="#" class='list-group-item'>
                    <h4 class='list-group-item-heading'>list-group-item-heading</h4>
                    <p class='list-group-item-text'>list-group-item-text</p>
                </a>
                <a href="#" class='list-group-item'>
                    <h4 class='list-group-item-heading'>list-group-item-heading</h4>
                    <p class='list-group-item-text'>list-group-item-text</p>
                </a>
            </div>

        </div>
    </div>

</body>

</html>

可以看到，其实只是更换了一下标签的组合，就会有不同的效果。