位置: 编程技术 - 正文

Bootstrap进度条组件知识详解(bootstrap怎样为进度条添加动画)

编辑:rootadmin

推荐整理分享Bootstrap进度条组件知识详解(bootstrap怎样为进度条添加动画),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:bootstrap动态进度条,progress进度条组件,设置进度条20%的属性是,bootstrap 进度条,progressbar进度条,bootstrap 进度条,progress进度条组件,设置进度条20%的属性是,bootstrap进度条动态加载,bootstrap 进度条,内容如对您有帮助,希望把文章链接给更多的朋友!

在网页中,经常见到进度条效果,如:平分系统、加载状态等,进度条组件使用了css3的transition和animation属性来完成一些特效,这些特效在IE9及IE9以下版本、Firefox的老版本中并不支持,Opera 不支持 animation 属性。

进度条和其他独立组件一样,开发者可以根据自己的需要选择对应的版本:

LESS: progress-bars.less

SASS: _progress-bars.scss

基础进度条

实现原理:

需要两个容器,外容器使用类名.progress,子容器使用类名.progress-bar;其中.progress用来设置进度条容器的背景色,容器的高度,间距等;而.progress-bar设置进度方向,进度条的背景色和过度效果;下面是css源码:

例子:

role属性作用:告诉搜索引擎这个div的作用是进度条;

aria-valuenow=””属性作用:当前进度条的进度为%;

aria-valuemin=”0”属性作用:进度条的最小值为0%;

aria-valuemax=””属性作用:进度条的最大值为%;

可以将设置了.sr-only类的<span>标签从进度条组件中移除,而让当前进度显示出来;

彩色进度条

彩色进度条和警告进度条一样,为了能给用户一个更好的体验,也根据不同的状态配置了不同的进度条颜色,主要包括以下四种:

progress-bar-info:表示信息进度条,蓝色

progress-bar-success:表示成功进度条,绿色

progress-bar-warning:表示警告进度条,黄色

progress-bar-danger:表示错误进度条,红色

css源码:

使用方法:

只需要在基础进度条上增加对应的类名即可

Bootstrap进度条组件知识详解(bootstrap怎样为进度条添加动画)

例子:

效果如下:

条纹进度条

条纹进度条采用css3的线性渐变来实现,并未借助任何图片,使用条纹进度条只需在进度条的容器.progress基础上追加类名”progress-striped”,如果要进度条纹像彩色进度一样,具有彩色效果,只需在进度条上增加相应得颜色类名

下面是.progress-striped样式源码:

条纹进度对应的每种状态也有不同的颜色

下面来看看条纹进度条的运用:

动态条纹进度条

在进度条.progress 、.progress-striped两个类的基础上在加入类名.active就能实现动态条纹进度条。

其实现原理主要是通过css3的animation来完成。首先通过@keyframes创建了一个progress-bar-stripes的动画,这个动画主要做了一件事,就是改变背景图像的位置,也就是 background-position的值。因为条纹进度条是通过CSS3的线性渐变来制作的,而linear-gradient实现的正是对应背景中的背景图片

下面是css源码:

@keyframes仅仅是创建了一个动画效果,如果要让进度条真正的动起来,我们需要通过一定的方式调用@keyframes创建的动画 “progress-bar-stripes”,并且通过一个事件触发动画生效。在Bootstrap框架中,通过给进度条容器“progress”添加一个类名“active”,并让文档加载完成就触“progress-bar-stripes”动画生效

调用动画对应的样式代码如下:

例子:

效果如下(由于是直接从网页上结果来的图,这里并看不到它的动态效果):

层叠进度条:

层叠进度可以将不容状态的进度条放在一起,按水平方式排列

例子:

除了层叠彩色进度条之外,还可以层叠条纹进度条,或者说条纹进度条和彩色进度条混合层叠,仅需要在“progress”容器中添加对应的进度条,同样要注意,层叠的进度条之和不能大于%。

下面来看一个例子:

关于Bootstrap进度条组件知识详解到此就介绍了,希望对大家有所帮助!

