搜索
首页web前端html教程Bootstrap各种进度条的实例讲解

Bootstrap各种进度条的实例讲解

零下一度
零下一度
Jul 18, 2017 pm 04:43 PM
bootstrap进度

本章将讲解 Bootstrap 进度条。在本教程中，您将看到如何使用 Bootstrap 创建加载、重定向或动作状态的进度条。

Bootstrap 进度条使用 CSS3 过渡和动画来获得该效果。Internet Explorer 9 及之前的版本和旧版的 Firefox 不支持该特性，Opera 12 不支持动画。

默认的进度条

创建一个基本的进度条的步骤如下：

添加一个带有 class .progress 的 dc6dce4a544fdca2df29d5ac0ea9906b。

接着，在上面的 dc6dce4a544fdca2df29d5ac0ea9906b 内，添加一个带有 class .progress-bar 的空的 dc6dce4a544fdca2df29d5ac0ea9906b。

添加一个带有百分比表示的宽度的 style 属性，例如 style="60%"; 表示进度条在 60% 的位置。

让我们看看下面的实例：

实例

<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>

基本样式

　　Bootstrap框架中对于进度条提供了一个基本样式，一个100%宽度的背景色，然后一个高亮的颜色表示完成进度。其实制作这样的进度条非常容易，一般是使用两个容器，外容器具有一定的宽度，并且设置一个背景颜色，子元素设置一个宽度，比如完成度是30%（也就是父容器的宽度比例值），同时给其设置一个高亮的背景色

　　Bootstrap框架中也是按这样的方式实现的，它提供了两个容器，外容器使用“progress”样式，子容器使用“progress-bar”样式。其中progress用来设置进度条的容器样式，而progress-bar用于限制进度条的进度

.progress {
  height: 20px;
  margin-bottom: 20px;
  overflow: hidden;
  background-color: #f5f5f5;
  border-radius: 4px;
  -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, .1);  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .1);
}.progress-bar {
  float: left;
  width: 0;
  height: 100%;
  font-size: 12px;
  line-height: 20px;
  color: #fff;
  text-align: center;
  background-color: #428bca;
  -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .15);  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .15);
  -webkit-transition: width .6s ease;  transition: width .6s ease;
}
b8201876fc96a5058af18d6629bf1b0e   6708c431ccdba4242fbfa419c9b36f9616b28748ea4df4d9c2150843fecfba6816b28748ea4df4d9c2150843fecfba68

　　无障碍性更好的写法如下

b8201876fc96a5058af18d6629bf1b0e9d99875cf552fcccb61087048cf5934b64952123ee1a1d9b385bc3bca58612f040% Complete54bdf357c58b8a65c66d7c19c8e4d11416b28748ea4df4d9c2150843fecfba6816b28748ea4df4d9c2150843fecfba68

　　role属性告诉搜索引擎这个div的作用是进度条；aria-valuenow="40"属性告知当前进度条的进度为40%；aria-valuemin="0"属性告知进度条的最小值为0%；aria-valuemax="100"属性告知进度条的最大值为100%


 

彩色进度条

　　Bootstrap框架中的进度条和警告信息框一样，为了能给用户一个更好的体验，也根据不同的状态配置了不同的进度条颜色。在此称为彩色进度条，其主要包括以下四种：

　　☑ progress-bar-info：表示信息进度条，进度条颜色为蓝色

　　☑ progress-bar-success：表示成功进度条，进度条颜色为绿色

　　☑ progress-bar-warning：表示警告进度条，进度条颜色为黄色

　　☑ progress-bar-danger：表示错误进度条，进度条颜色为红色

　　具体使用非常简单，只需要在基础的进度上增加对应的类名即可，彩色进度条与基本进度条相比，就是进度条颜色做了一定的变化

.progress-bar-success {
  background-color: #5cb85c;
}.progress-bar-info {
  background-color: #5bc0de;
}.progress-bar-warning {
  background-color: #f0ad4e;
}.progress-bar-danger {
  background-color: #d9534f;
}
b8201876fc96a5058af18d6629bf1b0e014be70db3966d949d52cfc8c08715e916b28748ea4df4d9c2150843fecfba6816b28748ea4df4d9c2150843fecfba68b8201876fc96a5058af18d6629bf1b0ee8b20786e3a3bd8c1a143e1b9dcb1a0516b28748ea4df4d9c2150843fecfba6816b28748ea4df4d9c2150843fecfba68b8201876fc96a5058af18d6629bf1b0e890e49b3313bbdeea090722d783f029916b28748ea4df4d9c2150843fecfba6816b28748ea4df4d9c2150843fecfba68b8201876fc96a5058af18d6629bf1b0e357b2aa43d41338b44e3a554d67e03bd16b28748ea4df4d9c2150843fecfba6816b28748ea4df4d9c2150843fecfba68

