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:115085382!十年运维经验,帮您省钱、让您放心!
亲,如果有需要,先存起来,方便以后再看啊!加入收藏夹的话,按Ctrl+D


« 用户体验!UI设计的30条黄金准则