官方地址

https://v3.bootcss.com/components/#badges

基本用法

.badge

<!-- 基本用法 -->
<p><span class="badge"></span>
</p><p><span class="badge">20</span>
</p><p><button type="button" class="btn btn-primary">Badge <span class="badge">10</span></button>
</p>

整体代码

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ --><title>23徽章</title><!-- Bootstrap --><link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet"><!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 --><!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 --><!--[if lt IE 9]><script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script><script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script><![endif]-->
</head>
<body class=""><pre class="pre-scrollable"></pre><!-- 基本用法 -->
<p><span class="badge"></span>
</p><p><span class="badge">20</span>
</p><p><button type="button" class="btn btn-primary">Badge <span class="badge">10</span></button>
</p>
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
</body>
</html>

BootStrap3 徽章系列相关推荐

徽章系列3： Travis CI 的使用
官网: http://travis-ci.org/ ps: 这个是公开的,如果需要使用私有的,请使用 .com 域名. 需要提醒的是:每次提交代码后都会重新下载需要的资源文件哦,所以时间很长,耐心等待 ...
表格渲染解决BootStrap3徽章没有背景颜色的问题(BootStrap4有)
BootStrap3 //解决BootStrap3徽章没有背景颜色的问题(BootStrap4有) formatter: function (value, row, index){if(diction ...
徽章系列8：生成个性徽章
官网: https://shields.io/ 有什么用? 彰显个人魅力,体现某种功能.例如咱们做一个跳转到我的博客的个人徽章. 怎么玩? 滚动网页到最下面: 在对应的地方填写相应的东西(也支持中文 ...
徽章系列2：JitPack 的使用
官网: https://jitpack.io 创建 Android Library 在 AS 中创建标准的 android 项目: 创建 Library: 创建 badge library 成功. 配 ...
bootstrap3 徽章_尔冬升送张大大金像奖女神徽章，全国仅14枚，网友吐槽：他不值得...
点击上方蓝字关注 [偶像说]并置顶每天不见不散11月2号张大大举办了自己的生日会,这一场生日会对张大大来说也非常有意义,他三十岁了,要奔四了,并且这一年他有了新的挑战, 以演员的身份参加了<演 ...
徽章系列1： Top 30 android 开源项目徽章
官网: http://travis-ci.org/ ps: 这个是公开的,如果需要使用私有的,请使用 .com 域名. 需要提醒的是:每次提交代码后都会重新下载需要的资源文件哦,所以时间很长,耐心等待 ...
bootstrap3 徽章_【可预留】不倒翁工作室，数码宝贝勇气徽章
公众号只对工作室作品提供一个宣传平台,为广大玩家提供一个信息交流平台,对于各工作室本身出现的问题概不负责!定制有风险!购买擦亮眼! 团队:不倒翁工作室作品:数码宝贝勇气徽章原型:星星尺寸:未知 ...
Bootstrap3插件系列：bootstrap-select2
1.下载插件 https://github.com/select2/select2 http://select2.github.io/ 2.引用插件 <script src="~/Sc ...
Bootstrap-学习系列
前言首先在此多谢博友们在前几篇博文当中给与的支持和鼓励,以及在回复中提出的问题.意见和看法. 在此先声明一下,之前在下小菜所有的随笔文章中,只有前两篇关于Bootstrap的文章发表在了博客园的首页 ...

BootStrap3 徽章系列

目录

官方地址

基本用法

整体代码

BootStrap3 徽章系列相关推荐

最新文章

热门文章