服务器评测
2011年，twitter的“一小撮”工程师为了提高他们内部的分析和管理能力，用业余时间为他们的产品构建了一套易用、优雅、灵活、可扩展的前端工具集–BootStrap。Bootstrap由MARK OTTO和Jacob Thornton所设计和建立，在github上开源之后，迅速成为该站上最多人watch&fork的项目。大量工程师踊跃为该项目贡献代码，社区惊人地活跃，代码版本进化非常快速，官方文档质量极其高(可以说是优雅)，同时涌现了许多基于Bootstrap建设的网站：界面清新、简洁;要素排版利落大方。如下图所示：
https://kippt.com/
http://www.fleetio.com/
GitHub上这样介绍 bootstrap：简单灵活可用于架构流行的用户界面和交互接口的html,css,javascript工具集。基于html5、css3的bootstrap，具有大量的诱人特性：友好的学习曲线，卓越的兼容性，响应式设计，12列格网，样式向导文档，自定义JQuery插件，完整的类库，基于Less等。本系列教程遵循官方文档结构来介绍bootstrap，包括手脚架（Scaffolding),基础CSS,组件,javascript插件，使用LESS与自定义.本文主要介绍Bootstrap的基础布局–Scaffolding.
Bootstrap建立了一个响应式的12列格网布局系统，它引入了fixed和fluid-with两种布局方式。我们从全局样式(Global Style),格网系统(Grid System),流式格网(Fluid grid System),自定义(Customing),布局(Layouts),响应式设计(Responsive Design)这六五个方面深入讲解Boostrap的scaffolding.
Bootstrap 的详细介绍：请点这里
Bootstrap 的下载地址：请点这里
- 全局样式(Global Style).Bootstrap要求html5的文件类型，所以必须在每个使用bootstrap页面的开头都引用:
<!DOCTYPE html> <html lang="en"> ... </html>
同时，它通过Bootstrap.less文件来设置全局的排版和连接显示风格.其中去掉了Body的margin，使用@baseFontFamily,@baseFontSize,@linkColor等变量来控制基本排版。
- 格网系统(Grid System).默认的Bootstrap格网系统提供一个宽达940像素的,12列的格网。这意味着你页面默认宽度是940px,最小的单元要素宽度是940/12px.Bootstrap能够使得你的网页可以更好地适应多种终端设备(平板电脑，智能手机等)。默认格网系统直观概念如图1-1所示：
图1-1 默认格网系统(Default Grid System) 以下简单的代码则是实现图1-1中，第三列的宽度为4和宽度为8的两个div.
<div class="row"> <div class="span4">...</div> <div class="span8">...</div> </div>
2.2 偏移列. 有时候，页面要素前面需要一些空白，bootstrap提供了偏移列来实现，如图1-2所示：
图1-２ 偏移列(Offset columns)
以下代码实现了是实现图1-2中，第一列的宽度为4和偏移度为4宽度为4的两个div.
<div class="row"> <div class="span4">...</div> <div class="span4 offset4">...</div> </div>
2.3 嵌套列. 嵌套列是容许用户实现更复杂的页面要素布局。在bootstrap中实现嵌套列非常简单，只需要在原有的div中加入.row 和相应的长度的span* div即可。 如图1-3所示：
图1-3 嵌套列(Nesting columns) 以下代码实现了是实现图1-3中，第一层的宽度为12和第二层两个宽度为6的两个div.
<div class="row"> <div class="span12"> Level 1 of column <div class="row"> <div class="span6">Level 2</div> <div class="span6">Level 2</div> </div> </div> </div>
嵌套的div长度之和不能大于它的父div，否则会溢出叠加。各位可以试试将第一层的div长度改为其他值，看看效果。
- 流式格网系统(Fluid grid system).它使用%，而不是固定的px,来确定页面要素的宽度.只需要简单的将.row 改成.row-fluid ，就可以将fixed行改为fluid.如图1-4所示：
图1-4 流式格网系统(Fluid grid system) 以下代码实现了是实现图1-4中，两个不同长度的流式页面要素.
<div class="row-fluid"> <div class="span4">...</div> <div class="span8">...</div> </div>
嵌套的流式格网和嵌套的固定格网，稍微有些不同。嵌套流式格网(Fluid nesting)的子要素不用匹配父要素的宽度，子要素用100%来表示占满父要素的页面宽度。
- 自定义格网(Grid customization).Bootstrap允许通过修改variables.less的参数值来自定义格网系统。主要包括如表1-1所示的变量：
变量 默认值 说明 @gridColumns12 列数 @gridColumnWidth60px 每列的宽度 @gridGutterWidth20px 列间距 表1-1 格网变量 我们通过修改以上值，并重新编译Bootstrap来实现自定义格网系统。如果添加新的列，需要同时修改grid.less.同样的,需要修改responsive.less来获得多设备兼容.
- 布局(Layout).本文最后我们讨论创建页面基础模板的布局。如前面所言，Bootstrap提供两种布局方式，包括固定(Fixed)和流式(Fliud)布局。如图1-5所示，左边为Fixed布局，右边为Fluid布局：
图1-5 布局(Layout) 固定布局代码如下：
<body> <div class="container"> ... </div> </body>
流式布局代码如下：
<div class="container-fluid"> <div class="row-fluid"> <div class="span2"> <!--Sidebar content--> </div> <div class="span10"> <!--Body content--> </div> </div> </div>
如果对Bootstrap提供的布局不够满意，可以参见Less Frame Work 提供的模板。
最后，再次强调，官方文档极其优秀，强烈推荐各位直接参考和学习之。http://twitter.github.com/bootstrap/index.html
参考文献与延伸阅读：
1.Bootstrap的来由和发展。http://www.alistapart.com/articles/building-twitter-bootstrap/
2.Less与Sass的介绍与对比.http://coding.smashingmagazine.com/2011/09/09/an-introduction-to-less-and-comparison-to-sass/
3.Html5模板 http://html5boilerplate.com/
4.Html5与Bootstrap混合项目(H5BP)https://gist.github.com/1422879
5.20个有用的Bootstrap资源 http://www.webresourcesdepot.com/20-beautiful-resources-that-complement-twitter-bootstrap/
6.Bootstrap按钮生成器 http://charliepark.org/bootstrap_buttons/
7.前后端结合讨论 http://stackoverflow.com/questions/9525170/backend-technology-for-front-end-technologies-like-twitter-bootstrap
8. Bootstrap英文教程 http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/stepping-out-with-bootstrap-from-twitter/
上讲回顾：Bootstrap的手脚架(Scaffolding)提供了固定(fixed)和流式(fluid)两种布局，它同时建立了一个宽达940px和12列的格网系统。
基于手脚架(Scaffolding)之上，Bootstrap的基础CSS(Base CSS)提供了一系列的基础Html页面要素，旨在为用户提供新鲜、一致的页面外观和感觉。本文将主要深入讲解排版(Typography),表格(Table),表单(Forms),按钮(Buttons)这四个方面的内容。
- 排版 (Typography)，它囊括标题(Headings),段落 (paragraphs), 列表(lists)以及其他内联要素。我们可以通过修改variables.less的两个变量:
@baseFontSize和@baseLineHeight来控制整体排版的样式。Bootstrap同时还用了一些其他的算术方法来创建所有类型要素的margin,padding,line-height等。
1.1 标题和段落使用常见的html<h*></h*>和<p></P>即可表现,可以不必考虑margin,padding。两者显示效果如图2-1所示：
图2-1 标题与段落(Headings¶graphs)
1.2 强调(Emphasis).使用<strong>和<em>两个标签，前者使用粗体，后者使用斜体来强调标签内容。请注意<strong>标签在html4中定义语气更重的强调文本；在 HTML 5 中，<strong> 定义重要的文本。这些短语标签也可以通过定义CSS的方式来丰富效果。更多短语标签请参见[1].缩写(abbreviations ).使用<abbr>，它重新封装了该标签，鼠标滑过会异步地显示缩写的含义。引入title属性来显示原文，使用.initialism类对缩写以大写方式显示。
1.3 引用文字(Blockquotes).使用<blockquote>标签和<small>两个标签，前者<blockquote>是引用的文字内容，后者<small>是可选的要素，能够添加书写式的引用，比如内容作者。如图2-2所示
图2-2 引用(Blockquotes)
代码片段如下所示：
<div class="row"> <div class="span6 "> <blockquote class="pull-right"> <p>凌冬将至. 我是黑暗中的利剑，长城上的守卫，抵御寒冷的烈焰，破晓时分的光线，唤醒眠者的号角，守护王国的坚盾。</p> 守夜人军团总司令.<small>蒙奇.D.<cite title="">路飞</cite></small> </blockquote> </div> <div class="span6 "> <blockquote > <p>凌冬将至. 我是黑暗中的利剑，长城上的守卫，抵御寒冷的烈焰，破晓时分的光线，唤醒眠者的号角，守护王国的坚盾。</p> 守夜人军团总司令.<small>蒙奇.D.<cite title="">路飞</cite></small> </blockquote> </div> </div>
1.4列表(lists).Bootstrap提供三种标签来表现不同类型的列表。<ul>表示无序列表，<ul class=”unstyled”>表示无样式的无序列表，<ol>表示有序列表，<dl>表示描述列表，<dl class=”dl-horizontal”>表示竖排描述列表。图2-3较好显示了这几种列表：
图2-3 列表(lists)
2.表格(Table).依然使用<table><tr><th><td>等标签来表现表格。主要提供了四个css的类来控制表格的边和结构。表2-1显示了bootstrap的table可选项。
|
名字 |
Class |
描述 |
|
Default |
None |
没有样式，只有行和列 |
|
Basic |
.table |
只有在行间有竖线 |
|
Bordered |
.table-bordered |
圆角和添加外边框 |
|
Zebra-stripe |
.table-striped |
为奇数行添加淡灰色的背景色 |
|
Condensed |
.table-condensed |
将横向的 padding 对切 |
表2-1 表格选项(Table Options)
我们可以将这些CSS类结合起来使用，如图2-4所示，显示一个混合的表格：
图2-4 表格(Table)
代码片段如下所示：
<div class="span8"> <form class="form-horizontal"> <fieldset> <div class="control-group"> <label class="control-label" for="focusedInput">Focused input</label> <div class="controls"> <input class="input-xlarge focused" id="focusedInput" type="text" value="This is focused…"> </div> </div> <div class="control-group"> <label class="control-label">Uneditable input</label> <div class="controls"> <span class="input-xlarge uneditable-input">Some value here</span> </div> </div> <div class="control-group"> <label class="control-label" for="disabledInput">Disabled input</label> <div class="controls"> <input class="input-xlarge disabled" id="disabledInput" type="text" placeholder="Disabled input here…" disabled> </div> </div> <div class="control-group"> <label class="control-label" for="optionsCheckbox2">Disabled checkbox</label> <div class="controls"> <label class="checkbox"> <input type="checkbox" id="optionsCheckbox2" value="option1" disabled> This is a disabled checkbox </label> </div> </div> <div class="control-group warning"> <label class="control-label" for="inputWarning">Input with warning</label> <div class="controls"> <input type="text" id="inputWarning"> <span class="help-inline">Something may have gone wrong</span> </div> </div> <div class="control-group error"> <label class="control-label" for="inputError">Input with error</label> <div class="controls"> <input type="text" id="inputError"> <span class="help-inline">Please correct the error</span> </div> </div> <div class="control-group success"> <label class="control-label" for="inputSuccess">Input with success</label> <div class="controls"> <input type="text" id="inputSuccess"> <span class="help-inline">Woohoo!</span> </div> </div> <div class="control-group success"> <label class="control-label" for="selectError">Select with success</label> <div class="controls"> <select id="selectError"> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> </select> <span class="help-inline">Woohoo!</span> </div> </div> <div class="form-actions"> <button type="submit" class="btn btn-primary">Save changes</button> <button class="btn">Cancel</button> </div> </fieldset> </form> </div>
3. 表单(Forms).Bootstrap的表单是非常惊艳的部分。最好的地方在于你如何使用这些hmtl标签，它都会有很好的表现效果，而且不需要其他多余的代码。无论多复杂的布局都可以根据这些简洁，可扩展，事件绑定的要素来轻易实现。主要提供了四四种表单选项，如表2-2所示：
|
名字 |
Class |
描述 |
|
Vertical (default) |
.form-vertical (not required) |
堆放式, 可控制的左对齐标签 |
|
Inline |
.form-inline |
左对齐标签和简约的内联控制块 |
|
Search |
.form-search |
放大的圆角，具有美感的搜索框 |
|
Horizontal |
.form-horizontal |
左漂浮, 右对齐标签 |
推荐到官方文档去体验下各种表单要素的真实效果，在chrome,Firefox等现代浏览器下显示十分优雅。同时可以使用.control-group来控制表单输入、错误等状态，需要wekit内核。如图2-5所示：
图2-5 表单状态控制
代码片段如下：
<div class="span8"> <form class="form-horizontal"> <fieldset> <div class="control-group"> <label class="control-label" for="focusedInput">Focused input</label> <div class="controls"> <input class="input-xlarge focused" id="focusedInput" type="text" value="This is focused…"> </div> </div> <div class="control-group"> <label class="control-label">Uneditable input</label> <div class="controls"> <span class="input-xlarge uneditable-input">Some value here</span> </div> </div> <div class="control-group"> <label class="control-label" for="disabledInput">Disabled input</label> <div class="controls"> <input class="input-xlarge disabled" id="disabledInput" type="text" placeholder="Disabled input here…" disabled> </div> </div> <div class="control-group"> <label class="control-label" for="optionsCheckbox2">Disabled checkbox</label> <div class="controls"> <label class="checkbox"> <input type="checkbox" id="optionsCheckbox2" value="option1" disabled> This is a disabled checkbox </label> </div> </div> <div class="control-group warning"> <label class="control-label" for="inputWarning">Input with warning</label> <div class="controls"> <input type="text" id="inputWarning"> <span class="help-inline">Something may have gone wrong</span> </div> </div> <div class="control-group error"> <label class="control-label" for="inputError">Input with error</label> <div class="controls"> <input type="text" id="inputError"> <span class="help-inline">Please correct the error</span> </div> </div> <div class="control-group success"> <label class="control-label" for="inputSuccess">Input with success</label> <div class="controls"> <input type="text" id="inputSuccess"> <span class="help-inline">Woohoo!</span> </div> </div> <div class="control-group success"> <label class="control-label" for="selectError">Select with success</label> <div class="controls"> <select id="selectError"> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> </select> <span class="help-inline">Woohoo!</span> </div> </div> <div class="form-actions"> <button type="submit" class="btn btn-primary">Save changes</button> <button class="btn">Cancel</button> </div> </fieldset> </form> </div> </div>
4.按钮(Buttons).Bootstrap提供多种样式的按钮，同样是通过CSS的类来控制,包括btn, btn-primary, btn-info,btn-success等不同颜色的按钮，亦可以简单通过.btn-large .btn-mini等CSS的class控制按钮大小，能够同时用在<a>,<button>,<input>标签上，非常简单易用。如图2-6所示，不同颜色的按钮：
图2-6 按钮(Buttons)
代码片段如下：
<table class="table table-bordered table-striped"> <thead> <tr> <th>Button</th> <th>class=""</th> <th>Description</th> </tr> </thead> <tbody> <tr> <td><button class="btn" href="#">Default</button></td> <td><code>btn</code></td> <td>Standard gray button with gradient</td> </tr> <tr> <td><button class="btn btn-primary" href="#">Primary</button></td> <td><code>btn btn-primary</code></td> <td>Provides extra visual weight and identifies the primary action in a set of buttons</td> </tr> <tr> <td><button class="btn btn-info" href="#">Info</button></td> <td><code>btn btn-info</code></td> <td>Used as an alternative to the default styles</td> </tr> <tr> <td><button class="btn btn-success" href="#">Success</button></td> <td><code>btn btn-success</code></td> <td>Indicates a successful or positive action</td> </tr> <tr> <td><button class="btn btn-warning" href="#">Warning</button></td> <td><code>btn btn-warning</code></td> <td>Indicates caution should be taken with this action</td> </tr> <tr> <td><button class="btn btn-danger" href="#">Danger</button></td> <td><code>btn btn-danger</code></td> <td>Indicates a dangerous or potentially negative action</td> </tr> <tr> <td><button class="btn btn-inverse" href="#">Inverse</button></td> <td><code>btn btn-inverse</code></td> <td>Alternate dark gray button, not tied to a semantic action or use</td> </tr> </tbody> </table>
如果需要更多样式的按钮，可以在这个网站来定制。 如果需要更多的整个网站的样式和风格，可以在这个和那个网站来定制。
参考文献与延伸阅读
1. M. Pilgrim, HTML5: up and running: Oreilly & Associates Inc, 2010
2. HTML 5 <caption> 标签 http://www.w3school.com.cn/html5/tag_caption.asp
3. StyleBootstrap http://stylebootstrap.info/
4. 基于wordpress的Bootstrap http://bootstrapwp.rachelbaker.me/
5.Why did Twitter release Bootstrap? http://www.quora.com/Why-did-Twitter-release-Bootstrap
上讲回顾：Bootstrap的基础CSS(Base CSS)提供了优雅，一致的多种基础Html页面要素，包括排版,表格,表单,按钮等,能够满足前端工程师的基本要素需求。
Bootstrap作为完整的前端工具集，内建了大量的强大优雅可重用的组件,包括按钮(Button),导航(Navigation),标签(Labels)，徽章(Badges)，排版(Typography)，缩略图( thumbnails),提醒(Alert)，进度条(progress bar)，杂项(Miscellaneous)。本讲将深入讲解这些内容。
1. 按钮(Button)
上讲最后提及到button的多种简单样式，然而在bootstrap中可以通过组合button，从而获得更多类似于工具条的功能，组件中的按钮可以组合成按钮组(button group)和按钮式下拉菜单(button drown menu).
(下一讲的Javascript Plugin会提及到更多的按钮的应用).
1.1 按钮组(button group)
按钮组顾名思义是将多个按钮集合成一个页面部件。只需要使用btn-group类和一系列的<a>或者<button>标签，就可以轻易地生成一个按钮组或者按钮工具条。关于btn-group的编程实践上：
- 建议在单一的按钮组中不要混合使用<a>和<button>标签，只用它们其中一个。
- 同一按钮组最好使用单一色
- 使用图标的时候要确保正确的引用位置
按钮组和按钮工具条都非常容易实现，如图3-1所示：
图3-1 按钮组(button group)
1.2 按钮式下拉菜单(button drown menu)
Bootstrap允许使用任意的按钮标签来触发一个下拉菜单，只需要将正确的菜单内容并置于在.btn-group类标签内。如图3-2所示：
图3-2 按钮下拉菜单
以上两种按钮组件，代码片段如下：
<div class="span4 well pricehover"> <h2>按钮组</h2> <div class="btn-group" style="margin: 9px 0;"> <button class="btn btn-large btn-primary">Left</button> <button class="btn btn-large btn-primary">Middle</button> <button class="btn btn-large btn-primary">Right</button> </div> </div> <div class="span4 well pricehover"> <h2>按钮工具条</h2> <div class="btn-toolbar"> <div class="btn-group"> <button class="btn">1</button> <button class="btn">2</button> <button class="btn">3</button> <button class="btn">4</button> </div> <div class="btn-group"> <button class="btn">5</button> <button class="btn">6</button> <button class="btn">7</button> </div> <div class="btn-group"> <button class="btn">8</button> </div> </div> </div> <div class="span8 well pricehover"> <h3>按钮下拉菜单</h3> <p></p> <div class="btn-toolbar" > <div class="btn-group"> <button class="btn dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li class="divider"></li> <li><a href="#">Separated link</a></li> </ul> </div><!-- /btn-group --> <div class="btn-group"> <button class="btn btn-primary dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li class="divider"></li> <li><a href="#">Separated link</a></li> </ul> </div><!-- /btn-group --> <div class="btn-group"> <button class="btn btn-danger dropdown-toggle" data-toggle="dropdown">Danger <span class="caret"></span></button> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li class="divider"></li> <li><a href="#">Separated link</a></li> </ul> </div><!-- /btn-group --> </div> <div class="btn-toolbar"> <div class="btn-group"> <button class="btn btn-warning dropdown-toggle" data-toggle="dropdown">Warning <span class="caret"></span></button> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li class="divider"></li> <li><a href="#">Separated link</a></li> </ul> </div><!-- /btn-group --> <div class="btn-group"> <button class="btn btn-success dropdown-toggle" data-toggle="dropdown">Success <span class="caret"></span></button> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li class="divider"></li> <li><a href="#">Separated link</a></li> </ul> </div><!-- /btn-group --> <div class="btn-group"> <button class="btn btn-info dropdown-toggle" data-toggle="dropdown">Info <span class="caret"></span></button> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li class="divider"></li> <li><a href="#">Separated link</a></li> </ul> </div><!-- /btn-group --> <div class="btn-group"> <button class="btn btn-inverse dropdown-toggle" data-toggle="dropdown">Inverse <span class="caret"></span></button> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li class="divider"></li> <li><a href="#">Separated link</a></li> </ul> </div><!-- /btn-group --> </div><!-- /btn-toolbar -->
同时bootstrap还有分隔符的下拉菜单和上拉菜单按钮，可以参考文档。
2.导航(Navigation)
2.1 轻量导航(Nav,tabs,and pills)
bootstrap的导航非常多样和灵活，允许使用同样的标签，不同的CSS类，带来不同风格的导航条，具有非常高的可定制性。所有的导航组件，包括tabs,pills,lists标签，都必须使用.nav的类实现基础的导航标签。除了我们常见的导航，还可以利用.nav-stacked类来实现堆叠式(stacked)–竖式的导航条。
如图3-3所示，展示了多种基础风格的导航。
图3-3 多种基础风格导航
代码片段如下：
<div class="row"> <div class="span5 well pricehover"> <h2>基础tabs</h2> <ul class="nav nav-tabs"> <li class="active"><a href="#">Home</a></li> <li><a href="#">Profile</a></li> <li><a href="#">Messages</a></li> </ul> </div> <div class="span5 well pricehover"> <h3>基础pills</h3> <ul class="nav nav-pills"> <li class="active"><a href="#">Home</a></li> <li><a href="#">Profile</a></li> <li><a href="#">Messages</a></li> </ul> </div> </div> <div class="row"> <div class="span5 well pricehover"> <h3>竖排tabs</h3> <ul class="nav nav-tabs nav-stacked"> <li class="active"><a href="#">Home</a></li> <li><a href="#">Profile</a></li> <li><a href="#">Messages</a></li> </ul> </div> <div class="span5 well pricehover"> <h3>竖排pills</h3> <ul class="nav nav-pills nav-stacked"> <li class="active"><a href="#">Home</a></li> <li><a href="#">Profile</a></li> <li><a href="#">Messages</a></li> </ul> </div> </div>
下拉菜单的导航条和列表式(Nav list)的导航条都是页面常用要素，Nav list 类似于OSX的Finder，可以带有图标。它们同样可以用.nav 作为基础类，来实现这些组件。同时还有各种tab风格的导航条，在下讲再补充。如图3-4所示：
图3-4 列表与下拉导航
代码依然简单，片段如下：
<div class="span5 well pricehover"> <h2>基础Nav List</h2> <ul class="nav nav-list"> <li class="nav-header">List header</li> <li class="active"><a href="#">Home</a></li> <li><a href="#">Library</a></li> <li><a href="#">Applications</a></li> <li class="nav-header">Another list header</li> <li><a href="#">Profile</a></li> <li><a href="#">Settings</a></li> <li class="divider"></li> <li><a href="#">Help</a></li> </ul> </div> <div class="span5 well pricehover"> <h3>图标List</h3> <ul class="nav nav-list"> <li class="nav-header">List header</li> <li class="active"><a href="#"><i class="icon-white icon-home"></i> Home</a></li> <li><a href="#"><i class="icon-book"></i> Library</a></li> <li><a href="#"><i class="icon-pencil"></i> Applications</a></li> <li class="nav-header">Another list header</li> <li><a href="#"><i class="icon-user"></i> Profile</a></li> <li><a href="#"><i class="icon-cog"></i> Settings</a></li> <li class="divider"></li> <li><a href="#"><i class="icon-flag"></i> Help</a></li> </ul> </div> </div> <div class="row"> <div class="span5 well pricehover"> <h3>pills式的下拉菜单</h3> <ul class="nav nav-pills"> <li class="active"><a href="#">Home</a></li> <li><a href="#">Help</a></li> <li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#">Dropdown <b class="caret"></b></a> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li class="divider"></li> <li><a href="#">Separated link</a></li> </ul> </li> </ul> </div> <div class="span5 well pricehover"> <h3>tab式的下拉菜单</h3> <ul class="nav nav-tabs"> <li class="active"><a href="#">Home</a></li> <li><a href="#">Help</a></li> <li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#">Dropdown <b class="caret"></b></a> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li class="divider"></li> <li><a href="#">Separated link</a></li> </ul> </li> </ul> </div>
2.2 导航条(Navbar)
最最重要的页面要素，莫过于页面头部的导航条，这是几乎任何页面都会使用到的。Bootstrap提供的基础样式的导航条，是目前互联网的流行的“硬又黑”，当然你可以用Less来定制它。我们要注意到导航条的基础类不再是.nav而是navbar。
，至于顶部或者底部，用navbar-fixed-top与navbar-fixed-bottom来置顶/底.同时可以在navbar中使用form要素，比如.navbar-form。同时支持响应式操作，通过.nav-collapse或者直接是.collapse类实现。如图3-5所示：
图3-5 导航条
代码片段如下：
<div class="span10 well pricehover"> <div class="navbar"> <div class="navbar-inner"> <div class="container"> <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </a> <a class="brand" href="#">Project name</a> <div class="nav-collapse"> <ul class="nav"> <li class="active"><a href="#">Home</a></li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li><a href="#">Link</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="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li class="divider"></li> <li class="nav-header">Nav header</li> <li><a href="#">Separated link</a></li> <li><a href="#">One more separated link</a></li> </ul> </li> </ul> <form class="navbar-search pull-left" action=""> <input type="text" class="search-query span2" placeholder="Search"> </form> <ul class="nav pull-right"> <li><a href="#">Link</a></li> <li class="divider-vertical"></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="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li class="divider"></li> <li><a href="#">Separated link</a></li> </ul> </li> </ul> </div><!-- /.nav-collapse --> </div> </div><!-- /navbar-inner --> </div><!-- /navbar --> </div>
2.3 面包屑导航(Breadcrumbs)与页码(Pagination)
- 面包屑导航(BreadCrumbs)导航用作显示用户在网站或者App的位置，关于Breadcrumbs 面包屑导航的优点与对SEO的作用，请参考这个页面。Bootstrap的“面包”用在代码仓库式的页面很优雅，具体实现如图3-6所示：
图3-6 面包屑导航(BreadCrumbs)
- 页码(Pagination)也是非常常用的页面要素，Bootstrap提供两种风格的翻页组件。一个是多页面导航，用于多个页码的跳转，它具有极简主义风格的翻页提示，能够很好应用在结果搜索页面；另一种则是Pager，是轻量级组件，可以快速翻动上下页，适用于个人博客或者杂志。如图3-7所示：
图3-7 页码(Pagination)
以上两种导航，代码片段如下：
<div class="span10 well pricehover"> <ul class="breadcrumb"> <li class="active">Home</li> </ul> <ul class="breadcrumb"> <li><a href="#">Home</a> <span class="divider">/</span></li> <li class="active">Library</li> </ul> <ul class="breadcrumb"> <li><a href="#">Home</a> <span class="divider">/</span></li> <li><a href="#">Library</a> <span class="divider">/</span></li> <li class="active">Data</li> </ul> </div> <div class="span5 well pricehover"> <div class="pagination"> <ul> <li class="disabled"><a href="#">«</a></li> <li class="active"><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#">4</a></li> <li><a href="#">»</a></li> </ul> </div> <div class="pagination"> <ul> <li><a href="#">«</a></li> <li><a href="#">10</a></li> <li class="active"><a href="#">11</a></li> <li><a href="#">12</a></li> <li><a href="#">»</a></li> </ul> </div> <div class="pagination"> <ul> <li><a href="#">«</a></li> <li class="active"><a href="#">10</a></li> <li class="disabled"><a href="#">...</a></li> <li><a href="#">20</a></li> <li><a href="#">»</a></li> </ul> </div> <div class="pagination pagination-centered"> <ul> <li class="active"><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#">4</a></li> <li><a href="#">5</a></li> </ul> </div> </div> <div class="span5 well pricehover"> <ul class="pager"> <li><a href="#">Previous</a></li> <li><a href="#">Next</a></li> </ul> <ul class="pager"> <li class="previous"><a href="#">← Older</a></li> <li class="next"><a href="#">Newer →</a></li> </ul> </div> </div>
3.标签(Label)、徽章(Badges)、排版(Typographic)与缩略图(Thumbnails)
3.1 标签(Label)与徽章(Badges)
标签是一个很好用的页面小要素，bootstrap具有多种颜色标签，表达不同的页面信息。只需要简单使用label标签即可。徽章是细小而简单的组件，用于指示或者计算某种类别的要素，在在email客户端很常见，实际上在一些签到式的网站(LBS)上也常常用到。如图3-8所示：
图3-8 标签(Label)与徽章(Badges)
代码片段如下：
<div class="span5 well pricehover"> <table class="table table-bordered table-striped"> <thead> <tr> <th>Labels</th> <th>Markup</th> </tr> </thead> <tbody> <tr> <td> <span class="label">Default</span> </td> <td> <code><span class="label">Default</span></code> </td> </tr> <tr> <td> <span class="label label-success">Success</span> </td> <td> <code><span class="label label-success">Success</span></code> </td> </tr> <tr> <td> <span class="label label-warning">Warning</span> </td> <td> <code><span class="label label-warning">Warning</span></code> </td> </tr> <tr> <td> <span class="label label-important">Important</span> </td> <td> <code><span class="label label-important">Important</span></code> </td> </tr> <tr> <td> <span class="label label-info">Info</span> </td> <td> <code><span class="label label-info">Info</span></code> </td> </tr> <tr> <td> <span class="label label-inverse">Inverse</span> </td> <td> <code><span class="label label-inverse">Inverse</span></code> </td> </tr> </tbody> </table> </div> <div class="span5 well pricehover"> <table class="table table-bordered table-striped"> <thead> <tr> <th>Name</th> <th>Example</th> <th>Markup</th> </tr> </thead> <tbody> <tr> <td> Default </td> <td> <span class="badge">1</span> </td> <td> <code><span class="badge">1</span></code> </td> </tr> <tr> <td> Success </td> <td> <span class="badge badge-success">2</span> </td> <td> <code><span class="badge badge-success">2</span></code> </td> </tr> <tr> <td> Warning </td> <td> <span class="badge badge-warning">4</span> </td> <td> <code><span class="badge badge-warning">4</span></code> </td> </tr> <tr> <td> Important </td> <td> <span class="badge badge-important">6</span> </td> <td> <code><span class="badge badge-important">6</span></code> </td> </tr> <tr> <td> Info </td> <td> <span class="badge badge-info">8</span> </td> <td> <code><span class="badge badge-info">8</span></code> </td> </tr> <tr> <td> Inverse </td> <td> <span class="badge badge-inverse">10</span> </td> <td> <code><span class="badge badge-inverse">10</span></code> </td> </tr> </tbody> </table> </div>
3.2 排版(Typographic)
我们在第一讲就提及到排版(Typographic)，这里主要是涉及到两个排版组件:Hero-unit,Page-header.Hero-unit是一个轻量级的可扩展的组件，主要用于市场推广网站显示它们大量的要素。而Page-header则是简单为页面段落的头部设置一个合适的空间和排版形式。如图3-9所示：
图3-9 排版(Typographic)
代码片段如下：
<div class="container-fliud"> <div class="row-fliud"> <div class="span5 pricehover hero-unit"> <h1>Hello, world!</h1> <p>简单的hero unit.</p> </div> </div> <div class="row-fliud"> <div class="span5well pricehover"> <div class="page-header"> <h1> page header 例子 <small>Subtext for header</small></h1> </div> 半小时左右，每25分钟集中精力工作，然后休息5分钟。哪怕工作没有 完成，也要定时休息，然后再进入下一个番茄时间。 </div> </div>
3.3 缩略图(Thumbnails)
缩略图，可以作为图片，视频，文字的格网结构展示。实现默认形式的bootstrap缩略图，只需要简单的thumbnails标签。Thumbnails多应用于图片、视屏的搜索结果等页面，还可以链接到其他页面。同样的它具有很好的可定制性，可以将文章片段，按钮等标签融入缩略图，同时可以混合与匹配不同大小的缩略图。如图3-10,3-11所示：
图3-10 缩略图1(thumbnails)
图3-11 缩略图2(thumbnails)
代码片段如下：
<div class="span6"> <h2>环绕式缩略图</h2> <ul class="thumbnails"> <li class="span4"> <a href="#" class="thumbnail"> <img src="http://placehold.it/360x268" alt=""> </a> </li> <li class="span2"> <a href="#" class="thumbnail"> <img src="http://placehold.it/160x120" alt=""> </a> </li> <li class="span2"> <a href="#" class="thumbnail"> <img src="http://placehold.it/160x120" alt=""> </a> </li> <li class="span2"> <a href="#" class="thumbnail"> <img src="http://placehold.it/160x120" alt=""> </a> </li> <li class="span2"> <a href="#" class="thumbnail"> <img src="http://placehold.it/160x120" alt=""> </a> </li> <li class="span2"> <a href="#" class="thumbnail"> <img src="http://placehold.it/160x120" alt=""> </a> </li> </ul> <div class="span6 "> <h2>默认缩略图</h2> <ul class="thumbnails"> <li class="span3"> <a href="#" class="thumbnail"> <img src="http://placehold.it/260x180" alt=""> </a> </li> <li class="span3"> <a href="#" class="thumbnail"> <img src="http://placehold.it/260x180" alt=""> </a> </li> </ul> </div> <div class="span6 "> <h2>可定制</h2> <ul class="thumbnails"> <li class="span3"> <div class="thumbnail"> <img src="http://placehold.it/260x180" alt=""> <div class="caption"> <h5>Thumbnail label</h5> <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p> <p><a href="#" class="btn btn-primary">Action</a> <a href="#" class="btn">Action</a></p> </div> </div> </li> <li class="span3"> <div class="thumbnail"> <img src="http://placehold.it/260x180" alt=""> <div class="caption"> <h5>Thumbnail label</h5> <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p> <p><a href="#" class="btn btn-primary">Action</a> <a href="#" class="btn">Action</a></p> </div> </div> </li> </ul> </div>
4.提醒区域(Alerts),进度条(Progressing Bar)，杂项(Miscellaneous)
4.1提醒区域(Alerts)
在Bootstrap 2中重写了提醒区域的基础类，使用.alert简化了原有的.alert-message 类。为了使得组件更为简洁与耐用，Bootstrap去除了不同的alert block的外观，内容具有更多padding边距和可以显示更多文字。如图3-12所示：
图3-12 提醒区域(Alert)
代码片段如下：
<div class="span3 well pricehover"> <h3>alert例子</h3> <div class="alert"> <button type="button" class="close" data-dismiss="alert">×</button> <strong>测试</strong>这是alert info提醒区域. </div> </div> <div class="span4 well pricehover"> <h3>alert例子</h3> <div class="alert alert-error"> <button type="button" class="close" data-dismiss="alert">×</button> <strong>测试</strong>这是alert error提醒区域. </div> </div> <div class="span3 well pricehover"> <h3>alert例子</h3> <div class="alert alert-success"> <button type="button" class="close" data-dismiss="alert">×</button> <strong>测试</strong>这是alert success提醒区域. </div> </div>
4.2 进度条(Processing Bar)
进度条，这也是不可缺少的页面要素，在重定向，载入等页面都经常用到，Bootstrap提供多种漂亮、简单、多种颜色的进度条。不过其中条纹和动画效果的进度条不支持IE浏览器，原因是进度条使用了CSS3的渐变(gradients)、透明度(transitions)、动画效果(animations)来实现它们的效果。IE7-9和旧版的Firefox都不支持这些特性，所以在实现进度条的时候请注意浏览器支持程度。如图3-13所示，
图3-13 进度条(Processing Bar)
代码片段如下：
<div class="span3 well pricehover"> <h3>基础</h3> <p>默认的进度条 </p> <div class="progress"> <div class="bar" style="width: 60%;"></div> </div> </div> <div class="span3 well pricehover"> <h3>动画效果</h3> <p>带有条纹的动画效果进度条 (no IE).</p> <div class="progress progress-striped active"> <div class="bar" style="width: 45%"> </div> </div> </div> <div class="span4 well pricehover"> <h3>Striped</h3> <p>使用透明度来生成条纹效果 (no IE).</p> <div class="progress progress-striped"> <div class="bar" style="width: 20%;"></div> </div> </div>
4.3 杂项(Miscellaneous)
Bootstrap的杂项包括两个轻量级的组件，一个是well，用于表达插入效果。另一个是关闭图标，可以用于提醒区域，模式窗口(Modal)的关闭。Modal将会在下讲的javascript pluging中讲解到。如图3-14所示：
图3-14 杂项(Miscellaneous)
代码如下：
<div class="span4 pricehover"> <h2>Wells</h2> <p>使用Well来显示插入效果</p> <div class="well"> 看！我是Well！ </div> </div> <div class="span3 well pricehover"> <h2>关闭图标</h2> <p>用于提醒区域，模式窗口(Modal)的关闭.</p> <p><button class="close" style="float: none;">×</button></p> </div>
参考文献与延伸阅读：
1.CSS3 Tutorials http://www.w3schools.com/css3/default.asp
上讲回顾：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)
代码如下：
<!--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)
代码如下：
<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)
代码如下：
<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)
代码如下所示：
<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)
代码如下所示：
<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