条纹进度条

　　在Bootstrap框架中除了提供了彩色进度条之外，还提供了一种条纹进度条，这种条纹进度条采用CSS3的线性渐变来实现，并未借助任何图片。使用Bootstrap框架中的条纹进度条只需要在进度条的容器“progress”基础上增加类名“progress-striped”，当然，如果要让进度条条纹像彩色进度一样，具有彩色效果，只需要在进度条上增加相应的颜色类名

　　[注意]通过渐变可以为进度条创建条纹效果，IE9-浏览器不支持

.progress-striped .progress-bar {
  background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
  background-image:linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
  background-size: 40px 40px;
}
.progress-striped .progress-bar-success {
  background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
  background-image:linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
}.progress-striped .progress-bar-info {
  background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
  background-image:linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
}.progress-striped .progress-bar-warning {
  background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
  background-image:linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
}.progress-striped .progress-bar-danger {
  background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
  background-image:linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
}
3a8b4b7f756725c3a8015596652629dcd3a8cd28dd0113c1803d2db27c9892d916b28748ea4df4d9c2150843fecfba6816b28748ea4df4d9c2150843fecfba683a8b4b7f756725c3a8015596652629dc014be70db3966d949d52cfc8c08715e916b28748ea4df4d9c2150843fecfba6816b28748ea4df4d9c2150843fecfba683a8b4b7f756725c3a8015596652629dce8b20786e3a3bd8c1a143e1b9dcb1a0516b28748ea4df4d9c2150843fecfba6816b28748ea4df4d9c2150843fecfba683a8b4b7f756725c3a8015596652629dc890e49b3313bbdeea090722d783f029916b28748ea4df4d9c2150843fecfba6816b28748ea4df4d9c2150843fecfba683a8b4b7f756725c3a8015596652629dc357b2aa43d41338b44e3a554d67e03bd16b28748ea4df4d9c2150843fecfba6816b28748ea4df4d9c2150843fecfba68


 

动态条纹

　　为了让条纹进度条动起来，Bootstrap框架还提供了一种动态条纹进度条。其实现原理主要通过CSS3的animation来完成。首先通过@keyframes创建了一个progress-bar-stripes的动画，这个动画主要做了一件事，就是改变背景图像的位置，也就是background-position的值。因为条纹进度条是通过CSS3的线性渐变来制作的，而linear-gradient实现的正是对应背景中的背景图片

　　[注意]IE9-浏览器不支持

@-webkit-keyframes progress-bar-stripes {
  from {
    background-position: 40px 0;
  }
  to {background-position: 0 0;
  }}
@keyframes progress-bar-stripes {
  from {
    background-position: 40px 0;
  }
  to {background-position: 0 0;
  }}

　　在Bootstrap框架中，通过给进度条容器“progress”添加一个类名“active”，并让文档加载完成就触“progress-bar-stripes”动画生效，使其呈现出由右向左运动的动画效果

.progress.active .progress-bar {
  -webkit-animation: progress-bar-stripes 2s linear infinite;  animation: progress-bar-stripes 2s linear infinite;
}
da7fee9992280785cbb141b7b5e9ce54d3a8cd28dd0113c1803d2db27c9892d916b28748ea4df4d9c2150843fecfba6816b28748ea4df4d9c2150843fecfba68da7fee9992280785cbb141b7b5e9ce54014be70db3966d949d52cfc8c08715e916b28748ea4df4d9c2150843fecfba6816b28748ea4df4d9c2150843fecfba68da7fee9992280785cbb141b7b5e9ce54e8b20786e3a3bd8c1a143e1b9dcb1a0516b28748ea4df4d9c2150843fecfba6816b28748ea4df4d9c2150843fecfba68da7fee9992280785cbb141b7b5e9ce54890e49b3313bbdeea090722d783f029916b28748ea4df4d9c2150843fecfba6816b28748ea4df4d9c2150843fecfba68da7fee9992280785cbb141b7b5e9ce54357b2aa43d41338b44e3a554d67e03bd16b28748ea4df4d9c2150843fecfba6816b28748ea4df4d9c2150843fecfba68


 

