Bootstrap每天必学之进度条
1、进度条在网页中,进度条的效果并不少见,比如一个评分系统,比如加载状态等。就如下图所示的一个评分系统,他就是一个简单的进度条效果: 进度条和其他独立组件一样,开发者可以根据自己的需要,选择对应的版本: ☑ LESS版本:源码文件progress-bars.less ☑ Sass版本:源码文件_progress-bars.scss ☑ 编译后版本:bootstrap.css文件第4500行~第4575行 而且Bootstrap框架为大家提供多种样式风格的进度条,供大家使用. 2、进度条–基本样式Bootstrap框架中对于进度条提供了一个基本样式,一个100%宽度的背景色,然后个高亮的色表示完成进度。其实制作这样的进度条非常容易,一般是使用两个容器,外容器具有一定的宽度,并且设置一个背景颜色,他的子元素设置一个宽度,比如完成度是30%(也就是父容器的宽度比例值),同时给其设置一个高亮的背景色。 1)、使用方法: Bootstrap框架中也是按这样的方式实现的,他提供了两个容器,外容器使用“progress”样式,子容器使用“progress-bar”样式。其中progress用来设置进度条的容器样式,而progress-bar用于限制进度条的进度。使用方法非常的简单: 运行效果如下: 2)、实现原理: 前面也说了,这样的基本进度条主要分成两部分: progress样式主要设置进度条容器的背景色,容器高度、间距等: /bootstrap.css文件第4516行~第4524行/ 而progress-bar样式在设置进度方向,重要的是设置了进度条的背景颜色和过渡效果: /bootstrap.css文件第4525行~第4538行/ 3)、结构优化: 虽然这样实现了基本进度条效果,但对于残障人员浏览网页有点困难,所以我们可以将结构做得更好些(语义化更友好些): 1>、role属性作用:告诉搜索引擎这个div的作用是进度条。 2>、aria-valuenow="40"属性作用:当前进度条的进度为40%。 3>、aria-valuemin="0"属性作用:进度条的最小值为0%。 4>、aria-valuemax="100"属性作用:进度条的最大值为100%。 3、进度条–彩色进度条Bootstrap框架中的进度条和警告信息框一样,为了能给用户一个更好的体验,也根据不同的状态配置了不同的进度条颜色。在此称为彩色进度条,其主要包括以下四种: ☑ progress-bar-info:表示信息进度条,进度条颜色为蓝色 ☑ progress-bar-success:表示成功进度条,进度条颜色为绿色 ☑ progress-bar-warning:表示警告进度条,进度条颜色为黄色 ☑ progress-bar-danger:表示错误进度条,进度条颜色为红色 1)、使用方法: 具体使用就非常简单了,只需要在基础的进度上增加对应的类名。如: 运行效果如下: 2)、实现原理: 彩色进度条与基本进度条相比,就是进度条颜色做了一定的变化,其对应的样式代码如下: /bootstrap.css文件第4548行~第4550行/ 4、进度条–条纹进度条在Bootstrap框架中除了提供了彩色进度条之外,还提供了一种条纹进度条,这种条纹进度条采用CSS3的线性渐变来实现,并未借助任何图片。使用Bootstrap框架中的条纹进度条只需要在进度条的容器“progress”基础上增加类名“progress-striped”,当然,如果你要让你的进度条条纹像彩色进度一样,具有彩色效果,你只需要在进度条上增加相应的颜色类名,如前面的彩色进度条所讲。 一起来看一下制作条纹进度条的结构: 运行效果如下: 1)、原现实现: 正如前面所说,实现条纹进度条,主要使用的是CSS3的线性渐变,其具体代码如下: /bootstrap.css文件第4539行~第4547行/ 同样的,条纹进度条对应的每种状态也有不同的颜色,使用方法与彩色进度条一样。只是样式上做了一定的调整: /bootstrap.css文件第4551行~第4554行/ /bootstrap.css文件第4558行~第4561行/ /bootstrap.css文件第4565行~第4568行/ 5、进度条–动态条纹进度条 使用方法: 在进度条“progress progress-striped”两个类的基础上再加入“active”类名。如下代码: 1)、实现原理: 为了让条纹进度条动起来,Bootstrap框架还提供了一种动态条纹进度条。其实现原理主要通过CSS3的animation来完成。首先通过@keyframes创建了一个progress-bar-stripes的动画,这个动画主要做了一件事,就是改变背景图像的位置,也就是background-position的值。因为条纹进度条是通过CSS3的线性渐变来制作的,而linear-gradient实现的正是对应背景中的背景图片。 /bootstrap.css文件第4500行~第4515行/ 了解CSS3的同学都知道,@keyframes仅仅是创建了一个动画效果,如果要让进度条真正的动起来,我们需要通过一定的方式调用@keyframes创建的动画“progress-bar-stripes”,并且通过一个事件触发动画生效。在Bootstrap框架中,通过给进度条容器“progress”添加一个类名“active”,并让文档加载完成就触“progress-bar-stripes”动画生效。 调用动画对应的样式代码如下: /bootstrap.css文件第4544行~第4547行/ 运行效果如下:
6、进度条–层叠进度条Bootstrap框架除了提供上述几种进度条之外,还提供了一种层叠进度条,层叠进度条,可以将不同状态的进度条放置在一起,按水平方式排列。具体使用如下: |