首页 > 代码库 > bootstrap(3)关于栅格系统

bootstrap(3)关于栅格系统

一:栅格系统的介绍

栅格系统是Bootstrap提供的一套响应式,移动设备优先的流式栅格系统,随着屏幕或者视口尺寸的增加,系统会被自动分为最多12列。

栅格系统通过一系列的行和列来组合创建页面布局,我们将内容放入创建好的布局之中,

二:栅格系统的结构与详解

栅格系统的结构:

<div  class="container">
        <div class="row">
                 <div  class="col-md-1"></div>
        </div>
</div>  

行(row)必须包含在一个 (.container)或者  (.container-fluid)的容器内,这两种容器不能嵌套,

关于container和 container-fluid的区别在于:

我们可以通过观察在bootstrap中的源码可以发现:

.container {
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}
@media (min-width: 768px) {
  .container {
    width: 750px;
  }
}
@media (min-width: 992px) {
  .container {
    width: 970px;
  }
}
@media (min-width: 1200px) {
  .container {
    width: 1170px;
  }
}  

我们可以发现,使用类名时container的容器实现的是响应式布局,实现媒体查询过程来实现的

也就是说对于不同的设备,容器的宽度时不一样的

对于 容器类是 container-fluid我们可以看到源码如下:

.container-fluid {
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}

我们可以看到,默认宽度为100%

2,关于栅格系统在不同页面下的布局

我们可以看到针对于不同的设备,我们设定的类是不同的

移动设备: .col-xs-*

平板:.col-sm-*

笔记本中等设备: .col-md-*

 

技术分享

对于栅格系统而言:

如果在一行内内包含的列大于12个,包含多余列的元素将会作为一个整体单元被另起一行排列

3,列偏移

还可以通过   .col-[md|sm|xs]-offset-*实现列偏移, 实现的效果是将当前元素添加左侧的边距,

例如:  .col-md-offset-4将 .col-md-4元素向右侧偏移了4个列的宽度

实现效果如下:

技术分享

代码如下:

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

可以看到第二个div向右偏移了4列,注意,因为我们这儿只是使用的col-md-offset,因此只在桌面大小的屏幕上起作用,同样,我们也可以针对平板和手机设备

4,使用嵌套列:

使用嵌套列的原理是在

在已经存在的 .col-sm-*内通过添加一个新的 .row元素 和 一系列的 .col-sm-*元素来实现嵌套效果的

代码如下:

<div  class="row">
      <div class="col-md-9">
          <div  class="row">
               <div  class="col-md-6"></div>
               <div  class="col-md-6"></div>
          </div>
      </div> 
</div>  

  

技术分享

 

效果如上图所示:

5关于列排序

列排序的目的是改变列的顺序

使用的是  .col-md-push-* 和  .col-md-pull-*来实现的 

原理:

源码如下:

.col-md-push-12 {
    left: 100%;
  }
  .col-md-push-11 {
    left: 91.66666667%;
  }
  .col-md-push-10 {
    left: 83.33333333%;
  }
  .col-md-push-9 {
    left: 75%;
  }

  我们可以看到,实际上改变的是距离左边的距离:

对于 .col-md-pull-*改变的是栅格距离右边的距离

代码如下:

<div class="container">
    <div class="row">
        <div class="col-md-4">排序前col-md-4</div>
        <div class="col-md-8">排序前col-md-8</div>
    </div>
    <div class="row">
        <div class="col-md-4 col-md-push-8">排序后col-md-4</div>
        <div class="col-md-8  col-md-pull-4">排序后col-me-8</div>
    </div>
</div>

效果如下图所示:

技术分享

其实是用col-md-pull或者col-md-push改变的只是距离左边或者右边的距离

例如上面的效果所示:

排序后:col-md-4距离左边(col-md-push)8个格子

           col-md-8距离右边(col-md-pull     )4个格子

 

bootstrap(3)关于栅格系统