Bootstrap（二）—格栅系统！

W=(A*n)-i

W是一个页面的总宽度，比如950px；而A代表一个版块的宽度，设置为apx；n就是分为几个版块；而i就是区块之间的间隔。

例如 950=（a*24）-10 而a=40px；改变A和i的值就会生成不同的布局。

（高度960=24*40 宽度 560=14*40 ）

而bootstrap格栅系统为12列（1,2,3,4,6,12）形成960px的宽度。

　　以下场景非常适合格栅系统：

页面的总体宽度布局，比如两栏、三栏等布局
一些固定区块的尺寸，比如广告图片的尺寸
区块之间的间距，可以参考栅格系统的槽宽（Gutter）
一些可以栅格化的小区域，暗合栅格往往能简化布局上的考虑。

阅读与：http://ued.taobao.com/blog/2008/09/grid_systems/。

　　　　http://ued.taobao.com/blog/2008/10/grid_system_research_1/

　　　　http://ued.taobao.com/blog/2008/10/grid_system_research_2/。

　　　　http://www.cnblogs.com/binyong/archive/2011/10/02/2197984.html。

　　　　http://www.cnblogs.com/yjmyzz/archive/2009/08/20/1550895.html。

转载于:https://www.cnblogs.com/feng003/archive/2013/05/17/3084057.html

Bootstrap（二）—格栅系统！相关推荐

bootstrap解析-栅格系统
.container(布局容器) 屏幕宽1200px以上(col-lg) 1. 默认width为1170px 2. padding,lefet和right各为15px,所以内容width为1140px ...
群晖备份linux分区,黑群晖二合一系统无损扩充系统分区方法补充
黑群晖二合一系统无损扩充系统分区方法补充 2020-01-19 14:54:08 28点赞 172收藏 35评论创作立场声明:本文作者也是经过多次重装实验,耗费了大把时间,值钱用diskgenius ...
linux命令实验设备,实验二 Linux系统的常用命令
实验二Linux系统的常用命令一.实验目的 1．X-windows的简单配置,掌握进入命令行模式和图形化模式的方法2．GNOME桌面的使用,包括注销与登录,系统信息的查看,GNOME下软件的使用3． ...
Linux基础优化方法（二）———系统安全相关优化：防火墙和selinux
Linux基础优化方法(二)---系统安全相关优化:防火墙和selinux 一.系统防火墙服务优化 1.CentOS 6 ①.查看防火墙服务状态 ②.临时关闭防火墙服务 ③.永久关闭防火墙服务 2.C ...
一文带你马上清楚bootstrap的栅格系统
bootstrap的栅格系统我们都知道bootstrap的栅格系统是为了实现网站的响应式布局,但bootstrap提供了一套响应式.移动设备优先的流式栅格系统,它会将网页分为12等价(宽度),举个例 ...
吴恩达《机器学习》学习笔记十二——机器学习系统
吴恩达<机器学习>学习笔记十二--机器学习系统一.设计机器学习系统的思想 1.快速实现+绘制学习曲线--寻找重点优化的方向 2.误差分析 3.数值估计二.偏斜类问题(类别不均衡) 三. ...
Bootstrap 默认栅格系统
Bootstrap的默认栅格系统为固定宽度布局,宽度为940px,共包含12列,每列的宽度为 60px,列间隙为 20px.如图 2‑1所示: 图2-1 Bootstrap默认栅格系统 HTML代码 ...
linux写入系统状态到文件夹,实验二 Linux系统简单文件操作命令
*实验二** Linux系统简单文件操作命令项目内容这个作业属于哪个课程这个作业的要求在哪里学号-姓名 17041518-孙小文作业学习目标学习在Linux系统终端下进行命令行操作 :掌握 ...
java.io.FileNotFoundException异常,一是“拒绝访问”，二是“系统找不到指定路径”
java.io.FileNotFoundException异常,一是"拒绝访问",二是"系统找不到指定路径" 参考文章: (1)java.io.FileNotF ...

Bootstrap（二）—格栅系统！

Bootstrap（二）—格栅系统！相关推荐

最新文章

热门文章