bootstrap3学:响应式布局layout
2016-07-07 18:19
573 查看
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源引:http://qianduanblog.com/post/bootstrap3-learning-1-responsive-layout.html
相关文章推荐
- Web布局连载——两栏固定布局(五)
- [div+css]晒晒最新制作专题推广页模板
- 盒子模型
- CSS选择器
- CSS样式优先权
- [css] line-height 百分比单位和数值单位的区别
- Apple官网研究之使用Justify布局导航
- 关于前端的思考与感悟
- rem : web app适配的秘密武器
- jquery高级应用之Deferred对象
- 移动端点击事件全攻略,这里的坑你知多少?
- $q 实例分析 Angular 中的 Promise
- 浏览器中唤起native app || 跳转到应用商城下载
- Angular directive 实例详解
- 关于浮动与清除浮动,你应该知道的
- 设计更快的网页(三):字体和 CSS 调整
- 纯CSS制作的新闻网站中的文章列表
- 10条影响CSS渲染速度的写法与使用建议第1/3页