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上的效果一样,为页面元素增加额外的信息。 先来看几个简单的静态案例效果图 效果比较简单主要就是静态的弹出的小窗体,分为窗体标题和窗体内容