Bootstrap的栅格化，响应式布局

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/xiaoleizhanghahaha/article/details/53355289

本人的理解，bootstrap的栅格化，是把整个设备的屏幕分为12份  每一行为综合为12 如下，是固定布局 栅格化固定布局

<div class="container">
        <div class="row">
            <div class="col-md-8">col-md-8</div>
            <div class="col-md-4">col-md-4</div>
        </div>
        <div class="row">
            <div class="col-md-4">col-md-4</div>
            <div class="col-md-4">col-md-4</div>
            <div class="col-md-4">col-md-4</div>
        </div>
        <div class="row">
            <div class="col-md-6">col-md-6</div>
            <div class="col-md-6">col-md-6</div>
        </div>
    </div>

1、包含在.container或.container-fluid中

<div class="container-fluid">
  <div class="row">
    ...
  </div>
</div>

2、创建栅格系统

.col-lg-* 桌面栅格类，适合大屏幕 大桌面显示器 (≥1200px)

.col-md-* 桌面栅格类，适合中等屏幕 桌面显示器 (≥992px)

.col-xs-* 移动栅格类，适合超小屏幕 手机 (<768px)

.col-sm-* 平板栅格类，适合小屏幕 平板 (≥768px)

叠加使用：在移动端5:7 ，在PC端8:4

<div class="container">
    <div class="row">
        <div class="col-xs-5 col-md-8">.col-xs-5 .col-md-8</div>
        <div class="col-xs-7 col-md-4">.col-xs-7 .col-md-4</div>
    </div>
</div>

 

叠加使用2：在移动端5：7，在平板端4：8，PC端8：4

 

    <div class="row">
        <div class="col-xs-5 col-sm-4 col-md-8">.col-xs-5 .col-sm-4 .col-md-8</div>
        <div class="col-xs-7 col-sm-8 col-md-4">.col-xs-7 .col-sm-8 .col-md-4</div>
    </div>

3、偏移，原理有多少*，就有多少*倍的margin-left

.col-md-* 对应.col-md-offset-*  

.col-xs-* 对应.col-xs-offset-*  

.col-sm-* 对应.col-sm-offset-*  

.col-lg-* 对应.col-lg-offset-*  

<div class="container">
    <div class="row" style="background: #ff0000">
        <div class="col-md-8 col-md-offset-2">col-md-8</div>
        <div class="col-md-2">col-md-2</div>
    </div>