BootStrap入门教程 (四)
上讲回顾：Bootstrap组件丰富同时具有良好可扩展性，能够很好地应用在生产环境。这些组件包括按钮(Button),导航(Navigation)，缩略图(thumbnails),提醒(Alert)，进度条(progress bar)等，能够很好减少前端工程师的代码量，实现更加丰富充实的页面。
Bootstrap作为一套良好的前端工具，要实现现代的动态页面效果，javascript插件是必不可少的。它提供了12个基于JQuery类库的插件，包括模态窗口(Modals),滚动监控(Scrollspy),标签效果(Tabs),提示效果(Tooltip),“泡芙”效果(popovers),警告区域(Alerts),折叠效果(Collapse),旋转木马(carousel),输入提示(typeahead)等.这些内容会分作两讲来阐述，本讲将深入讲解modals等插件。在bootstrap中所有涉及动画效果的javascript插件，都必须先引用Transitions JS，包括modals,alerts等来实现淡出效果。
1.模态窗口(Modals)
模态窗口是指除非采取有效的关闭手段，用户的鼠标焦点或者输入光标将一直停留在其上的窗口(对话框).Bootstrap对于模态窗口的实现十分精简灵活，用户只需要使用少量的代码和智能的默认设置，即能实现传统实现传统的Javascript效果的模态窗口。默认的Bootstrap模态窗口效果，包括对话框从屏幕上方落下，屏幕其他区域变暗淡，模态窗口的隐藏等。这些效果分别对应.modal .fade .hide 这些类。我们可以不用写任何javascript代码来实现Modal效果，只需要将data-toggle="modal"放置于在触发控制要素(如按钮，超链接等)，并指定它的Modal窗口的ID链接(data-target="#mymodal"，href="#mymodal")。当这些控制要素被触发的时候，modal窗口就会出现了。模式窗口的内容可以非常丰富，这些内容都需要包括在modal的div内，并可以定义modal窗口的头部，内容和脚部。
如果使用Jquery调用Modal，也只需要一行javascript代码，
$('#myModal').modal(options)
更多相关文章
- jQuery学习21---简单动画效果,show,hide,slideUp,slideDown,fade
- 使用jquery animate（）实现对文本的反弹效果？
- 页面加载后的JQuery（窗口）.load？
- jQuery弹出窗口不能打开。
- 如何在向下滚动时执行TEXT淡入效果
- 【jQuery】调用delay()方法延时执行动画效果
- 随着窗口变大，div的左边距也拉大
- 谷歌地图信息窗口按钮没有显示？
- 如何使用智能管理员的注销警告弹出窗口来处理其他请求？