Bootstrap栅格系统&媒体查询

bootstrap中几乎所有元素的盒子模型为IE下的盒模型,通俗点说就是box-sizing设置成了:border-box.

 

栅格系统

媒体查询

媒体查询是非常别致的"有条件的 CSS 规则"。它只适用于一些基于某些规定条件的 CSS。如果满足那些条件，则应用相应的样式。Bootstrap 中的媒体查询允许您基于视口大小移动、显示并隐藏内容。

断点 768px  992px 1200px       container:两边padding：15px     row：两边负margin 15px     col列：两边padding：15px

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

.container-fluid {                                //将最外面的布局元素 .container 修改为 .container-fluid，就可以将固定宽度的栅格布局转换为 100% 宽度的布局。
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}

.row:before,
.row:after{display: table;content: " ";}    //清除浮动  包住里面的 col

@media (min-width: 768px) { .container { width: 750px; } } 
@media (min-width: 992px) { .container { width: 970px; } } 
@media (min-width: 1200px) { .container { width: 1170px; } }

@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-8 {
    width: 66.66666667%;
  }
  .col-sm-4 {
    width: 33.33333333%;
  }
  ...
  ...
  ...
}