BootStrap -- API学习（八） 最终

*******************************第八章 支持的Javascript插件*********************************
1.弹出模态窗口
    modal
    modal-dialog 对话框
    modal-content 模块内容
    modal-header 头部
    modal-body 内容
    modal-footer 尾部
     
2.出发模态窗口的两种方式
    data-toggle="modal" href="#mymodal"
    data-toggle="modal" data-target="#mymodal"

例子：
    <button class="btn btn-primary" type="button" data-toggle="modal" data-target="#mymodal" >点击我</button>
    <div class="modal fade" id="mymodal">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                    <h4 class="modal-title">模态弹出窗标题</h4>
                </div>
                <div class="modal-body">
                    <p>模态弹出窗主体内容</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary">保存</button>
                </div>
            </div> 
        </div> 
    </div> 
    
3.模态窗口的动画效果
    fade
    
4.事件触发
    show.bs.modal      在show方法调用时立即触发（尚未显示之前）；如果单击了一个元素，那么该元素将作为事件的relatedTarget属性
    shown.bs.modal     该事件在模态弹出窗完全显示给用户之后（并且等CSS动画完成之后）触发；如果单击了一个元素，那么该元素将作为事件的relatedTarget事件
    hide.bs.modal      在hide方法调用时（但还未关闭隐藏）立即触发
    hidden.bs.modal    该事件在模态弹出窗完全隐藏之后（并且CSS动画漂完成之后）触发
    
    例子：
        $("#mymodal").on('show.bs.modal',function(e){
            alert('模态窗口出现之前触发事件！');
        });