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拟合算法

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的前生今世－身世篇

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

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

CapeDwarf – Java EE上的Google App Engine

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

windows 服务中托管asp.net core

在windows 服务中托管asp.net core SDK 2.1.300 官方示例 1、添加运行标识符xml <PropertyGroup> <TargetFramework>netcoreapp2.1</TargetFramework> <RuntimeIdentifier>win7-x64</RuntimeIdentifier> </PropertyGroup> 2、添加包引用 d…
阅读更多...
Bootstrap插件之-按钮插件

Bootstrap插件之-按钮插件

按钮 button.js 按钮的功能很丰富。通过控制按钮的状态或创建一组按钮并形成一些新的组件&#xff0c;例如工具条。 跨浏览器兼容性 在页面多次加载之间&#xff0c;Firefox 仍然保持表单控件的状态&#xff08;禁用状态和选择状态&#xff09;。一个解决办法是设置autocomplet…
阅读更多...
第二周读书笔记——《构建之法》

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

【对一些实例的看法】 “我写了二叉树的遍历算法实现&#xff0c;在这里&#xff0c;二叉树是数据结构&#xff0c;遍历的实现细节是算法。C程序就是结果。但是这个程序有什么实际用处呢&#xff1f;在Java和其他一些语言中&#xff0c;似乎没有指针&#xff0c;那我可以不必了…
阅读更多...
java springmvc 数据库事务_事务的简单回顾_JavaEE框架(Maven+SpringMvc+Spring+MyBatis)全程实战教程_Java视频-51CTO学院...

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

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

异步重试模式

当您有一段经常失败且必须重试的代码时&#xff0c;此Java 7/8库提供了丰富且不引人注目的API&#xff0c;并提供了针对此问题的快速且可扩展的解决方案&#xff1a; ScheduledExecutorService scheduler Executors.newSingleThreadScheduledExecutor(); RetryExecutor execu…
阅读更多...
前端 ---jQuery的补充

前端 ---jQuery的补充

15-jQuery补充 jquery内容补充 jquery除了咱们上面讲解的常用知识点之外&#xff0c;还有jquery 插件、jqueryUI知识点 jqueryUI 官网&#xff1a; https://jqueryui.com/ jqueryUI 中文网&#xff1a; http://www.jqueryui.org.cn/ jquery插件内容包含 官网demo&#xff1a; h…
阅读更多...
[软件工程]自我介绍----一个小菜鸡的自我介绍(C++版 手动偷笑~)

[软件工程]自我介绍----一个小菜鸡的自我介绍(C++版 手动偷笑~)

#include “iostream” using namespace std; class Lee : protected MyMother,protected MyFather { private:string ChineseName("李怡龙");string EnglishName("Lee");int age 20;string university("青海大学计算机系");string level("…
阅读更多...
用Java编写Hadoop MapReduce任务

用Java编写Hadoop MapReduce任务

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

java 大二学期总结报告_大二学生自我总结「」

大二学生导师工作总结转眼间&#xff0c;我们的大二学年就这样结束了&#xff0c;在迎接新的一学期前我们来写一份自我总结吧。下面是小编搜集整理的大二学生自我总结&#xff0c;欢迎阅读。更多资讯尽在自我总结栏目!大二学生自我总结回顾大学二年,通过良师的教导和自身的刻苦…
阅读更多...
windows下揪出java程序占用cpu很高的线程

windows下揪出java程序占用cpu很高的线程

背景 天天搞java&#xff0c;这些监控也都知道&#xff0c;用过&#xff0c;但也没往细里追究。因为也没碰见这种问题&#xff0c;这次还是静下来走一遍流程吧。与网上基本一致&#xff0c;不过我区分了下linux和windows的不一样。我感觉基本是程序写成死循环了或者大对象分配多…
阅读更多...
jquery -input事件

jquery -input事件

input输入框的change事件&#xff0c;要在input失去焦点的时候才会触发 $(input[namemyInput]).change(function() { ... }); 在输入框内容变化的时候不会触发change&#xff0c;当鼠标在其他地方点一下才会触发用下面的方法会生效&#xff0c;input [html] view plain copy$(&…
阅读更多...
Bootstrap中的下拉列表

Bootstrap中的下拉列表

下拉列表&#xff08;select&#xff09;注意&#xff0c;很多原生选择菜单单 - 即在 Safari 和 Chrome 中 - 的圆角是无法通过修改 border-radius 属性来改变的。复制<select class"form-control"><option>1</option><option>2</option&…
阅读更多...
Spring集成：轻量级集成方法

Spring集成：轻量级集成方法

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

动态REM

什么是rem&#xff1f; rem是相对于根元素html字体大小来计算的&#xff0c;即( 1rem html字体大小 ) rem和em区别&#xff1f; rem:&#xff08;root em&#xff0c;根em&#xff09;根元素的fort-size的大小计算em&#xff1a;相对长度单位&#xff0c;相对于当前对象内文本…
阅读更多...
java教学楼的属性_java设计一个父类建筑物building,由它派生出教学楼类classroom,然后采用一些数据进行测试....

java教学楼的属性_java设计一个父类建筑物building,由它派生出教学楼类classroom,然后采用一些数据进行测试....

public class Building {public String bname;//建筑物名称public int floors;//代表总层数public double area;//代表总面积public Building(){}public Building(String bname, int floors, double area) {this.bname bname;this.floors floors;this.area area;}}public cl…
阅读更多...
Bootstrap中的列表的使用

Bootstrap中的列表的使用

列表无序列表排列顺序无关紧要的一列元素。Lorem ipsum dolor sit ametConsectetur adipiscing elitInteger molestie lorem at massaFacilisis in pretium nisl aliquetNulla volutpat aliquam velitPhasellus iaculis nequePurus sodales ultriciesVestibulum laoreet portti…
阅读更多...
Vue项目中使用HighChart

Vue项目中使用HighChart

记&#xff1a;初次在Vue项目中使用 HighChart 的时候要走的坑 感谢这位哥们的思路 传送门 Vue-cli项目使用 npm install highcharts --save 让我们看看 highcharts 的使用方法&#xff0c;传送门 Highcharts.chart(targetTag, option) 重启项目&#xff0c;建立chart.vue文件 …
阅读更多...
最新文章

Copyright @ 2022~2023