<divclass="span3 well pricehover">
<h2>关闭图标</h2>
<p>用于提醒区域，模式窗口(Modal)的关闭.</p>
<p><buttonclass="close" style="float: none;">×</button></p>
</div>
参考文献与延伸阅读：
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" 放置于在触发控制要素(如按钮，超链接等)，并指定它的 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
<!--rating modal's content-->
<divid="ratyService" class="modal hide fade">
<divclass="modal-header">
<buttontype="button" class="close" data-dismiss="modal">×</button>
<h3>添加收藏: 我买过这个服务</h3>
</div><!--Modal header-->
<divclass="modal-body">
<divclass="row">
<div class="span1"></div>
<divclass="span4 ">
<h3>求评价(@^_^@) : </h3>
</div>
<div class="span4" id="ratingstar" ></div>
<div class="span1" id="target"></div>
</div>
</div><!--Modal body-->
<divclass="modal-footer">
<ahref="#" class="btn" data-dismiss="modal" >Close</a>
<ahref="#" class="btn btn-primary">Save changes</a>
</div><!--Modal footer-->
</div> <!--Modal-->
2.滚动监控(Scrollspy)
滚动监控是用来自动更新导航位置基于用户页面滚动的位置。实现该效果，也只需要在你想监控的 滚动要素上，添加 data-spy="scroll"，一般是在 body 上添加。使用 jquery 同样调用方法比较简单，只需要一行 代码：$('#navbar').scrollspy() .该插件只有 refresh 方法，offset 属性等。具体效果可以到官方文档的该处尝试一 下。
效果如图4-2所示：
图4-2 滚动监控(Scrollspy) 代码如下：
View Code
<divid="navbarExample" class="navbar navbar-static">
<divclass="navbar-inner">
<divclass="container" style="width: auto;">
<aclass="brand" href="#">Project Name</a>
<ulclass="nav">
<li><ahref="#fat">@fat</a></li>
<li><ahref="#mdo">@mdo</a></li>
<liclass="dropdown">
<ahref="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown
<bclass="caret"></b></a>
<ulclass="dropdown-menu">
<li><ahref="#one">one</a></li>
<li><ahref="#two">two</a></li>
<liclass="divider"></li>
<li><ahref="#three">three</a></li>
</ul>
<divdata-spy="scroll" data-target="#navbarExample" data-offset="0"
class="scrollspy-example">
<h4id="fat">@fat</h4>
<p> Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.
</p>
<h4id="mdo">@mdo</h4>
<p> Veniam marfa mustache skateboard, adipisicing fugiat velit pitchfork beard.
Freegan beard aliqua cupidatat mcsweeney's vero. Cupidatat four loko nisi, ea helvetica nulla carles. Tattooed cosby sweater food truck, mcsweeney's quis non freegan vinyl. Lo-fi wes anderson +1 sartorial. Carles non aesthetic exercitation quis gentrify. Brooklyn adipisicing craft beer vice keytar deserunt.
</p>
<h4id="one">one</h4>
<p> Occaecat commodo aliqua delectus. Fap craft beer deserunt skateboard ea.
Lomo bicycle rights adipisicing banh mi, velit ea sunt next level locavore single-origin coffee in magna veniam. High life id vinyl, echo park consequat quis aliquip banh mi pitchfork. Vero VHS est adipisicing. Consectetur nisi DIY minim messenger bag. Cred ex in, sustainable delectus consectetur fanny pack iphone.
</p>
<h4id="two">two</h4>
<p> In incididunt echo park, officia deserunt mcsweeney's proident master cleanse thundercats sapiente veniam. Excepteur VHS elit, proident shoreditch +1 biodiesel laborum craft beer. Single-origin coffee wayfarers irure four loko, cupidatat terry richardson master cleanse. Assumenda you probably haven't heard of them art party fanny pack, tattooed nulla cardigan tempor ad. Proident wolf nesciunt sartorial keffiyeh eu banh mi sustainable. Elit wolf voluptate, lo-fi ea portland before they sold out four loko. Locavore enim nostrud mlkshk brooklyn nesciunt.
</p>
<h4id="three">three</h4>
<p> Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan
ullamco consequat.
</p>
<p>Keytar twee blog, culpa messenger bag marfa whatever delectus food truck. Sapiente synth id assumenda. Locavore sed helvetica cliche irony, thundercats you probably haven't heard of them consequat hoodie gluten-free lo-fi fap aliquip. Labore elit placeat before they sold out, terry richardson proident brunch nesciunt quis cosby sweater pariatur keffiyeh ut helvetica artisan.
Cardigan craft beer seitan readymade velit. VHS chambray laboris tempor veniam. Anim mollit minim commodo ullamco thundercats.
</p>
</div>
3.标签效果(Tabs)
标签插件添加了快速的动态的 tab 和 pill，来实现过渡页面内容的效果。同样的，我们可以不 用写任何 javascript 代码来实现该效果，我们只需要在 tab 或者 piil 页面要素上简单地添加上 nav 和 nav-tabs 并引用该 js 文件即可。同时可以使用 ul 标签来样式化你的要素。具体效果可以到官方文档的该处尝试一下。
效果如图4-3所示：
图4-3 标签效果(Tabs) 代码如下：
View Code
<ulid="myTab" class="nav nav-tabs">
<liclass="active"><ahref="#home" data-toggle="tab">Home</a></li>
<li><ahref="#profile" data-toggle="tab">Profile</a></li>
<liclass="dropdown">
<ahref="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown
<bclass="caret"></b></a>
<ulclass="dropdown-menu">
<li><ahref="#dropdown1" data-toggle="tab">@fat</a></li>
<li><ahref="#dropdown2" data-toggle="tab">@mdo</a></li>
</ul>
</li>
</ul>
<divid="myTabContent" class="tab-content">
<divclass="tab-pane fade in active" id="home">
<p>Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu
stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.</p>
</div>
<divclass="tab-pane fade" id="profile">
<p>Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia yr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bit, sustainable jean shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party scenester stumptown, tumblr butcher vero sint qui sapiente accusamus tattooed echo park.</p>
</div>
<divclass="tab-pane fade" id="dropdown1">
<p>Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo retro fanny pack lo-fi farm-to-table readymade. Messenger bag gentrify pitchfork tattooed craft beer, iphone skateboard locavore carles etsy salvia banksy hoodie helvetica. DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred pitchfork. Williamsburg banh mi whatever gluten-free, carles pitchfork biodiesel fixie etsy retro mlkshk vice blog. Scenester cred you probably haven't heard of them, vinyl craft beer blog stumptown. Pitchfork sustainable tofu synth chambray yr.</p>
</div>
<divclass="tab-pane fade" id="dropdown2">
<p>Trust fund seitan letterpress, keytar raw denim keffiyeh etsy art party before they sold out master cleanse gluten-free squid scenester freegan cosby sweater. Fanny pack portland seitan DIY, art party locavore wolf cliche high life echo park Austin. Cred vinyl keffiyeh DIY salvia PBR, banh mi before they sold out farm-to-table VHS viral locavore cosby sweater. Lomo wolf viral, mustache readymade thundercats keffiyeh craft beer marfa ethical. Wolf salvia freegan, sartorial keffiyeh echo park vegan.</p> Tooltip 的实现，受 Jason Frame 写的出色的 jQuery.tipsy 插件所启发。该版本的 Tooltips 不再依赖于图片，而是 使用 CSS3的动画和数据属性。与本文上述的其他插件不同的是，tooltip 的触发事件，必须使用 javascript 代码
实现。我们先来看 Tooltip 的 html 写法：
<ahref="#" 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
<divclass="tooltip-demo well">
<pclass="muted" style="margin-bottom: 0;">Tight pants next level keffiyeh <ahref="#"
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 <ahref="#" 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
<ahref="#" rel="tooltip" title="Another one here too">whatever keytar</a>, scenester
farm-to-table banksy Austin <ahref="#" 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 的写法。
<aclass="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<divclass="span3 ">
<aclass="btn btn-success" type="submit" rel="popover" title="推荐到射交网络" data-content="你 以为我会告诉你渣浪老删帖吗？！"><iclass=" icon-white icon-share"></i> 推荐</a>
</div>
参考文献与延伸阅读：
1.Modal window http://en.wikipedia.org/wiki/Modal_window 2. 模态窗口和非模态窗口