运行截图如下：
代码如下：
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>CN_TEST1</title>
- <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-
- <!-- bootstrap css核心文件-->
- <link rel="stylesheet" href="bootstrap-4.4.1-dist/css/bootstrap.min.css">
- <!-- bootstrap使用到了jquery，需要提前引用-->
- <script src="js/jquery-3.5.1.min.js"></script>
- <!-- 弹窗、提示、下拉菜单-->
- <script src="bootstrap-4.4.1-dist/js/bootstrap.bundle.js"></script>
- <!-- bootstrap核心文件-->
- <script src="bootstrap-4.4.1-dist/js/bootstrap.min.js"></script>
-
- </head>
- <body>
-
- <div class="container-fluid">
-
- <ul class="list-group">
- <li class="list-group-item">First item</li>
- <li class="list-group-item">Second item</li>
- <li class="list-group-item">Third item</li>
- </ul>
-
- <br/>
-
- <ul class="list-group">
- <li class="list-group-item active">First item</li>
- <li class="list-group-item">Second item</li>
- <li class="list-group-item">Third item</li>
- </ul>
-
- <br/>
-
- <ul class="list-group">
- <li class="list-group-item disabled">First item</li>
- <li class="list-group-item">Second item</li>
- <li class="list-group-item">Third item</li>
- </ul>
-
- <br/>
-
- <div class="list-group">
- <a href="#" class="list-group-item list-group-item-action">First item</a>
- <a href="#" class="list-group-item list-group-item-action">Second item</a>
- <a href="#" class="list-group-item list-group-item-action">Third item</a>
- </div>
-
- <br/>
-
- <ul class="list-group list-group-flush">
- <li class="list-group-item disabled">First item</li>
- <li class="list-group-item">Second item</li>
- <li class="list-group-item">Third item</li>
- </ul>
-
- <br/>
-
- <!-- 水平列表组-->
- <ul class="list-group list-group-horizontal">
- <li class="list-group-item disabled">First item</li>
- <li class="list-group-item">Second item</li>
- <li class="list-group-item">Third item</li>
- </ul>
-
- <br/>
-
- <div class="list-group">
- <a href="#" class="list-group-item list-group-item-action">Item 1</a>
- <a href="#" class="list-group-item list-group-item-success">Item 2</a>
- <a href="#" class="list-group-item list-group-item-danger">Item 3</a>
- <a href="#" class="list-group-item list-group-item-info">Item 4</a>
- <a href="#" class="list-group-item list-group-item-warning">Item 5</a>
- </div>
-
- </div>
-
- </body>
- </html>
解释：
①创建列表组有2种方式，一种是在ul上架list-group类，然后在li上架list-group-item，或者在div上架group类，在a上架list-group-item；
②active来设置激活状态的列表；
③list-group-flush来删除列表的边框和圆角；
