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%;
  }
  ...
  ...
  ...
}