Bootstrap中的条纹进度条使用案例

 创建一个条纹的进度条的步骤如下:

1.添加一个带有 class .progress 和 .progress-striped 的 <div>

2.接着在上面的 <div> 内,添加一个带有 class .progress-bar 和 class progress-bar-* 的空的 <div>。其中,* 可以是success、info、warning、danger

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

让我们看看下面的实例:

  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.    <title>Bootstrap 实例 - 条纹的进度条</title>  
  5.    <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">  
  6.    <script src="/scripts/jquery.min.js"></script>  
  7.    <script src="/bootstrap/js/bootstrap.min.js"></script>  
  8. </head>  
  9. <body>  
  10.   
  11. <div class="progress progress-striped">  
  12.    <div class="progress-bar progress-bar-success" role="progressbar"   
  13.       aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"       
  14.       style="width: 90%;">  
  15.       <span class="sr-only">90% 完成(成功)</span>  
  16.    </div>  
  17. </div>  
  18. <div class="progress progress-striped">  
  19.    <div class="progress-bar progress-bar-info" role="progressbar"  
  20.       aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"       
  21.       style="width: 30%;">  
  22.       <span class="sr-only">30% 完成(信息)</span>  
  23.    </div>  
  24. </div>  
  25. <div class="progress progress-striped">  
  26.    <div class="progress-bar progress-bar-warning" role="progressbar"   
  27.       aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"       
  28.       style="width: 20%;">  
  29.       <span class="sr-only">20% 完成(警告)</span>  
  30.    </div>  
  31. </div>  
  32. <div class="progress progress-striped">  
  33.    <div class="progress-bar progress-bar-danger" role="progressbar"   
  34.       aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"       
  35.       style="width: 10%;">  
  36.       <span class="sr-only">10% 完成(危险)</span>  
  37.    </div>  
  38. </div>  
  39.   
  40. </body>  
  41. </html>  

结果如下所示:

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/367642.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

LM拟合算法

一、 Levenberg-Marquardt算法 &#xff08;1&#xff09;ya*e.^(-b*x)形式拟合 clear all % 计算函数f的雅克比矩阵&#xff0c;是解析式 syms a b y x real; fa*exp(-b*x); Jsymjacobian(f,[a b]); % 拟合用数据。参见《数学试验》&#xff0c;p190&#xff0c;例2 % data_1…

java的前生今世_HBaseGC的前生今世-身世篇

网易视频云是网易倾力打造的一款基于云计算的分布式多媒体处理集群和专业音视频技术&#xff0c;提供稳定流畅、低时延、高并发的视频直播、录制、存储、转码及点播等音视频的PAAS服务&#xff0c;在线教育、远程医疗、娱乐秀网易视频云是网易倾力打造的一款基于云计算的分布式…

CapeDwarf – Java EE上的Google App Engine

我有很多爱好。 从早期的Java EE规范一路走来&#xff0c;并通过Java EE 7进行了“云”之旅&#xff0c;我很好奇看到新宣布的CapeDwarf项目有哪些库存&#xff0c;可以在内部引入Google的平台即服务&#xff0c;提供“ Google App Engine ” 。 到目前为止的故事 我确实使用了…

第二周读书笔记——《构建之法》

【对一些实例的看法】 “我写了二叉树的遍历算法实现&#xff0c;在这里&#xff0c;二叉树是数据结构&#xff0c;遍历的实现细节是算法。C程序就是结果。但是这个程序有什么实际用处呢&#xff1f;在Java和其他一些语言中&#xff0c;似乎没有指针&#xff0c;那我可以不必了…

java springmvc 数据库事务_事务的简单回顾_JavaEE框架(Maven+SpringMvc+Spring+MyBatis)全程实战教程_Java视频-51CTO学院...

SpringMVCSpring MVC属于SpringFrameWork的后续产品&#xff0c;已经融合在Spring Web Flow里面。Spring MVC 分离了控制器、模型对象、分派器以及处理程序对象的角色&#xff0c;这种分离让它们更容易进行定制。SpringSpring是一个开源框架&#xff0c;Spring是于2003 年兴起的…

前端 ---jQuery的补充

15-jQuery补充 jquery内容补充 jquery除了咱们上面讲解的常用知识点之外&#xff0c;还有jquery 插件、jqueryUI知识点 jqueryUI 官网&#xff1a; https://jqueryui.com/ jqueryUI 中文网&#xff1a; http://www.jqueryui.org.cn/ jquery插件内容包含 官网demo&#xff1a; h…

用Java编写Hadoop MapReduce任务

尽管Hadoop框架本身是使用Java创建的&#xff0c;但MapReduce作业可以用许多不同的语言编写。 在本文中&#xff0c;我将展示如何像其他Java项目一样&#xff0c;基于Maven项目在Java中创建MapReduce作业。 准备示例输入 让我们从一个虚构的商业案例开始。 在这种情况下&#…

Spring集成:轻量级集成方法

