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

来源：互联网发布：笔记记录软件编辑：程序博客网时间：2024/06/06 03:05

鄙人刚接触bootstrap不久，感觉其用起来不是很爽。终其原因，是我接触前端开发比较少。以前用惯了easyui,突然用了这个不是很适应。特别是在局部刷新那方面，提交之后，不知该如何修改大片大片div....这些暂且不说。此乃，鄙人手篇博文，突然发现，写博客也是一门技术...好难凑内容！

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，不然会在一直跑滴。

1 0