bootstrap 媒體查詢

 //各類設備的分辨率
 /*超小設備（手機，小於768px)*/
  /* Bootstrap 中默認情況下沒有媒體查詢 */
 /*超小型設備（小於768px）*/
 @media (min-width:@screen-xs-min){...}
  /*小型設備（平板電腦，768px起）*/
 @media (min-width:@screen-sm-min){...}
  
  /*中型設備（台式電腦，992px起）*/
 @media (min-width:@screen-md-min){...}
 
 /*大型設備（大台式電腦，1200px起）*/
 @media (min-width:@screen-lg-min){...}

@media only screen and (max-width:768px){ //意思是在屏幕寬度小於768px時
//這里寫想要在小屏幕里實現的樣式
}

使用bootsrap時，在想要使用的塊元素上添加類如 ：

在大型設備顯示1/6列、中型設備顯示1/3列、小型設備（ipad）顯示1/2列、超小型設備顯示1列，添加

<div class="col-lg-2 col-md-4 col-sm-6 col-xs-12"></div>

偏移列

大屏幕上使用偏移：.col-md-offset-*類，左外邊距增加*列（其中*范圍是1-11）

列排序

.col-md-push-* 和 .col-md-pull-* 類，互換兩列的順序