蜀中谋士: 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)

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

图4-1 模态窗口(Modal)

代码如下：

View Code

2.滚动监控(Scrollspy)

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

效果如图4-2所示：

图4-2 滚动监控(Scrollspy)

代码如下：

View Code

3.标签效果(Tabs)

标签插件添加了快速的动态的tab和pill，来实现过渡页面内容的效果。同样的，我们可以不用写任何javascript代码来实现该效果，我们只需要在tab或者piil页面要素上简单地添加上nav 和nav-tabs并引用该js文件即可。同时可以使用ul标签来样式化你的要素。具体效果可以到官方文档的该处尝试一下。效果如图4-3所示：

图4-3 标签效果(Tabs)

　　　代码如下：

View Code

4.提示效果(Tooltip)与“泡芙”效果(popovers)

4.1 提示效果(Tooltip)

提示效果，就是用户鼠标划过或者放在某些连接上，浮现的内容提示和补充。Bootstrap2.0的Tooltip的实现，受Jason Frame写的出色的jQuery.tipsy插件所启发。该版本的Tooltips 不再依赖于图片，而是使用CSS3的动画和数据属性。与本文上述的其他插件不同的是，tooltip的触发事件，必须使用javascript代码实现。我们先来看Tooltip的html写法：

<a href="#" rel="tooltip" title="first tooltip">别摸我</a>

基于性能的原因，提示效果(Tooltip)和“泡芙”效果(popovers)都在属性中内置了数据选择器，我们可以指定css或者jquery选择器来使用它们。触发tooltip，只需要一行代码：

$('#example').tooltip(options)

它的属性选项包括：animation,placement,selector,trigger,delay等。animation是用来实现提示的淡出css效果，placement则控制提示出现的位置(top,button,left等)。selector选项就是提供给用户，以控制tooltip出现在(委派于/装饰与)页面具体的某个目标上，默认是false。trigger是触发tooltip的鼠标或者键盘事件类型，包括hover,focus,maual等。delay则是控制tooltip的显示和延迟的时间变量(ms)，形式可以是这样：delay: { show: 500, hide: 100 }。

tooltip效果如图4-4所示：

图4-4 提示效果(Tooltip)

代码如下所示：

View Code
 <div class="tooltip-demo well">
            <p class="muted" style="margin-bottom: 0;">Tight pants next level keffiyeh <a href="#" rel="tooltip" title="first tooltip">you probably</a> haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown. Farm-to-table seitan, mcsweeney's fixie sustainable quinoa 8-bit american apparel <a href="#" rel="tooltip" title="Another tooltip">have a</a> terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, four loko mcsweeney's cleanse vegan chambray. A really ironic artisan <a href="#" rel="tooltip" title="Another one here too">whatever keytar</a>, scenester farm-to-table banksy Austin <a href="#" rel="tooltip" title="The last tip!">twitter handle</a> freegan cred raw denim single-origin coffee viral.
            </p>
          </div>

4.2 “泡芙”效果(popovers)

“泡芙”效果就是将一些次要的内容作为一个小的叠加层展添加到具体页面要素上，实现ipad风格的提示效果(实际上就是放大版的tooltip)。因此实现“泡芙”效果(popovers)首先需要引用tooltips插件。我们先来看看“泡芙”效果(popovers)的html的写法。

<a class="btn  btn-success" type="submit" rel="popover" title="推荐到射交网络" data-content="你以为我会告诉你渣浪老删帖吗？！">  推荐</a>

对比tooltip的html的markup，我们可以看到两者的差别就只有在于rel的类型而已。同样的，触发popovers，只需要一行代码：

$('#example').popover(options)

而它的属性与tooltip几乎完全一样……只多一个content，用来存储叠加的内容。效果如图4-5所示：

图4-5 “泡芙”效果(popovers)

代码如下所示：

View Code
<div class="span3  ">
 <a class="btn  btn-success" type="submit" rel="popover" title="推荐到射交网络" data-content="你以为我会告诉你渣浪老删帖吗？！"><i class=" icon-white icon-share"></i>  推荐</a>
</div>