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

发表于

前言

这一章主要学习carousel（轮播），bootstrap的又一个大模块组件。

研究对象

carousel.scss（轮播图）、_vendor-prefixes.scss（animated动画mixin）、_opacity.scss（透明度mixin）、_gradients.scss（线性渐变mixin）、_image.scss(响应式图片mixin)

示例图与使用方法

图例：

  • 使用方法：

_vendor-prefixes.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
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
// Vendor Prefixes
//
// Vendor-Prefixes于v3.2.0版本过时，将在4.0版本中删除以下
// - Animations 动画
// - Backface visibility 背景能见度
// - Box shadow 盒子阴影
// - Box sizing 盒子尺寸
// - Content columns columns内容布局
// - Hyphens
// - Placeholder text 提示文本
// - Transformations 变换
// - Transitions 转换
// - User Select 用户选择
// Animation css3属性，定义div与动画绑定
// 语法→ animation: name duration timing-function delay iteration-count direction;
@mixin animation($animation) {
  -webkit-animation: $animation;
       -o-animation: $animation;
          animation: $animation;
}
// 规定需要绑定到选择器的 keyframe 名称
@mixin animation-name($name) {
  -webkit-animation-name: $name;
          animation-name: $name;
}
// 规定完成动画所花费的时间，以秒或毫秒计。
// 值为0时，不会播放动画
@mixin animation-duration($duration) {
  -webkit-animation-duration: $duration;
          animation-duration: $duration;
}
// 规定动画的速度曲线。
//linear：动画从头到尾的速度是相同的。
// ease：默认。动画以低速开始，然后加快，在结束前变慢。
// ease-in：	动画以低速开始。
// ease-out：动画以低速结束。
// ease-in-out：	动画以低速开始和结束。
// cubic-bezier(n,n,n,n)：在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。
@mixin animation-timing-function($timing-function) {
  -webkit-animation-timing-function: $timing-function;
          animation-timing-function: $timing-function;
}
// 	规定在动画开始之前的延迟。 可为负数。
//  可自己规定次数
//  infinite:无限次
@mixin animation-delay($delay) {
  -webkit-animation-delay: $delay;
          animation-delay: $delay;
}
// 规定动画应该播放的次数。
@mixin animation-iteration-count($iteration-count) {
  -webkit-animation-iteration-count: $iteration-count;
          animation-iteration-count: $iteration-count;
}
// 规定是否应该轮流反向播放动画。这个属性好6666,以上属性组合搭配css很炫
// http://www.w3school.com.cn/cssref/pr_animation-direction.asp
// normal:正常播放
// alternate: 轮流反向播放
@mixin animation-direction($direction) {
  -webkit-animation-direction: $direction;
          animation-direction: $direction;
}
// 规定动画在播放之前或之后，其动画效果是否可见。
// none 不改变默认行为；
//forwards：当动画完成后，保持最后一个属性值（在最后一个关键帧中定义）。
//backwards：在 animation-delay 所指定的一段时间内，在动画显示之前，应用开始属性值（在第一个关键帧中定义）。
// both：向前和向后填充模式都被应用。
@mixin animation-fill-mode($fill-mode) {
  -webkit-animation-fill-mode: $fill-mode;
          animation-fill-mode: $fill-mode;
}
// Backface-visibility属性定义当元素不面向屏幕时是否可见
// visible:元素可见
// hidden：元素不可见
// 预防三维transforms CSS样式，比如transform:rotateY(180deg)元素以三维的模式旋转180读时，backface-visibility值为hidden则这个元素被隐藏
@mixin backface-visibility($visibility){
  -webkit-backface-visibility: $visibility;
     -moz-backface-visibility: $visibility;
          backface-visibility: $visibility;
}
// 下拉阴影
//
// 截止至3.1.0版本，不需要再用box-shadow()方法，各浏览器已支持box-shadow属性了。
@mixin box-shadow($shadow...) {
  -webkit-box-shadow: $shadow; // iOS <4.3 & Android <4.1
          box-shadow: $shadow;
}
// box-sizing相当于规定了box的计算方式。
// border-box:元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。通俗的说你设置的width和height包含了你的padding和border。
// content-box:CSS2.1 规定，也是我们默认的box计算方式。
// inherit: 继承父元素属性值
// bootstrap里的所有box，几乎都被border-box了，这样会影响计算机计算速度。
@mixin box-sizing($boxmodel) {
  -webkit-box-sizing: $boxmodel;
     -moz-box-sizing: $boxmodel;
          box-sizing: $boxmodel;
}
// CSS3  Columns，简写属性，用于设置列宽和列数，兼容到IE10，9以及9之前是不支持的
// columns: column-width column-count;
// Column-count:把 div 元素中的文本划分为三列。
// Column-gap:将 div 元素中的文本分为三列，并列间 30 像素的间隔。
// Column-rule:规定列之间的宽度、样式和颜色。
@mixin content-columns($column-count, $column-gap: $grid-gutter-width) {
  -webkit-column-count: $column-count;
     -moz-column-count: $column-count;
          column-count: $column-count;
  -webkit-column-gap: $column-gap; // 30px 默认值
     -moz-column-gap: $column-gap;
          column-gap: $column-gap;
}
// 可选的连字符
// 设置浏览器如何断字时换行 【注①】
@mixin hyphens($mode: auto) {
  word-wrap: break-word;
  -webkit-hyphens: $mode;
     -moz-hyphens: $mode;
      -ms-hyphens: $mode; // IE10+
       -o-hyphens: $mode;
          hyphens: $mode;
}
// Placeholder(占位符)
@mixin placeholder($color: $input-color-placeholder) {
  // Firefox
  &::-moz-placeholder {
    color: $color;
    opacity: 1; // bootstrap手滑了~/坏笑 注： https://github.com/twbs/bootstrap/pull/11526
  }
  &:-ms-input-placeholder { color: $color; } // Internet Explorer 10+
  &::-webkit-input-placeholder  { color: $color; } // Safari and Chrome
}
// transform 值比较多【注②】
@mixin scale($ratio...) {
  -webkit-transform: scale($ratio);
      -ms-transform: scale($ratio); // IE9 only
       -o-transform: scale($ratio);
          transform: scale($ratio);
}
@mixin scaleX($ratio) {
  -webkit-transform: scaleX($ratio);
      -ms-transform: scaleX($ratio); // IE9 only
       -o-transform: scaleX($ratio);
          transform: scaleX($ratio);
}
@mixin scaleY($ratio) {
  -webkit-transform: scaleY($ratio);
      -ms-transform: scaleY($ratio); // IE9 only
       -o-transform: scaleY($ratio);
          transform: scaleY($ratio);
}
@mixin skew($x, $y) {
  -webkit-transform: skewX($x) skewY($y);
      -ms-transform: skewX($x) skewY($y); // See https://github.com/twbs/bootstrap/issues/4885; IE9+
       -o-transform: skewX($x) skewY($y);
          transform: skewX($x) skewY($y);
}
@mixin translate($x, $y) {
  -webkit-transform: translate($x, $y);
      -ms-transform: translate($x, $y); // IE9 only
       -o-transform: translate($x, $y);
          transform: translate($x, $y);
}
@mixin translate3d($x, $y, $z) {
  -webkit-transform: translate3d($x, $y, $z);
          transform: translate3d($x, $y, $z);
}
@mixin rotate($degrees) {
  -webkit-transform: rotate($degrees);
      -ms-transform: rotate($degrees); // IE9 only
       -o-transform: rotate($degrees);
          transform: rotate($degrees);
}
@mixin rotateX($degrees) {
  -webkit-transform: rotateX($degrees);
      -ms-transform: rotateX($degrees); // IE9 only
       -o-transform: rotateX($degrees);
          transform: rotateX($degrees);
}
@mixin rotateY($degrees) {
  -webkit-transform: rotateY($degrees);
      -ms-transform: rotateY($degrees); // IE9 only
       -o-transform: rotateY($degrees);
          transform: rotateY($degrees);
}
@mixin perspective($perspective) {
  -webkit-perspective: $perspective;
     -moz-perspective: $perspective;
          perspective: $perspective;
}
@mixin perspective-origin($perspective) {
  -webkit-perspective-origin: $perspective;
     -moz-perspective-origin: $perspective;
          perspective-origin: $perspective;
}
@mixin transform-origin($origin) {
  -webkit-transform-origin: $origin;
     -moz-transform-origin: $origin;
      -ms-transform-origin: $origin; // IE9 only
          transform-origin: $origin;
}
// Transitions 【注③】
@mixin transition($transition...) {
  -webkit-transition: $transition;
       -o-transition: $transition;
          transition: $transition;
}
@mixin transition-property($transition-property...) {
  -webkit-transition-property: $transition-property;
          transition-property: $transition-property;
}
@mixin transition-delay($transition-delay) {
  -webkit-transition-delay: $transition-delay;
          transition-delay: $transition-delay;
}
@mixin transition-duration($transition-duration...) {
  -webkit-transition-duration: $transition-duration;
          transition-duration: $transition-duration;
}
@mixin transition-timing-function($timing-function) {
  -webkit-transition-timing-function: $timing-function;
          transition-timing-function: $timing-function;
}
@mixin transition-transform($transition...) {
  -webkit-transition: -webkit-transform $transition;
     -moz-transition: -moz-transform $transition;
       -o-transition: -o-transform $transition;
          transition: transform $transition;
}
// User select
// 用户选中文本样式，比如你要复制一段文本，在赋值之前要选择这段文本，此属性用于设置选中的文本显示的样式。
@mixin user-select($select) {
  -webkit-user-select: $select;
     -moz-user-select: $select;
      -ms-user-select: $select; // IE10+
          user-select: $select;
}

