bootstrap-模态框

前言：

单个还是全部引入

插件可以单个引入（使用Bootstrap提供的单个*.js文件），或一次性全部引入（使用bootstrap.js或压缩版的bootstrap.min.js）。

不要将两份文件全部引入

bootstrap.js和bootstrap.min.js同样是包含了所有插件。区别是：一个没有压缩，一个进行了压缩。

插件之间的依赖

某些插件和CSS组件依赖于其它插件。如果你是单个引入每个插件的，请确保在文档中检查插件之间的依赖关系。注意，所有插件都依赖jQuery（也就是说，jQuery必须在所有插件之前引入页面）。 bower.json文件中列出了所支持的jQuery版本。

Data属性

你可以仅仅通过data属性API就能使用所有的Bootstrap插件，无需写一行JavaScript代码。这是Bootstrap中的一等API，也应该是你的首选方式。

话又说回来，在某些情况下可能需要将此功能关闭。因此，我们还提供了关闭data属性API的方式，即解除绑定到文档命名空间上的所有事件data-api。就像下面这样：

$(document).off('.data-api')

另外，如果是针对某个特定的插件，只需在data-api前面添加那个插件的名称作为命名空间，如下：

$(document).off('.alert.data-api')

编程式API

我们还提供了所有Bootstrap插件的纯JavaScript API。所有公开的API都是支持单独或链式调用的，并且返回其所操作的元素集合（注：和jQuery的调用形式一致）。

$('.btn.danger').button('toggle').addClass('fat')

所有方法都可以接受一个可选的option对象作为参数，或者一个代表特定方法的字符串，或者什么也不提供（在这种情况下，插件将会以默认值初始化）：

$('#myModal').modal()                      // 使用默认值初始化
$('#myModal').modal({ keyboard: false })   // 初始化。不支持键盘导航
$('#myModal').modal('show')                // 初始化并立即展示</p>

每个插件还通过Constructor属性暴露了其自身的构造器函数：$.fn.popover.Constructor。如果你想获取某个插件的实例，可以直接从页面元素内获取：$('[rel=popover]').data('popover')。

避免冲突

某些时候可能需要将Bootstrap插件与其他UI框架共同使用。在这种情况下，命名空间冲突随时可能发生。如果不幸发生了这种情况，你可以通过调用插件的.noConflict方法恢复原始值。

var bootstrapButton = $.fn.button.noConflict() // return $.fn.button to previously assigned value
$.fn.bootstrapBtn = bootstrapButton            // give $().bootstrapBtn the Bootstrap functionality

事件

Bootstrap为大部分插件所具有的动作提供了自定义事件。一般来说，这些事件都有不定式和过去式两种动词形式，例如，不定式形式的动词（例如show）表示其在事件开始时被触发；而过去式动词（例如shown）表示其在动作直接完毕之后被触发。

从3.0.0开始，所有的Bootstrap事件都采用了命名空间。

所有以不定式形式的动词命名的事件都提供了preventDefault功能。这就赋予你在动作开始执行前将其停止的能力。

$('#myModal').on('show.bs.modal', function (e) {
  if (!data) return e.preventDefault() // stops modal from being shown
})

第三方工具库

Bootstrap官方不提供对第三方JavaScript工具库的支持，例如Prototype或jQuery UI。除了.noConflict和采用命名空间的事件，还可能会有兼容性方面的问题，这就需要你自己来处理了。你可以在此邮件列表获取帮助。

一 模态框应用，

1.1基本应用 通过 data 属性

触发器 可以是a或者button

　　data-toggle="modal" data-target="#副标签id" /href="#副标签id"

模态框：div

　　id="副标签id" class="modal fade"

解释：模态框里面

1. 第一是 .modal，用来把 <div> 的内容识别为模态框。
2. 第二是 .fade class。当模态框被切换时，它会引起内容淡入淡出

12.js

• 通过 JavaScript：使用这种技术，您可以通过简单的一行 JavaScript 来调用带有 id="identifier" 的模态框：

  $('#identifier').modal(options)

二 选项

定制模态窗口（Modal Window）的外观和感观，它们是通过 data 属性或 JavaScript 来传递的。

三 方法

ps:想在页面过来得时候加载数据：1 $(function () {...});即

$(function(){

...

});

2 $(document).ready(function(){...}); 即

$(document).ready(function(){


});

四 事件