发布于 2015-01-06 00:49:27 | 1017 次阅读 | 评论: 0 | 来源: PHPERZ

这里有新鲜出炉的Bootstrap v3教程，程序狗速度看过来！

Bootstrap Web前端CSS框架

Bootstrap是Twitter推出的一个开源的用于前端开发的工具包。它由Twitter的设计师Mark Otto和Jacob Thornton合作开发，是一个CSS/HTML框架。Bootstrap提供了优雅的HTML和CSS规范，它即是由动态CSS语言Less写成。Bootstrap一经推出后颇受欢迎，一直是GitHub上的热门开源项目，包括NASA的MSNBC（微软全国广播公司）的Breaking News都使用了该项目。

---

本文为大家讲解的是bootstrap popover整个窗体监听的实现方法，感兴趣的同学参考下。

因为bootstrap的popover组件没有点击非控件区使popover消失机制，需要人为添加，也可用modal代替，因为此控件具有内置这个功能。 

示例代码

  //给body追加监听
     $('body').on('click', function (event) {
            var target = $(event.target);
            if (target.attr("id") !== "customer-reviews") {
                $('#customer-reviews').popover('hide');
            }
      });
 //前台代码
<div class="comment_popover"><!--popover弹出caret-->
     <a class="text-muted cursor">
         <i class="fa fa-caret-down " id="customer-reviews" data-container="body" data-toggle="popover"
                   data-placement="bottom" data-html="true" data-content='<div class="row " style="width:600px" id="popover-div">
                                        <div class="col-md-4">........'>
         </i>
     </a>
     <span>n customer reviews</span> 
 </div>