_opacity.scss

源文：

1
2
3
4
5
6
7
8
// Opacity opacity透明度，兼容到IE8，拿来即用~
@mixin opacity($opacity) {
  opacity: $opacity;
  // IE8 filter
  $opacity-ie: ($opacity * 100);
  filter: #{alpha(opacity=$opacity-ie)};
}

_gradients.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
// Gradients(线性渐变方法集合)
// 水平状渐变。
// 这里应注意不同浏览器下的兼容写法。
// 创建两个颜色值分别代表开始颜色和结束颜色，不支持IE9以下(不含IE9)；
@mixin gradient-horizontal($start-color: #555, $end-color: #333, $start-percent: 0%, $end-percent: 100%) {
  background-image: -webkit-linear-gradient(left, $start-color $start-percent, $end-color $end-percent); // Safari 5.1-6, Chrome 10+
  background-image: -o-linear-gradient(left, $start-color $start-percent, $end-color $end-percent); // Opera 12
  background-image: linear-gradient(to right, $start-color $start-percent, $end-color $end-percent); // Standard, IE10, Firefox 16+, Opera 12.10+, Safari 7+, Chrome 26+
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{ie-hex-str($start-color)}', endColorstr='#{ie-hex-str($end-color)}', GradientType=1); // IE9 and down
}
// 垂直状渐变。
// 创建两个颜色值分别代表开始颜色和结束颜色，不支持IE9以下(不含IE9)
@mixin gradient-vertical($start-color: #555, $end-color: #333, $start-percent: 0%, $end-percent: 100%) {
  background-image: -webkit-linear-gradient(top, $start-color $start-percent, $end-color $end-percent);  // Safari 5.1-6, Chrome 10+
  background-image: -o-linear-gradient(top, $start-color $start-percent, $end-color $end-percent);  // Opera 12
  background-image: linear-gradient(to bottom, $start-color $start-percent, $end-color $end-percent); // Standard, IE10, Firefox 16+, Opera 12.10+, Safari 7+, Chrome 26+
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{ie-hex-str($start-color)}', endColorstr='#{ie-hex-str($end-color)}', GradientType=0); // IE9 and down
}
// 自定义角度 ，默认45°；单位是deg。【注⑤】
@mixin gradient-directional($start-color: #555, $end-color: #333, $deg: 45deg) {
  background-repeat: repeat-x;
  background-image: -webkit-linear-gradient($deg, $start-color, $end-color); // Safari 5.1-6, Chrome 10+
  background-image: -o-linear-gradient($deg, $start-color, $end-color); // Opera 12
  background-image: linear-gradient($deg, $start-color, $end-color); // Standard, IE10, Firefox 16+, Opera 12.10+, Safari 7+, Chrome 26+
}
// 三种颜色的水平渐变
@mixin gradient-horizontal-three-colors($start-color: #00b3ee, $mid-color: #7a43b6, $color-stop: 50%, $end-color: #c3325f) {
  background-image: -webkit-linear-gradient(left, $start-color, $mid-color $color-stop, $end-color);
  background-image: -o-linear-gradient(left, $start-color, $mid-color $color-stop, $end-color);
  background-image: linear-gradient(to right, $start-color, $mid-color $color-stop, $end-color);
  background-repeat: no-repeat;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{ie-hex-str($start-color)}', endColorstr='#{ie-hex-str($end-color)}', GradientType=1); // IE9 and down, gets no color-stop at all for proper fallback
}
// 三种颜色的垂直渐变
@mixin gradient-vertical-three-colors($start-color: #00b3ee, $mid-color: #7a43b6, $color-stop: 50%, $end-color: #c3325f) {
  background-image: -webkit-linear-gradient($start-color, $mid-color $color-stop, $end-color);
  background-image: -o-linear-gradient($start-color, $mid-color $color-stop, $end-color);
  background-image: linear-gradient($start-color, $mid-color $color-stop, $end-color);
  background-repeat: no-repeat;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{ie-hex-str($start-color)}', endColorstr='#{ie-hex-str($end-color)}', GradientType=0); // IE9 and down, gets no color-stop at all for proper fallback
}
// 径向渐变
@mixin gradient-radial($inner-color: #555, $outer-color: #333) {
  background-image: -webkit-radial-gradient(circle, $inner-color, $outer-color);
  background-image: radial-gradient(circle, $inner-color, $outer-color);
  background-repeat: no-repeat;
}
// 条纹渐变
@mixin gradient-striped($color: rgba(255,255,255,.15), $angle: 45deg) {
  background-image: -webkit-linear-gradient($angle, $color 25%, transparent 25%, transparent 50%, $color 50%, $color 75%, transparent 75%, transparent);
  background-image: -o-linear-gradient($angle, $color 25%, transparent 25%, transparent 50%, $color 50%, $color 75%, transparent 75%, transparent);
  background-image: linear-gradient($angle, $color 25%, transparent 25%, transparent 50%, $color 50%, $color 75%, transparent 75%, transparent);
}

