Bootstrap列表组下

最新推荐文章于 2019-09-08 08:46:08 发布

chengqiuming

最新推荐文章于 2019-09-08 08:46:08 发布

阅读量217

点赞数

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

本文链接：https://blog.csdn.net/chengqiuming/article/details/86761383

版权

Bootstrap 专栏收录该内容

44 篇文章 1 订阅

订阅专栏

一自定义列表组

1 代码

<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>列表组--自定义列表组</title>
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
    <link rel="stylesheet" href="style.css">
</head>
<body>
<div class="list-group">
    <a href="##" class="list-group-item">
        <h4 class="list-group-item-heading">图解CSS3</h4>
        <p class="list-group-item-text">
            详细讲解了选择器、边框、背景、文本、颜色、盒模型、伸缩布局盒模型、多列布局、渐变、过渡、动画、媒体、响应Web设计、Web字体等主题下涵盖的所有CSS3新特性...</p>
    </a>
    <a href="##" class="list-group-item">
        <h4 class="list-group-item-heading">Sass中国</h4>
        <p class="list-group-item-text">致力于为中国开发者提供最全面，最具影响力，最前沿的Sass相关技术与教程...</p>
    </a>
</div>
<script src="https://www.imooc.com/static/lib/jquery/1.9.1/jquery.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</body>
</html>

2 效果

二列表项的状态设置

1 代码

<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>列表组--组合列表项的状态</title>
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
    <link rel="stylesheet" href="style.css">
</head>
<body>
<div class="list-group">
    <a href="##" class="list-group-item active"><span class="badge">5902</span>图解CSS3</a>
    <a href="##" class="list-group-item"><span class="badge">15902</span>W3cplus</a>
    <a href="##" class="list-group-item"><span class="badge">59020</span>慕课网</a>
    <a href="##" class="list-group-item disabled"><span class="badge">0</span>Sass中国</a>
</div>
<br/>
<br/>
<script src="https://www.imooc.com/static/lib/jquery/1.9.1/jquery.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</body>
</html>

2 效果

三多彩列表组

1 代码

<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>列表组--多彩列表组</title>
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
    <link rel="stylesheet" href="style.css">
</head>
<body>
<div class="list-group">
    <a href="##" class="list-group-item list-group-item-success">图解CSS3</a>
   <a href="##" class="list-group-item list-group-item-info">W3cplus</a>
   <a href="##" class="list-group-item list-group-item-warning">慕课网</a>
   <a href="##" class="list-group-item list-group-item-danger">Sass中国</a>
   <a href="##" class="list-group-item list-group-item-info">Mobile教程</a>
</div>
<br/>
<br/>
<script src="https://www.imooc.com/static/lib/jquery/1.9.1/jquery.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</body>
</html>

2 效果

chengqiuming

关注

0
点赞
踩
0

收藏

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

一自定义列表组1 代码&lt;!DOCTYPE HTML&gt;&lt;html&gt;&lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"&gt; &lt;title&gt;列表组--自定义列表组&lt;/title&gt;
复制链接

扫一扫

专栏目录