Bootstrap_07_(插件之模态框&工具提示)

Bootstrap_07_(插件之模态框&工具提示)

一．模态框
1.基本实例
(1)语法格式:

(2)注意:①点击打开:data-toggle=”modal” data-target=”#模态框ID”
②关闭模态框，关闭按钮使用:data-dismiss=”modal”
③tabindex=”-1”:按esc键可关闭模态框
2.模态窗大小
(1)大窗口:class=”modal-dialog modal-lg”
(2)默认:class=”modal-dialog”
(3)小窗口:class=”modal-dialog modal-sm”
3.淡入淡出效果
(1)<div class=”modal fade”>
4.主体部分使用栅格系统
(1)

栅格

5.使用JS方式 (1)语法格式 $(“#模态框ID”).modal({ Show:false, Backdrop:false, ... }); (2)属性 ①show =>true:模态框初始化之后就立即显示出来;false反之 ②backdrop => 1.true:默认表示背景存在黑灰透明遮罩,且单击空白背 景可关闭弹框。 2.false:表示背景不存在黑灰透明遮罩,且点击空白背 景不可关闭。 3.字符串”static”:表示背景存在黑灰透明遮罩,且点击 空白背景不可关闭弹窗。 ③keyboard(在tabindex=’-1’的前提下)=>1.true:按esc会关闭窗口 2.false:按esc不会关闭窗口 ④remote=>url路径,加载url内容到modal-content内容容器中 6.事件 ①show.bs.modal =>弹窗前，在show方法调用时立即触发 ②shown.bs.modal =>弹窗后，在模态框完全显示出来,并且等css动画 完成之后触发. ③hide.bs.modal =>关闭前,在hide方法调用时,但还未关闭隐藏时 触发 ④hidden.bs.modal =>关闭后，在模态框完全隐藏时，并且等css动画 完成之后触发. ⑤格式: $(“#模态框ID”).on(‘show.bs.modal’,function(){

})
二．工具提示
1.第一步
①HTMLS
2.第二步
①$(“a”).tooltip();
3.显示在下/左/右
①加上data-placement=”bottom/left/right”
三.标签页(相似于选项卡)
1.组成
①标签页功能区:

})
②显示完tab时触发
$(“#nav a”).on(“shown.bs.tab”,function(){

})

四.滚动监听
1.导航区域
①<nav class=”navbar navbar-default” id=”myNav”>

标题