敏捷开发必备：前端开源框架Bootstrap - 爱评测-移动互联网评测

Sleek, intuitive, and powerful mobile first front-end framework for faster and easier web development.

相关中文资料站：http://www.cnbootstrap.com/

Bootstrap用到的HTML元素和CSS属性需要HTML5 doctype。因此每个使用Bootstrap的页面都应该包启HTML5声明。

在 scaffolding.less 文件中，设置了基本的全局显示效果，排版和链接样式。具体来说，我们:

从Bootstrap 2开始，使用 Normalize.css 对默认的CSS进行重置(reset)。 Normalize.css 项目由 Nicolas Gallagher 创建 HTML5 Boilerplate 项目也出于他手。

新的reset代码保存在 reset.less ，并移除了一些元素，从而更加简洁明了。

做为框架默认的一部分，Bootstrap提供了940px宽, 12列的栅格系统。

针对各种不同的设备和分辨率，Bootstrap提供了四种响应式方案：手机，垂直平板，水平平板/小型桌面，宽屏桌面。

如左，一个基本的布局由两个“列”组成，栅格系统由一系列横跨12等分的"span*"组成。

在Bootstrap中使用静态(non-fluid)栅格很容易实现内嵌，只要在一个已存在的 .span* 列中，嵌套一个新的 .row 列，然后在 .row 列中再添加一组 .span* 列即可。

内嵌的行应该包含多个列，行的 span* 应该是几个内嵌列 span* 之和。例如，两个内嵌的.span3 列应该包含在 .span6 列中。

Level 1 of columnLevel 2
Level 2

流式栅格系统中的列宽使用百分比计算宽度而非像素。与像素栅格布局一样，Bootstrap根据设备和分辨率不同提供了不同的响应性方案。

把固定布局变成流式布局很简单，把 .row 变成 .row-fluid即可，列内容不变，因此在流式布局和固定布局之间转换非常简单。

流式列的内嵌稍稍有点不同：内嵌列的宽度与父级无关，而要视兄弟列而定，因为所有的内嵌列都是按比例分配父列的100%宽度。

Fluid 12Fluid 6
Fluid 6

列之间的间隔宽度

计算所有列的总宽度（含间隔）

计算列的总宽度以设置 .container-fixed() 的宽度

Bootstrap内置了一组很有用的变量，用以定制上述的默认940px栅格系统。这些变量保存在variables.less中。

修改栅格意味着改变三个 @grid* 变量并要重新编译Bootstrap。改变variables.less中的栅格变量，再使用四种方式中的某一种重编译less。在添加更多列之前，要先在grid.less在定义这三个变量。

定制的栅格只能工作在默认的940px下，若要保证Bootstrap的全面响应性，还得更改responsive.less中的栅格内容。

用 <div class="container"> 实现的简单的中央布局的页面，默认为940px宽。

<div class="container-fluid"> 提供灵活的页面结构，定义了最小和最大宽度，拥有一个左边栏。很适合做应用和文档。

Medias Query允许浏览器基于不同的条件而使用不同的CSS：比如宽高比，宽度，显示类型等等。但最常用的条件还是 min-width 和 max-width 。

谨慎地使用media query，建议仅仅将其做为你的手机用户的初体验。对于大型项目而言，最好还是选择专业的代码库，而不是进行层层的media查询。

Bootstrap在responsive.less文件中提供了一组media query，令你的项目可以更为便捷地适应多种设备和分辨率。包括：

流式列，非固定宽度

智能手机到垂直平板

流式列，非固定宽度

要确保设备能正常显示响应式页面，就要添加meta标签

Bootstrap不会自动包含media query，但理解和添加media query却是非常容易。如下这般，即可在Bootstrap中包含响应式特性:

为什么不直接包含它呢? 说实话，并不是什么应用都需要响应性设计，响应性不是必须的。与其让开发者移除这个特性，不如由我们动手。

为了更高效友好地面向手机开发，可以使用这些基础实用类根据设备的不同决定内容的显示或隐藏。

你的网站已经有了一点底子，但并不想再为不同设备而重新创建一个完全不同的站点，这种情况就适合使用实用类来完善呈现效果。

例如，你仅仅想在使用手机浏览时显示 <select> 做为导航，而在使用平板和桌面浏览时，就隐藏起来。

下面展示了可用的类，及其在media query（由设备标识）下的效果。这些类保存在 responsive.less 。

改变你的浏览器尺寸，或是不在同的设备上浏览，以观察上述类的效果。

按钮组可以将多个按钮做为一个复合组件来用。由一系列 <a>或 <button> 元素构建。

