Bootstrap栅格布局的注意事项
来源:互联网 发布:傲剑坐骑数据 编辑:程序博客网 时间:2024/05/01 06:53
首先,栅格布局是将页面分为12列的,在不同的视口宽度之下,栅格布局的每一列的宽度应该是不一样的。从320一直到最大,分别是:col-xs-*,col-sm-*,col-md-*,还有col-lg-*,其中当我们的视口宽度>=768px的时候,我们的视口的宽度是使用col-sm,所以一般情况下我们只需使用col-sm即可,无需再使用col-md-*。
还有,当我们遇到在768px以上是左侧文字右侧图片或者右侧文字左侧图片,而768px以下是文字在上图片在下的设计图,我们就可以考虑用栅格布局的左右浮动属性,栅格布局的浮动属性是会随着视口的大小发生变化的,所以我们可以使用col-sm-pull-*左侧是使用push,右侧的使用pull,这样当视口宽度小于768的时候我们的栅格布局浮动就会结束了。
再有就是我们使用栅格布局的时候不要改变container的宽度,container的宽度是会随着视口的宽度大小进行适配的。我们的栅格布局外层分别要添加container>row两个标签,
0 0
- Bootstrap栅格布局的注意事项
- Bootstrap的栅格化布局样式
- bootstrap栅格布局
- Bootstrap-栅格布局实例
- bootstrap-栅格布局
- BootStrap栅格布局
- bootstrap详解-栅格布局
- bootstrap栅格系统布局
- bootstrap栅格式布局
- Bootstrap-栅格系统自适应布局
- Bootstrap栅格系统(布局)
- Bootstrap-栅格系统自适应布局
- Bootstrap中的栅格布局系统
- bootstrap的栅格布局不支持IE8该如何解决?
- Bootstrap的栅格参数
- Bootstrap的栅格系统
- bootstrap的栅格系统
- bootstrap栅格布局笔记(1)
- 使用查询结果产生的数据批量执行update 或add sql语句
- ViewPager嵌套Fragment来回滑动重新加载数据
- OVM Concept: Oracle VM Agent
- android手机客户端上传文件,java servlet服务器端接收并保存到服务器
- keepalived工作原理和配置说明
- Bootstrap栅格布局的注意事项
- Java中BufferedReader和scanner的对比
- Nucleus PLUS系统架构和组件
- 技能冷却UGUI5.1
- Android开源测试框架学习
- 【OJ测试技巧】大量示例测试方法
- JSON基础
- JTAG与SWD的区别
- C#中Ilist与list的区别小结