<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <!-- 新 Bootstrap4 核心 CSS 文件 --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css"> <!-- jQuery文件。务必在bootstrap.min.js 之前引入 --> <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script> <!-- bootstrap.bundle.min.js 用于弹窗、提示、下拉菜单，包含了 popper.min.js --> <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script> <!-- 最新的 Bootstrap4 核心 JavaScript 文件 --> <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script> </head> <body> <!-- 1.列表组基础 --> <ul class="list-group"> <li class="list-group-item">123</li> <li class="list-group-item">456</li> <li class="list-group-item">789</li> </ul> <!-- 2.禁用 --> <ul class="list-group"> <li class="list-group-item disabled" >123</li> <li class="list-group-item">123</li> <li class="list-group-item">123</li> </ul> <!-- 3.使用超链接 --> <!-- list-group-item-action:去除超链接作用 --> <div class="list-group"> <a href="" class="list-group-item list-group-item-action">123</a> <a href="" class="list-group-item list-group-item-action">123</a> <a href="" class="list-group-item list-group-item-action">123</a> </div> <!-- 4.删除列表边框 --> <ul class="list-group list-group-flush"> <li class="list-group-item">123</li> <li class="list-group-item">123</li> <li class="list-group-item">123</li> </ul> <!-- 5.水平的 --> <ul class="list-group list-group-horizontal"> <li class="list-group-item">123</li> <li class="list-group-item">123</li> <li class="list-group-item">123</li> </ul> <!-- 6.带徽章的 --> <ul class="list-group"> <li class="list-group-item d-flex justify-content-between align-items-center"> 123 <span class="badge badge-primary badge-pill">14</span> </li> <li class="list-group-item d-flex justify-content-between align-items-center"> 123 <span class="badge badge-primary badge-pill">13</span> </li> <li class="list-group-item d-flex justify-content-between align-items-center"> 123 <span class="badge badge-primary badge-pill">15</span> </li> </ul> <!-- 7.点击行为 --> <!-- 注意col-4是不会响应式改变的,就是页面拉伸不会改变 --> <div class="row"> <div class="col-4"> <div class="list-group"> <li class="list-group-item active" data-toggle="list" href="#one">123</li> <li class="list-group-item" data-toggle="list" href="#two">123</li> <li class="list-group-item" data-toggle="list" href="#three">123</li> </div> </div> <div class="col-6"> <div class="tab-content"> <div class="tab-pane fade show active" id="one">456</div> <div class="tab-pane fade" id="two">789</div> <div class="tab-pane fade" id="three">159</div> </div> </div> </div> </div> </body> </html>