我们建议使用按钮组和工具条时应遵循下列准则：

补充下面会单独强调带下拉框的按钮组，其包含一个下拉/上弹三角以表示可点击触发下拉/上弹。

用 button 标签按钮构建的标准按钮组：

集合几组 <div class="btn-group"> ，再用 <div class="btn-toolbar"> 包装就可以合成工具条组件。

按钮组也可实现单选和复选功能。前者只有一个按钮被按下，后者可以按下多个按钮。详见Javascript插件。

强调! 为了渲染正常，带下拉项的按钮应该被 .btn-group 嵌套，然后再放入 .btn-toolbar 内。

下拉菜单中的按钮嵌套于 .btn-group 内。

和按钮组类似，下拉按钮仍使用按钮标记，并用到少量其他标记以增强显示效果，同时支持Bootstrap的下拉jquery插件。

下拉按钮适应任何尺寸，可以是 .btn-large, .btn-small, 或 .btn-mini 。

下拉按钮需要 Bootstrap下拉插件实现功能。

在某些情况下（诸如使用手机浏览），下拉菜单会超出可视区域。这时要么手动对齐，要么使用定制的javascript。

在按钮组的样式和标记的基础上，我们可以很方便的创建带间隔的下拉按钮。间隔左侧是按钮，右侧是下拉链接。

使用 .btn-mini, .btn-small, 和 .btn-large 指定大小。

我们对普通的下拉按钮进行扩展，将下拉区域独立出来，可对其单独点击收放菜单。

下拉菜单也可以变成上弹菜单，只要在 .dropdown-menu 最近的父标签上应用 .dropup 即可。它会改变 .caret 的箭头方向，并将菜单底部与按钮顶部对齐。

所有的导航组件，诸如标签页/胶囊链接/列表，使用同样的标记和样式 - .nav 类。

标签页和胶囊链接非常适合内容片段的切换，或是相关内容的页面导航。

使用 .pull-left 或 .pull-right 对齐导航链接，两者都依赖CSS float实现左/右对齐。

对存放链接的 <ul> 应用 .nav-tabs ：

HTML不变，使用 .nav-pills ：

默认情况下标签和胶囊链接是水平排放的，使用 .nav-stacked 就可以将其变成竖直叠放。

在Bootstrap中，创建标签和胶囊链接中的下拉菜单非常方便，仅需极少的HTML和一个轻巧的jQuery插件。

导航列表可以便捷地创建带有标头(可选)的导航链接组，非常适合用做侧边栏（与OS X中的Finder类似）。

从结构上看，其与标签和胶囊链接无异，都使用同样的导航样式，所以用法和定制都一样简洁。

在导航列表中使用图标很容易。只须添加带有图标类的 <i> 标签即可。

应用 .divider 的空列表项会显示为一个水平间隔，如下：

对存放一组链接的列表使用 class="nav nav-list" :

同样的例子，使用 <i> 标签显示图标。

我们使用一个简单的插件切换标签页对应的内容，从而让标签页变得生动。 Bootstrap 提供了四种样式的标签页：置顶(默认)，居右，置底，居左。

应用时只需修改很少的标记。

用带 .tabbable 的div将 .nav-tabs 嵌套起来：

所有标签页都依赖我们提供的轻量级jQuery插件。详见javascript中的关于标签页部分的文档。

使用标签切换页，需要一个最外层的div，一组标签，以及一组存放内容的容器

反转HTML的顺序，用 .tabs-below 将标签居底。

使用 .tabs-left 将标签居左。

使用 .tabs-right 将标签居右。

带有项目名称，导航和搜索表单的静态导航条的例子。

需要少量的div来构建静态static或是固定fixed的导航条。

只要在最外层的div上应用 .navbar ，就可以将导航条固定到顶部或是底部。

附着导航条时，一定要留出一块空白区域，在 <body> 的顶端添加40px或是更多的padding。要保证将这段样式加在Bootstrap核心CSS之后，在响应式CSS（可选的）之前。

用于展示品牌或项目名称的一个简单链接，只需要一个锚标签。

导航条内的表单，用 .navbar-form 进行样式化，由 .pull-left 或 .pull-right 决定居左还是居中。

对导航栏应用 .navbar-search 的同时对其中的输入框使用 .search-query ，就会得到另一种搜索样式，从而增强搜索表单的可定制性。

如果我们想根据置顶导航条中的不同内容实现响应性设计，就可以将导航内容嵌套在一个 .nav-collapse.collapse div容器中，并对按钮都应用 .btn-navbar 类。

导航项与无序列表非常相似。

将应用 .divider-vertical 的空列表项插入到两个链接项之间，就会得到分隔条：

