欢迎拨打空谷咨询电话

4006-515-848

您也可以咨询我们的在线客服或预约上门

在线客服 预约上门

预约上门

Bootstrap自适应布局-网格系统

2017-05-04来源:admin浏览:316 字号:

Bootstrap是一款来自Twitter的前端框架。Bootstrap基于HTML、CSS、JavaScript,因为它的简单灵活使得Web开发更加快捷。它提供了一套响应式、移动设备优先的流体式网格系统,随着屏幕或视口(viewport)尺寸的增加,页面内模块自动调整自身比例实现移动端与PC端的自适应。

Bootstrap网格系统通过一系列包含内容的行和列来创建页面布局。其主要工作原理如下:

1、 container:

顾名思义,container是网格系统最外层的class,也就是最大的容器,并他只能直接包裹row这个class。container自带左右各15px的padding值,这样container与浏览器边框就有了一定的距离。

2、 row:

row是指container中的一行,每个container中可以存在多个row形成多行。

Tips:值得一提的是,row的左右各有-15px margin值,被当作为row的 div 被约束在 container内边界与粉色区域重叠,但没超过。这负的15px 的margin 值把 row的推出了container的15px的 padding,并与之重叠,本质上讲就是正负相抵消。所以,切记永远不要在container容器外用row,这样做是无效的!

3、 col-*-*:

col-*-*是网格系统中最重要的一类,如果把row看做一行,那么col-*-*就是行内的一列,col-*-*通过媒体查询的方式把容器row等分为12列,这些col-在不同屏幕大小行为不同,下表总结了 Bootstrap 网格系统如何跨多个设备工作:

Tips:就像上面所说的col也有15px的padding值,container的正padding值造成了15px的留空,row用负margin值与之相抵消,所以现在col的padding值与container的padding重叠,故此永远不要在row外使用col,在row外使用col是无效的!

4、 嵌套:

当设置了container、row、col-以后,可以在col-(列)内再创建新的栅格系统在col-内添加新的row(行)时不需再嵌container了。这个技巧在于col-扮演了container一样的角色,col-也有15px的padding值,它一样允许row的负margin值,它内部的列、内容间的补白等都一样能很好的工作了。

316次点赞
返回新闻列表
© 2008-2018 苏州空谷网络科技有限公司 版权所有 苏ICP备10077873号