Bootstrap栅格系统的屏幕大小


关键词

Bootstrap 栅格 屏幕

摘要

在Bootstrap的栅格系统中有col-xs,col-sm,col-md,col-lg等几类,分别代表多大的屏幕呢?

/* 超小屏幕(手机,小于 768px) */
/* 没有任何媒体查询相关的代码,因为这在 Bootstrap 中是默认的(还记得 Bootstrap 是移动设备优先的吗?) */
.col-xs-

/* 小屏幕(平板,大于等于 768px) */
@media (min-width: @screen-sm-min) { ... }
.col-sm-

/* 中等屏幕(桌面显示器,大于等于 992px) */
@media (min-width: @screen-md-min) { ... }
.col-md-

/* 大屏幕(大桌面显示器,大于等于 1200px) */
@media (min-width: @screen-lg-min) { ... }
.col-lg-

所以总结一下:
col-xs,小于768px,手机
col-sm,768-992,平板
col-md,992-1200,pc
col-lg,1200以上,大pc

关于Bootstrap栅格系统的屏幕大小,本文就介绍这么多,希望对您有所帮助。

 

要饭二维码

洪哥写文章很苦逼,如果本文对您略有帮助,可以扫描下方二维码支持洪哥!金额随意,先行谢过!大家的支持是我前进的动力!

文章的版权

本文属于“洪哥笔记”原创文章,转载请注明来源地址:Bootstrap栅格系统的屏幕大小:http://www.splaybow.com/post/bootstrap-cols-px-581.html

如果您在服务器运维、网络管理、网站或系统开发过程有需要提供收费服务,请加QQ:8771947!十年运维经验,帮您省钱、让您放心!
亲,如果有需要,先存起来,方便以后再看啊!加入收藏夹的话,按Ctrl+D

« js写cookie,js读取cookie,js删除cookie Ajax提交表单时防止重复提交 »