PHP学习#bootstrap框架

 Bootstrap 创建了响应式的12列栅格系统，并在系统的基础上设计了固定（fixed）布局和流动宽度（fluid-width）布局

全局样式：

1. 要求包含HTML5的声明
2. 在scaffolding.less文件中设置了基本的全局显示效果，排版和链接样式
3. 从Bootstrap2开始，使Normalize.css对默认的CSS进行重置（reset）。  新的代码保存在reset.less，并移除了一些元素

默认栅格系统 （  响应式12列系统）:

1.  作为框架的一部分 Bottstrap 提供了940px宽，12列的栅格系统
2. 提供对不同设备和分辨率不同的响应式
3. 列的偏移
4. 列的内嵌（在已存在的列中嵌套一新的列）

流失栅格系统  （基于百分比的12列响应式布局）

1. 基于百分比而非像素
2. 行的流式布局（把.row 变成.row-fluid）
3. 流失列的内嵌 ：内前列的宽度与父级无关，而要视兄弟列而定因为所有的内嵌列都是按比例分配父列的100%宽度

自定义栅格

1. LESS中的变量；Bootstrap内置一组很有用的变量，用定制上诉默认的940px系统，变量保存在variables.less中
2. 修改栅格意味着改变三个变量要重新编译（@gridColumns @gridColumnWidth @gridGutterWidth）
3. 定制的栅格只能工作在默认的940px下保证全面的响应就要更改responseive.less内容

布局（用基础模板创建网页）：

1. 固定布局；实现简单的中央布局页面，默认940px
2. 流式布局；提供灵活的页面结构，定义最小最大宽度。拥有一个左栏

响应式设计（根据设备和分辨率的不同而使用不同样式）

1.  允许不同浏览器不同的条件而使用不同的CSS；
2. 要求有meta标签
3. 使用media query ；编译bootstrap-responsive.css；添加@import 'responsive.less' 然后重新编译

详细内容请查阅：http://cnbootstrap.com/scaffolding.html