Bootstrap响应式网格(栅格化)布局

响应式网格系统

Bootstrap 1

响应式网格系统的概念

  • 把网页划分成列、行、外边距、隔开带(各列与各行之间的空域)等由一多如牛毛相交的程度轴和垂直轴组成的网格。
  • 网格布局的意义在于更管用地控制成分在网页中所占比例的大大小小。比如,博客中有一个留言板模块,在相比大的显示器上,大家盼望它占了右侧四分之一 的肥瘦,在手提式有线电电话机等相比小的显示屏上,我们期待它占 百分百的增长幅度,出现在博客文章下方。网格布局是一种实现这一须求的办法,它的裨益是,把富有的增加率分为固定栏数(常用
    12 栏),从而更急速的支配成分宽度。

响应式系统的核心组成

通过BootStrap
官网
能够尤其详实地打听响应式网格是何许落到实处的,平常主体部分由以下构成:
Bootstrap 2

  • container
  • rows
  • columns
  • gutter(列与列之间的空白)
  • breakpoint(通过media query实现响应式)

创设网格系统此前供给领悟的作业

1.应有选用等宽的列吗?

按说来说,我们得以选取等宽的列或不等宽列来划分网格,那要控制于大家的网页复杂程度,一般都以利用等宽列,尤其灵活和实用,像Bootstrap框架,通过元素所占的列数很有益于总结出成分的上升幅度。

2.相应运用多少列?

Bootstrap 3

如上海体育场地,大家能够选用8栏、10栏、12栏都得以,日常取决于设计图的布局项目和内容,如一列、两列、三列布局等,假如不知底布局项目和内容的话,一般选拔灵活的12栏布局。
Bootstrap 4
Bootstrap 5

3.相应安装多大的列宽和间隔?

  • 解法一:由上而下,例如容器宽度为1140px,gutter为20px,则列宽为)1140px
    / 12 -20px。(经常选取那种艺术)
  • 解法二:由下往上,常常列宽设为距离的倍数,如gutter为20px,则列宽为60px。
    Bootstrap 6

4.怎么样让网格适应分歧视窗的分寸?

随着用户代理的轻重变化,列宽和距离供给在断点处breakpoint做出相应的转移以博得更好的视觉感受。
列宽使用比例,而距离gutter固定的大小px或rem。如Bootstrap

/* Bootstrap */
.col-md-4 {
  width: 33.33333%;
  padding-left: 15px;
  padding-right: 15px;
  float: left;
}

5.是或不是接纳预置类?

  • 行使预订类col-*(HTML grid systems),直接在html结构里添加

    <div class="row">
        <div class="col-md-8 col-lg-6"></div>
        <div class="col-md-4 col-lg-6"></div>
    </div>
    
    • 可取:直观、直接理解多少成分所占的列数
    • 症结:HTML结构膨胀,供给事先掌握布局
  • 不选用预定义类(CSS grid systems)

    <div class="content"></div>
    <div class="sidebar"></div>
    
    • 可取:可维护性强、不用更改HTML、直接在CSS钦命样式
    • 缺陷:不够直观
  • 应用第二种爱戴性好,应用性更强,当供给变动的时候,不用直接改动HTML的类名。详细点击那里响应式的话,应该接纳相对单位remem替代px

    .l-guest-article {
      @include clearfix;
      .l-main {
        margin-top: 20px;
        @media (min-width: 700px) {
          width: percentage(8/12);
          margin-top: 0;
          float: left;
        }
      }
      .l-sidebar {
        margin-top: 20px;
        @media (min-width: 700px) {
          width: percentage(8/12);
          float: right;
        }
      }
    }
    

开首创建你自身的响应式网格系统

下边起首营造响应式网格系统,明白Boostrap网格系统是怎么样完毕的。
在始发营造容器从前,供给对富有容器设置box-sizing性格,避防后期设置边框或间距的时候影响了成分的轻重。