当今的应用程序希望能够访问企业环境中的所有业务&#xff0c;而无需考虑与绝望的系统无缝集成的应用程序技术。 可以通过使用中间件技术对各种系统进行布线来实现这种集成。 集成平台使应用程序可以相互共享信息的环境&#xff0c;从而使体系结构具有高度的互操作性。 Spring…

接口IDisposable的用法

C#的每一个类型都代表一种资源&#xff0c;而资源又分为两类&#xff1a; 托管资源 由CLR管理分配和释放的资源&#xff0c;即从CLR里new出来的对象。非托管资源 不受CLR管理的对象&#xff0c;如Windows内核对象&#xff0c;或者文件、数据库连接、套接字、COM对象等。如果类…

图形处理:betweeness中心性– neo4j的密码与graphstream

上周&#xff0c; 我写了关于中间性中心性算法以及使用graphstream 理解它的尝试 &#xff0c;在阅读源代码时&#xff0c;我意识到我可以使用neo4j的所有最短路径算法将某些东西放在一起。 概括地说&#xff0c;中间性中心度算法用于确定图中节点的负载和重要性。 在与Jen讨…

小程序之Tab切换

小程序越来越火了&#xff0c;作为一名&#xff0c;额 有理想的攻城狮&#xff0c;当然要紧跟互联网时代的步伐啦&#xff0c;于是我赶紧抽时间学习了一下小程序的开发&#xff0c;顺便把经验分享给大家。 对于申请账号以及安装开发工具等&#xff0c;大家可以看官网&#xff…

6759: 异或序列

6759: 异或序列 时间限制: 1 Sec 内存限制: 128 MB题目描述 已知一个长度为n的整数数列a1,a2,…,an&#xff0c;给定查询参数l、r&#xff0c;问在al,al1,…,ar区间内&#xff0c;有多少子序列满足异或和等于k。也就是说&#xff0c;对于所有的x,y(l≤x≤y≤r)&#xff0c;满足…

java随机数排序算法_理解快速排序算法

快速排序在平均状况下&#xff0c;排序n个项目要Ο(n log n)次比较。在最坏状况下则需要Ο(n^2)次比较&#xff0c;但这种状况并不常见。事实上&#xff0c;快速排序通常明显比 其他Ο(n log n)算法更快&#xff0c;因为它的内部循环(inner loop)可以在大部分的架构上很有效率地…

开课吧视频内容汇总

1. 前端读取文件内容&#xff0c; FileReader对象 2. 用户联网状态 3. application/x-www-form-urlencoded 参数序列化 &#xff08;具体借鉴jquery的$.param方法&#xff09;&#xff0c;后端接收到的数据格式是 a[0][a] 1,并不会将其整理成对象或者数组 var nextStr ;funct…

Servlet和JSP中的文件上传示例

使用Servlet和JSP将文件上传到服务器是Java Web应用程序中的常见任务。 在对Servlet或JSP进行编码以处理文件上传请求之前&#xff0c;您需要了解一点有关HTML和HTTP协议中文件上传支持的知识。 如果要让用户从文件系统中选择文件并上传到服务器&#xff0c;则需要使用<inpu…

20165312-第4周-课上内容补做以及知识点总结

20165312-第4周-课上内容补做以及知识点总结 1、课上内容补做 教材代码完成情况测试p45这题很快就做完了&#xff0c;然后忘记提交了。。就开始做递归。想起来的时候已经过了时间。 public class Example3_7 {public static void main(String args[]) {int sum0,i,j;for(i1;i&l…

JavaScript实现表单的全选,反选,获取值

构思 通过for循环和for in循环来实现&#xff0c;界面效果如下 步骤 全选&#xff1a; 循环给所有的表单设置checked 反选&#xff1a; 循环内判断checked是否为true&#xff0c;如果为true则改为false否则改为true 获取值&#xff1a; 最开始用for取&#xff0c;但是只打印最后…

EJB钝化和激活示例

在本教程中&#xff0c;我们将了解状态Java企业会话Bean中激活和钝化的工作方式。 1.简介 有状态会话Bean通常保存有关特定客户端的信息&#xff0c;并在整个会话中保存该信息。 但是&#xff0c;事实是&#xff0c;客户端会话往往会在相当长的时间内保持活动状态&#xff0c;…

命令模式详解

原文链接:https://www.cnblogs.com/java-my-life/archive/2012/06/01/2526972.html 在阎宏博士的《JAVA与模式》一书中开头是这样描述命令&#xff08;Command&#xff09;模式的&#xff1a; 命令模式属于对象的行为模式。命令模式又称为行动(Action)模式或交易(Transaction)模…

c mysql5.7_CentOS7下MySQL5.7的三种安装方式详解

操作系统环境&#xff1a;CentOS 7.4最小化安装[rootnode3 src]# cat /etc/redhat-releaseCentOS Linux release 7.4.1708 (Core)[rootnode3 ~]# uname -r3.10.0-693.5.2.el7.x86_64[rootnode3 ~]#安装版本为&#xff1a;MySQL 5.7.20一、编译安装MySQL5.71、下载源码包[rootno…