bootstrap3学习:响应式布局layout

骑猪看日落 2022-06-16 07:23 213阅读 0赞

# 1、像素宽度分类 #

在bootstrap的v3版本中，已经将各种媒介分为4种像素宽度类型：

![20160824163426156][]

*  **xs**：extra small 特别窄屏幕，默认指浏览器像素宽度小于768px
 *  **sm**：small 窄屏幕，默认指浏览器像素宽度大于等于768px
 *  **md**：middle 中等宽度屏幕，默认值指浏览器像素宽度大于等于992px
 *  **lg**：large 大屏幕，默认值指浏览器像素宽度大于等于1200px

这四种屏幕宽度对应的尺寸缩写死记硬背记住，对布局来说非常的重要。

# 2、布局栅格化 #

和v2一样，bootstrap将内容区域分为了12等分，平均每一等分都有相等的间距，左右无外边距。一个栅格宽度为栅格单位宽度，一个栅格的外边距为栅格的单位外边距。栅格的宽度和边距都是百分比计算，使之能够自适应各种宽度。栅格的class为`col-*`，栅格的外包class为`row`。每一个行可以有多个列组成的多行栅格，每一个行在形象意义上称为版块（模块、区域），是一个相对独立的部分。但一行有且只能一个行出现，不能出现多个。

![20160824163432152][]

结合屏幕宽度分别有：

*  **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][http_demo.qianduanblog.com_3150_1.html]

**\[html\]** view plain copy

print ? [![在CODE上查看代码片][CODE]][CODE_CODE] [![派生到我的代码片][ico_fork.svg]][ico_fork.svg 1]

1.  <div class=“row”>  
2.      <div class=“col-xs-4”></div>  
3.      <div class=“col-xs-4”></div>  
4.      <div class=“col-xs-4”></div>  
5.  </div>

![save_snippets.png][]

如上，xs宽度下，同行多列始终在一行内：

![20160824163438922][]

