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，所谓网格偏移就是，前面的位置不放网格，网格放在后面。文字难以表达，请去官网自己看效果。

 

 

 

 

转载于:https://www.cnblogs.com/samwu/archive/2012/03/27/2419597.html