Bootstrap CSS——列表组

最新推荐文章于 2023-09-05 11:21:09 发布

Tarkzeng

最新推荐文章于 2023-09-05 11:21:09 发布

阅读量599

点赞数

分类专栏： Bootstrap 文章标签： bootstrap css

本文链接：https://blog.csdn.net/u011350527/article/details/48953945

版权

Bootstrap 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

http://v3.bootcss.com/components/#list-group
mark

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>列表组</title>
    <link rel="stylesheet" href="bootstrap.min.css">
</head>
<body>
    <div class="container">
        <ul class="list-group">
            <li class="list-group-item"><span class="badge">10</span>我喜欢苹果</li>
            <li class="list-group-item"><span class="badge">1</span>我喜欢梨子</li>
            <li class="list-group-item"><span class="badge">7</span>我喜欢橘子</li>
            <li class="list-group-item">我喜欢桃子</li>
        </ul>

        <!--可点击的-->
        <div class="list-group">
            <a href="#" class="list-group-item">我喜欢苹果</a>
            <!--active选中的-->
            <a href="#" class="list-group-item active">我喜欢苹果</a>
            <a href="#" class="list-group-item">我喜欢苹果</a>
            <!--禁用的-->
            <a href="#" class="list-group-item disabled">我喜欢苹果</a>
        </div>

        <div class="list-group">
            <a href="#" class="list-group-item list-group-item-success">我喜欢苹果</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>
        </div>


        <!--定制内容，在a标签里面写就行，按钮、图片……-->
        <div class="list-group">
            <a href="#" class="list-group-item">
                <h4 class="list-group-item-heading">哆啦咪发</h4>
                <p class="list-group-item-text">啦啦啦啦啦啦啦啦噢噢噢噢噢噢地对地导弹地对地导弹</p>
            </a>

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

            </a>

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

            </a>

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

            </a>
        </div>
    </div>
</body>
</html>

Tarkzeng

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Bootstrap CSS——列表组

http://v3.bootcss.com/components/#list-group mark<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>列表组</title> <link rel="stylesheet" href="bootstrap.min.css"></head>
复制链接

扫一扫

专栏目录