Bootstrap入门书籍之（三）栅格系统 javascript技巧.doc

Bootstrap入门书籍之（三）栅格系统_javascript技巧.doc:..Bootstrap入门书籍之(三)栅格系统实现原理栅格系统是Bootstrap的核心,正是因为栅格系统的存在,Bootstrap才能有着如此强大的响应式布局方案。下面是官方文档中的解说:Bootstrap内置了一套响应式、移动设备优先的流式栅格系统,随着屏幕设备或视口(viewport)尺寸的增加,系统会自动分为最多12列。它包含了易丁•使用的预定义classe,还有强大的mixin用于生成更具语义的布局。我们来理解一下这一段话,可以发现其中最重要的部分就是移动设备优先,那么什么是移动设备优先呢?Bootstrap的基础CSS代码默认从小屏幕设备(比如移动设备、平板电脑)开始,然后使用媒体查询扩展到大屏幕设备(比如笔记本电脑、台式电脑)上的组件和网格。有着如下策略:内容:决定什么是最重要的。布局:优先设计更小的宽度。渐进增强:随着屏幕大小增加而添加元索。工作原理数据行(.row)(固定宽度)-fluid(100%宽度)中,以便为其赋予合适的排列(aligment)和内填充(padding)o如:<divclass=,,container,,><!--水平居中,两边有margin,最小屏幕时,充满父元素--〉<divclass=,zrowz,></div></div>〈!--或者--><divclass二〃container-fluid">〈!--默认一直充满整个父元素--><divclass二〃row">〈/div></div>在数据行(・row)屮可以添加列(column),但列数Z和不能超过平分的总列数(在超过时,多余部分会换行显示),默认12。(使用Less或者Sass可以进行自定义设置)如:<divclass二〃container"〉<divclass二〃row〃><divclass二〃col-md-2〃>〈/div><divclass二〃col-md-6"X/div><divclass=z,col-md-4,,X/div>页面上的具体内容应当放置于列(column)内,并且只有列(column)。预定义的网格类,-xs-4,可用于快速创建网格布局。栅格系统中的列是通过指定1到12的值來表示其跨越的范围。例如,-xs-4來创建。注意事项:(固定宽度)是固定宽度的布局方式。通过查看源码,,它的宽度是响应式的:(如下).container{padding-right:15px;padding-left:15px;margin-right:auto;marginTeft:auto;}©media(min-width:768px){*container{width:750px;}}©media(min-width:992px){*container{width:970px;}}/* */从上面的css代码可以看到,该类默认为整个父元素的宽度(最小屏幕),但是在大屏幕下有着不同的宽度,并且在不同宽度下左右margi