上講回顧：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--> <div id="ratyService" class="modal hide fade"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">×</button> <h3>添加收藏: 我買過這個服務</h3> </div><!--Modal header--> <div class="modal-body"> <div class="row"> <div class="span1"></div> <div class="span4 "> <h3>求評價(@^_^@) : </h3> </div> <div class="span4" id="ratingstar" ></div> <div class="span1" id="target"></div> </div> </div><!--Modal body--> <div class="modal-footer"> <a href="#" class="btn" data-dismiss="modal" >Close</a> <a href="#" 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
<div id="navbarExample" class="navbar navbar-static"> <div class="navbar-inner"> <div class="container" style="width: auto;"> <a class="brand" href="#">Project Name</a> <ul class="nav"> <li><a href="#fat">@fat</a></li> <li><a href="#mdo">@mdo</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a> <ul class="dropdown-menu"> <li><a href="#one">one</a></li> <li><a href="#two">two</a></li> <li class="divider"></li> <li><a href="#three">three</a></li> </ul> </li> </ul> </div> </div> </div> <div data-spy="scroll" data-target="#navbarExample" data-offset="0" class="scrollspy-example"> <h4 id="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> <h4 id="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> <h4 id="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> <h4 id="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> <h4 id="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
<ul id="myTab" class="nav nav-tabs"> <li class="active"><a href="#home" data-toggle="tab">Home</a></li> <li><a href="#profile" data-toggle="tab">Profile</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a> <ul class="dropdown-menu"> <li><a href="#dropdown1" data-toggle="tab">@fat</a></li> <li><a href="#dropdown2" data-toggle="tab">@mdo</a></li> </ul> </li> </ul> <div id="myTabContent" class="tab-content"> <div class="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> <div class="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> <div class="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> <div class="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> </div> </div>
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>
參考文獻與延伸閱讀：
1.Modal window http://en.wikipedia.org/wiki/Modal_window
2. 模態窗口和非模態窗口 http://tgyd2006.iteye.com/blog/211497
3.Popover http://en.wikipedia.org/wiki/Popover
本作品由VentLam創作，采用知識共享署名-非商業性使用-相同方式共享 2.5 中國大陸許可協議進行許可。