深度了解bootstrap源码之sass篇（十六）

发表于

前言

这篇文章主要研究_progress-bars.scss(进度条)。该文章解析了bs框架是如何实现一个带有滚动效果的条纹状进度条，描述其实现过程，并总结实现步骤。

研究对象

_progress-bars.scss；该组件在3.2.0版本后增入了几个比较酷炫的css3属性，keyframe，animation，linear-gradient。

_progress-bars.scss

源文：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
  //
// 进度条
// --------------------------------------------------
// 进度条动画
// -------------------------
// WebKit
@-webkit-keyframes progress-bar-stripes {
  from  { background-position: 40px 0; }
  to    { background-position: 0 0; }
}
// 兼容 IE10+
@keyframes progress-bar-stripes {
  from  { background-position: 40px 0; }
  to    { background-position: 0 0; }
}
// 进度条的“条”
// -------------------------
// 进度条容器
.progress {
  overflow: hidden;
  height: $line-height-computed; // ~20px
  margin-bottom: $line-height-computed;
  background-color: $progress-bg; // 进度条背景色，默认F5F5F5，浅灰
  border-radius: $progress-border-radius; // 4px default
  @include box-shadow(inset 0 1px 2px rgba(0,0,0,.1)); // 淡淡的阴影
}
// 进度条
.progress-bar {
  float: left;
  width: 0%; // 进度条初始进度
  height: 100%;
  font-size: $font-size-small;
  line-height: $line-height-computed;
  color: $progress-bar-color; // #fff default
  text-align: center; // 这个居中是当前元素宽度的中间。
  background-color: $progress-bar-bg;
  @include box-shadow(inset 0 -1px 0 rgba(0,0,0,.15));
  @include transition(width .6s ease);
}
// 带条纹渐变样式的进度条
//
// 该样式是在3.2.0版本被加入的，仅该版本及以上支持；
// 条纹渐变进度条的核心样式名为`.progress-bar-striped`，依赖进度条核心样式`.progress-bar`；
//
.progress-striped .progress-bar,
.progress-bar-striped {
  @include gradient-striped; // 注① 用linear-gradient实现条纹样式解析。
  background-size: 40px 40px;
}
// 有条纹动画效果的进度条，
//
// bs框架定义样式名为active配合progress-bar使用，
// 实现方式：用keyframe改变backgroung-position的值达到动画效果。
// 实现步骤：制作一个条纹(1：定义一个背景色，2：定义一个覆盖在背景色上的渐变画布 3：在渐变画布上设置一个带透明度的颜色区域，4：定义渐变画布的尺寸)，然后移动背景色的位置。很实用的技巧，get！
.progress.active .progress-bar,
.progress-bar.active {
  @include animation(progress-bar-stripes 2s linear infinite);
}
// 场景定制化
// -------------------------
.progress-bar-success {
  @include progress-bar-variant($progress-bar-success-bg);
}
.progress-bar-info {
  @include progress-bar-variant($progress-bar-info-bg);
}
.progress-bar-warning {
  @include progress-bar-variant($progress-bar-warning-bg);
}
.progress-bar-danger {
  @include progress-bar-variant($progress-bar-danger-bg);
}

相关说明

  • 注①：linear-gradient 线性渐变
    • 关于这个属性的用法百度已经很多解释的很全面的了，稍有ps经验的人应该很容易理解，在制作渐变背景的素材时如何过渡颜色。
    • 在进度条组件中，下图展现了bs中进度条的实现过程。
    • 由此我们可以总结出条纹制作的步骤：
      1. 定义一个背景色(background-color)；
      2. 定义一个覆盖在背景色上的渐变画布(background-image)；
      3. 在渐变画布上设置一个带透明度的颜色区域(linear-gradient)；
      4. 定义渐变画布的尺寸(background-size)；
    • 让条纹动起来的实现步骤：
      1. 制作出一个条纹
      2. 设置一个keyframe，移动背景色(background-position)
      3. 设置一个animation，设置动画名称，执行速度，执行次数。