boostrap中lg,md,sm,xs

boostrap中lg,md,sm,xs分別表示多少px？

.col-xs- 超小屏幕 手機 (<768px)
.col-sm- 小屏幕 平板 (≥768px)
.col-md- 中等屏幕 桌面顯示器 (≥992px)
.col-lg- 大屏幕 大桌面顯示器 (≥1200px)

bootstrap中四個class如何使用？

一個柵格代表1，總共十二個。以上四個類分別表示當屏幕的寬度為多少時，觸發相應的類

比如：

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

 

表示在.col-lg- 大屏幕 大桌面顯示器 (≥1200px)時，占一行的3/12，在.col-md- 中等屏幕 桌面顯示器 (≥992px)時，占4/12，在.col-sm- 小屏幕 平板 (≥768px)時，占6/12，在.col-xs- 超小屏幕 手機 (<768px)時，占12/12，也就是一行。

與之對應的，

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

 

移位的格數也要對應計算。

bootstrap框架就是按照類名顯示相應的樣式，內部已經做了響應式處理，來看一小段源碼：

@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%;
}
.col-sm-10 {
width: 83.33333333%;
}
.col-sm-9 {
width: 75%;
}
.col-sm-8 {
width: 66.66666667%;
}
.col-sm-7 {
width: 58.33333333%;
}
.col-sm-6 {
width: 50%;
}
.col-sm-5 {
width: 41.66666667%;
}
.col-sm-4 {
width: 33.33333333%;
}
.col-sm-3 {
width: 25%;
}
.col-sm-2 {
width: 16.66666667%;
}
.col-sm-1 {
width: 8.33333333%;
}

 

這里在css部分就做了處理。