BootStrap学习之栅格布局.doc

BootStrap学习之栅格布局.docBootstrap学习之栅格布局Bootstrap提供了一套响应式、移动设备优先的流式栅格系统,随着屏幕或视口(viewport)尺寸的改变,系统会自动分为最多12列。它包含了易于使用的预定义类,还有强大的mixin用于生成更具语义的布局。简介栅格系统用于通过一系列的行(row)与列(column)的组合来创建页面布局,你的内容就可以放入这些创建好的布局中。Bootstrap栅格系统的工作原理如下:列(column)行(row)“行(row)”(固定宽度)-fluid(100%宽度)屮,以便为其赋予合适的排列(aligment)和内补(padding)。通过“行(row)”在水平方向创建一组“列(column)”。你的内容应当放置于咧(column)”内,并且,只有"列(column)”可以作为行(row)”的直接子元素。-xs-4这种预定义的类,可以用来快速创建栅格布局。Bootstrap源码屮定义的mixin也可以用来创建语义化的布局。■通过为“列(column)”设置padding属性,从而创建列与列Z间的间隔(gutter),也就间接为“行(row)”所包含的咧(column)”抵消掉了paddingo■如果一“行(row)”中包含了的“列(column)"大于12,多余的“列(column)"所在的元素将被作为一个整体另起一行排列。栅格参数通过下表可以详细查看Bootstrap的栅格系统是如何在多种屏幕设备上工作的。行为怎是水平排列 幵始長堰盘在一翻•(@动) 750px 97Opx 1170px列(column)K•col-xs- .col-M- .col .col-lg-12■大列(column)定目动 、62px *81px *97pxgutter)ft30px(毎列左右均育15px)可茨矣星ffi移(Offsets)-md-*栅格类,就可以创建一个基本的栅格系统,在手机和平板设备上一开始是堆叠在一起的(超小屏幕到小屏幕这一范围),在桌面(中等)屏幕设备上变为水平排列。所有“列(column)必须放在”.row内。<divclass=Mrow"><divclass=”col・md・1”style=Hbackground-color:#8a6d3b">.col-md-1</div><divclass=Hcol-md-1Hstyle="background-color:#4cae4c">.col-md-1</div><divclass=”col・mcM”style=Hbackground-color:#623565">.col-md-1</div><divclass=”col・mcM”style=Hbackground-color:#1b6d85">.col-md-1</div><divclass=Hcol-md-1nstyle='background-color:#2b542c">.col-md-1</div><divclass=”col・mcM”styl