我们使用 .pull-left 或 .pull-right 对齐链接，搜索表单或是文本。这两个类都使用CSS浮动进行对齐。

在导航中很容易添加上下拉菜单，要用到下拉javascript插件。

在导航条中用 <p> 标签包装文本以设置行高和颜色。

面包屑导航栏用于展示用户当前在网站/应用中的位置，但并不是首要导航。适宜布局清爽，简洁明了的场合。

一个简单的例子，可以用在多个页面中。

使用无序号的ul列表。

受Rdio启发，我们设计了极为简致的页码样式，适用于应用和搜索结果。页码区域尺寸大，易于吸引注意力，易于扩展，易于点击。

Bootstrap使用一组样式类定制页码的状态，.disabled 用于不可点击链接，而 .active 用于表示当前页链接。

使用 .pagination-centered 和 .pagination-right 可以改变页码的对齐方式，前者居中，后者居右。

默认的页码组件非常灵活，有多种展示形式。

分页标记是一个嵌套在 <div> 中的 <ul> 。

前后页组件是一组简便的分页实现，标记更少，样式更轻，适用于轻量级网站，如博客或网志。

前后页链接仍使用 .disabled 设置无效状态。

默认情况下，前后页组件居中。

另一种情况下，链接分别居于左右端：

[size=10.998px]默认

[size=10.998px]成功

[size=10.998px]警告

[size=10.998px]重要

[size=10.998px]信息

[size=10.998px]相反

标号是用来显示标识或某某数量的简洁小组件。比如邮件客户端(比如Mail.app)中的邮件数量或是手机应用中的通知数量。

Bootstrap提供了一个轻巧又灵活的组件，用以在网站中着重展示内容，称之为"hero unit"/主角单元。适用于市场类或强调内容的网站。

将内容嵌套入应用 .hero-unit　的 div 中，如下:

[url=]了解更多[/url]

相当于一个简单的 h1 外壳，它有适当的留白，以便在页面中分割内容片段。还可以在 h1 内嵌入 small ，html元素或是其他组件。

默认情况下，Bootstrap的缩略项使用很少的标记来展示链接图象。

使用少量其他标记就可以在缩略项中添加任何一种HTML内容，比如标题，段落，或按钮。

缩略项（1.4版之前使用 .media-grid ）适用于栅格化的图片和视频，图片搜索结果，零售产品，文件夹等等。缩略项可以是链接，也可以是静态内容。

缩略项标记既简单又灵活—只须用一个 ul 嵌套多个 li 元素。缩略项内容可以是任何一种HTML内容，只须少许标记。

新版本中，缩略项组件使用栅格类—诸如 .span2 或 .span3—确定缩略项的尺寸。

正如之前所提到的，缩略项所需的标记是很少的。下面就是一个 带链接图象 的默认设置：

缩略项中的HTML内容仅须更改少许标记。将 <a> 变成 <div> 即可定制块状内容，如下：

尝试更多栅格类，混用不同的尺寸。

Bootstrap 2 简化了基类，用 .alert 代替了 .alert-message 。并对最低要求的标记也进行了精简—默认只使用<div> ，而无须嵌套 <p> 。

为了得到代码少而质量高的组件，我们统一了块状通知和普通通知的外观。原有的块状样式类被命名为 .alert-block ，其padding更大，通常容纳文本也更多。

Bootstrap用一个很好的jQuery插件驱动通知消息，方便用户快速地关闭通知。

在div中嵌套信息，并放置一个关闭图标。

进度条有两个效果加强类： .alert-block 用于提供更大padding，适合容纳更多文本组件；而 .alert-heading 用以修饰标题。

中方强调，中国是法治国家，任何公民的合法权益都受宪法和法律保护，同时任何公民都有义务遵守宪法和法律。

默认的垂直渐变进度条。

使用渐变创建条纹进度条（不支持IE）

条纹进度条的动果效果（不支持IE）

进度条使用和按钮/警告类相似的样式，提供一致的颜色风格。

与纯色相似，也可以使用多色的条纹进度条。

进度条使用CSS3过渡效果，因此用javascript动态调整进度条宽度时，效果会非常平滑。

如果使用 .active ，那么 .progress-striped 导航栏就会呈现自左向右的条纹跑马灯动画效果。

进度条使用CSS3渐变/过渡/动画以实现所有效果。IE7到IE9，以及某些老版本的Firefox还不能完全支持这些特性。

目前，Opera和IE还不支持动画效果。

用来给某个元素添加包框效果。

象对话框和弹出框一样，用常见的叉叉图标关闭内容。