Bootstrap 网格系统

Bootstrap 网格系统

 

bootstrap框架中的网格系统就是将容器平分成12份，在使用的时候可以根据设备宽度：

1重新编译LESS/SASS源码来修改12这个数值

2选择对应的col-xs-*或col-sm-*或col-md-*或col-lg-*。

 

一．bootstrap网格格式：

//基本<div class="container或container-fluid">   <div class="row">      <div class="col-md-3"></div>      <div class="col-md-9"></div>         </div>   <div class="row">...</div></div><div class="container">.... //四种屏幕分类全部激活<div class="container">   <div class="row">      <div class="col-lg-3  col-md-4  col-sm-6  col-xs-12">4</div>      <div class="col-lg-3  col-md-4  col-sm-6  col-xs-12">4</div>      <div class="col-lg-3  col-md-4  col-sm-6  col-xs-12">4</div>   </div></div> //有时我们可以设置列偏移，让中间保持空隙【col-md-offset-1】<div class="container">   <div class="row">      <div class="col-md-8">8</div>      <div class="col-md-3  col-md-offset-1 ">3</div>   </div></div>//也可以嵌套，嵌满也是12 列<div class="container">   <div class="row">      <div class="col-md-3"></div>      <div class="col-md-9">         <div class="row">            <div class="col-md-6">宽度是父元素col-md-9的50%</div>            <div class="col-md-6">宽度是父元素col-md-9的50%</div>         </div>      </div>         </div>   <div class="row">...</div></div> //可以把两个列交换位置，push 向左移动，pull 向右移动【col-md-push-3】<div class="container">   <div class="row">      <div class="col-md-9  col-md-push-3">9</div>      <div class="col-md-3  col-md-pull-9">3</div>   </div></div>

二．bootstrap框架的网格系统工作原理：

1.容器container的固定宽度：

在bootstrap网格系统中带有响应式效果，分别为每种类型设置宽度

屏幕 < 768px

width=auto

col-xs-*

超小屏--手机

屏幕 >=768px

width=750px

col-sm-*

小屏幕--平板

屏幕 >=992px

width=970px

col-md-*

中屏--桌面显示器

屏幕 >=1200px

width=1170px

col-lg-*

大屏--大桌面显示器

.container {  padding-right: 15px;  padding-left: 15px;  margin-right: auto;  margin-left: auto;}/*当宽度<768px时，width未设置，为默认值auto，因为.container是div元素，所以宽度为整行*//*屏幕宽度>=768px时，.container宽度设为750px*/@media (min-width: 768px) {    .container {    width: 750px;  }}/*屏幕宽度>=992px时，.container宽度设为970px，并将上面750px覆盖*/@media (min-width: 992px) {    .container {    width: 970px;  }}/*屏幕宽度>=1200px时，.container宽度设为1170px，并将上面970px覆盖*/@media (min-width: 1200px) {  .container {    width: 1170px;  }}

 

2.容器container-fluid，100%宽度

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

3.自动选择对应的col-xs-*或col-sm-*或col-md-*或col-lg-*实现原理：

.col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12 {  float: left;}.col-xs-12 {  width: 100%;  }.col-xs-11 {  width: 91.66666667%;  }······@media (min-width: 768px) {  .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12 {    float: left;  }  .col-sm-12 {    width: 100%;  }  .col-sm-11 {    width: 91.66666667%;  }  ······}@media (min-width: 992px) {  .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 {    float: left;  }  .col-md-12 {    width: 100%;  }  .col-md-11 {    width: 91.66666667%;  }  ······}@media (min-width: 1200px) {  .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12 {    float: left;  }  .col-lg-12 {    width: 100%;  }  .col-lg-11 {    width: 91.66666667%;  }  ······}

当<div class="col-lg-3 col-md-4col-sm-6 col-xs-12 "></div>且屏幕应该是md时，

1.没有>1200px，所以.col-lg-*未定义

2.因为>992px了，所以.col-xs-* .col-sm-* .col-md-*都定义了，根据覆盖规则，在css样式表下面的覆盖上面的，所以这个div的width是由.col-md-*定义的

3.补充：class=""里没有先后关系，看css样式表的顺序先后。

 

4.边距实现原理：

.container {  padding-right: 15px;  padding-left: 15px;  margin-right: auto;  margin-left: auto;}.row {  margin-right: -15px;  margin-left: -15px;}.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {  position: relative;  min-height: 1px;  padding-right: 15px;  padding-left: 15px;}

 

5.列偏移实现原理：

利用十二分之一的margin-left，有多少个offset，就有多少个margin-left

.col-md-offset-12 {   margin-left: 100%;  }.col-md-offset-11 {   margin-left: 91.66666667%;  }.col-md-offset-10 {   margin-left: 83.33333333%;  }······

需要注意的是，使用col-md-offset-* 对列进行右偏移时，要保证列与偏移列的总数不超过12，不然会导致列断行显示

 

6.列排序实现原理：

列是相对定位且浮动的。bootstrap仅通过设置left和right来实现定位效果。

col-md-push-*右移和col-md-pull-*左移。.col-md-pull-12 {    right: 100%;  }.col-md-pull-11 {    right: 91.66666667%;  }.col-md-pull-10 {    right: 83.33333333%;  }.col-md-pull-9 {    right: 75%;  }······.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%;  }······

实例：

<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>  <br>  <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-md-8</div>  </div></div>

结果：