Bootstrap组件之列表组

最新推荐文章于 2024-08-21 09:18:53 发布

bboyjoe

最新推荐文章于 2024-08-21 09:18:53 发布

阅读量2.4k

点赞数

分类专栏： bootstrap 文章标签： bootstrap html5 前端响应式

本文链接：https://blog.csdn.net/bboyjoe/article/details/47253553

版权

bootstrap 专栏收录该内容

32 篇文章 2 订阅

订阅专栏

.list-group——指定ul/div元素为列表组组件；

.list-group-item——指定元素为列表组的列表项；

.list-group-item-success、.list-group-item-info、.list-group-item-warning、.list-group-item-danger——设置列表项的情境效果；

.active——设置列表项为激活状态；

.disabled——设置列表项为禁用状态；

.list-group-item-heading——用于设置列表项的标题；

.list-group-item-text——用于设置列表项的文本内容；

<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>饭盒儿——发现身边不一样的世界</title>
    <link rel="stylesheet" href="css/bootstrap.min.css" type="text/css">
    <script src="js/jquery-2.1.3.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
    <style>

    </style>
</head>
<body>
    <div class="container">
        <h4>列表组示例</h4>
        <ul class="list-group">
            <li class="list-group-item list-group-item-success"><span class="badge">45</span>上海上港</li>
            <li class="list-group-item list-group-item-info"><span class="badge">44</span>广州恒大</li>
            <li class="list-group-item list-group-item-warning"><span class="badge">43</span>山东鲁能</li>
            <li class="list-group-item list-group-item-danger"><span class="badge">40</span>北京国安</li>
        </ul>

        <div class="list-group">
            <a href="#" class="list-group-item active">上海上港</a>
            <a href="#" class="list-group-item">广州恒大</a>
            <a href="#" class="list-group-item">山东鲁能</a>
            <a href="#" class="list-group-item">北京国安</a>
        </div>
        <div class="list-group">
            <a href="#" class="list-group-item active">
                <h4 class="list-group-item-heading">上海上港</h4>
                <p class="list-group-item-text">目前排名榜首，进亚冠的希望很大，但板凳深度不够，会不会酿造亚冠惨案！</p>
            </a>
            <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">
                <h4 class="list-group-item-heading">山东鲁能</h4>
                <p class="list-group-item-text">状态起伏不定，即时进了亚冠，仍让人看的惊心动魄，内战龙，外战虫，每次去亚冠也是一轮游。</p>
            </a>
            <a href="#" class="list-group-item disabled">
                <h4 class="list-group-item-heading">北京国安</h4>
                <p class="list-group-item-text">目前已经掉队，每次夺冠的嗓门喊得最大，但总是关键时刻掉链子，投入不够约束了与其它豪门争冠的机会。</p>
            </a>
        </div>

    </div>

</body>
</html>