Bootstrap_07_(插件之模态框&工具提示)
2019-03-06 19:13
417 查看
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”>
相关文章推荐
- bootstrap中jquery插件——警告框、工具提示框、弹出框、模态框
- Bootstrap 提示工具(Tooltip)插件
- Bootstrap 提示工具(Tooltip)插件方法的用法
- 响应式前端框架Bootstrap系列(18)提示工具(Tooltip)插件
- bootstrap标签页和工具提示插件
- Bootstrap 插件-提示工具
- JBox - 模态窗口,工具提示和消息 jQuery 插件
- Bootstrap 提示工具(Tooltip)插件的事件
- Bootstrap插件(四)——工具提示(tooltip.js)
- Bootstrap3.0学习第二十一轮(JavaScript插件——工具提示)
- Bootstrap3.0学习第二十一轮(JavaScript插件——工具提示)
- Bootstrap学习总结笔记(18)-- 基本插件之Tooltip提示工具
- 【bootstrap教程】Bootstrap 工具提示(Tooltip)插件
- Bootstrap3.0学习第二十一轮(JavaScript插件——工具提示)
- Bootstrap 提示工具(Tooltip)插件
- Bootstrap标签页和工具提示插件
- BootStrap入门教程 (四) :JQuery类库插件(模态窗口,滚动监控,标签效果,提示效果,“泡芙”效果,警告区域,折叠效果,旋转木马,输入提示)
- 第二百四十五节,Bootstrap标签页和工具提示插件
- Bootstrap 提示工具和弹出框(Popover)插件
- Bootstrap的js插件之工具提示(tooltip)