位置: 编程技术 - 正文

Bootstrap每天必学之进度条(bootstrap要学多久)

编辑:rootadmin

推荐整理分享Bootstrap每天必学之进度条(bootstrap要学多久),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:bootstrap快速入门,bootstrap入门,bootstrap学习,bootstrap怎么学,bootstrap学习,bootstrap要学到什么程度,bootstrap入门,bootstrap入门,内容如对您有帮助,希望把文章链接给更多的朋友!

1、进度条

在网页中,进度条的效果并不少见,比如一个评分系统,比如加载状态等。就如下图所示的一个评分系统,他就是一个简单的进度条效果:

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

&#; LESS版本:源码文件progress-bars.less

&#; Sass版本:源码文件_progress-bars.scss

&#; 编译后版本:bootstrap.css文件第行~第行

而且Bootstrap框架为大家提供多种样式风格的进度条,供大家使用.

2、进度条?基本样式

Bootstrap框架中对于进度条提供了一个基本样式,一个%宽度的背景色,然后个高亮的色表示完成进度。其实制作这样的进度条非常容易,一般是使用两个容器,外容器具有一定的宽度,并且设置一个背景颜色,他的子元素设置一个宽度,比如完成度是%(也就是父容器的宽度比例值),同时给其设置一个高亮的背景色。

1)、使用方法:

Bootstrap框架中也是按这样的方式实现的,他提供了两个容器,外容器使用“progress”样式,子容器使用“progress-bar”样式。其中progress用来设置进度条的容器样式,而progress-bar用于限制进度条的进度。使用方法非常的简单:

运行效果如下:

2)、实现原理:

前面也说了,这样的基本进度条主要分成两部分:

progress样式主要设置进度条容器的背景色,容器高度、间距等:

/bootstrap.css文件第行~第行/

而progress-bar样式在设置进度方向,重要的是设置了进度条的背景颜色和过渡效果:

/bootstrap.css文件第行~第行/

3)、结构优化:

虽然这样实现了基本进度条效果,但对于残障人员浏览网页有点困难,所以我们可以将结构做得更好些(语义化更友好些):

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

2>、aria-valuenow=""属性作用:当前进度条的进度为%。

3>、aria-valuemin="0"属性作用:进度条的最小值为0%。

4>、aria-valuemax=""属性作用:进度条的最大值为%。

3、进度条?彩色进度条

Bootstrap框架中的进度条和警告信息框一样,为了能给用户一个更好的体验,也根据不同的状态配置了不同的进度条颜色。在此称为彩色进度条,其主要包括以下四种:

&#; progress-bar-info:表示信息进度条,进度条颜色为蓝色

&#; progress-bar-success:表示成功进度条,进度条颜色为绿色

&#; progress-bar-warning:表示警告进度条,进度条颜色为黄色

&#; progress-bar-danger:表示错误进度条,进度条颜色为红色

1)、使用方法:

具体使用就非常简单了,只需要在基础的进度上增加对应的类名。如:

运行效果如下:

2)、实现原理:

彩色进度条与基本进度条相比,就是进度条颜色做了一定的变化,其对应的样式代码如下:

/bootstrap.css文件第行~第行/

4、进度条?条纹进度条

在Bootstrap框架中除了提供了彩色进度条之外,还提供了一种条纹进度条,这种条纹进度条采用CSS3的线性渐变来实现,并未借助任何图片。使用Bootstrap框架中的条纹进度条只需要在进度条的容器“progress”基础上增加类名“progress-striped”,当然,如果你要让你的进度条条纹像彩色进度一样,具有彩色效果,你只需要在进度条上增加相应的颜色类名,如前面的彩色进度条所讲。

Bootstrap每天必学之进度条(bootstrap要学多久)

一起来看一下制作条纹进度条的结构:

运行效果如下:

1)、原现实现:

正如前面所说,实现条纹进度条,主要使用的是CSS3的线性渐变,其具体代码如下:

/bootstrap.css文件第行~第行/

同样的,条纹进度条对应的每种状态也有不同的颜色,使用方法与彩色进度条一样。只是样式上做了一定的调整:

/bootstrap.css文件第行~第行/

/bootstrap.css文件第行~第行/

/bootstrap.css文件第行~第行/

5、进度条?动态条纹进度条

使用方法:

在进度条“progress progress-striped”两个类的基础上再加入“active”类名。如下代码:

1)、实现原理:

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

/bootstrap.css文件第行~第行/

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

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

/bootstrap.css文件第行~第行/

运行效果如下:

特别注意:要让条纹进度条动起来,就需要让“progress-striped”和“active”同时运用,不然条纹进度条是不具备动效效果。

6、进度条?层叠进度条

Bootstrap框架除了提供上述几种进度条之外,还提供了一种层叠进度条,层叠进度条,可以将不同状态的进度条放置在一起,按水平方式排列。具体使用如下:

运行效果如下:

