Bootstrap研究1-精巧的网格布局系统
Bootstrap研究1-精巧的网格布局系统
本网格布局系统属于Scaffolding(框架,布局)部分。在Scaffolding里面有(固定)网格布局(Grid System)和流式网格布局(Fluid Grid System)。本文讨论第一种固定网格布局。
Bootstrap采用的是12列布局格式,即在页面一行之内最多可以布置12列。当然我们通常不会那么变态。我们通常是使用2列,或者3列,最多不会超过4列。那么具体怎么设置这些列呢?ok,慢慢说来。
Bootstrap中规定页面的总的宽度为940px,这个跟其他的CSS框架不太一样(其他有的是960px(960grid等),有点是950px(blueprint等))。这个940px是在一个名称为container的类中规定的,具体如下
.container,
{width: 940px;
}
还有就是规定了这个container的页面居中
.container {margin-left: auto;margin-right: auto;*zoom: 1;
}
(这里有个技巧,为了让div在各种浏览器下下产生同样的居中效果将margin-left和margin-right的值为auto是最简单的方式。*zoom这个css hack是为了兼容ie6和7,但具体为什么要使用zoom=1还不得而知。)
同时,还使用了css伪元素选择器,在这个类里面还清空了前后的内容,并且在后面还清除了浮动
.container:before,
.container:after {display: table;content: "";
}
.container:after {clear: both;
}
在container里面还不能直接进行多列布局,这个时候还需要使用row作为二级容器,row这个容器的样式挺有意思
.row {margin-left: -20px;*zoom: 1;
}
左边的margin为-20px,注意是负20.即是说row的宽度会突破外部的container20个像素。为什么呢?待会你就知道了。当然row里面也有设置清空前后内容和浮动的样式,跟container类似,此处不多敖述。
row里面才是我们要进行的具体多列布局的类span。具体使用布局时,代码大概这样
<div class="container"><div class="row"><div class="span4">span4</div><div class="span8">span8</div></div></div>
为什么不能将span直接放入container中,为什么row要margin-left=-20px?这就要细说一下span,这个也是笔者所讲“精巧网格布局”的原因。
确实情形下,Bootstrap共有12个span类,分别为span1,span2,….span12.他们的定义非常简单
.span12 {width: 940px;
}
.span11 {width: 860px;
}
。。。
.span4 {width: 300px;
}
.span3 {width: 220px;
}
.span2 {width: 140px;
}
.span1 {width: 60px;
}
当然还有使用伪类选择器统一将他们设置为浮动的样式
[class*="span"] {float: left;
}
浮动是另外的理论,我们按下不表。我们仔细看从span1到span12,发现一个规律,就是span每增加一次,就增加80px。只是span1是从60开始计数的,为什么不让span1从80开始计数,然后每个span都是80的倍数,这样也容易记忆呢?实际上啊,span还真是从80开始计数的。只不过其可视部分是60,另外的20在样式里面设置了margin-left=20;如下
[class*="span"] {margin-left: 20px;
}
这个20还有另外一个意义,就是其可以在页面上表示两个span之间的间隔,即所有的span之间都有20px的间隔,不至于黏在一起,让终端用户分不开。以下这个图,就是刚才那段html代码在浏览器里面的效果
即是80的整数倍便于记忆和使用,又能巧妙的分割多个span,多完美的解决方案啊。但是这样真的没有问题吗?好像不对,你看啊,我们例子中span4的实际宽度为300+20,span8的实际宽度为620+20.那么他们的总和为960. 960突破了container的940了啊?并且如果每个span左侧都有20px的空白,那么第一列也会有这个20px的空白,那页面最左侧是不是就难看了啊?
这个就是刚才我们引入row作为二级容器,并将其margin-left设置为-20的原因。你刚才看到的蓝色相框就是row容器。
具体如下,整个row的宽度为960,但是其向左偏移20px(margin-left=-20),这20个px纯粹是不可见的空白。row内真正可视的部分正好对其了页面的左边。同时因为向左偏移了20px,那么可视部分也正好放入了容器container的940px内。
Bootstrap布局理论大略如此。
接下来简单谈一下使用span进行整页布局的一个技巧:无论是做几列的布局,那么请一定保证在一个row内的各个span的名字加起来正好是12. 比如可以是前面说的span4+span8;也可以是一个单独的span12;也可以是span6+ span6;或者span4+ span4+ span4等等。
注:文字中谈的数字(比如container的宽度为940px,每个span的宽度都是缺省值,实际开发中我们可以适当重写。)
SpaceBuilder,构建您的空间...
Bootstrap研究1-精巧的网格布局系统相关推荐
- Bootstrap研究2-布局系统杂记
Bootstrap研究2-布局系统杂记 上一篇文字Bootstrap研究1-精巧的网格布局系统,里面谈到了使用固定grid布局的原理和操作实践.关于布局部分还有一些要交代,权且凑为一篇. 除了固定网格 ...
- 一、bootstrap4基础(布局系统、栅格系统、显示与隐藏、对齐与排列、内容排版、代码与图文、表格样式、颜色和边框、工具类)
1.1 Bootstrap简单介绍 1.2 Bootstrap结构 1.3 Bootstrap安装和测试 1.4 布局系统 1.5 栅格系统 4.6 栅格等级 1.7 显示与隐藏 1.7 对齐与排列 ...
- Grid网格布局详细讲解
'Grid是CSS3中网格布局系统,也是CSS3中最强大的布局系统.它是一个二维布局系统,这意味着它可以处理列和行,不像flex弹性布局主要是一维系统,他像表格一样可以让我们控制行或者例对齐,可以控制 ...
- HTML+CSS_第三部分(Flex弹性盒子布局、grid网格布局、移动端、移动端流式布局、移动端rem布局、响应式布局、Bootstrap框架)
文章目录 (1)Flex弹性盒子布局 一: 父容器上的属性 1. display:flex 设置为弹性盒子(写在父容器上) 2.flex-direction值 设置子项的布局方向(写在父容器上) 3. ...
- BootStrap网格布局
如何使用BootStrap样式 BootStrap与其他的开源库类似,直接引用它的css样式文件就可以使用了. <link rel="stylesheet" href=&qu ...
- Bootstrap——网格布局
网格布局 如图: 网格布局的列数最多可以分为12列 如果要列数大于12则会另起一行补齐多余的列数 如果份数相加小于12则会铺不满整个宽度 代码如下: <!DOCTYPE html> < ...
- CSS 学习笔记 - 网格布局(栅格系统)
CSS 学习笔记 - 网格布局(栅格系统) 开启网格模式 基本概念 属性说明 容器属性 内容属性 效果展示 grid-template-rows.grid-template-columns 基本用法 ...
- Bootstrap之移动设备优先、栅格系统、媒体查询,响应式式布局
1. html5中head标签里引入 meta Bootstrap 实行移动端优先原则 响应式布局 <meta name="viewport" content="w ...
- grid layout(网格布局、栅格布局、grid布局):bootstrap,请到历史书报道!
grid布局就是表格布局(grid layout),或者称之为栅格布局也行.因为栅格布局的概念来自于bootstrap,这里使用栅格布局来与bootstrap做关联,是因为它俩是描述的同一个东西.自从 ...
最新文章
- Spring Security3.1登陆验证
- 节点的度与网络稀疏性
- asp.net Page页面中的一个有用属性
- 统计dataframe中所有列的null数量与填充null注意事项
- SAP Spartacus CmsPage的加载逻辑
- MySQL5.5读写分离之mysql-proxy
- 怎么让存储过程通用化_怎么做分布式存储的面试?
- 彻底搞懂 Java 中的注解 Annotation
- weblogic linux sun/awt/X11GraphicsEnvironment
- 磁共振t1t2信号记忆顺口溜_10分钟记住脑出血核磁表现(一):T1、T2篇
- 【CCPC-Wannafly Winter Camp Day4 (Div1) A】夺宝奇兵(水题)
- C++算法学习(栈)
- C# 使用 Topshelf 创建Windows服务
- 给初学者:用VB写外挂 ———— 实战一:动手写一个红色警戒金钱锁定工具
- googleseo只做内容不做外链行不行?(e6zzseo)
- Maya材质球与渲染基础--Redshift,Arnold,Xgen
- 第二十九篇 -- 学习第五十六天打卡20190826
- pvs显示unknown device
- C#:实现数据去重算法​(附完整源码)
- Bitwig Studio 4.0.1 x64 Windows+Linux 音乐制作宿主软件
热门文章
- easyplayerpro 使用说明_EasyPlayerPro(Windows)流媒体播放器开发之ffmpeg log输出报错
- 傲腾明年爆发 Intel霸占企业市场,成SSD真正赢家
- 异常收集之:navicatdesignquery.sql.bak 系统找不到指定路径
- iOS:Xcode8以下真机测试iOS10.0和iOS10.1配置包
- 友盟页面访问路径全量统计功能上线啦!
- ios8 地图不能定位问题的解决办法
- 由通知栏进入到应用的尝试
- 使用控制结构——循环语句——基本循环
- jQuery:插入,复制,替换和删除节点
- JavaScript跨域问题分析与总结_直来直往_百度空间