层叠进度条

　　Bootstrap框架除了提供上述几种进度条之外，还提供了一种层叠进度条。层叠进度条可以将不同状态的进度条放置在一起，按水平方式排列

　　把多个进度条放入同一个 .progress 中，使它们呈现堆叠的效果

b8201876fc96a5058af18d6629bf1b0e
  7f809a2d1738ac40f771f8de45f90c1464952123ee1a1d9b385bc3bca58612f035% Complete (success)54bdf357c58b8a65c66d7c19c8e4d114
  16b28748ea4df4d9c2150843fecfba68
  695093a9fbb94d989f8d2b1cfdfdf83664952123ee1a1d9b385bc3bca58612f020% Complete (warning)54bdf357c58b8a65c66d7c19c8e4d114
  16b28748ea4df4d9c2150843fecfba68
  70f0568bf8bd95907c2e4a17779872a264952123ee1a1d9b385bc3bca58612f010% Complete (danger)54bdf357c58b8a65c66d7c19c8e4d114
  16b28748ea4df4d9c2150843fecfba6816b28748ea4df4d9c2150843fecfba68


　　[注意]层叠的进度条之和不能大于100%

b8201876fc96a5058af18d6629bf1b0e
  ab4220bd441a1f0392067f147af09e9816b28748ea4df4d9c2150843fecfba68
  64a3a6ae05df329d95792612c59b877c16b28748ea4df4d9c2150843fecfba68
  8b5d5c690bf4e2e60a71f472e69f82a216b28748ea4df4d9c2150843fecfba6816b28748ea4df4d9c2150843fecfba68


 

提示标签

　　在实际开发中，有很多时候是需要在进度条中直接用相关的数值向用户传递完成的进度值，Bootstrap考虑了这种使用场景，只需要在进度条中添加需要的值

b8201876fc96a5058af18d6629bf1b0e2280bf5905e2e71bbdea92945e22be8a20%16b28748ea4df4d9c2150843fecfba6816b28748ea4df4d9c2150843fecfba68


　　在展示很低的百分比时，如果需要让文本提示能够清晰可见，可以为进度条设置 min-width 属性 

b8201876fc96a5058af18d6629bf1b0ec02538b6b470d7f3269c5214ddb106000%16b28748ea4df4d9c2150843fecfba6816b28748ea4df4d9c2150843fecfba68b8201876fc96a5058af18d6629bf1b0e99d28bbb7f49eaebba7b3b32372f31030%16b28748ea4df4d9c2150843fecfba6816b28748ea4df4d9c2150843fecfba68b8201876fc96a5058af18d6629bf1b0e586f34b1d57516e3df8ed2b1a3e08cc41%16b28748ea4df4d9c2150843fecfba6816b28748ea4df4d9c2150843fecfba68b8201876fc96a5058af18d6629bf1b0e99d28bbb7f49eaebba7b3b32372f31031%16b28748ea4df4d9c2150843fecfba6816b28748ea4df4d9c2150843fecfba68


 

以上是Bootstrap各种进度条的实例讲解的详细内容。更多信息请关注PHP中文网其他相关文章！

声明
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
相关文章
HTML，CSS和JavaScript的未来：网络开发趋势HTML，CSS和JavaScript的未来：网络开发趋势Apr 19, 2025 am 12:02 AM

HTML的未来趋势是语义化和Web组件，CSS的未来趋势是CSS-in-JS和CSSHoudini，JavaScript的未来趋势是WebAssembly和Serverless。1.HTML的语义化提高可访问性和SEO效果，Web组件提升开发效率但需注意浏览器兼容性。2.CSS-in-JS增强样式管理灵活性但可能增大文件体积，CSSHoudini允许直接操作CSS渲染。3.WebAssembly优化浏览器应用性能但学习曲线陡，Serverless简化开发但需优化冷启动问题。

HTML：结构，CSS：样式，JavaScript：行为HTML：结构，CSS：样式，JavaScript：行为Apr 18, 2025 am 12:09 AM

HTML、CSS和JavaScript在Web开发中的作用分别是：1.HTML定义网页结构，2.CSS控制网页样式，3.JavaScript添加动态行为。它们共同构建了现代网站的框架、美观和交互性。

HTML的未来：网络设计的发展和趋势HTML的未来：网络设计的发展和趋势Apr 17, 2025 am 12:12 AM

