1、整体架构
下图为Bootstrap的整体架构图,共分为六大部分:
1.1、12栅格系统
12栅格系统就是把网页的总宽度平分为12份,我们可以自由按份组合。栅格系统使用的总宽度可以不固定,Bootstrap是按百分比进行平分。(保留15位小数点精度)
12栅格系统是整个Bootstrap的核心功能,也是响应式设计核心理念的一个实现形式。
1.2、JQuery
Bootstrap所有的JavaScript插件都依赖于jQuery1.10+,如果要使用这些插件,那就必须引用jQuery库。如果你只用CSS组件,那就可以不引用它了。
1.3、响应式设计
响应式设计是一个理念,而非功能。Bootstrap的所有内容,都是以响应式设计为设计理念来实现的。
响应式设计的目的:让页面应该有能力自动响应用户的设备环境。响应式网页设计就是一个网站能够兼容多个终端,而不是为每个终端做一个特定的版本。
实践方式:由多方面决定,包括弹性网格和布局、图片、CSS媒体查询(media query)的使用等。
2、栅格系统
2.1、实现原理
通过定义容器大小,平分12份,再调整内外边距,最后再结合媒体查询,就制作出了强大的响应式的栅格系统。Bootstrap默认的栅格系统平分为12份,在使用的时候大家也可以根据情况通过重新编译LESS源码来修改12这个数值。
2.2、工作原理
•一行数据(row)必须包含在.container中,以便为其赋予合适的对齐方式和内边距。
•使用行(row)在水平方向创建一组列(column)。
•具体内容应当放置于列(column)内,而且只有列(column)可以作为行(row)的直接子元素。
•使用像.row和.col-xs-4这样的样式来快速创建栅格布局。
•通过设置列padding从而创建列(column)之间的间隔。然后通过为第一列和最后一列设置负值的margin从而抵消掉padding的影响。
•栅格系统中的列是通过指定1到12的值来表示其跨越的范围的。
Container的作用:
- 提供宽度限制。container随着页面宽度变化而变化,由于column的宽度是基于百分比,所以它们的宽度不用去管。
- 提供左右padding,以至于文本内容不会触及浏览器边缘。container左右有15px的padding。如下图:
Row:
- Row是Column的存放容器,Row中最多只能放12个左浮动的Column。
- Row有个特殊的地方就是左右-15px的margin。这样正好抵消父容器container中的15px的padding。(刚开始我觉得这样不是在瞎折腾吗?但看到后面才发现这正是它的精妙之处)
Column: - column有左右15px的padding,所以位于两边的column有15px的padding,可以使其内容不会碰到container的边界,而同时不同column的内容之间就有了30px的槽,如下图:
嵌套: - 上面提到它的精妙之处就是为嵌套而设计的。由于container和column都有15px的padding,所以在嵌套时column就相当container了,这样就可以实现任意的嵌套。
列偏移(Offset): - 为当前元素增加了左边距(left-margin)。
列排序(Push and Pull)
设置元素的定位,而非边距(margin)。push和pull必须同时使用,否则会重叠。
转载于http://www.cnblogs.com/smallfa/p/5102222仅供学习使用