<!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>
浙公网安备 33010602011771号