HTML的未来充满了无限可能。1)新功能和标准将包括更多的语义化标签和WebComponents的普及。2)网页设计趋势将继续向响应式和无障碍设计发展。3)性能优化将通过响应式图片加载和延迟加载技术提升用户体验。

HTML与CSS vs. JavaScript：比较概述HTML与CSS vs. JavaScript：比较概述Apr 16, 2025 am 12:04 AM

HTML、CSS和JavaScript在网页开发中的角色分别是：HTML负责内容结构，CSS负责样式，JavaScript负责动态行为。1.HTML通过标签定义网页结构和内容，确保语义化。2.CSS通过选择器和属性控制网页样式，使其美观易读。3.JavaScript通过脚本控制网页行为，实现动态和交互功能。

HTML：是编程语言还是其他？HTML：是编程语言还是其他？Apr 15, 2025 am 12:13 AM

HTMLISNOTAPROGRAMMENGUAGE; ITISAMARKUMARKUPLAGUAGE.1）htmlStructures andFormatSwebContentusingtags.2）itworkswithcsssforstylingandjavascript for Interactivity，增强WebevebDevelopment。

HTML：建立网页的结构HTML：建立网页的结构Apr 14, 2025 am 12:14 AM

HTML是构建网页结构的基石。1.HTML定义内容结构和语义，使用、、等标签。2.提供语义化标记，如、、等，提升SEO效果。3.通过标签实现用户交互，需注意表单验证。4.使用、等高级元素结合JavaScript实现动态效果。5.常见错误包括标签未闭合和属性值未加引号，需使用验证工具。6.优化策略包括减少HTTP请求、压缩HTML、使用语义化标签等。

从文本到网站：HTML的力量从文本到网站：HTML的力量Apr 13, 2025 am 12:07 AM

HTML是一种用于构建网页的语言，通过标签和属性定义网页结构和内容。1）HTML通过标签组织文档结构，如、。2）浏览器解析HTML构建DOM并渲染网页。3）HTML5的新特性如、、增强了多媒体功能。4）常见错误包括标签未闭合和属性值未加引号。5）优化建议包括使用语义化标签和减少文件大小。

了解HTML，CSS和JavaScript：初学者指南了解HTML，CSS和JavaScript：初学者指南Apr 12, 2025 am 12:02 AM

WebDevelovermentReliesonHtml，CSS和JavaScript：1）HTMLStructuresContent，2）CSSStyleSIT和3）JavaScriptAddSstractivity，形成thebasisofmodernWebemodernWebExexperiences。

See all articles

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序，用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

显示更多

热门文章

刺客信条阴影：贝壳谜语解决方案
3 周前ByDDD
Windows 11 KB5054979中的新功能以及如何解决更新问题
2 周前ByDDD
在哪里可以找到原子中的起重机控制钥匙卡
3 周前ByDDD
节省R.E.P.O.解释（并保存文件）
1 个月前By尊渡假赌尊渡假赌尊渡假赌
刺客信条阴影 - 如何找到铁匠，解锁武器和装甲定制
3 周前ByDDD
显示更多

热工具

SublimeText3汉化版

SublimeText3汉化版

中文版，非常好用

MinGW - 适用于 Windows 的极简 GNU

MinGW - 适用于 Windows 的极简 GNU

这个项目正在迁移到osdn.net/projects/mingw的过程中，你可以继续在那里关注我们。MinGW：GNU编译器集合（GCC）的本地Windows移植版本，可自由分发的导入库和用于构建本地Windows应用程序的头文件；包括对MSVC运行时的扩展，以支持C99功能。MinGW的所有软件都可以在64位Windows平台上运行。

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

mPDF

mPDF

mPDF是一个PHP库，可以从UTF-8编码的HTML生成PDF文件。原作者Ian Back编写mPDF以从他的网站上“即时”输出PDF文件，并处理不同的语言。与原始脚本如HTML2FPDF相比，它的速度较慢，并且在使用Unicode字体时生成的文件较大，但支持CSS样式等，并进行了大量增强。支持几乎所有语言，包括RTL（阿拉伯语和希伯来语）和CJK（中日韩）。支持嵌套的块级元素（如P、DIV），

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

显示更多

热门话题

gmail邮箱登陆入口在哪里
7563
15
CakePHP 教程
1384
52
steam的账户名称是什么格式
84
11
win11激活密钥永久
60
19
NYT连接提示和答案
28
99
显示更多