BootStrap初学者对弹出框和进度条的使用感觉_javascript技巧_脚本之家

作者:运维知识    发布时间:2019-12-11 14:23     浏览次数 :

[返回]

Bootstrap,来自 Twitter,是当前最受招待的前端框架。Bootstrap 是根据HTML、CSS、JAVASC凯雷德IPT 的,它简洁利落,使得 Web 开辟尤其高效。

1、进度条

bootstrap 框架提供的进程条,如新手教程里面包车型地铁那一个代码

在网页中,进程条的成效并不菲见,譬如三个评分系统,比如加载状态等。就像下图所示的三个评分系统,他正是贰个总结的进度条效果:

40% 完成

进程条和别的独立组件一样,开辟者能够依附自个儿的内需,选拔相应的版本:

让自己这种真正的新手风流洒脱起首不知晓该怎样....让其改为真正的进程条。可是进过百度几下别人的以往,只要那一个是要加多jquery代码合作之下技巧兑现滴。笔者度呀度,终于达成如下,略带欢畅。

☑ LESS版本:源码文件progress-bars.less

   文件正在上传请勿刷新页面!

☑ Sass版本:源码文件_progress-bars.scss

地点这段是,用弹出框里面满含进程条。不然怎么贯彻二个从头让其藏匿的呢?在用bootstrap 做进度条,只怕固定的弹出框时,加上data-backdrop="static" 那句比较好,因为没有那几个修饰,你如若点击下鼠标,弹出框就销声匿迹不见了。

☑ 编写翻译后版本:bootstrap.css文件第4500行~第4575行

 var p = 101; var stop = 1; function run() { p += 4; $.css; var timer = setTimeout; if  { p = 0; } } $.click { $.modal; p = 0; stop = 0; run.submit;  

同有时候Bootstrap框架为大家提供种种体制风格的进度条,供大家使用.

实则,bootstrap的进程条是经过css样式举办表现的,所以意气风发旦不断滴改进,style width的值,就足以展示出来。当然笔者那么些轮回,重现刷新页面能力重复掩没掉进程条。倘若,用post提交,然后依据重回值实行决断,然后用$.modal;将其隐匿,stop的值相应滴就改为1,不然会在一直跑滴。

2、进程条–基本样式

Bootstrap框架中对于进程条提供了多个骨干样式,三个100%升幅的背景观,然后个高亮的色表示落成速度。其实制作这样的进程条特别轻巧,平常是运用多少个容器,外容器械备自然的上涨的幅度,并且安装三个背景颜色,他的子成分设置三个幅度,比方达成度是十分二,同不经常间给其安装三个高亮的背景观。

1)、使用方法:

Bootstrap框架中也是按那样的不二等秘书诀得以完结的,他提供了四个容器,外容器使用“progress”样式,子容器使用“progress-bar”样式。在那之中progress用来设置进程条的容器样式,而progress-bar用于约束进程条的进程。使用情势充裕的简约:

2)、达成原理:

前边也说了,这样的大旨进度条首要分为两有的:

progress样式首要安装进程条容器的背景观,容器中度、间隔等:

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

.progress { height: 20px; margin-bottom: 20px; overflow: hidden; background-color: #f5f5f5; border-radius: 4px; -webkit-box-shadow: inset 0 1px 2px rgba; box-shadow: inset 0 1px 2px rgba;}

而progress-bar样式在安装进度方向,主要的是安装了进度条的背景颜色和联网效果:

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

.progress-bar { float: left; width: 0; height: 100%; font-size: 12px; line-height: 20px; color: #fff; text-align: center; background-color: #428bca; -webkit-box-shadow: inset 0 -1px 0 rgba; box-shadow: inset 0 -1px 0 rgba; -webkit-transition: width .6s ease; transition: width .6s ease;}

3)、构造优化:

即使这么达成了基本进程条效果,但对此生理残疾行动障碍者职员浏览网页有一些不方便,所以大家能够将组织做得更加好些:

  40% Complete 

1>、role属性作用:告诉找寻引擎这些div的意义是进度条。

2>、aria-valuenow="40"属性功能:当前行度条的进程为十分三。

3>、aria-valuemin="0"属性成效:进程条的最小值为0%。

4>、aria-valuemax="100"属性功效:进度条的最大值为百分百。

3、进程条–彩色进度条

Bootstrap框架中的进程条和警戒新闻框同样,为了能给顾客贰个更加好的经验,也依照分歧的景况配置了不一样的进度条颜色。在这称呼彩色进程条,其主要性总结以下两种:

☑ progress-bar-info:代表新闻进程条,进程条颜色为藕灰

☑ progress-bar-success:代表成功进程条,进程条颜色为卡其色

☑ progress-bar-warning:表示警报进程条,进程条颜色为香艳

☑ progress-bar-danger:意味着错误进程条,进度条颜色为革命

1)、使用情势:

切实运用就特别轻巧了,只供给在根基的速度上扩展对应的类名。如:

2)、实现原理:

有滋有味进程条与宗旨进度条相比较,正是进度条颜色做了必然的改变,其对应的样式代码如下:

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

.progress-bar-success { background-color: #5cb85c;}/*bootstrap.css文件第4555行~第4557行*/.progress-bar-info { background-color: #5bc0de;}/*bootstrap.css文件第4562行~第4564行*/.progress-bar-warning { background-color: #f0ad4e;}/*bootstrap.css文件第4569行~第4571行*/.progress-bar-danger { background-color: #d9534f;}

4、进度条–条纹进度条

在Bootstrap框架中除了提供了五彩进度条之外,还提供了生龙活虎种条纹进度条,这种条纹进度条选取CSS3的线性渐变来完毕,并未有依附其余图片。使用Bootstrap框架中的条纹进程条只须要在进程条的容器“progress”根底上平添类名“progress-striped”,当然,假诺您要让您的进程条条纹像五彩进程同样,具备彩色效果,你只须求在进程条上平添对应的水彩类名,如前方的多彩进程条所讲。

联合来看一下制作条纹进程条的构造:

下一篇:没有了