7.13 列表组
列表组用于将多个相似或相近的元素并列显示,列表组不仅能用于显示一组简单的元素,还能用于显示复杂的内容。
7.13.1 列表组基础
Bootstrap
为列表组提供了如下样式。
列表组的组成相关样式
样式 |
描述 |
.list-group |
该样式应用于列表组的容器元素。 |
.list-group-item |
该样式应用于列表组内的列表项。 |
## 列表项的风格相关样式 ## |
|
样式 |
描述 |
:— |
:— |
.list-group-item-success |
该样式设置表示成功风格的列表组,绿色背景色。 |
.list-group-item-info |
该样式设置表示普通信息的列表组,淡蓝色背景色。 |
.list-group-item-warning |
该样式设置表示警告的列表组,黄色背景色。 |
.list-group-item-danger |
该样式设置表示危险的列表组,红色背景色。 |
## 程序示例 ## |
|
下面代码示范了简单的列表组的用法。 |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41
| <!DOCTYPE html> <html>
<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <title> 列表组 </title> <link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css"> <link rel="stylesheet" href="../bootstrap/css/bootstrap-theme.min.css"> </head>
<body> <div class="container"> <div class="row"> <div class="col-sm-6"> <ul class="list-group"> <li class="list-group-item">疯狂前端开发讲义</li> <li class="list-group-item">疯狂Android讲义</li> <li class="list-group-item">疯狂iOS讲义</li> <li class="list-group-item">疯狂Swift讲义</li> </ul> </div> <div class="col-sm-6"> <ul class="list-group"> <li class="list-group-item list-group-item-success">疯狂前端开发讲义</li> <li class="list-group-item list-group-item-info">疯狂Android讲义</li> <li class="list-group-item list-group-item-warning">疯狂iOS讲义</li> <li class="list-group-item list-group-item-danger">疯狂Swift讲义</li> </ul> </div> </div> </div> <script type="text/javascript" src="../jquery-3.1.1.js"></script> <script type="text/javascript" src="../bootstrap/js/bootstrap.min.js"></script> </body>
</html>
|
|
|
在该代码中定义了两个列表组,其中
第一个列表组是最普通的列表组,并未为其指定任何风格。
第二个列表组中的列表项还被指定了.list-group-item-success
等样式,因此第二个列表组中的列表项将具有对应的背景色。
在列表项中加入徽章组件
如果在列表项中加入徽章组件,它会自动被放在列表项的右边。例如如下代码。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40
| <!DOCTYPE html> <html>
<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <title> 列表组中的徽章 </title> <link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css"> <link rel="stylesheet" href="../bootstrap/css/bootstrap-theme.min.css"> </head>
<body> <div class="container"> <ul class="list-group"> <li class="list-group-item list-group-item-success"> <span class="badge">16</span> 疯狂前端开发讲义 </li> <li class="list-group-item list-group-item-info"> <span class="badge">20</span> 疯狂Android讲义 </li> <li class="list-group-item list-group-item-warning"> <span class="badge">5</span> 疯狂iOS讲义 </li> <li class="list-group-item list-group-item-danger"> <span class="badge">9</span> 疯狂Swift讲义 </li> </ul> </div> <script type="text/javascript" src="../jquery-3.1.1.js"></script> <script type="text/javascript" src="../bootstrap/js/bootstrap.min.js"></script> </body>
</html>
|
在该代码中,为每个列表项都添加了一个徽章,徽章会被自动放在列表项的右边。
原文链接: 7.13 列表组 7.13.1 列表组基础