| Bootstrap简洁、直观、强悍的前端开发框架，让web开发更迅速、简单。Bootstrap Sleek, intuitive, and powerful mobile first front-end framework for faster and easier web development. 相关中文资料站：http://www.cnbootstrap.com/ 框架及布局 Bootstrap创建了响应式的12列栅格系统，并在该系统的基础上设计了固定(fixed)布局和流动宽度(fluid-width)布局。 全局样式 重置CSS，排版和链接 要求HTML5 doctype Bootstrap用到的HTML元素和CSS属性需要HTML5 doctype。因此每个使用Bootstrap的页面都应该包启HTML5声明。
排版和链接 在 scaffolding.less 文件中，设置了基本的全局显示效果，排版和链接样式。具体来说，我们:
通过Normalize重置默认样式 从Bootstrap 2开始，使用 Normalize.css 对默认的CSS进行重置(reset)。 Normalize.css 项目由 Nicolas Gallagher 创建 HTML5 Boilerplate 项目也出于他手。 新的reset代码保存在 reset.less ，并移除了一些元素，从而更加简洁明了。 默认栅格系统 响应式的12列系统 1 1 1 1 1 1 1 1 1 1 1 1 4 4 4 4 8 6 6 12 做为框架默认的一部分，Bootstrap提供了940px宽, 12列的栅格系统。 针对各种不同的设备和分辨率，Bootstrap提供了四种响应式方案：手机，垂直平板，水平平板/小型桌面，宽屏桌面。
如左，一个基本的布局由两个“列”组成，栅格系统由一系列横跨12等分的"span*"组成。 列的偏移 4 4 offset 4 3 offset 3 3 offset 3 8 offset 4
列的内嵌 在Bootstrap中使用静态(non-fluid)栅格很容易实现内嵌， 只要在一个已存在的 .span* 列中，嵌套一个新的 .row 列，然后在 .row 列中再添加一组 .span* 列即可。 例子内嵌的行应该包含多个列，行的 span* 应该是几个内嵌列 span* 之和。 例如，两个内嵌的.span3 列应该包含在 .span6 列中。 Level 1 of columnLevel 2 Level 2
流式栅格系统 基本于百分比的12列响应式布局 列的流式排布 1 1 1 1 1 1 1 1 1 1 1 1 4 4 4 4 8 6 6 12 基于百分比，而非像素 流式栅格系统中的列宽使用百分比计算宽度而非像素。与像素栅格布局一样，Bootstrap根据设备和分辨率不同提供了不同的响应性方案。 行的流式布局 把固定布局变成流式布局很简单，把 .row 变成 .row-fluid即可，列内容不变，因此在流式布局和固定布局之间转换非常简单。 补充
流式列的内嵌 流式列的内嵌稍稍有点不同：内嵌列的宽度与父级无关，而要视兄弟列而定，因为所有的内嵌列都是按比例分配父列的100%宽度。 Fluid 12Fluid 6 Fluid 6
自定义栅格 变量 默认值 描述 @gridColumns 12 列的数量 @gridColumnWidth 60px 每列的宽度 @gridGutterWidth 20px 列之间的间隔宽度 @siteWidth 计算所有列的总宽度（含间隔） 计算列的总宽度以设置 .container-fixed() 的宽度 LESS中的变量Bootstrap内置了一组很有用的变量，用以定制上述的默认940px栅格系统。这些变量保存在variables.less中。 如何定制 修改栅格意味着改变三个 @grid* 变量并要重新编译Bootstrap。 改变variables.less中的栅格变量，再使用四种方式中的某一种重编译less。 在添加更多列之前，要先在grid.less在定义这三个变量。 保持响应性 定制的栅格只能工作在默认的940px下，若要保证Bootstrap的全面响应性，还得更改responsive.less中的栅格内容。 布局 用基础模板创建网页 固定布局 用 <div class="container"> 实现的简单的中央布局的页面，默认为940px宽。
流式布局 <div class="container-fluid"> 提供灵活的页面结构，定义了最小和最大宽度，拥有一个左边栏。很适合做应用和文档。
响应式设计 Media Query根据设备和分辨率的不同而使用不同样式  Medias Query允许浏览器基于不同的条件而使用不同的CSS：比如宽高比，宽度，显示类型等等。但最常用的条件还是 min-width 和 max-width 。
谨慎地使用media query，建议仅仅将其做为你的手机用户的初体验。对于大型项目而言，最好还是选择专业的代码库，而不是进行层层的media查询。 支持的设备 Bootstrap在responsive.less文件中提供了一组media query，令你的项目可以更为便捷地适应多种设备和分辨率。包括： 设备 布局宽度 列宽度 间隔宽度 智能手机 <=480px 流式列，非固定宽度 智能手机到垂直平板 <=767px 流式列，非固定宽度 水平平板 >=768px 42px 20px 默认 >=980px 60px 20px 大分辨率 >=1200px 70px 30px 要求有meta标签要确保设备能正常显示响应式页面，就要添加meta标签
使用media query Bootstrap不会自动包含media query，但理解和添加media query却是非常容易。 如下这般，即可在Bootstrap中包含响应式特性:
为什么不直接包含它呢? 说实话，并不是什么应用都需要响应性设计，响应性不是必须的。 与其让开发者移除这个特性，不如由我们动手。
用于响应性的实用类介绍 为了更高效友好地面向手机开发，可以使用这些基础实用类根据设备的不同决定内容的显示或隐藏。 何时适用你的网站已经有了一点底子，但并不想再为不同设备而重新创建一个完全不同的站点，这种情况就适合使用实用类来完善呈现效果。 例如，你仅仅想在使用手机浏览时显示 <select> 做为导航，而在使用平板和桌面浏览时，就隐藏起来。 支持的类 下面展示了可用的类，及其在media query（由设备标识）下的效果。 这些类保存在 responsive.less 。 类 手机<=480px 平板<=767px 桌面>=768px .visible-phone 显示 隐藏 隐藏 .visible-tablet 隐藏 显示 隐藏 .visible-desktop 隐藏 隐藏 显示 .hidden-phone 隐藏 显示 显示 .hidden-tablet 显示 隐藏 显示 .hidden-desktop 显示 显示 隐藏 测试案例改变你的浏览器尺寸，或是不在同的设备上浏览，以观察上述类的效果。 显示...
组件示例 Bootstrap内置几十种高可用的组件，以实现导航栏，通知，弹出框等功能。 按钮组 添加更多按钮，实现类似工具条功能 按钮组 按钮组可以将多个按钮做为一个复合组件来用。 由一系列 <a>或 <button> 元素构建。 最佳实践我们建议使用按钮组和工具条时应遵循下列准则：
补充 下面会单独强调带下拉框的按钮组，其包含一个下拉/上弹三角以表示可点击触发下拉/上弹。 默认例子 用 button 标签按钮构建的标准按钮组： 左中右
集合几组 <div class="btn-group"> ，再用 <div class="btn-toolbar"> 包装就可以合成工具条组件。 1234567 8
复选和单选形式 按钮组也可实现单选和复选功能。前者只有一个按钮被按下，后者可以按下多个按钮。详见Javascript插件 。 按钮组中的下拉项强调! 为了渲染正常，带下拉项的按钮应该被 .btn-group 嵌套，然后再放入 .btn-toolbar 内。 按钮下拉菜单 基于按钮组提供下拉菜单 下拉按钮简介和例子 下拉菜单中的按钮嵌套于 .btn-group 内。 动作 动作 危险 警告 成功 信息 逆操作 标记例子 和按钮组类似，下拉按钮仍使用按钮标记，并用到少量其他标记以增强显示效果，同时支持Bootstrap的下拉jquery插件。
适应所有按钮的尺寸 下拉按钮适应任何尺寸，可以是 .btn-large, .btn-small, 或 .btn-mini 。 大按钮 小按钮 迷你按钮 需要Javascript 下拉按钮需要 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插件。 详见 初始化下拉项 。 带下拉项的标签页
带下拉的胶囊链接
导航列表 构建简单的叠放式导航，适用于侧边栏应用风格（application-style）的导航 导航列表可以便捷地创建带有标头(可选)的导航链接组，非常适合用做侧边栏（与OS X中的Finder类似）。 从结构上看，其与标签和胶囊链接无异，都使用同样的导航样式，所以用法和定制都一样简洁。 使用图标 在导航列表中使用图标很容易。只须添加带有图标类的 <i> 标签即可。 水平间隔应用 .divider 的空列表项会显示为一个水平间隔，如下：
导航列表例子 对存放一组链接的列表使用 class="nav nav-list" :
|
