BootStrap笔记-badge的使用

运行截图如下；

代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>CN_TEST1</title><meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"><!--    bootstrap css核心文件--><link rel="stylesheet" href="bootstrap-4.4.1-dist/css/bootstrap.min.css">
<!--    bootstrap使用到了jquery，需要提前引用--><script src="js/jquery-3.5.1.min.js"></script>
<!--    弹窗、提示、下拉菜单--><script src="bootstrap-4.4.1-dist/js/bootstrap.bundle.js"></script>
<!--    bootstrap核心文件--><script src="bootstrap-4.4.1-dist/js/bootstrap.min.js"></script></head>
<body><div class="container-fluid"><h1>测试<span class="badge badge-primary">primary</span></h1><h1>测试<span class="badge badge-danger">danger</span></h1><h2>测试<span class="badge badge-secondary">secondary</span></h2><h2>测试<span class="badge badge-success">success</span></h2><h3>测试<span class="badge badge-info">info</span></h3><h3>测试<span class="badge badge-light">light</span></h3><h4>测试<span class="badge badge-warning">warning</span></h4><h4>测试<span class="badge badge-primary">primary</span></h4><h5>测试<span class="badge badge-dark">dark</span></h5><h6>测试<span class="badge badge-primary">primary</span></h6><h6>测试<span class="badge badge-danger">danger</span></h6><br/><span class="badge badge-pill badge-danger">danger</span><span class="badge badge-pill badge-primary">primary</span><br/><button type="button" class="btn btn-primary">Message <span class="badge badge-info">4</span></button></div>
</body>
</html>

要注意的地方：

①badge为徽章，标签，同样要先要在class中，标名他是badge，然后再设置他的其他属性。

BootStrap笔记-badge的使用相关推荐

BootStrap笔记参考（全）-优极限
目录 BootStrap 1.主要内容 2.BootStrap的安装和使用 2.1BootStrap介绍 2.2BootStrap特点 2.3下载与使用 3.布局容器和栅格网格系统 3.1布局容器 3 ...
Bootstrap 徽章 badge
徽章 Bootstrap提供的徽章,非常适合显示计数结果等内容,它的基本样式通过 .badge类实现,默认以带有圆角和背景的椭圆呈现.如: <a href="#">In ...
Bootstrap 笔记
基本的HTML模板 <!DOCTYPE html> <html lang="en"><head><meta charset="u ...
Bootstrap笔记
Bootstrap使用: 下载Bootstrap,用于生产环境的 Bootstrap不需要安装解压文件到任意目录创建index.html,在该页面编写代码页面起始位置添加<link rel ...
Bootstrap笔记（记录不会的知识）
head: <link rel="stylesheet" href="bootstrap.min.css" /> 引入bootstrap.min.c ...
BootStrap笔记-Model（模式对话框）样式修改
BootStrap的模式对话框比Qt的用起来简单. 如要实现下面效果: 对应的html代码如下: <button type="button" class="btn ...
BootStrap笔记-popover的使用（popover中放验证码，点击更新）
做出来的效果是这样的. 当鼠标点击验证码的Input框时. 点击里面的img可以进行刷新对应的代码如下: <link href="css/bootstrap.min.css" ...
BootStrap笔记-导航
运行截图如下: 源码如下: <!DOCTYPE html> <html lang="en"> <head><meta charset=&q ...
BootStrap笔记-分页
程序运行截图: 代码如下: <!DOCTYPE html> <html lang="en"> <head><meta charset=&q ...

BootStrap笔记-badge的使用

BootStrap笔记-badge的使用相关推荐

最新文章

热门文章