其实进度条需要注意的几点:
1、横竖 style="width: 40%" or style="height: 40%"
2、样式:progress-bar-success
3、宽度:progress-sm
4、动态效果:active
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
|
<
div
class
=
"box box-solid"
>
<
div
class
=
"box-header with-border"
>
<
h3
class
=
"box-title"
>Progress Bars Different Sizes</
h3
>
</
div
>
<!-- /.box-header -->
<
div
class
=
"box-body text-center"
>
<
p
><
code
>.progress</
code
></
p
>
<
div
class
=
"progress"
>
<
div
class
=
"progress-bar progress-bar-primary progress-bar-striped"
role
=
"progressbar"
aria-valuenow
=
"40"
aria-valuemin
=
"0"
aria-valuemax
=
"100"
style
=
"width: 40%"
>
<
span
class
=
"sr-only"
>40% Complete (success)</
span
>
</
div
>
</
div
>
<
p
>Class: <
code
>.sm</
code
></
p
>
<
div
class
=
"progress progress-sm active"
>
<
div
class
=
"progress-bar progress-bar-success progress-bar-striped"
role
=
"progressbar"
aria-valuenow
=
"20"
aria-valuemin
=
"0"
aria-valuemax
=
"100"
style
=
"width: 20%"
>
<
span
class
=
"sr-only"
>20% Complete</
span
>
</
div
>
</
div
>
<
p
>Class: <
code
>.xs</
code
></
p
>
<
div
class
=
"progress progress-xs"
>
<
div
class
=
"progress-bar progress-bar-warning progress-bar-striped"
role
=
"progressbar"
aria-valuenow
=
"60"
aria-valuemin
=
"0"
aria-valuemax
=
"100"
style
=
"width: 60%"
>
<
span
class
=
"sr-only"
>60% Complete (warning)</
span
>
</
div
>
</
div
>
<
p
>Class: <
code
>.xxs</
code
></
p
>
<
div
class
=
"progress vertical progress-xxs"
>
<
div
class
=
"progress-bar progress-bar-danger progress-bar-striped"
role
=
"progressbar"
aria-valuenow
=
"60"
aria-valuemin
=
"0"
aria-valuemax
=
"100"
style
=
"width: 60%"
>
<
span
class
=
"sr-only"
>60% Complete (warning)</
span
>
</
div
>
</
div
>
<
div
class
=
"progress vertical active"
>
<
div
class
=
"progress-bar progress-bar-primary progress-bar-striped"
role
=
"progressbar"
aria-valuenow
=
"40"
aria-valuemin
=
"0"
aria-valuemax
=
"100"
style
=
"height: 40%"
>
<
span
class
=
"sr-only"
>40%</
span
>
</
div
>
</
div
>
<
div
class
=
"progress vertical progress-sm"
>
<
div
class
=
"progress-bar progress-bar-success"
role
=
"progressbar"
aria-valuenow
=
"20"
aria-valuemin
=
"0"
aria-valuemax
=
"100"
style
=
"height: 100%"
>
<
span
class
=
"sr-only"
>100%</
span
>
</
div
>
</
div
>
<
div
class
=
"progress vertical progress-xs"
>
<
div
class
=
"progress-bar progress-bar-warning progress-bar-striped"
role
=
"progressbar"
aria-valuenow
=
"60"
aria-valuemin
=
"0"
aria-valuemax
=
"100"
style
=
"height: 60%"
>
<
span
class
=
"sr-only"
>60%</
span
>
</
div
>
</
div
>
<
div
class
=
"progress vertical progress-xxs"
>
<
div
class
=
"progress-bar progress-bar-info progress-bar-striped"
role
=
"progressbar"
aria-valuenow
=
"60"
aria-valuemin
=
"0"
aria-valuemax
=
"100"
style
=
"height: 60%"
>
<
span
class
=
"sr-only"
>60%</
span
>
</
div
>
</
div
>
</
div
>
<!-- /.box-body -->
</
div
>
|
版权声明:原创作品,如需转载,请注明出处。否则将追究法律责任