_image.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
// Image Mixins
// - 响应式图片
// - 视觉效果
// 响应式 image
//
// 根据父元素的宽高自动缩放图片
@mixin img-responsive($display: block) {
  display: $display;
  max-width: 100%; // Part 1: 设置一个相对于父元素的宽度
  height: auto; // Part 2: 根据宽度缩放高度，否则拉伸图片
}
// Retina image 注⑥
// 这里暂时放着，有待研究。
// Short retina mixin for setting background-image and -size. Note that the
// spelling of `min--moz-device-pixel-ratio` is intentional.
@mixin img-retina($file-1x, $file-2x, $width-1x, $height-1x) {
  background-image: url(if($bootstrap-sass-asset-helper, twbs-image-path("#{$file-1x}"), "#{$file-1x}"));
  @media
  only screen and (-webkit-min-device-pixel-ratio: 2),
  only screen and (   min--moz-device-pixel-ratio: 2),
  only screen and (     -o-min-device-pixel-ratio: 2/1),
  only screen and (        min-device-pixel-ratio: 2),
  only screen and (                min-resolution: 192dpi),
  only screen and (                min-resolution: 2dppx) {
    background-image: url(if($bootstrap-sass-asset-helper, twbs-image-path("#{$file-2x}"), "#{$file-2x}"));
    background-size: $width-1x $height-1x;
  }
}

