bootstrap3学习:响应式布局layout
1、像素宽度分类在bootstrap的v3版本中,已经将各种媒介分为4种像素宽度类型:
这四种屏幕宽度对应的尺寸缩写死记硬背记住,对布局来说非常的重要。 2、布局栅格化和v2一样,bootstrap将内容区域分为了12等分,平均每一等分都有相等的间距,左右无外边距。一个栅格宽度为栅格单位宽度,一个栅格的外边距为栅格的单位外边距。栅格的宽度和边距都是百分比计算,使之能够自适应各种宽度。栅格的class为 结合屏幕宽度分别有:
例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,即:
如下图: 简要说明: // 遵循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,即:
如下图: 简要说明: // 遵循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使用的频率最高。不同的列宽度对应的外边距是不同的,所以每一种类型偏移都有四种,以offset为例(以下皆以offset为例):
例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 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |