Bootstrap-栅格系统自适应布局
来源:互联网 发布:淘宝拒收怎么申请退款 编辑:程序博客网 时间:2024/04/30 09:14
http://blog.csdn.net/qiqingjin/article/details/50363189
1 container
顾名思义container是栅格系统最外层的class,直接被container包裹的只能是row这个class。需要注意的是container自带左右各15px padding值,这样container与浏览器窗口之间就存在一定距离。
2 row
row指container的一行,每行理想状态包含12个col,这些col在不同屏幕大小时行为不同,见下图:
你也可以给一个div设置两个col- class,以便适应不同的屏幕。值得一提的是,row的左右各有-15px margin值,被当作为row的div被约束在 container内边界与粉色区域重叠,但没超过。这负的15px margin值把row的推出了container 的15px padding,并与之重叠,本质上讲就是负出去。
切记永远不要在container外用row,这样做是无效的。
3 col-
col在不同屏幕下行为不同,这在上面已经说过了。
列(col)现在有15px的padding了,如下图中黄颜色部分。Container的正padding值造成了15px的留空,row用负margin值反的延伸回去,所以现在col的padding值与container的padding重叠,永远不要在row外使用col,在row外使用col是无效的。
4 嵌套
当你设置了container,row,column后,你可以在column内再创建新的栅格系统。你在列(col)内添加新的行(row)时不需再嵌container了。这个技巧在于列(col)扮演了container一样的角色,列也有15px的padding值,它一样允许行(row)的负margin值,它内部的列、内容间的补白等都一样能很好的工作了。
- Bootstrap-栅格系统自适应布局
- Bootstrap-栅格系统自适应布局
- bootstrap栅格系统布局
- Bootstrap栅格系统(布局)
- Bootstrap中的栅格布局系统
- 【Web】Bootstrap栅格布局系统设计原理
- Bootstrap栅格系统详解,响应式布局
- 深入理解BootStrap-- 栅格系统(布局)
- Bootstrap 栅格系统响应式布局
- bootstrap栅格布局
- Bootstrap-栅格布局实例
- bootstrap-栅格布局
- BootStrap栅格布局
- bootstrap详解-栅格布局
- bootstrap栅格式布局
- Bootstrap中的栅格栅格系统
- Bootstrap 全局css样式布局之 栅格系统
- 深入理解BootStrap Item7 -- 栅格系统(布局)
- String 创建对象的问题
- 华为云Linux系统搭建Tomcat环境过程
- 函数中this的值为什么与包含函数this的值无关
- 线性布局LinearLayout 的注意点
- lua hello world
- Bootstrap-栅格系统自适应布局
- gdb基本命令【转】
- Hibernate Tools for Eclipse的使用
- java多线程笔记(2)——关于synchronized关键字一些注意事项
- 密码术语
- 相对布局
- Sqoop的安装配置
- php对象复制相关解析
- Mybatis之MySQL批量增删改查,多选项查询,模糊查询,分页