bootstrap 滚动进度条_Bootstrap中的进度条

最新推荐文章于 2024-07-04 07:22:27 发布

l鲁波波

最新推荐文章于 2024-07-04 07:22:27 发布

阅读量647

点赞数

文章标签： bootstrap 滚动进度条

本文链接：https://blog.csdn.net/weixin_34489089/article/details/112018924

版权

本文详细介绍了如何在Bootstrap框架中创建条纹进度条，包括静态和动态效果。通过添加特定类名，如'progress-striped'和'active'，结合CSS3的线性渐变和动画实现条纹和动效。此外，还讨论了层叠进度条和带有Label的进度条的实现方法，强调了在使用过程中需要注意的宽度比例问题。

摘要由CSDN通过智能技术生成

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

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

原现实现：

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

/*bootstrap.css文件第4539行～第4547行*/

.progress-striped .progress-bar {

background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);

background-image:linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);

background-size: 40px 40px;

}

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

/*bootstrap.css文件第4551行～第4554行*/

.progress-striped .progress-bar-success {

background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255,