BootStrap入门教程(8)

测试这是alert info提醒区域.

alert例子

测试这是alert error提醒区域.

alert例子

测试这是alert success提醒区域.

4.2 进度条(Processing Bar)

进度条，这也是不可缺少的页面要素，在重定向，载入等页面都经常用到，Bootstrap提供多种漂亮、简单、多种颜色的进度条。不过其中条纹和动画效果的进度条不支持IE浏览器，原因是进度条使用了CSS3的渐变(gradients)、透明度(transitions)、动画效果(animations)来实现它们的效果。IE7-9和旧版的Firefox都不支持这些特性，所以在实现进度条的时候请注意浏览器支持程度。如图3-13所示，

图3-13 进度条(Processing Bar)

代码片段如下：

View Code

基础

默认的进度条

动画效果

带有条纹的动画效果进度条 (no IE).

Striped

使用透明度来生成条纹效果 (no IE).

4.3 杂项(Miscellaneous)

Bootstrap的杂项包括两个轻量级的组件，一个是well，用于表达插入效果。另一个是关闭图标，可以用于提醒区域，模式窗口(Modal)的关闭。Modal将会在下讲的javascript pluging中讲解到。如图3-14所示：

图3-14 杂项(Miscellaneous)

代码如下：

View Code

Wells

使用Well来显示插入效果

关闭图标

用于提醒区域，模式窗口(Modal)的关闭.

参考文献与延伸阅读：

1.CSS3 Tutorials http://www.w3schools.com/css3/default.asp

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窗口的ID链接(data-target=\，href=\。当这些控制要素被触发的时候，modal窗口就会出现了。模式窗口的内容可以非常丰富，这些内容都需要包括在modal的div内，并可以定义modal窗口的头部，内容和脚部。

如果使用Jquery调用Modal，也只需要一行javascript代码，

$('#myModal').modal(options)

该选项包括backdrop,keyboard,show三项，主要控制模态窗口的动作。Modal的方法主要包括

show,hide,toogle等，主要用于模态窗口的状态控制。Modal的触发事件包括shown,hiden等，主要用于控制模态窗口的功能触发控制。具体效果可以到官方文档的该处尝试一下，点击Launch demo modal按钮即可。Modal的实现如图4-1所示：

图4-1 模态窗口(Modal)

代码如下：

View Code

添加收藏: 我买过这个服务

求评价(@^_^@) :

Close

2.滚动监控(Scrollspy)

滚动监控是用来自动更新导航位置基于用户页面滚动的位置。实现该效果，也只需要在你想监控的滚动要素上，添加data-spy=\，一般是在body上添加。使用jquery同样调用方法比较简单，只需要一行代码：$('#navbar').scrollspy() .该插件只有refresh方法，offset属性等。具体效果可以到官方文档的该处尝试一下。

效果如图4-2所示：

图4-2 滚动监控(Scrollspy)

代码如下：

View Code

class=\

data-toggle=\Dropdown