bootstrap3学习:响应式布局layout

最新推荐文章于 2023-03-04 11:59:15 发布

pengmingdong

最新推荐文章于 2023-03-04 11:59:15 发布

阅读量1.1k

点赞数

分类专栏：前端笔记文章标签： bootstrap 响应式布局

前端笔记专栏收录该内容

37 篇文章 3 订阅

订阅专栏

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

[html] view plain copy

print ?

<div class=“row”>
<div class=“col-xs-4”></div>
<div class=“col-xs-4”></div>
<div class=“col-xs-4”></div>
</div>

<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

[html] view plain copy

print ?

<div class=“row”>
<div class=“col-sm-4”></div>
<div class=“col-sm-4”></div>
<div class=“col-sm-4”></div>
</div>

<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

[html] view plain copy

print ?

<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>

<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）。

如下图：

简要说明：

[javascript] view plain copy

print ?

// 遵循md规则
if( width >= 992 ) 1:10:1
// 遵循sm规则
else if( width < 992 && width >= 768 ) 4:4:4
// 普通规则
else 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

[html] view plain copy

print ?

<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>

<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单位栅格宽度排列。

如下图：

简要说明：

[javascript] view plain copy

print ?

// 遵循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

// 遵循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

[html] view plain copy

print ?

<div class=“row”>
<div class=“col-xs-4”></div>
<div class=“col-xs-4 col-xs-offset-4”></div>
</div>

<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

[html] view plain copy

print ?

<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>

<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

[html] view plain copy

print ?

<div class=“row”>
<div class=“col-md-9 col-md-push-3”>
源代码左边，但视图在右边
</div>
<div class=“col-md-3 col-md-pull-9”>
源代码右边，但视图在右边
</div>
</div>

<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

pengmingdong

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
bootstrap3学习:响应式布局layout

1、像素宽度分类在bootstrap的v3版本中，已经将各种媒介分为4种像素宽度类型：xs：extra small 特别窄屏幕，默认指浏览器像素宽度小于768pxsm：small 窄屏幕，默认指浏览器像素宽度大于等于768pxmd：middle 中等宽度屏幕，默认值指浏览器像素宽度大于等于992pxlg：large 大屏幕，默认值指浏览器像素宽度大于等于1200px这四种屏幕宽度对应的尺寸缩写死
复制链接

扫一扫