html {
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

1.Grid container

.grid-container {
    width: 100%;
    max-width: 1200px; /*这里根据实际情况是否设置*/
    margin-right: auto;
    margin-left: auto;
}

2.Rows

因为对每一列设置了变通,所以容器row要求清理浮动。

 /*-- our cleafix hack -- */ 
.row:before, 
.row:after {
    content:"";
    display: table ;
     clear:both;
}

3.Columns

此处的列宽度,取决于你设定的网格栏数,如6栏,则每一栏大概为1/6。此处没有减去gutter的大小。

 [class*='col-'] {
    float: left;
    min-height: 1px; 
    width: 16.66%; 
}
  • 此情此景:浮动列为空的时候水平方向上产生折叠现象。
  • 案由:height: 0,width不为0的时候)float带来的影响。
  • 消除:列本人存在border或padding,不然要求设置min-height: 1px。

设若要预订义五个类的话,类似Bootstrap那样

.col-1{
    width: 16.66%; 
}
.col-2{
    width: 33.33%; 
}
.col-3{
    width: 50%; 
}
.col-4{
    width: 66.664%;
}
.col-5{
    width: 83.33%;
}
.col-6{
    width: 100%;
}

4.gutter的处理

Bootstrap 7

  • one-sided gutter

    • margin-right(供给十分处理最后四个边距的题材)

      /* For a 3-column grid */
      .grid-item:nth-child(3n+3) {
          margin-right: 0;
          float: right;
      }
      
    • padding-right(造成最终叁个因素的上涨幅度比前边的小,因为设置了box-sizing:
      border;)

  • Split gutters(使用那种方法就能幸免上述的标题)

    • marging-left 和 margin-right(供给利用calc减去gutter的大大小小)

      .grid-item {
        width: calc((100% - 20px * 3) / 3);
        margin-right: 10px;
        margin-left: 10px;
        float: left;
      }
      
      • 优点:HTML结构简单,不需求相当的子成分。
      • 缺点:IE9+,相比艰苦,要设置col-1~col-12每列都要这么设置,CSS代码冗余,而且转移边距的话须要全改。
    • padding-left 和 padding-right,须求在HTML结构列插手额外子元素。

       <div class="row">
          <div class="col-md-4 col-sm-6"><div class="inner"></div></div>
          <div class="col-md-4 col-sm-6"><div class="inner"></div></div>
          <div class="col-md-4 col-sm-12"><div class="inner"></div></div>
      </div>
      
      [class*="col-"] {
          padding-left: 10px;
          padding-right: 10px;
      }
      
      • 亮点:CSS代码:直接是分数,简洁,无需减去gutter。因为这是在容器col里面安装内边距。
      • 缺点:须求拾贰分的子成分

5.make your layouts responsive

Bootstrap 8
经过设置使用media设置断点

  • 此地没有使用预定义类。

    .l-guest-article {
      @include clearfix;
      .l-guest {
        @media (min-width: 700px) {
          width: percentage(4/12);
          float: left;
        }
    
        @media (min-width: 1200px) {
          width: percentage(2/12);
        }
      }
      .l-main {
        margin-top: 20px;
        @media (min-width: 700px) {
          width: percentage(8/12);
          margin-top: 0;
          float: left;
        }
        @media (min-width: 1200px) {
          width: percentage(7/12);
        }
      }
      .l-sidebar {
        margin-top: 20px;
        @media (min-width: 700px) {
          width: percentage(8/12);
          float: right;
        }
        @media (min-width: 1200px) {
          width: percentage(3/12);
          margin-top: 0;
        }
      }
    }
    
  • 利用预约义类,一样的道理通过媒体询问,然后把需求的类添加到HTML结构即可。

    @media all and (max-width: 768px) {
        .col-sm-1 {
            width: 8.33%;
        }
    
        .col-sm-2 {
            width: 16.66%;
        }
    
        .col-sm-3 {
            width: 25%;
        }
    
        .col-sm-4 {
            width: 33.33%;
        }
    
        .col-sm-5 {
            width: 41.66%;
        }
    
        .col-sm-6 {
            width: 50%;
        }
    
        .col-sm-7 {
            width: 58.33%;
        }
    
        .col-sm-8 {
            width: 66.66%;
        }
    
        .col-sm-9 {
            width: 75%;
        }
    
        .col-sm-10 {
            width: 83.33%;
        }
    
        .col-sm-11 {
            width: 91.66%;
        }
    
        .col-sm-12 {
            width: 100%;
        }
    }
    

实例应用

Bootstrap 9

Demo

进展阅读

参考资料

相关文章