|
|
|
示例 2 : 徽记 示例 3 : 链接 示例 4 : 按钮 示例 5 : 颜色
基本列表组
<!DOCTYPE html>
<script src="https://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script>
<link href="https://how2j.cn/study/css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
<script src="https://how2j.cn/study/js/bootstrap/3.3.6/bootstrap.min.js"></script>
<ul class="list-group">
<li class="list-group-item">回锅肉</li>
<li class="list-group-item">烧烤</li>
<li class="list-group-item">鱼香肉丝</li>
<li class="list-group-item">麻婆豆腐</li>
<li class="list-group-item">夫妻肺片</li>
</ul>
<!DOCTYPE html> <script src="https://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script> <link href="https://how2j.cn/study/css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet"> <script src="https://how2j.cn/study/js/bootstrap/3.3.6/bootstrap.min.js"></script> <ul class="list-group"> <li class="list-group-item">回锅肉</li> <li class="list-group-item">烧烤</li> <li class="list-group-item">鱼香肉丝</li> <li class="list-group-item">麻婆豆腐</li> <li class="list-group-item">夫妻肺片</li> </ul>
徽记
<!DOCTYPE html>
<script src="https://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script>
<link href="https://how2j.cn/study/css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
<script src="https://how2j.cn/study/js/bootstrap/3.3.6/bootstrap.min.js"></script>
<ul class="list-group">
<li class="list-group-item"><span class="badge">3</span>回锅肉</li>
<li class="list-group-item"><span class="badge">14</span>烧烤</li>
<li class="list-group-item"><span class="badge">15</span>鱼香肉丝</li>
<li class="list-group-item"><span class="badge">92</span>麻婆豆腐</li>
<li class="list-group-item"><span class="badge">6</span>夫妻肺片</li>
</ul>
<!DOCTYPE html> <script src="https://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script> <link href="https://how2j.cn/study/css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet"> <script src="https://how2j.cn/study/js/bootstrap/3.3.6/bootstrap.min.js"></script> <ul class="list-group"> <li class="list-group-item"><span class="badge">3</span>回锅肉</li> <li class="list-group-item"><span class="badge">14</span>烧烤</li> <li class="list-group-item"><span class="badge">15</span>鱼香肉丝</li> <li class="list-group-item"><span class="badge">92</span>麻婆豆腐</li> <li class="list-group-item"><span class="badge">6</span>夫妻肺片</li> </ul>
链接
<!DOCTYPE html>
<script src="https://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script>
<link href="https://how2j.cn/study/css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
<script src="https://how2j.cn/study/js/bootstrap/3.3.6/bootstrap.min.js"></script>
<div class="list-group">
<a href="#" class="list-group-item active">
回锅肉
</a>
<a href="#" class="list-group-item">烧烤</a>
<a href="#" class="list-group-item">鱼香肉丝</a>
<a href="#" class="list-group-item">麻婆豆腐</a>
<a href="#" class="list-group-item">夫妻肺片</a>
</div>
<!DOCTYPE html>
<script src="https://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script>
<link href="https://how2j.cn/study/css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
<script src="https://how2j.cn/study/js/bootstrap/3.3.6/bootstrap.min.js"></script>
<div class="list-group">
<a href="#" class="list-group-item active">
回锅肉
</a>
<a href="#" class="list-group-item">烧烤</a>
<a href="#" class="list-group-item">鱼香肉丝</a>
<a href="#" class="list-group-item">麻婆豆腐</a>
<a href="#" class="list-group-item">夫妻肺片</a>
</div>
按钮
<!DOCTYPE html>
<script src="https://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script>
<link href="https://how2j.cn/study/css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
<script src="https://how2j.cn/study/js/bootstrap/3.3.6/bootstrap.min.js"></script>
<div class="list-group">
<button type="button" class="list-group-item active">
回锅肉
</button>
<button type="button" class="list-group-item">烧烤</button>
<button type="button" class="list-group-item">鱼香肉丝</button>
<button type="button" class="list-group-item">麻婆豆腐</button>
<button type="button" class="list-group-item">夫妻肺片</button>
</div>
<!DOCTYPE html>
<script src="https://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script>
<link href="https://how2j.cn/study/css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
<script src="https://how2j.cn/study/js/bootstrap/3.3.6/bootstrap.min.js"></script>
<div class="list-group">
<button type="button" class="list-group-item active">
回锅肉
</button>
<button type="button" class="list-group-item">烧烤</button>
<button type="button" class="list-group-item">鱼香肉丝</button>
<button type="button" class="list-group-item">麻婆豆腐</button>
<button type="button" class="list-group-item">夫妻肺片</button>
</div>
颜色
<!DOCTYPE html>
<script src="https://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script>
<link href="https://how2j.cn/study/css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
<script src="https://how2j.cn/study/js/bootstrap/3.3.6/bootstrap.min.js"></script>
<div class="list-group">
<a href="#" class="list-group-item active">
回锅肉
</a>
<a href="#" class="list-group-item list-group-item-success">烧烤</a>
<a href="#" class="list-group-item list-group-item-info">鱼香肉丝</a>
<a href="#" class="list-group-item list-group-item-warning">麻婆豆腐</a>
<a href="#" class="list-group-item list-group-item-danger">夫妻肺片</a>
</div>
<!DOCTYPE html>
<script src="https://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script>
<link href="https://how2j.cn/study/css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
<script src="https://how2j.cn/study/js/bootstrap/3.3.6/bootstrap.min.js"></script>
<div class="list-group">
<a href="#" class="list-group-item active">
回锅肉
</a>
<a href="#" class="list-group-item list-group-item-success">烧烤</a>
<a href="#" class="list-group-item list-group-item-info">鱼香肉丝</a>
<a href="#" class="list-group-item list-group-item-warning">麻婆豆腐</a>
<a href="#" class="list-group-item list-group-item-danger">夫妻肺片</a>
</div>
HOW2J公众号，关注后实时获知最新的教程和优惠活动，谢谢。
问答区域
2021-11-25
假定在一个高度100px里面有20个li，高度之和为300px，怎么让它在规定的高度里面可以有滚动条可以拉
回答已经提交成功，正在审核。 请于 我的回答 处查看回答记录，谢谢
2020-01-10
看饿了
2019-09-06
怎么会有人随便提问呢
2018-12-26
我好饿啊
2018-02-26
请问示例2的徽记可以靠着左边的文字吗？
提问之前请登陆
提问已经提交成功，正在审核。 请于 我的提问 处查看提问记录，谢谢
|