咨询电话:
15628812133
01
2017/07

bootstrap的栅格化布局样式

发布时间:2017-07-01 16:17:22
发布者:369563174
浏览量:
0

Bootstrap3的栅格化样式就是通过基础的样式加media查询相结合,所以不要把自适应搞得很神秘,其实就是很简单。下面与你一起分析一下具体源码:

里面主要有这么几种查询:
第一种:小于768的时候,是没有使用media查询的样式。使用在较小的设备上,如旧式手机,样式开头为.col-xs-,一般bootstrap在移动设备上都会使用100%,除非有特殊情况,才会应用这个.col-xs标签。·

第二种:大于等于768并小于992的时候,使用在小设备平板中,样式开头为.col-sm-,在这里,container会给他设置一个最大的宽度为750,也就是说在这个范围里面的网页最大宽度为750,bootstrap不是随着宽度变宽而变宽的,他在某个范围的时候,会给样式设定一个最大值的。那么这样范围里面的时候,外形是没有变化的。

第三种:大于等于992并小于1200的时候,使用在中等设备桌面中,样式开头为.col-md-,在这里,container会给他设置一个最大宽度为970.现在的浏览器屏幕很多都大于1200了。

第四种:大于1200的,通常在大型设备台式机和手提电脑,样式开头为.col-lg-,在这里,container会给他设置一个最大宽度为1170.

当然,上面这四种情况的初始宽度是可以设置的,bootstrap同样可以通过Less或者Sass来自定义每个查询的宽度的。

所以,从上面的这几种查询,我们看出bootstrap的栅格化系统总共有这么几种变化的。

第一:样式有三个固定宽度和一个自适应宽度,分别是750、970 和1170固定宽,在小于768的时候则是采用屏幕宽度-30(左右15像素)的宽度。

第二:通过不同宽度的标签来改变在不同宽度下的栏目宽度变化,比如在1200的时候,可以使用col-lg-8与col-lg-4,那么在970的时候可以使用col-md-6与col-md-6了。这时候两种不同屏幕的显示时不同的。

需要注意的是:

Bootstrap给所有的盒子都加了box-sizing:border-box这个样式,所以实际宽度是减去border和padding之后所剩下的宽度。box-sizing这个是css3样式,在can I use 上显示IE8以下不支持这个属性的。所以Bootstrap3在IE7和IE6是惨不忍睹的。你也可以加这个IE的降级标签:

Bootstrap的.container{padding-left:15px; padding-right:15px;}的。然后在里面的元素.row又向外扩张15像素,即.row{margin-left:-15px; margin-right:-15px;}

然后里面的col-*又col-*{padding-left:15px; padding-right:15px;}

所以使用Bootstrap3的时候要注意row和col-*是两对同时存在的玩意。虽然很好用,不过IE6和IE7不兼容的话,在国内还是有点头痛的。要是只做移动端的话,那就可以无视古老的IE了。


来源:前端开发博客


返回列表