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部分就做了处理。

转载于:https://www.cnblogs.com/siwy/p/4943075.html