bootstrap-模态框
前言:
单个还是全部引入
插件可以单个引入(使用Bootstrap提供的单个*.js
文件),或一次性全部引入(使用bootstrap.js
或压缩版的bootstrap.min.js
)。
插件之间的依赖
某些插件和CSS组件依赖于其它插件。如果你是单个引入每个插件的,请确保在文档中检查插件之间的依赖关系。注意,所有插件都依赖jQuery(也就是说,jQuery必须在所有插件之前引入页面)。 bower.json
文件中列出了所支持的jQuery版本。
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"
解释:模态框里面
- 第一是 .modal,用来把 <div> 的内容识别为模态框。
- 第二是 .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(){
});
四 事件