bootstrap4-badge徽章组件

css 样式概览

CSS 类	描述
`.badge`	必选,默认,方体形状
`.badge-pill`	药丸形状
`.badge-success`	深蓝色
`.badge-secondary`	深灰色
`.badge-success`	绿色
`.badge-danger`	红色
`.badge-info`	黄色
`.badge-warning`	浅蓝色
`.badge-light`	浅灰色
`.badge-dark`	黑色

使用说明

(1)
badge 组件一般使用在span或者是a元素上,当然也可以将这些元素内嵌到buuton元素,以起到内嵌信息的效果等.
(2)
若是要使用默认的样式,采用如下的格式 :
<span class="badge badge-success">徽章</span>
(3)
若是要使用药丸形状的徽章,则采用下面的形式 :
<span class="badge badge-pill badge-success"></span>

组件样式颜色规划预览

默认的样式 :

药丸形状的样式 :

嵌套样式的预览 :

bootstrap4-badge徽章组件相关推荐

微信小程序 MinUI 组件库系列之 badge 徽章组件
MinUI 是基于微信小程序自定义组件特性开发而成的一套简洁.易用.高效的组件库,适用场景广,覆盖小程序原生框架.各种小程序组件主流框架等,并且提供了高效的命令行工具.MinUI 组件库包含了很多基础 ...
微信小程序weui在线入门教程-基础组件-badge徽章
效果图微信小程序交流群:111733917 | 微信小程序从0基础到就业的课程:https://edu.csdn.net/topic/huangjuhua Wxml代码 <view class ...
Bootstrap(8) 路径分页标签和徽章组件
一．路径组件路径组件也叫做面包屑导航. //面包屑导航 <ol class="breadcrumb"><li><a href="#&quo ...
（八）路径（面包屑导航）分页标签和徽章组件
一．路径组件路径组件也叫做面包屑导航. <ol class="breadcrumb"><li><a href="#">首页 ...
设置应用图标badge(徽章)
// 图标右上角的数字[UIApplication sharedApplication].applicationIconBadgeNumber = msgCount + result.status + ...
宝藏级UI组件库：FirstUI，微信小程序版+uniapp版双版至V1.5.0，完美支持vue3
First UI(https://www.firstui.cn/)是一套超高性能.超高颜值的移动端UI综合解决方案,包含业内顶尖的组件库.强大的功能库.丰富精美的模板库,提供uni-app(完美支持n ...
要web开发精品教程吗？免费一百期连讲的那种-逐浪CMS前端开发100期入门教程全面开放
要web开发精品教程吗?免费无广告一百期连讲的那种-逐浪CMS前端开发100期入门教程全面开放大师主讲经验难得由逐浪CMS首席架构师发哥老师,亲自主理讲解. 历时一年精心打造, 汇聚了互联网诞生 ...
Bootstrap 徽章 badge
徽章 Bootstrap提供的徽章,非常适合显示计数结果等内容,它的基本样式通过 .badge类实现,默认以带有圆角和背景的椭圆呈现.如: <a href="#">In ...
Material Design Lite组件之徽章
1.介绍 Material Design Lite(MDL)徽章组件是一个屏幕上的通知元素.徽章由一个小圆圈组成,通常包含数字或其他字符,这些圆圈出现在另一个物体附近.徽章既可以是通知者,也可以是与对 ...

bootstrap4-badge徽章组件

css 样式概览

使用说明

组件样式颜色规划预览

bootstrap4-badge徽章组件相关推荐

最新文章

热门文章