《玩转Bootstrap（JS插件篇）》笔记

导入JavaScript插件

不论是单独导入还一次性导入之前必须先导入jQuery库。

• 一次性导入
  
  <script src="js/bootstrap.min.js"></script>

• 单独导入，可到github去下载
  
  动画过渡（Transitions）: transition.js
  
  模态弹窗（Modal）: modal.js
  
  下拉菜单（Dropdown）： dropdown.js
  
  滚动侦测（Scrollspy）： scrollspy.js
  
  选项卡（Tab）： tab.js
  
  提示框（Tooltips）： tooltop.js
  
  弹出框（Popover）： popover.js
  
  警告框（Alert）： alert.js
  
  按钮（Buttons）： button.js
  
  折叠/手风琴（Collapse）： collapse.js
  
  图片轮播Carousel： carousel.js
  
  自动定位浮标Affix： affix.js

动画过渡

都是采用CSS3来实现的，所以IE6-8浏览器是不具备这些过渡动画效果。

默认情况之下，Bootstrap框架中以下组件使用了过渡动画效果：

1. 模态弹出窗（Modal）的滑动和渐变效果；
2. 选项卡（Tab）的渐变效果；
3. 警告框（Alert）的渐变效果；
4. 图片轮播（Carousel）的滑动效果。

模态弹出框

模态弹出框统一称为 Modal

• 结构分析
  
  分别运用了modal、modal-dialog和modal-content样式
  
  弹出窗真正的内容都放置在modal-content中，其主要又包括三个部分：
  
  1 弹出框头部，一般使用modal-header表示，主要包括标题和关闭按钮
  
  2 弹出框主体，一般使用modal-body表示，弹出框的主要内容
  
  3 弹出框脚部，一般使用modal-footer表示，主要放置操作按钮

• 实现原理解析
  
  bootstrap中的“模态弹出框”有以下几个特点：
  
  1、模态弹出窗是固定在浏览器中的。
  
  2、模态弹出窗宽度是自适应的，而且modal-dialog水平居中。
  
  3、当浏览器视窗大于768px时，模态弹出窗的宽度为600px。

• 尺寸选择
  
  modal-lg大尺寸
  
  modal-sm小尺寸（默认）

• 触发模态弹出窗2种方法
  
  1、模态弹出窗声明，只需要自定义两个必要的属性：data-toggle（必须为modal）和data-target（ID值）
  
  2、触发模态弹出窗也可以是一个链接<a>元素，那么可以使用链接元素自带的href属性替代data-target属性
  
  不过建议还是使用统一使用data-target的方式来触发。

• 为弹出框增加过度动画效果
  
  可通过给.modal增加类名fade为模态弹出框增加一个过渡动画效果。

• data参数说明

属性名称	类型	默认值	描述
data-toggle	字符	modal	必须且为modal，用来控制模态弹出窗的显示
data-target	字符	用户自己定义	必须，定义要触发的弹出窗是哪一个。其值可以div.modal元素独有类名，或ID值
data-backdrop	布尔值	true	是否包含一个背景div元素，如果为true，则单击该背景时关闭弹出窗，如果取值为static，则单击背景div时不会关闭
data-keyboard	布尔值	true	按键盘的ESC键可以关闭弹出窗。如果值为false，则不会关闭
data-show	布尔值	true	初始化时，弹出窗是否显示
href	URL路径	空值	如果通过a元素触发模态弹出窗，其href值不是一个以#开头的值，则表示是一个url地址，模态弹出窗先加载其内容，然后替换原有的modal-content中的内容。如果href设置了地址，那么data-target则必须填写制定ID值

• JavaScript触发
  
  反转(如果当前为显示，则将其关闭；如果为关闭，则将其显示)：$("#themodal").modal("toggle");
  
  显示：$("#themodal").modal("show");
  
  关闭：$("#themodal").modal("hide");

• JavaScript触发时的参数设置

$(function () {
    $(".btn").click(function () {
        $("#mymodal").modal({
            backdrop: false, // 相当于data-backdrop
            keyboard: false, // 相当于data-keyboard
            show: true, // 相当于data-show
            remote: "" // 相当于a标签的href
        });
    });
});

• JavaScript触发时的事件
  
  模态弹出窗支持四种类型的事件，分别是模态弹出窗的弹出前、弹出后，关闭前、关闭后

事件类型	描述
show.bs.modal	在show方法调用时立即触发（尚未显示之前）；如果单击了一个元素，那么该元素将作为事件relatedTarget事件
shown.bs.modal	该事件在模态窗完全显示给用户之后（并且等CSS动画完成之后）触发；如果单击了一个元素，那么该元素将作为事件relatedTarget事件
hide.bs.modal	在hide方法调用时（但还未关闭隐藏）立即触发
hidden.bs.modal	该事件在模态弹出窗完全隐藏之后（并CSS动画漂亮完成之后）触发

$('#myModal').on('hidden.bs.modal', function (e) {
    // 处理代码...
})

• 示例

<!-- data-toggle必须为modal -->
<!-- data-target为div.modal元素独有类名，或ID值 -->
<button class="btn btn-primary" data-toggle="modal" data-target="#mymodal-data" data-backdrop="static" data-keyboard="false" type="button">通过data-target触发</button>
<!-- 模态弹出窗，由modal、modal-dialog和modal-content组成 -->
<!-- modal-lg大尺寸，还有modal-sm -->
<!-- fade弹出框过度动画效果 -->
<div class="modal fade modal-lg" id="mymodal-data" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <!-- modal-header弹出框头部 -->
            <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>
            <!-- modal-body弹出框主体 -->
            <div class="modal-body">
                <p>模态弹出窗主体内容</p>
            </div>
            <!-- modal-footer弹出框脚部 -->
            <div class="modal-footer">
                <!--  data-dismiss="modal"关闭模态弹出窗 -->
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary">保存</button>
            </div>
        </div>
    </div>
</div>