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

bootstrap(3)关于栅格系统

2024-09-21 15:17:24   216人阅读

一：栅格系统的介绍

栅格系统是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)关于栅格系统


联系
我们