响应式布局layout
2016-06-03 17:04
246 查看
在去年的这个时候写过关于bootstrap的相关文章(见:bootstrap2学习1:基本CSS样式),然后就搁置了,原因是因为当时对bootstrap的了解不深,并且当时v2版本对响应式设计的不是非常好。如今,bootstrap的v3版本很早就出来了,现在又拿出来老调重弹一次。
这次学习bootstrap,希望是一次比较深入的了解bootstrap,但愿能够在实际开发中运用的得心应手。学习的步骤大致根据bootstrap的中文翻译文档(见参考资料)来,但也有部分地方会深入或者浅出。
在bootstrap的v3版本中,已经将各种媒介分为4种像素宽度类型:
xs:extra small 特别窄屏幕,默认指浏览器像素宽度小于768px
sm:small 窄屏幕,默认指浏览器像素宽度大于等于768px
md:middle 中等宽度屏幕,默认值指浏览器像素宽度大于等于992px
lg:large 大屏幕,默认值指浏览器像素宽度大于等于1200px
这四种屏幕宽度对应的尺寸缩写死记硬背记住,对布局来说非常的重要。
和v2一样,bootstrap将内容区域分为了12等分,平均每一等分都有相等的间距,左右无外边距。一个栅格宽度为栅格单位宽度,一个栅格的外边距为栅格的单位外边距。栅格的宽度和边距都是百分比计算,使之能够自适应各种宽度。栅格的class为
结合屏幕宽度分别有:
xs:col-xs-1 ~ col-xs-12,多列始终在一行内。
sm:col-sm-1 ~ col-sm-12,多列在浏览器像素宽度大于等于768px时才在一行内。
md:col-md-1 ~ col-md-12,多列在浏览器像素宽度大于等于992px时才在一行内。
lg:col-lg-1 ~ col-lg-12,多列在浏览器像素宽度大于等于1200px时才在一行内。
例1:http://demo.qianduanblog.com/3150/1.html
<div class="row">
<div class="col-xs-4"></div>
<div class="col-xs-4"></div>
<div class="col-xs-4"></div>
</div>
如上,xs宽度下,同行多列始终在一行内:
例2:http://demo.qianduanblog.com/3150/2.html
<div class="row">
<div class="col-sm-4"></div>
<div class="col-sm-4"></div>
<div class="col-sm-4"></div>
</div>
如预期的一样,在大于等于768px的时候,多列是水平排列的,否则是垂直排列的:
对于md、lg和sm是同理的,惟独xs特殊。
在处理不同像素宽度的时候,大宽度的适配优先于窄宽度(即ls>md>sm>xs)。
例3:http://demo.qianduanblog.com/3150/3.html
<div class="row">
<div class="col-sm-4 col-md-1"></div>
<div class="col-sm-4 col-md-10"></div>
<div class="col-sm-4 col-md-1"></div>
</div>
如上,md的优先级就高于sm,即:
在大于等于992px(md)的时候(即使此时也是大于等于768px(sm)的),该行多列是水平方向
在小于992px并且大于等于768px的时候,该行多列遵循sm规则,在水平方向
在小于768px的时候,该行多列呈垂直方向排列(即水平方向
如下图:
简要说明:
// 遵循md规则
if( width >= 992 ) 1:10:1
// 遵循sm规则
else if( width < 992 && width >= 768 ) 4:4:4
// 普通规则
else 12:12:12
例4:http://demo.qianduanblog.com/3150/4.html
<div class="row">
<div class="col-xs-4 col-sm-1 col-md-1 col-lg-5"></div>
<div class="col-xs-4 col-sm-3 col-md-10 col-lg-2"></div>
<div class="col-xs-4 col-sm-8 col-md-1 col-lg-5"></div>
</div>
如上,sm的优先级大于xs,md的优先级就高于xs,而lg的优先级又高于md,即:
在大于等于1200px的时候,呈水平5:2:2单位栅格宽度排列;
在大于等于992px并且小于1200px的时候,呈水平1:10:1单位栅格宽度排列;
在大于等于768px并且小于992px的时候,呈水平1:3:8单位栅格宽度排列;
其余遵守xs规则,呈水平4:4:4单位栅格宽度排列。
如下图:
简要说明:
理解了栅格化,那么栅格偏移也相对容易理解了。v3的偏移分别有以下几种:
offset:左外边距(margin-left);
pull:右位移(right);
push:左位移(left)。
其中offset使用的频率最高。不同的列宽度对应的外边距是不同的,所以每一种类型偏移都有四种,以offset为例(以下皆以offset为例):
xs:col-xs-offset-0 ~ col-xs-offset-12
sm:col-sm-offset-0 ~ col-sm-offset-12
md:col-md-offset-0 ~ col-md-offset-12
lg:col-lg-offset-0 ~ col-lg-offset-12
例5:http://demo.qianduanblog.com/3150/5.html
<div class="row">
<div class="col-xs-4"></div>
<div class="col-xs-4 col-xs-offset-4"></div>
</div>
结果如图:
例6:http://demo.qianduanblog.com/3150/6.html
<div class="row">
<div class="
col-xs-4
col-sm-1
col-md-10
col-lg-6
"></div>
<div class="
col-xs-4 col-xs-offset-4
col-sm-1 col-sm-offset-10
col-md-1 col-md-offset-1
col-lg-1 col-lg-offset-5
"></div>
</div>
结果如图:
另外push和pull主要用来调整列顺序的,比如视图情况需要内容区域在右边,侧边栏在左边,但源代码则必须内容在左边,侧边栏在右边,内容的代码在前面,对SEO据说有一点的好处。
例7:http://demo.qianduanblog.com/3150/7.html
<div class="row">
<div class="col-md-9 col-md-push-3">
源代码左边,但视图在右边
</div>
<div class="col-md-3 col-md-pull-9">
源代码右边,但视图在右边
</div>
</div>
例8,经典的左侧边栏+右内容栏:http://demo.qianduanblog.com/3150/8.html
例9,经典的单内容栏:http://demo.qianduanblog.com/3150/9.html
bootstrap栅格系统:http://getbootstrap.com/css/#grid
这次学习bootstrap,希望是一次比较深入的了解bootstrap,但愿能够在实际开发中运用的得心应手。学习的步骤大致根据bootstrap的中文翻译文档(见参考资料)来,但也有部分地方会深入或者浅出。
1、像素宽度分类
在bootstrap的v3版本中,已经将各种媒介分为4种像素宽度类型:xs:extra small 特别窄屏幕,默认指浏览器像素宽度小于768px
sm:small 窄屏幕,默认指浏览器像素宽度大于等于768px
md:middle 中等宽度屏幕,默认值指浏览器像素宽度大于等于992px
lg:large 大屏幕,默认值指浏览器像素宽度大于等于1200px
这四种屏幕宽度对应的尺寸缩写死记硬背记住,对布局来说非常的重要。
2、布局栅格化
和v2一样,bootstrap将内容区域分为了12等分,平均每一等分都有相等的间距,左右无外边距。一个栅格宽度为栅格单位宽度,一个栅格的外边距为栅格的单位外边距。栅格的宽度和边距都是百分比计算,使之能够自适应各种宽度。栅格的class为col-*,栅格的外包class为
row。每一个行可以有多个列组成的多行栅格,每一个行在形象意义上称为版块(模块、区域),是一个相对独立的部分。但一行有且只能一个行出现,不能出现多个。
结合屏幕宽度分别有:
xs:col-xs-1 ~ col-xs-12,多列始终在一行内。
sm:col-sm-1 ~ col-sm-12,多列在浏览器像素宽度大于等于768px时才在一行内。
md:col-md-1 ~ col-md-12,多列在浏览器像素宽度大于等于992px时才在一行内。
lg:col-lg-1 ~ col-lg-12,多列在浏览器像素宽度大于等于1200px时才在一行内。
例1:http://demo.qianduanblog.com/3150/1.html
<div class="row">
<div class="col-xs-4"></div>
<div class="col-xs-4"></div>
<div class="col-xs-4"></div>
</div>
如上,xs宽度下,同行多列始终在一行内:
例2:http://demo.qianduanblog.com/3150/2.html
<div class="row">
<div class="col-sm-4"></div>
<div class="col-sm-4"></div>
<div class="col-sm-4"></div>
</div>
如预期的一样,在大于等于768px的时候,多列是水平排列的,否则是垂直排列的:
对于md、lg和sm是同理的,惟独xs特殊。
在处理不同像素宽度的时候,大宽度的适配优先于窄宽度(即ls>md>sm>xs)。
例3:http://demo.qianduanblog.com/3150/3.html
<div class="row">
<div class="col-sm-4 col-md-1"></div>
<div class="col-sm-4 col-md-10"></div>
<div class="col-sm-4 col-md-1"></div>
</div>
如上,md的优先级就高于sm,即:
在大于等于992px(md)的时候(即使此时也是大于等于768px(sm)的),该行多列是水平方向
1:10:1栅格宽度排列的;
在小于992px并且大于等于768px的时候,该行多列遵循sm规则,在水平方向
4:4:4栅格宽度排列;
在小于768px的时候,该行多列呈垂直方向排列(即水平方向
12:12:12)。
如下图:
简要说明:
// 遵循md规则
if( width >= 992 ) 1:10:1
// 遵循sm规则
else if( width < 992 && width >= 768 ) 4:4:4
// 普通规则
else 12:12:12
例4:http://demo.qianduanblog.com/3150/4.html
<div class="row">
<div class="col-xs-4 col-sm-1 col-md-1 col-lg-5"></div>
<div class="col-xs-4 col-sm-3 col-md-10 col-lg-2"></div>
<div class="col-xs-4 col-sm-8 col-md-1 col-lg-5"></div>
</div>
如上,sm的优先级大于xs,md的优先级就高于xs,而lg的优先级又高于md,即:
在大于等于1200px的时候,呈水平5:2:2单位栅格宽度排列;
在大于等于992px并且小于1200px的时候,呈水平1:10:1单位栅格宽度排列;
在大于等于768px并且小于992px的时候,呈水平1:3:8单位栅格宽度排列;
其余遵守xs规则,呈水平4:4:4单位栅格宽度排列。
如下图:
简要说明:
// 遵循lg规则 if( width >= 1200 ) 5:2:2 // 遵循md规则 else if( width < 1200 && width >= 992 ) 1:10:1 // 遵循sm规则 else if( width < 992 && width >= 768 ) 1:3:8 // 遵循xs规则 else 4:4:4
3、栅格偏移
理解了栅格化,那么栅格偏移也相对容易理解了。v3的偏移分别有以下几种:offset:左外边距(margin-left);
pull:右位移(right);
push:左位移(left)。
其中offset使用的频率最高。不同的列宽度对应的外边距是不同的,所以每一种类型偏移都有四种,以offset为例(以下皆以offset为例):
xs:col-xs-offset-0 ~ col-xs-offset-12
sm:col-sm-offset-0 ~ col-sm-offset-12
md:col-md-offset-0 ~ col-md-offset-12
lg:col-lg-offset-0 ~ col-lg-offset-12
例5:http://demo.qianduanblog.com/3150/5.html
<div class="row">
<div class="col-xs-4"></div>
<div class="col-xs-4 col-xs-offset-4"></div>
</div>
结果如图:
例6:http://demo.qianduanblog.com/3150/6.html
<div class="row">
<div class="
col-xs-4
col-sm-1
col-md-10
col-lg-6
"></div>
<div class="
col-xs-4 col-xs-offset-4
col-sm-1 col-sm-offset-10
col-md-1 col-md-offset-1
col-lg-1 col-lg-offset-5
"></div>
</div>
结果如图:
另外push和pull主要用来调整列顺序的,比如视图情况需要内容区域在右边,侧边栏在左边,但源代码则必须内容在左边,侧边栏在右边,内容的代码在前面,对SEO据说有一点的好处。
例7:http://demo.qianduanblog.com/3150/7.html
<div class="row">
<div class="col-md-9 col-md-push-3">
源代码左边,但视图在右边
</div>
<div class="col-md-3 col-md-pull-9">
源代码右边,但视图在右边
</div>
</div>
4、布局实例
例8,经典的左侧边栏+右内容栏:http://demo.qianduanblog.com/3150/8.html例9,经典的单内容栏:http://demo.qianduanblog.com/3150/9.html
5、参考资料
bootstrap栅格系统:http://getbootstrap.com/css/#grid
相关文章推荐
- 使用TextInputLayout分分钟构造一个酷炫登录框架
- 揭开Spring事务处理
- union 和 struct 的区别与联系
- 71. Simplify Path
- 第十五周项目1:阅读程序,领会STL用法(3)
- UVA1637Double Patience(概率 + 记忆化搜索)
- iOS设置圆角的几种方式
- mybatis 中 foreach collection的三种用法
- Servlet建立一个图片验证码程序
- mingw 编译 boost出错解决办法
- 从头到尾彻底理解傅里叶变换算法(上)
- XlLineStyle 枚举 (Excel)
- Android Studio 使用中的相关“Bug”记录
- c#泛型结合Linq实现从数据源中截取指定位置,行数的数据
- hdu 1021 Fibonacci Again 找规律
- 成员变量作为成员函数的默认参数
- 21、Dom元素的灵活查找--通过className条件筛选
- 字符串转化为Date兼容性问题
- 欢迎使用CSDN-markdown编辑器
- 卡顿检测---来自老谭