欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

Bootstrap源码学习笔记之bootstrap进度条

程序员文章站 2022-09-27 16:15:21
基本样式 要实现进度条效果要使用两个容器,外容器使用“progress”样式,子容器使用“progress-bar”样式。例如:

基本样式

要实现进度条效果要使用两个容器,外容器使用“progress”样式,子容器使用“progress-bar”样式。例如:

<div class="progress">
  <div class="progress-bar" style="width:40%"></div>
</div>

progress样式主要设置进度条容器的背景色,容器高度、间距等,progress-bar样式设置进度,主要是设置了进度条的背景颜色和过渡效果。实现源码如下:

.progress {
 height: 20px;
 margin-bottom: 20px;
 overflow: hidden;
 background-color: #f5f5f5;
 border-radius: 4px;
 -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, .1);
     box-shadow: inset 0 1px 2px rgba(0, 0, 0, .1);
}
.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(0, 0, 0, .15);
     box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .15);
 -webkit-transition: width .6s ease;
    -o-transition: width .6s ease;
     transition: width .6s ease;
}

彩色进度条

在基础的进度条上追加对应的类名即可:

.progress-bar-info:信息进度条,进度条颜色为蓝色
.progress-bar-success:成功进度条,进度条颜色为绿色
.progress-bar-warning:警告进度条,进度条颜色为黄色
.progress-bar-danger:错误进度条,进度条颜色为红色

实现源码如下:

.progress-bar-success {
 background-color: #5cb85c;
}
.progress-bar-info {
 background-color: #5bc0de;
}
.progress-bar-warning {
 background-color: #f0ad4e;
}
.progress-bar-danger {
 background-color: #d9534f;
}

条纹进度条

要实现条纹进度条效果只需要在进度条的容器“progress”基础上增加类名“progress-striped”即可。
实现源码如下:

.progress-striped .progress-bar,
.progress-bar-striped {
 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:   -o-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);
 -webkit-background-size: 40px 40px;
     background-size: 40px 40px;
}
.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, 255, 255, .15) 75%, transparent 75%, transparent);
 background-image:   -o-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);
}
.progress-striped .progress-bar-info {
 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:   -o-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);
}
.progress-striped .progress-bar-warning {
 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:   -o-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);
}
.progress-striped .progress-bar-danger {
 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:   -o-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);
}

动态条纹进度条

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

<div class="progress progress-striped active">
  <div class="progress-bar progress-bar-success" style="width:40%"></div>
</div>

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

@-webkit-keyframes progress-bar-stripes {
 from {
  background-position: 40px 0;
 }
 to {
  background-position: 0 0;
 }
}
@-o-keyframes progress-bar-stripes {
 from {
  background-position: 40px 0;
 }
 to {
  background-position: 0 0;
 }
}
@keyframes progress-bar-stripes {
 from {
  background-position: 40px 0;
 }
 to {
  background-position: 0 0;
 }
}

调用动画的实现源码如下:

.progress.active .progress-bar,
.progress-bar.active {
 -webkit-animation: progress-bar-stripes 2s linear infinite;
    -o-animation: progress-bar-stripes 2s linear infinite;
     animation: progress-bar-stripes 2s linear infinite;
}

层叠进度条

层叠进度条可以将不同状态的进度条放置在一起,按水平方式排列。例如:

<div class="progress">
  <div class="progress-bar progress-bar-success" style="width:20%"></div>
  <div class="progress-bar progress-bar-info" style="width:10%"></div>
  <div class="progress-bar progress-bar-warning" style="width:30%"></div>
  <div class="progress-bar progress-bar-danger" style="width:15%"></div>
</div>

我们可以发现,层叠进度条并没有额外的样式代码,之所以这样就能生效是因为在“progress-bar”上有一个左浮动的样式。要注意,层叠进度条宽度之和不能大于100%。

带label的进度条

要实现带label的进度条,只需要在进度条中添加你需要的值即可。例如:

<div class="progress">
  <div class="progress-bar progress-bar-success" style="width:20%">20%</div>
</div>

要是那进度条的值为0%时,可以这么写:

<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">0%</div>
</div>

以上所述是小编给大家介绍的 bootstrap源码学习笔记之bootstrap进度条,希望对大家有所帮助