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

响应式网格系统

Bootstrap 1

响应式网格系统的定义

  • 将网页划分成列、行、外边距、隔离带(各列与各行之间的空)等由于同密密麻麻相交的水准轴及垂直轴组成的网格。
  • 网格布局之图在于重新实惠地操纵元素于网页遭到所占据比例之尺寸。比如,博客中生一个留言板模块,在可比好之屏幕上,我们愿意它占了右手
    25% 的肥瘦,在手机当比较粗的屏幕及,我们意在它们占 100%
    的大幅度,出现在博客文章下方。网格布局是千篇一律栽实现就同需要的点子,它的补益是,把具有的增长率分为固定栏数(常用
    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

进行阅读

  • Flexbox布局
  • Flexbox与网格布局之异同以及分级适用的面貌

参考资料

  • BootStrap 官网
  • BootStrap 的响应式 12
    栏网格布局
  • Creating Your Own CSS Grid
    System
  • How to build a responsive grid
    system
  • Designing grids

相关文章