示例 2 : 按钮中的徽记
超链旁的徽记
<!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>
<a href="#">新的消息<span class="badge">42</span></a>
<!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> <a href="#">新的消息<span class="badge">42</span></a>
按钮中的徽记
<!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>
<button class="btn btn-primary" type="button">
未读消息<span class="badge">4</span>
</button>
<!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> <button class="btn btn-primary" type="button"> 未读消息<span class="badge">4</span> </button>
HOW2J公众号,关注后实时获知最新的教程和优惠活动,谢谢。
问答区域
2020-02-01
有没有看见这个就想点的同学
2019-02-27
徽章中badge的颜色怎么改,可以自己设置吗
1 个答案
havana 跳转到问题位置 答案时间:2019-12-09 可以自己设置颜色
<button class="btn btn-primary" type="button"> 未读消息<span class="badge" style="background-color:red;color:white">4</span> </button>
回答已经提交成功,正在审核。 请于 我的回答 处查看回答记录,谢谢
2017-08-16
徽章中的值如何动态改变,而不是写死一个4
提问之前请登陆
提问已经提交成功,正在审核。 请于 我的提问 处查看提问记录,谢谢
|