鄙人剛接觸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，不然會在一直跑滴。