bootstrap的Scaffolding 20120327

First首先抛出三个概念:

Fix,Fluid,Responsive,分别是固定,流动,响应式布局。

bootstrap的固定布局,就是无论浏览器的放大缩小,内容位置都不受挤压改变,而且整个布局居中。

bootstrap的流动式布局,要设置布局的最大宽度和最小宽度。

如果浏览器的宽度大于布局的最大宽度,然后不管浏览器大小怎么调整,布局里面的内容位置都不受挤压改变。

如果浏览器的宽度小于布局的最大宽度,大于最小宽度,那么布局里的内容位置会随着浏览器的大小调整,而改变。

如果浏览器的宽度小于布局的最小宽度,布局里的内容位置也不会改变啦。

bootstrap的响应式布局,准确来说,没有响应式布局,是响应式设计。当浏览器的宽度小于某个值时,整个页面呈现另外一种布局。

注意:Fix和Fluid都包含响应式设计。

Then然后抛出12格网格Grid布局,就是把网页的宽度分成12份。默认的总宽度是960px,每格60px,可是60*12=720,还有240呢,没错,这240就是每个网格之间的间隙宽度总和,单个间隙宽度默认是20px。

当然,无论网格个数,每个网格的宽度,每个 网格之间的间隙宽度,你都可以自定义,使用LESS框架来自定义。

later on之后是网格里套网格,在Fix布局里面,网格里套网格逻辑很简单,就这么简单,就照着它们固定宽度width来。在Fluid布局里面,网格里套网格逻辑就稍微复杂一点,不照固定宽度width来,照宽度百分比来。因此,实际项目中,同样的网格套网格,Fluid布局会比Fix布局的里面的网格宽度,宽一点。

after that接着是网格偏移Offsetting columns,所谓网格偏移就是,前面的位置不放网格,网格放在后面。文字难以表达,请去官网自己看效果。