BootStrap入门教程==分析和总结.docx
BootStrap
BootStrap入门教程.
Bootstrap组件丰富同时具有良好可扩展性,能够很好地应用在生产环境。这些组件包括按钮(Button),导航(Navigation),缩略图(thumbnails),提醒(Alert),进度条(progressbar)等,能够很好减少前端工程师的代码量,实现更加丰富充实的页面。
Bootstrap作为一套良好的前端工具,要实现现代的动态页面效果,javascript插件是必不可少的。它提
供了12个基于JQuery类库的插件,包括模态窗口(Modals),滚动监控(Scrollspy),标签效果(Tabs),提示效果(Tooltip),“泡芙”效果(popovers),警告区域(Alerts),折叠效果(Collapse),旋转木马(carousel),输入提示(typeahead)等.这些内容会分作两讲来阐述,本讲将深入讲解modals等插件。在bootstrap中所有涉及动画
效果的javascript插件,都必须先引用TransitionsJS,包括modals,alerts等来实现淡出效果。
模态窗口
(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)
该选项包括backdrop,keyboard,show三项,主要控制模态窗口的动作。Modal的方法主要包括show,hide,toogle等,主要用于模态窗口的状态控制。Modal的触发事件包括shown,hiden等,主要用于控
制模态窗口的功能触发控制。具体效果可以到官方文档的该处尝试一下,点击Launchdemomodal按钮即可。Modal的实现如图4-1所示:
图4-1模态窗口(Modal)
代码如下:
!--ratingmodalscontent--
divid=ratyServiceclass=modalhidefade
divclass=modal-header
buttontype=buttonclass=closedata-dismiss=modaltimes;/button
h3添加收藏:我买过这个服务/h3
/div!--Modalheader--
divclass=modal-body
divclass=row
div class=span1/div
divclass=span4
h3求评价(@^_^@):/h3
/div
div class=span4id=ratingstar /div
div class=span1id=target/div
/div
/div!--Modalbody--
divclass=modal-footer
ahref=#class=btndata-dismiss=modalClose/a
ahref=#class=btnbtn-primarySavechanges/a
/div!--Modalfooter--
/div!--Modal--
滚动监控
(Scrollspy)
滚动监控是用来自动更新导航位置基于用户页面滚动的位置。实现该效果,也只需要在你想监控的滚动要素上,添加data-spy=scroll,一般是在body上添加。使用jquery同样调用方法比较简单,只需要一行代码:$(#navbar).scrollspy().该插件只有refresh方法,offset属性等。具体效果可以到官方文档的该处尝试一下。
效果如图4-2所