发布于 2017-03-02 22:34:49 | 300 次阅读 | 评论: 0 | 来源: 网友投递
Bootstrap Web前端CSS框架
Bootstrap是Twitter推出的一个开源的用于前端开发的工具包。它由Twitter的设计师Mark Otto和Jacob Thornton合作开发，是一个CSS/HTML框架。Bootstrap提供了优雅的HTML和CSS规范，它即是由动态CSS语言Less写成。Bootstrap一经推出后颇受欢迎，一直是GitHub上的热门开源项目，包括NASA的MSNBC（微软全国广播公司）的Breaking News都使用了该项目。
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，不然会在一直跑滴。