首页 > 其他分享 >前端学习-UI框架学习-Bootstrap5-011-徽章（Badges）

前端学习-UI框架学习-Bootstrap5-011-徽章（Badges）

时间：2024-03-29 11:55:43浏览次数：37

<template>
  <div class="container mt-3">
    <h3>徽章<span class="badge bg-success">new</span></h3>
    <h3>药丸形状徽章<span class="badge bg-danger rounded-pill">new</span></h3>
    <button type="button" class="btn btn-primary">嵌入式按钮的徽章<span class="badge bg-warning">new</span></button>

  </div>
</template>

标签：011,UI,徽章,Bootstrap5,new,Badges
From： https://www.cnblogs.com/ayubene/p/18103495

前端学习-UI框架学习-Bootstrap5-010-按钮组
菜鸟教程链接btn-group按钮组<template><divclass="containermt-3"><h2>加载按钮组</h2><divclass="btn-group"><buttonclass="btnbtn-primary">......
SaltGUI的安装
1.下载代码cd /data/salt-web/gitlabgitclonehttps://github.com/erwindon/SaltGUI.gitgitee拷贝的1.30.0(2023-11-11)版本gitclonehttps://gitee.com/xiaoxiaomuyuyu/SaltGUI.git目录为/data/salt-web/SaltGUI/2.修改salt-master配置文件需要先安装salt-api与pyOpe......
前端学习-UI框架学习-Bootstrap5-009-按钮
菜鸟教程链接按钮按钮类可用于,,或元素上:<template><divclass="containermt-3"><h2>按钮元素</h2><ahref="#"class="btnbtn-infom-3"role="button">链接按钮</a><buttontype="......
前端学习-UI框架学习-Bootstrap5-008-信息提示框
菜鸟教程链接提示框-基础颜色提示框可以使用.alert类,后面加上.alert-success,.alert-info,.alert-warning,.alert-danger,.alert-primary,.alert-secondary,.alert-light或.alert-dark类来实现:提示框添加链接提示框中在链接的标签上添加alert-link类来设置匹......
前端学习-UI框架学习-Bootstrap5-007-图像形状
菜鸟教程链接圆角效果rounded<imgsrc="./img/537.jpeg"class="rounded"alt="圆角效果"height="236">椭圆rounded-circle<imgsrc="./img/537.jpeg"class="rounded-circle"alt="拖延"heig......
关于使用IconData时flutter build apk 打包报错Target aot_android_asset_bundle fail
flutter项目中引入了iconfont.ttf之后，调试时正常，打包就报错。网上有的说法是：使用了iconfont.ttf里面不存在的icon，但是我使用的都是在iconfont.tt文件中的icon。我的情况是使用了switch case给IconData的codePoint动态赋值，下面这种情况就是打包报错的解决办法是......
element-ui表单校验：有值却不通过 el-form validate
解决：新增/编辑赋值的时候，所有明明有值校验不通过的属性使用$set赋值this.$set(this.form,"属性名","");//新增置空this.$set(this.form,"属性名",row.shuxing);//编辑赋值 ......
前端学习-UI框架学习-Bootstrap5-006-表格
菜鸟教程链接基础表格<template><divclass="containermt-3"><h2>基础表格</h2><p>.table类来设置基础表格的样式:</p><tableclass="table"><thead><tr>&l......
2024.03.28【UI设计】新拟态风格设计
新拟态风格就是类似于给图形图案制作出3D的凸出或者凹进效果的风格这个风格的设计需要使用到即时设计软件的蒙版（与ai不同，ai的蒙版仅有透明度蒙版，无轮廓蒙版）新拟态风格的实现主要是通过三个效果：（1）一个相对浅色高斯模糊效果元素、（2）一个相对深色的无效果元素、（3）一个正常颜色的高......
前端学习-UI框架学习-Bootstrap5-005-颜色
菜鸟教程学习链接字体颜色Bootstrap5提供了一些有代表意义的颜色类：.text-muted,.text-primary,.text-success,.text-info,.text-warning,.text-danger,.text-secondary,.text-white,.text-dark,.text-body(默认颜色，为黑色)and.text-light:可以设置文本颜色透明度......

前端学习-UI框架学习-Bootstrap5-011-徽章（Badges）

相关文章

赞助商

阅读排行