网创优客建站品牌官网
为成都网站建设公司企业提供高品质网站建设
热线:028-86922220
成都专业网站建设公司

定制建站费用3500元

符合中小企业对网站设计、功能常规化式的企业展示型网站建设

成都品牌网站建设

品牌网站建设费用6000元

本套餐主要针对企业品牌型网站、中高端设计、前端互动体验...

成都商城网站建设

商城网站建设费用8000元

商城网站建设因基本功能的需求不同费用上面也有很大的差别...

成都微信网站建设

手机微信网站建站3000元

手机微信网站开发、微信官网、微信商城网站...

建站知识

当前位置:首页 > 建站知识

bootstrapcol-smcol-md区别是什么

这篇文章将为大家详细讲解有关bootstrap col-sm col-md区别是什么,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。

创新互联建站是一家专业提供安源企业网站建设,专注与成都网站制作、成都做网站、HTML5、小程序制作等业务。10年已为安源众多企业、政府机构等服务。创新互联专业网络公司优惠进行中。

 bootstrap栅栏系统css中的col-xs-*、col-sm-*、col-md-* 的意义,就是根据显示屏幕宽度的大小,自动的选用对应的类的样式:

bootstrap col-sm col-md区别是什么

.col-xs- 超小屏幕 手机 (<768px)

.col-sm- 小屏幕 平板 (≥768px)

.col-md- 中等屏幕 桌面显示器 (≥992px)

.col-lg- 大屏幕 大桌面显示器 (≥1200px)

首先说明:

1、col-列;

2、xs-maxsmall,超小;sm-small,小;md-medium,中等;lg-large,大;

3、-*表示占列,即占自动每行row分12列栅格系统比;

4、col-xs-*超小屏幕 手机 (<768px),

.col-sm-*小屏幕 平板 (≥768px),

.col-md-*中等屏幕 桌面显示器 (≥992px)(栅格参数).

5、不管在哪种屏幕上,栅格系统都会自动的每行row分12列 col-xs-*和col-sm-* 和col-md-*后面跟的参数表示在当前的屏幕中每个div所占列数。

例如

这个div在屏幕中占的位置是: .col-xs-6 在超小屏幕中占6列 也就是屏幕的一半(12/6列=2个div) ,.col-md-3 在中单屏幕中占3列也就是1/4(12/3列=4个div)。

6、反推,如果我们要在小屏幕上并排显示3个div(12/3个=每个占4 列 ),则col-xs-4;在大屏幕上显示6个div(12/6个=每个占2列 ) ,则 col-md-2;这样我们就可以控制我们自己想要的什么排版了。

关于bootstrap col-sm col-md区别是什么就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到。


网页标题:bootstrapcol-smcol-md区别是什么
本文来源:http://bjjierui.cn/article/isgpds.html