源文：

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
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
   //
// 轮播组件、不支持嵌套的轮播。
// --------------------------------------------------
// 轮播图容器和指示器的封装
.carousel {
  position: relative;
}
// 轮播图容器
.carousel-inner {
  position: relative;
  overflow: hidden;
  width: 100%;
  > .item {
    display: none;
    position: relative;
    @include transition(.6s ease-in-out left);
    // Account for jankitude on images
    > img,
    > a > img {
      @include img-responsive;
      line-height: 1;
    }
    // WebKit内核下 CSS3 transforms 兼容设置。【注④】
    @media all and (transform-3d), (-webkit-transform-3d) {
      transition: transform .6s ease-in-out;
      backface-visibility: hidden;
      perspective: 1000; // 设置元素被查看位置的视图：目前没有浏览器支持，Chrome 和 Safari 支持替代的 -webkit-perspective 属性。W3C要求与 perspective-origin 配合享用。
      &.next,
      &.active.right {
        transform: translate3d(100%, 0, 0);
        left: 0;
      }
      &.prev,
      &.active.left {
        transform: translate3d(-100%, 0, 0);
        left: 0;
      }
      &.next.left,
      &.prev.right,
      &.active {
        transform: translate3d(0, 0, 0);
        left: 0;
      }
    }
  }
  // 这里不是特别的肯定，规定了轮播图容器内左右两边的部分元素样式(没咋看明白其实)。
  > .active,
  > .next,
  > .prev {
    display: block;
  }
  > .active {
    left: 0;
  }
  > .next,
  > .prev {
    position: absolute;
    top: 0;
    width: 100%;
  }
  > .next {
    left: 100%;
  }
  > .prev {
    left: -100%;
  }
  > .next.left,
  > .prev.right {
    left: 0;
  }
  > .active.left {
    left: -100%;
  }
  > .active.right {
    left: 100%;
  }
}
// 轮播图左/右nav控制器
// ---------------------------
.carousel-control {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: $carousel-control-width;
  @include opacity($carousel-control-opacity);
  font-size: $carousel-control-font-size;
  color: $carousel-control-color;
  text-align: center;
  text-shadow: $carousel-text-shadow;
  // 如果元素有animate动作，webkit不能完美的实现transition，
  // 设置背景梯度(过渡效果)
  &.left {
    @include gradient-horizontal($start-color: rgba(0,0,0,.5), $end-color: rgba(0,0,0,.0001));
  }
  &.right {
    left: auto;
    right: 0;
    @include gradient-horizontal($start-color: rgba(0,0,0,.0001), $end-color: rgba(0,0,0,.5));
  }
  // Hover/focus 样式
  &:hover,
  &:focus {
    outline: 0;
    color: $carousel-control-color; // #fff
    text-decoration: none;
    @include opacity(.9);
  }
  // Toggles  左右两端的按钮图标。
  .icon-prev,
  .icon-next,
  .glyphicon-chevron-left,
  .glyphicon-chevron-right {
    position: absolute;
    top: 50%;
    z-index: 5;
    display: inline-block;
  }
  .icon-prev,
  .glyphicon-chevron-left {
    left: 50%;
    margin-left: -10px;
  }
  .icon-next,
  .glyphicon-chevron-right {
    right: 50%;
    margin-right: -10px;
  }
  .icon-prev,
  .icon-next {
    width:  20px;
    height: 20px;
    margin-top: -10px;
    font-family: serif;
  }
  .icon-prev {
    &:before {
      content: '\2039';// SINGLE LEFT-POINTING ANGLE QUOTATION MARK (U+2039)
    }
  }
  .icon-next {
    &:before {
      content: '\203a';// SINGLE RIGHT-POINTING ANGLE QUOTATION MARK (U+203A)
    }
  }
}
// 圆点图标样式
//
// bootstrap设置了一个无序列表用于装载这个圆圈，在JS里点点击该圆圈会滑动到指定index轮播图上。
.carousel-indicators {
  position: absolute;
  bottom: 10px;
  left: 50%;
  z-index: 15;
  width: 60%;
  margin-left: -30%;
  padding-left: 0;
  list-style: none;
  text-align: center;
  li {
    display: inline-block;
    width:  10px;
    height: 10px;
    margin: 1px;
    text-indent: -999px;
    border: 1px solid $carousel-indicator-border-color;
    border-radius: 10px;
    cursor: pointer;
    // 触发事件行为下IE8-9的hack
    // IE8-9不支持透明度，同时也不能使用filter，因为filter对应的透明色是浏览器背景色，而轮播图的圆圈透明背景应该对应的是轮播图色。
    //
    // IE8下直接设置纯黑色用于不支持的rgba()。
    // IE9下的最佳结果可能是alpha透明度
    background-color: #000 \9; // IE8
    background-color: rgba(0,0,0,0); // IE9
  }
  .active {
    margin: 0;
    width:  12px;
    height: 12px;
    background-color: $carousel-indicator-active-bg; // #fff 默认
  }
}
// 轮播图字幕
// -----------------------------
//浏览器可视区较小时该字幕会隐藏。
.carousel-caption {
  position: absolute;
  left: 15%; // 防止字幕在左右两端(前/后页按钮)被阴影遮住。
  right: 15%;
  bottom: 20px;
  z-index: 10;
  padding-top: 20px;
  padding-bottom: 20px;
  color: $carousel-caption-color; // 默认白色
  text-align: center;
  text-shadow: $carousel-text-shadow; // 默认透明度为0.6的黑色rgb值是(0,0,0,0.6)
  & .btn {
    text-shadow: none; // 取消了带按钮的字幕里的阴影。bootstrap默认的btn是有阴影的。
  }
}
// 轮播图自适应布局样式（大屏尺寸）
@media screen and (min-width: $screen-sm-min) {
  // 轮播图左右两端向前/后翻页 图标自适应
  .carousel-control {
    .glyphicon-chevron-left,
    .glyphicon-chevron-right,
    .icon-prev,
    .icon-next {
      width: 30px;
      height: 30px;
      margin-top: -15px;
      font-size: 30px;
    }
    .glyphicon-chevron-left,
    .icon-prev {
      margin-left: -15px;
    }
    .glyphicon-chevron-right,
    .icon-next {
      margin-right: -15px;
    }
  }
  // 轮播图字幕自适应
  .carousel-caption {
    left: 20%;
    right: 20%;
    padding-bottom: 30px;
  }
  // 提升圆圈图标底部距离
  .carousel-indicators {
    bottom: 20px;
  }
}

相关说明

  • 注①：MDN - hyphens
  • 注②：W3C - transform
  • 注③：W3C - transition
  • 注④：MDN - @media
  • 注⑤：gradient属性计算规则：熟悉photoShop的人应该知道在设置画布渐变的时候，线性渐变的角度是以圆心为轴心向周围成剃度扩散的。如果不熟悉photoshop，可以看看MDN - linear-gradient的解释，如果不能理解，直接打开photo，创建画布后，添加一个渐变，在设置角度时，很快就能get了。bootstrap中gradient的minxins已经能解决大部分常见渐变背景了。
  • 注⑥：device-pixel-ratio 设备像素比；待研究。