Bootstrap媒体对象的实现 在web页面中,图片居左,内容居右排列,是非常常见的效果,它也就是媒体对象,它是一种抽象的样式,可以用来构建不同类型的组件,在bootstrap框架

基于javascript编写简单日历 一.表格行数问题既然要显示日期表格的话,首先得知道这个表格有多少行多少列,列数是已经确定的,从星期天(日历上第1列是星期天)到星期六一共

javascript实现列表切换效果 IE兼容性没处理,确切的说不太会,还望指点一二思路:1、js获取要给定点击事件的按钮组对象,如btns=document.xxx(),遍历过程绑定事件之前先取得当前对

标签: bootstrap怎样为进度条添加动画

本文链接地址:https://www.jiuchutong.com/biancheng/369926.html 转载请保留说明!

上一篇:BootStrap glyphicons 字体图标实现方法

下一篇:Bootstrap媒体对象的实现(bootstrap媒体查询写法)

  • 小规模纳税人收普票和专票有什么区别
  • 消费税的账务处理流程
  • 仓库盘亏怎么处理
  • 法人拿走公司利润要交税吗
  • 成本票和进项票怎么区分
  • 小规模纳税人收到专票后如何处理
  • 未结转本年利润影响报表吗
  • 购销合同印花税怎么算
  • 收到加工费普通发票怎么做账务处理
  • 企业购买电话充值卡的分录
  • 营改增后建筑行业甲供材
  • 无形资产界定标准
  • 起征点与免征额的区别
  • 公共电话亭的话费收入如何做税务处理呢?
  • 旅行社开哪里比较好
  • 营改增住宿费的进项税可以抵扣吗
  • 租的厂房再转租怎么开票抵扣
  • 已过认证周期什么意思
  • 发票联丢失用抵扣联做账可以吗
  • 甲供材简易征收税率
  • 出口退税信息系统
  • 子公司具有独立的法律地位吗
  • 企业网银使用
  • 债转股的税收政策
  • 多交的增税怎么做账
  • 旅游业差额征税怎么计算
  • 增值税有留底怎么申请退税
  • 一般纳税人所有税率
  • 长期股权投资损失计入什么科目
  • 五险一金的记账凭证怎么填写
  • 公司销售自己使用过的固定资产
  • linux c gui
  • 公司雇用临时工人工资需要到税务局开发票吗
  • rnbrcache.exe是什么意思
  • php中array怎么用
  • 增值税发票开红字发票后账务处理?
  • 我国中小企业成本管理现状
  • 简述税款征收的基本原则
  • 元素鼠标失灵了怎么办
  • 民办非企业单位登记管理暂行条例
  • 金税盘锁死能正常报税吗
  • 企业法人歇业后诉讼主体确认
  • css网页布局代码
  • 每季度报税什么意思
  • 公对公的税票是怎么个流程
  • 国家退税收到的钱在哪里
  • 线程池中的一个线程执行完一个任务后
  • 百度ai修复照片
  • python中np.array用法
  • 新合同旧合同的法律依据
  • 汽车折旧年限是几年如何计算
  • pythonzen
  • 购买的优惠卷到期后退款
  • 股权分配和利润的关系
  • 上年度企业所得税调整需要调账吗
  • 企业所得税税款可以税前扣除吗
  • 企业之间利息收入开票吗
  • 应付国库集中支付结余核算
  • 固定资产的类别
  • 电商企业银行账户是什么
  • 支付大型设备税率是多少
  • 票据贴现怎么入账
  • 管理费用处理的是
  • 企业对外借款是什么意思
  • 单位租用员工个人的车可以不收租吗
  • 应收账款转让会计分录 未实际收到对价
  • 代理记账许可证查询
  • 销售成本包括哪些内容
  • 出售无形资产属什么科目
  • mysql中使用instr进行模糊查询方法介绍
  • windosxp无法启动
  • fedora soas
  • bios更改
  • spmgr.exe - spmgr是什么进程 有什么用
  • 安卓显示时间代码
  • 批处理改ipv4地址
  • unity接收udp
  • Python随机生成数字求最小的三个数字
  • 3.0排量 车船税
  • 税务局是什么单位类型
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设