或许你会感到疑问,没有为层叠进度条添加额外的样式代码,怎么就正常了呢?可以回过头来看基本进度条那部分,不难发现,在“progress-bar”上有一个左浮动的样式。也就是这个样式,在不增加任何样式代码就能实现上例的层叠效果。当然有一点需要注意,层叠进度条宽度之和不能大于%,大于%就会造成下面的不良效果:

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

运行效果如下:

7、进度条?带Label的进度条

上面介绍的各种进度条,都仅仅是通过颜色进度向用户传递进度值。但实际中,有很多时候是需要在进度条中直接用相关的数值向用户传递完成的进度值,在Bootstrap就为大家考虑了这种使用场景。

1)、实现方法:

只需要在进度条中添加你需要的值,如:

运行效果如下:

还有一种特殊情形,当进度条处于开始位置,也就是进度条的值为0%时,内容是否会撑开一定的宽度,让进度条具有颜色呢?如果是,这不是我们需要的效果,如果不是,又是怎么实现的呢?我们先来看一个这样的示例:

运行效果如下:

2)、原理分析:

效果告诉我们,当进度为0%,进度条颜色并没有显示出来,那是因为Bootstrap在样式上做了一定的处理。

/bootstrap.css文件第行~第行/

注:这段代码BootstrapV3.2版本才有。在Bootstrap V3.1.1版本是不具有这段代码,同时也说明,Bootstrap在不断的完善之中。

如果大家还想深入学习,可以点击这里进行学习,再为大家附两个精彩的专题:Bootstrap学习教程 Bootstrap实战教程

标签: bootstrap要学多久

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

上一篇:javascript省市区三级联动下拉框菜单实例演示(省市区json)

下一篇:详解JavaScript的表达式与运算符(javascript的介绍)

  • 增值税专用发票使用规定 最新
  • 销项税转出是啥意思
  • 出差的餐饮发票的税率是多少
  • 与生产相关的关键成功因素包括
  • 暂估的应付账款无法开具发票在金蝶云星空怎么操作
  • 天猫收取的佣金开具的技术服务发票会计分录
  • 政府奖励企业如何申请
  • 物业公司可以开租赁发票吗
  • 购买树木计入什么科目
  • 会计折旧法有哪几种
  • 临时设施费怎么结算
  • 应交城建税和教育费附加计算分录
  • 财政部颁布的具体准则
  • 公司间分摊费用开票问题
  • 公司承担了个人社保如何入账
  • 仓储费用的增值税计入哪里
  • 钢结构制作安装方案
  • 广告制作税收编码怎么填
  • 结转实物发放的成本分录
  • 财产清查账务处理步骤
  • 行政单位库存物资管理办法
  • 发票开错了要退税怎么操作
  • 发票修复是怎么回事
  • 银行承兑汇票如何承兑分录
  • 如何在excel中添加多行空白
  • 什么是盈余公积和资本公积
  • 允许企业所得税税前扣除的公益性捐赠的条件包括
  • 苹果手机铃声删除在哪里
  • 财务报表怎么判断盈亏
  • 预防cpu被烧毁的办法
  • 重楼的功效与作用价格
  • 前端 php
  • 普通发票丢了如何入账
  • 个人通讯费可以税前扣除吗
  • 企业所得税的税率是多少
  • debian更换国内源教程
  • 应付票据抵付应付账款会计分录
  • print函数php
  • vue学不懂怎么办
  • 用html语言完成以下内容
  • 现金溢余和短缺的会计分录
  • 租车发票可以抵扣吗
  • 什么是财务报表分析,方法有哪些
  • phpcms v9用户手册
  • mysql事务引擎
  • 租赁公司一般都有什么税
  • sql数据库check 约束代码怎么设置
  • 工程施工新科目
  • 实发工资属于什么科目
  • jdbc连接sqlserver2012
  • 电脑访问另一台电脑访问权限
  • 小规模纳税人申报步骤
  • 简易征收应纳税额
  • 不动产初始登记证明
  • 转让土地及地上建筑物涉及的税金
  • 存货质押融资的公司有哪些
  • 增值税留抵情况下要交流转税吗
  • 免税发票怎么抵扣
  • 结汇是把外币换成人民币吗
  • 未分配利润期初余额怎么录入
  • 固定资产折旧怎么算
  • 红字发票怎样记账
  • cmd shutdown命令
  • u盘安装win7系统鼠标键盘没反应
  • 纸嫁衣6第四章攻略全文图解
  • U盘安装centos8
  • bios屏蔽nvme
  • win7玩游戏卡吗
  • office2013标准版
  • Win7旗舰版系统镜像文件
  • Windows10系统下iis没有注册.netFrameWork4.0的原因
  • linux如何管理文件
  • c# opengl 3d
  • jQuery.ajax实现根据不同的Content-Type做出不同的响应
  • nodejs的组成
  • unity脚本api
  • 堆栈模式都是什么意思
  • 天津违规养犬的处罚依据
  • 开票税额超出1万怎么办
  • 区里的地税局局长是谁
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设