文档详情

BootStrap入门教程==分析和总结.docx

发布:2024-03-11约1.12万字共9页下载文档
文本预览下载声明

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所

显示全部
相似文档