当前位置: 首页 > 编程笔记 >

BootStrap初学者对弹出框和进度条的使用感觉

戚奇略
2023-03-14
本文向大家介绍BootStrap初学者对弹出框和进度条的使用感觉,包括了BootStrap初学者对弹出框和进度条的使用感觉的使用技巧和注意事项,需要的朋友参考一下

Bootstrap,来自 Twitter,是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷。

bootstrap 框架提供的进度条,如菜鸟教程里面的这些代码

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

让我这种真正的菜鸟一开始不知道该如何....让其变为真正的进度条。不过进过百度几下别人的之后,只要这个是要添加jquery代码配合之下才能实现滴。我度呀度,终于实现如下,略带高兴。

<div class="modal fade" id="myModal1" tabindex="-1" role="dialog" 
aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="static" style="width:300px"> 
<div class="modal-dialog"> 
<div class="modal-content" > 
<span style="text-align:center;color:red">文件正在上传请勿刷新页面!</span><br /> 
<div class="progress progress-striped active"> 
<div class="bar"> 
</div> 
</div> 
</div> 
</div> 
</div> 

上面这段是,用弹出框里面包含进度条。不然怎么实现一个开始让其隐藏的呢?在用bootstrap 做进度条,或者固定的弹出框时,加上data-backdrop="static" 这句比较好,因为没有这个修饰,你只要点击下鼠标,弹出框就消失不见了。

<scripts> 
var p = 101; 
var stop = 1; 
function run() { 
p += 4; 
$("div[class=bar]").css("width", p + "%"); 
var timer = setTimeout("run()", 500); 
if (p >100&&stop<1) { 
p = 0; 
} 
} 
$('#BtnSubmit').click(function () { 
$('#myModal1').modal('show'); 
p = 0; 
stop = 0; 
run(); 
$('#UpLoad').submit(); 
}); 
</scripts> 

其实,bootstrap的进度条是通过css样式进行展现的,所以只要不断滴修改,style width的值,就可以显示出来。当然我这个循环,重现刷新页面才能重新隐藏掉进度条。若是,用post提交,然后根据返回值进行判断,然后用$('#myModal1').modal('hide');将其隐藏,stop的值相应滴就改为1,不然会在一直跑滴。

 类似资料:
  • 主要内容:用法,实例,选项,方法,实例,事件,实例弹出框(Popover)与工具提示(Tooltip)类似,提供了一个扩展的视图。如需激活弹出框,用户只需把鼠标悬停在元素上即可。弹出框的内容完全可使用 Bootstrap 数据 API(Bootstrap Data API)来填充。该方法依赖于工具提示(tooltip)。 如果您想要单独引用该插件的功能,那么您需要引用 popover.js,它依赖于 工具提示(Tooltip)插件。或者,正如 B

  • 主要内容:默认的进度条,实例,实例,交替的进度条,实例,实例,条纹的进度条,实例,动画的进度条,实例,堆叠的进度条,实例,进度条大小,实例本章将讲解 Bootstrap 进度条。在本教程中,您将看到如何使用 Bootstrap 创建加载、重定向或动作状态的进度条。 Bootstrap 进度条使用 CSS3 过渡和动画来获得该效果。Internet Explorer 9 及之前的版本和旧版的 Firefox 不支持该特性,Opera 12 不支持动画。 默认的进度条 创建一个基本的进度条的步骤如下

  • 问题内容: 有人可以给我解释 中 的含义吗?我需要知道区别和含义。 据我了解,告诉一个类它是一个应该继承到子类中的方法,或者……某种东西。但是,这有什么意义呢?为什么不直接定义不添加类方法或任何@定义? tl; dr: 我什么时候应该使用它们,为什么要使用它们,以及如何使用它们? 我对非常了解,因此使用更高级的编程概念应该不是问题。如果可能,请给我相应的示例。 问题答案: 尽管和非常相似,但是这两

  • 本文向大家介绍Bootstrap 3 进度条的实现,包括了Bootstrap 3 进度条的实现的使用技巧和注意事项,需要的朋友参考一下 基本样式 自带进度 多种颜色 条纹 动态 堆叠 以上所述是小编给大家介绍的Bootstrap 3 进度条的实现,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对呐喊教程网站的支持!

  • 本文向大家介绍bootstrap modal弹出框的垂直居中,包括了bootstrap modal弹出框的垂直居中的使用技巧和注意事项,需要的朋友参考一下 本人前端菜鸟,公司项目尝试采用bootstrap,我身先士卒为同事趟“坑”,无奈UI妹子刁难非得让modal弹出框垂直居中,为了前端开发岗位的荣誉,花时间满足之。 最先就是百度咯,方法,就是修改源码 这里的that.element就是最外层的d

  • 本文向大家介绍Bootstrap教程JS插件弹出框学习笔记分享,包括了Bootstrap教程JS插件弹出框学习笔记分享的使用技巧和注意事项,需要的朋友参考一下 本文主要来学习一下JavaScript插件--弹出框。 案例 为页面内容添加一个小的覆盖层,就像iPad上的效果一样,为页面元素增加额外的信息。 先来看几个简单的静态案例效果图 效果比较简单主要就是静态的弹出的小窗体,分为窗体标题和窗体内容