插件名称 定义文件 动画过滤 transition.js 模态框 modal.js 下拉菜单 dropdown.js 滚动侦测 scrollspy.js 选项卡 tab.js 提示框 tooltop.js 弹出框 popover.js 警告框 alert.js 按钮 button.js 折叠/手风琴 collap.js 图片轮播 caroul.js 自动定位浮标 affix.js
data属性api
可以仅仅通过 data 属性 api 使用所有的 bootstrap 插件，无需写一行 javascript 代码，建议首选
关闭data属性api的方法：
关闭所有：$(document).off(‘.data-api’)关闭特定插件：$(document).off(‘.插件名称.data-api’)
编程方式api（js控制）
所有公开api支持单独或链式调用
所有方法都接受一个可选的option对象或一个代表特定方法的字符串作为参数，不传参时以默磷在空气中燃烧认值初始化。比如
$('#mymodal').modal() // 以默认值初始化$('#mymodal').modal({ keyboard: fal }) // initial日计划ized with no keyboard$('#mymodal').modal('show') // 初始化后立即调用 show 方法修改插件默认设置
$.fn.modal.constructor.defaults.keyboard = fal // 将模态框插件的 `keyboard` 默认选参数置为 fal
bootstrap为大部分插件所具有的动作提供了自定义事件。一般来说，这些事件都有不定式和过去式两种动词的命名形式，例如，不定式形式的动词（例如
show）表示其在事件开始时被触发；而过去式动词（例如shown）表示在动作执行完毕之后被触发。
所有以不定式形式的动词命名的事件都提供了阻止默认事件功能：
$('#mymodal').on('show.bs.modal', function (e) { if (!data) return e.preventdefault() // 阻止模态框的展示})全局范围禁用过渡效果：
$.support.transition=fal
不要在一个模态框上重叠另一个模态框，不支持同时打开多个模态框
模态框需作为body标签的直接子元素
在 ios 和 android 上，当滚动屏幕超过模态框的顶部或底部时，
情人节送老婆什么礼物最有意义<body>中的内容将开始随着滚动
data-target触发：
<button class="btn btn-primary" data-toggle="modal" data-target="#mymodal" type="button">通过data-target触发</button><div class="modal fade" id="mymodal"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="clo" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">clo</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><!-- /.modal-content --> </div><!-- /.modal-dialog --></div><!-- /.modal -->
js触发：
<!-- 触发按钮 --><button class="btn btn-primary" type="button">点击我</button><!-- 模态框 --><div class="modal" id="mymodal"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="clo" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">clo</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&g法律文秘t; </div> </div></div><!-- js代码 --><script> $(function(){ $(".btn").click(function(){ $("#mymodal").modal(); }); }); </script>关键类名：.modal > .modal-dialog > .modal-content > .modal-header + .modal-body + .modal-footer
关键点：触发按钮上的属性“data-toggle=modal”和"data-target=#id",其中前者的值必须时“modal”，后者可以是模态框的id值，也可以是其他css选择器
另外：模态框的触发器还可以是<a>元素，使用时可以用href代替data-target
modal-lg 大模态框
modal-sm 小模态框
添加的对象为类名为modal-dialog的元素
模态框弹出时的淡入淡出的动画效果通过类名fade'控制
添加.fade’增加动画效果，不想要动画效果删除即可
属性设置
使用方法：
$(function(){ $(".btn").click(function(){ $("#mymodal").modal({ keyboard:fal }); });});参数设置
事件设置
调用方法：
$('#mymodal').on('hidden.bs.modal', function (e) { // 处理代码...})
本文发布于:2023-04-03 14:37:52，感谢您对本站的认可！
本文链接：https://www.wtabcd.cn/fanwen/zuowen/4ca3e46ace4173dd5d4198b822872cf4.html
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，我们将在24小时内删除。
本文word下载地址：bootstrap3.doc
本文 PDF 下载地址：bootstrap3.pdf
| 留言与评论（共有 0 条评论） |
