Bootstrap - 进度条

Bootstrap进度条 - 从概述，环境设置，基本结构，全局样式，网格系统，流体网格系统，布局，响应式设计，排版，表格，按钮，图像，图标，下拉列表，按钮，从简单和简单的步骤学习Bootstrap组，导航元素，导航栏，面包屑，分页，标签，徽章，版式，缩略图，警报，进度栏，媒体对象，Javascript插件像过渡，模态，下拉列表，滚动，选项卡，工具提示，弹出，警报，按钮，折叠， Carousel，Typeahead，Affix，Glyphicons，Jumbotron，Demos。

本章讨论Bootstrap进度条.进度条的目的是显示资产正在加载，正在进行中，或者是否有关于页面上元素的操作.

进度条使用CSS3过渡和动画来实现一些他们的影响. Internet Explorer 9及更低版本或旧版本的Firefox不支持这些功能. Opera 12不支持动画.

默认进度条

创建基本进度条 :

添加< div>一类 .progress .
接下来，在上面的< div>中，添加一个空的< div>使用 .progress-bar 类.
添加一个宽度表示为百分比的样式属性.比如说，style ="60％";表示进度条为60％.

让我们看一下下面的示例 :

               40% Complete

Alternate Progress Bar

创建具有不同样式的进度条:

添加一个带有.progress类的
。
接下来，在上面的
中，添加一个空的
，其类为.progress-bar和class progress-bar- *，其中*可以是成功，信息，警告，危险。
添加样式属性，其宽度表示为百分比。比如说，style ="60％"; 表示进度条为60％。

让我们看一下下面的例子:

               90% Complete (Sucess)                  30% Complete (info)                  20%Complete (warning)                  10% Complete (danger)

Striped Progress Bar

创建条带进度条:

添加一个带有.progress和.progress-striped类的
。
接下来，在上面的
中，添加一个空的
，其类为.progress-bar和class progress-bar- *，其中*可以是成功，信息，警告，危险。
添加样式属性，其宽度表示为百分比。比如说，style ="60％"; 表示进度条为60％。

让我们看一下下面的例子:

               90% Complete (Sucess)                  30% Complete (info)                  20%Complete (warning)                  10% Complete (danger)

Animated Progress Bar

To create an animated progress bar −

添加一个带有.progress和.progress-striped类的
。还要将.active活动添加到.progress-striped。
接下来，在上面的
中，添加一个带有.progress-bar类的空
。
添加样式属性，其宽度表示为百分比。比如说，style ="60％"; 表示进度条为60％。

这将从右到左为条纹设置动画。

让我们看一下下面的例子:

               40% Complete

Stacked Progress Bar

您甚至可以堆叠多个进度条.将多个进度条放入相同的 .progress 以堆叠它们，如下例所示 :

                  40% Complete                     30% Complete (info)                     20%Complete (warning)