@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"><!--设置字符集utf-8编码-->
<meta name="viewport" content="width=device-width, initial-scale=1"><!--初始化移动浏览显示-->
<title>ChapterSevenProgress--第七章进度条</title>
<link href="~/Content/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="container">
<!--进度条-->
<!--在网页中，进度条的效果并不少见，比如一个评分系统，比如加载状态等。
进度条和其他独立组件一样，开发者可以根据自己的需要-->
<!--进度条--基本样式-->
<!--Bootstrap框架中对于进度条提供了一个基本样式，一个100%宽度的背景色，然后一个高亮的色表示完成进度。
其实制作这样的进度条非常容易，一般是使用两个容器，外容器具有一定的宽度，并且设置一个背景颜色，
他的子元素设置一个宽度，比如完成度是30%（也就是父容器的宽度比例值），
同时给其设置一个高亮的背景色-->
<!--使用方法：
Bootstrap框架中也是按这样的方式实现的，他提供了两个容器，外容器使用“progress”样式，
子容器使用“progress-bar”样式。其中progress用来设置进度条的容器样式，
而progress-bar用于限制进度条的进度-->
<!--结构优化：
虽然这样实现了基本进度条效果，但对于残障人员浏览网页有点困难，所以我们可以将结构做得更好些
（语义化更友好些）-->
@*role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100"*@
<div class="h4 text-center">--------------------------------------------进度条--基本样式-------------------------------------</div>
<div class="progress"><div class="progress-bar" style="width:40%;"></div></div>
<div class="progress">
<div class="progress-bar" style="width:30%;" role="progressbar" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100"></div>
<!--1、role属性作用：告诉搜索引擎这个div的作用是进度条。
2、aria-valuenow="40"属性作用：当前进度条的进度为40%。
3、aria-valuemin="0"属性作用：进度条的最小值为0%。
4、aria-valuemax="100"属性作用：进度条的最大值为100%。-->
</div>
<div class="h4 text-center">--------------------------------------------进度条--彩色进度条-------------------------------------</div>
<!--进度条--彩色进度条-->
<!--Bootstrap框架中的进度条和警告信息框一样，为了能给用户一个更好的体验，也根据不同的状态配置了不同
的进度条颜色。在此称为彩色进度条，其主要包括以下四种：
☑ progress-bar-info：表示信息进度条，进度条颜色为蓝色
☑ progress-bar-success：表示成功进度条，进度条颜色为绿色
☑ progress-bar-warning：表示警告进度条，进度条颜色为黄色
☑ progress-bar-danger：表示错误进度条，进度条颜色为红色
使用方法：
具体使用就非常简单了，只需要在基础的进度上增加对应的类名。-->
<div class="h4">进度条--彩色进度条</div>
<div class="progress"><div class="progress-bar progress-bar-success" style="width:20%;"></div></div>
<div class="progress"><div class="progress-bar progress-bar-info" style="width:40%;"></div></div>
<div class="progress"><div class="progress-bar progress-bar-warning" style="width:60%;"></div></div>
<div class="progress"><div class="progress-bar progress-bar-danger" style="width:80%;"></div></div>
<div class="h4 text-center">--------------------------------------------进度条--条纹进度条-------------------------------------</div>
<!--进度条--条纹进度条-->
<!--在Bootstrap框架中除了提供了彩色进度条之外，还提供了一种条纹进度条，这种条纹进度条采用CSS3的
线性渐变来实现，并未借助任何图片。使用Bootstrap框架中的条纹进度条只需要在进度条的容器“progress”
基础上增加类名“progress-striped”，当然，如果你要让你的进度条条纹像彩色进度一样，具有彩色效果，
你只需要在进度条上增加相应的颜色类名，如前面的彩色进度条所讲-->
<div class="h4">进度条--条纹进度条</div>
<div class="progress progress-striped"><div class="progress-bar progress-bar-success" style="width:20%;"></div></div>
<div class="progress progress-striped"><div class="progress-bar progress-bar-info" style="width:40%;"></div></div>
<div class="progress progress-striped"><div class="progress-bar progress-bar-warning" style="width:60%;"></div></div>
<div class="progress progress-striped"><div class="progress-bar progress-bar-danger" style="width:80%;"></div></div>
<div class="h4 text-center">--------------------------------------------进度条--动态条纹进度条-------------------------------------</div>
<!--进度条--动态条纹进度条-->
<!--使用方法：
在进度条“progress progress-striped”两个类的基础上再加入“active”类名-->
<!--实现原理：
为了让条纹进度条动起来，Bootstrap框架还提供了一种动态条纹进度条。其实现原理主要通过CSS3的
animation来完成。首先通过@keyframes创建了一个progress-bar-stripes的动画，
这个动画主要做了一件事, 就是改变背景图像的位置，也就是background-position的值。
因为条纹进度条是通过CSS3的线性渐变来制作的，而linear-gradient实现的正是对应背景中的背景图片-->
@*@keyframes仅仅是创建了一个动画效果，如果要让进度条真正的动起来，我们需要通过一定的方式调用
@keyframes创建的动画“progress-bar-stripes”，并且通过一个事件触发动画生效。
在Bootstrap框架中，通过给进度条容器“progress”添加一个类名“active”，
并让文档加载完成就触“progress-bar-stripes”动画生效*@
<!--特别注意：要让条纹进度条动起来，就需要让“progress-striped”和“active”同时运用，
然条纹进度条是不具备动效效果。-->
<div class="h4">进度条--动态条纹进度条</div>
<div class="progress progress-striped active"><div class="progress-bar progress-bar-success" style="width:20%;"></div></div>
<div class="progress progress-striped active"><div class="progress-bar progress-bar-info" style="width:40%;"></div></div>
<div class="progress progress-striped active"><div class="progress-bar progress-bar-warning" style="width:60%;"></div></div>
<div class="progress progress-striped active"><div class="progress-bar progress-bar-danger" style="width:80%;"></div></div>
<div class="h4 text-center">--------------------------------------------进度条--层叠进度条-------------------------------------</div>
<!--进度条--层叠进度条-->
<!--Bootstrap框架除了提供上述几种进度条之外，还提供了一种层叠进度条，层叠进度条，可以将不同状态的
进度条放置在一起，按水平方式排列-->
<!--注意，层叠进度条宽度之和不能大于100%，大于100%就会造成下面的不良效果-->
<h5>正常层叠进度条</h5>
<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>
<h5>不良效果层叠进度条</h5>
<div class="progress">
<div class="progress-bar progress-bar-success" style="width:20%"></div>
<div class="progress-bar progress-bar-info" style="width:40%"></div>
<div class="progress-bar progress-bar-warning" style="width:30%"></div>
<div class="progress-bar progress-bar-danger" style="width:45%"></div>
</div>
<h5>层叠条纹进度条</h5>
<div class="progress">
<div class="progress-bar progress-bar-success" style="width:20%"></div>
<div class="progress-bar progress-bar-info" style="width:20%"></div>
<div class="progress-bar progress-bar-warning" style="width:30%"></div>
<div class="progress-bar progress-bar-danger" style="width:15%"></div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-success progress-bar-striped" style="width:20%"></div>
<div class="progress-bar progress-bar-info progress-bar-striped" style="width:20%"></div>
<div class="progress-bar progress-bar-striped progress-bar-warning" style="width:30%"></div>
<div class="progress-bar progress-bar-danger progress-bar-striped" style="width:15%"></div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-success" style="width:20%"></div>
<div class="progress-bar progress-bar-info progress-bar-striped" style="width:20%"></div>
<div class="progress-bar progress-bar-warning" style="width:30%"></div>
<div class="progress-bar progress-bar-danger progress-bar-striped" style="width:15%"></div>
</div>
<div class="h4 text-center">--------------------------------------------进度条--带Label的进度条-------------------------------------</div>
<!--进度条--带Label的进度条-->
<!--上面介绍的各种进度条，都仅仅是通过颜色进度向用户传递进度值。但实际中，有很多时候是需要
在进度条中直接用相关的数值向用户传递完成的进度值，在Bootstrap就为大家考虑了这种使用场景-->
<!--实现方法：只需要在进度条中添加你需要的值-->
<div class="h2">进度条--带Label的进度条</div>
<div class="progress"><div class="progress-bar progress-bar-success" style="width:20%;">20%</div></div>
<div class="progress"><div class="progress-bar progress-bar-info" style="width:40%;">40%</div></div>
<div class="progress"><div class="progress-bar progress-bar-warning" style="width:60%;">60%</div></div>
<div class="progress"><div class="progress-bar progress-bar-danger" style="width:80%;">80%</div></div>
<!--默认的进度条-->
<div class="progress">
<div class="progress-bar"role="progressbar"aria-valuenow="60"aria-valuemin="0"aria-valuemax="100"style="width:40%">
<span class="sr-only">40% 完成</span>
</div>
</div>
<!--交替的进度条-->
<div class="progress">
<div class="progress-bar progress-bar-success"role="progressbar"aria-valuenow="60"aria-valuemin="0"aria-valuemax="100"style="width:90%;">
<span class="sr-only">90%完成(成功)</span>
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-info"role="progressbar"aria-valuenow="60"aria-valuemin="0"aria-valuemax="100"style="width:30%">
<span class="sr-only">30% 完成(信息)</span>
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-warning"role="progressbar"aria-valuenow="60"aria-valuemin="0"aria-valuemax="100"style="width:20%;">
<span class="sr-only">20% 完成(警告)</span>
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-danger"role="progressbar"aria-valuenow="60"aria-valuemin="0"aria-valuemax="100"style="width:10%;">
<span class="sr-only">10% 完成(危险)</span>
</div>
</div>
<!--带条纹的进度条-->
<div class="progress progress-striped">
<div class="progress-bar progress-bar-success"role="progressbar"aria-valuenow="60"aria-valuemin="0"aria-valuemax="100"style="width:90%;">
<span class="sr-only">90% 完成(成功)</span>
</div>
</div>
<div class="progress progress-striped">
<div class="progress-bar progress-bar-info"role="progressbar"aria-valuenow="60"aria-valuemin="0"aria-valuemax="100"style="width:30%;">
<span class="sr-only">30% 完成(信息)</span>
</div>
</div>
<div class="progress progress-striped">
<div class="progress-bar progress-bar-info"role="progressbar"aria-valuenow="60"aria-valuemin="0"aria-valuemax="100"style="width:20%;">
<span>20% 完成(警告)</span>
</div>
</div>
<div class="progress progress-striped">
<div class="progress-bar progress-bar-danger"role="progressbar"aria-valuenow="60"aria-valuemin="0"aria-valuemax="100"style="width:10%">
<span class="sr-only">10% 完成(危险)</span>
</div>
</div>
<!--动画的进度条-->
<div class="progress progress-striped active">
<div class="progress-bar progress-bar-success"role="progressbar"aria-valuenow="60"aria-valuemin="0"aria-valuemax="100"style="width:40%">
<span class="sr-only">40% 完成</span>
</div>
</div>
<!--堆叠的进度条-->
<div class="progress">
<div class="progress-bar progress-bar-success"role="progressbar"aria-valuenow="60"aria-valuemin="0"aria-valuemax="100"style="width:40%;">
<span class="sr-only">40% 完成</span>
</div>
<div class="progress-bar progress-bar-info" role="progressbar"aria-valuenow="60"aria-valuemin="0"aria-valuemax="100"style="width:30%;">
<span class="sr-only">30% 完成(信息)</span>
</div>
<div class="progress-bar progress-bar-warning"role="progressbar"aria-valuenow="60"aria-valuemin="0"aria-valuemax="100"style="width:20%;">
<span class="sr-only">20%完成(警告)</span>
</div>
</div>
</div>
</body>
</html>
扫一扫
230
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