例2：[http://demo.qianduanblog.com/3150/2.html][http_demo.qianduanblog.com_3150_2.html]

**\[html\]** view plain copy

print ? [![在CODE上查看代码片][CODE]][CODE_CODE] [![派生到我的代码片][ico_fork.svg]][ico_fork.svg 1]

1.  <div class=“row”>  
2.      <div class=“col-sm-4”></div>  
3.      <div class=“col-sm-4”></div>  
4.      <div class=“col-sm-4”></div>  
5.  </div>

![save_snippets.png][]

如预期的一样，在大于等于768px的时候，多列是水平排列的，否则是垂直排列的：

![20160824163445938][]

对于md、lg和sm是同理的，惟独xs特殊。

在处理不同像素宽度的时候，大宽度的适配优先于窄宽度（即ls>md>sm>xs）。

例3：[http://demo.qianduanblog.com/3150/3.html][http_demo.qianduanblog.com_3150_3.html]

**\[html\]** view plain copy

print ? [![在CODE上查看代码片][CODE]][CODE_CODE] [![派生到我的代码片][ico_fork.svg]][ico_fork.svg 1]

1.  <div class=“row”>  
2.      <div class=“col-sm-4 col-md-1”></div>  
3.      <div class=“col-sm-4 col-md-10”></div>  
4.      <div class=“col-sm-4 col-md-1”></div>  
5.  </div>

![save_snippets.png][]

如上，md的优先级就高于sm，即：

*  在大于等于992px（md）的时候（即使此时也是大于等于768px（sm）的），该行多列是水平方向`1:10:1`栅格宽度排列的；
 *  在小于992px并且大于等于768px的时候，该行多列遵循sm规则，在水平方向`4:4:4`栅格宽度排列；
 *  在小于768px的时候，该行多列呈垂直方向排列（即水平方向`12:12:12`）。

如下图：

![20160824163453157][]

简要说明：

**\[javascript\]** view plain copy

print ? [![在CODE上查看代码片][CODE]][CODE_CODE] [![派生到我的代码片][ico_fork.svg]][ico_fork.svg 1]

1.  // 遵循md规则  
2.  if( width >= 992 ) 1:10:1  
3.  // 遵循sm规则  
4.  else if( width < 992 && width >= 768 ) 4:4:4  
5.  // 普通规则  
6.  else 12:12:12

![save_snippets.png][]

// 遵循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][http_demo.qianduanblog.com_3150_4.html]

**\[html\]** view plain copy

print ? [![在CODE上查看代码片][CODE]][CODE_CODE] [![派生到我的代码片][ico_fork.svg]][ico_fork.svg 1]

1.  <div class=“row”>  
2.      <div class=“col-xs-4 col-sm-1 col-md-1 col-lg-5”></div>  
3.      <div class=“col-xs-4 col-sm-3 col-md-10 col-lg-2”></div>  
4.      <div class=“col-xs-4 col-sm-8 col-md-1 col-lg-5”></div>  
5.  </div>

![save_snippets.png][]

如上，sm的优先级大于xs，md的优先级就高于xs，而lg的优先级又高于md，即：

*  在大于等于1200px的时候，呈水平5:2:2单位栅格宽度排列；
 *  在大于等于992px并且小于1200px的时候，呈水平1:10:1单位栅格宽度排列；
 *  在大于等于768px并且小于992px的时候，呈水平1:3:8单位栅格宽度排列；
 *  其余遵守xs规则，呈水平4:4:4单位栅格宽度排列。

如下图：

![20160824163459047][]

简要说明：

**\[javascript\]** view plain copy

print ? [![在CODE上查看代码片][CODE]][CODE_CODE] [![派生到我的代码片][ico_fork.svg]][ico_fork.svg 1]

1.  // 遵循lg规则  
2.  if( width >= 1200 ) 5:2:2  
3.  // 遵循md规则  
4.  else if( width < 1200 && width >= 992 ) 1:10:1  
5.  // 遵循sm规则  
6.  else if( width < 992 && width >= 768 ) 1:3:8  
7.  // 遵循xs规则  
8.  else 4:4:4

![save_snippets.png][]

// 遵循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][http_demo.qianduanblog.com_3150_5.html]

**\[html\]** view plain copy

print ? [![在CODE上查看代码片][CODE]][CODE_CODE] [![派生到我的代码片][ico_fork.svg]][ico_fork.svg 1]

1.  <div class=“row”>  
2.      <div class=“col-xs-4”></div>  
3.      <div class=“col-xs-4 col-xs-offset-4”></div>  
4.  </div>

![save_snippets.png][]

结果如图：

![20160824163504356][]

例6：[http://demo.qianduanblog.com/3150/6.html][http_demo.qianduanblog.com_3150_6.html]

**\[html\]** view plain copy

print ? [![在CODE上查看代码片][CODE]][CODE_CODE] [![派生到我的代码片][ico_fork.svg]][ico_fork.svg 1]

1.  <div class=“row”>  
2.      <div class=”  
3.          col-xs-4   
4.          col-sm-1   
5.          col-md-10   
6.          col-lg-6  
7.      ”></div>  
8.      <div class=”  
9.          col-xs-4 col-xs-offset-4   
10.         col-sm-1 col-sm-offset-10   
11.         col-md-1 col-md-offset-1   
12.         col-lg-1 col-lg-offset-5  
13.     ”></div>  
14. </div>

![save_snippets.png][]

结果如图：

![20160824163509391][]

另外push和pull主要用来调整列顺序的，比如视图情况需要内容区域在右边，侧边栏在左边，但源代码则必须内容在左边，侧边栏在右边，内容的代码在前面，对SEO据说有一点的好处。

例7：[http://demo.qianduanblog.com/3150/7.html][http_demo.qianduanblog.com_3150_7.html]

**\[html\]** view plain copy

print ? [![在CODE上查看代码片][CODE]][CODE_CODE] [![派生到我的代码片][ico_fork.svg]][ico_fork.svg 1]

1.  <div class=“row”>  
2.      <div class=“col-md-9 col-md-push-3”>  
3.          源代码左边，但视图在右边  
4.      </div>  
5.      <div class=“col-md-3 col-md-pull-9”>  
6.          源代码右边，但视图在右边  
7.      </div>  
8.  </div>

![save_snippets.png][]

<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][http_demo.qianduanblog.com_3150_8.html]

例9，经典的单内容栏：[http://demo.qianduanblog.com/3150/9.html][http_demo.qianduanblog.com_3150_9.html]

# 5、参考资料 #

bootstrap栅格系统：[http://getbootstrap.com/css/\#grid][http_getbootstrap.com_css_grid]

[20160824163426156]: /images/20220616/d9e55a232ffc461b92f2c00ac26fb025.png
[20160824163432152]: /images/20220616/8f73f471cb994eda976fc3599ffff2b9.png
[http_demo.qianduanblog.com_3150_1.html]: http://demo.qianduanblog.com/3150/1.html
[CODE]: https://code.csdn.net/assets/CODE_ico.png
[CODE_CODE]: https://code.csdn.net/snippets/1849129
[ico_fork.svg]: https://code.csdn.net/assets/ico_fork.svg
[ico_fork.svg 1]: https://code.csdn.net/snippets/1849129/fork
[save_snippets.png]: /images/20220616/938dfb15b49b4ae7a3f7e0c4b8b86a6e.png
[20160824163438922]: /images/20220616/80633e3302524a5f93ce0a7d7ceb1b21.png
[http_demo.qianduanblog.com_3150_2.html]: http://demo.qianduanblog.com/3150/2.html
[20160824163445938]: /images/20220616/671ddc69956246cfb78481a3520ab37c.png
[http_demo.qianduanblog.com_3150_3.html]: http://demo.qianduanblog.com/3150/3.html
[20160824163453157]: /images/20220616/09d9358e84d54b1cb0ed92af0c28cfdd.png
[http_demo.qianduanblog.com_3150_4.html]: http://demo.qianduanblog.com/3150/4.html
[20160824163459047]: /images/20220616/eba987ac48ef446792d369b7d8ad3255.png
[http_demo.qianduanblog.com_3150_5.html]: http://demo.qianduanblog.com/3150/5.html
[20160824163504356]: /images/20220616/e025acb9631c4c2a950024e153786099.png
[http_demo.qianduanblog.com_3150_6.html]: http://demo.qianduanblog.com/3150/6.html
[20160824163509391]: /images/20220616/a4c68e6fb9a643c3a8512995c604aa19.png
[http_demo.qianduanblog.com_3150_7.html]: http://demo.qianduanblog.com/3150/7.html
[http_demo.qianduanblog.com_3150_8.html]: http://demo.qianduanblog.com/3150/8.html
[http_demo.qianduanblog.com_3150_9.html]: http://demo.qianduanblog.com/3150/9.html
[http_getbootstrap.com_css_grid]: http://getbootstrap.com/css/#grid