网络编程 Asp编程 Php编程 CodeIgniter .Net编程 Xml编程 VB编程 asp.net(c#) 支付接口 PayPal 支付宝 iOS开发 Android Xamarin.Android Android Studio ORM Dapper 其他 IbatisNet MVC WCF 微信开发 微信小程序 WPF Solr SignalR CMD xarmin.android Tesseract ASP.NET Core Vue VsCode JAVA Tomcat spring mvc MyBatis JDBCTemplate Dubbo swagger IDEA HSSFWorkbook Spring Cloud HBuilderX AI .net core AutoMapper SqlSugar IdentityServer4 Razor Blazor Redis Quartz NPOI HSSFWorkbook DevExpress 分布式存储技术 LINQ RabbitMQ 淘宝客 Dockerfile cron表达式 阿里云OSS服务 JWT SolrNet AngleSharp Elasticsearch perl Golang AutoJs adb appium python bat c Smobiler Power apps Power Bi 开发PCF RTSP视频推流服务器 OutSystems echarts 服务器 Web服务器 Ftp服务器 Mail服务器 Dns服务器 Win服务器 Linux服务器 安全防护 系统激活 wifi SVN服务器 虚拟机 Flash Media Server IIS服务器 ngrok服务器 分布式系统 版本控制系统 Git 监控系统 Nginx zookeeper SolrCloud node Nacos Docker PHP服务器 Web前端 Jquery js AJAX EasyUI CSS HTML 自适应/响应式 HTML5 地图API MP3 编辑器 UEditor 插件 highcharts SVG Bootstrap layer Element React Ant Design Nextjs yarn 软件开发 winform BAT编程 项目管理 数据模型工具 PowerDesigner PDMan UML流程图 物联网 开发工具 Flash工具 VS2010 VS2012 VS2017 VS2019 wget 抓包工具 Eclipse IntelliJ Idea VS2022 cmder 网络攻击 CC攻击 数据库 Access Mssql Mysql SQLite php_sqlsrv Oracle MongoDB NOSql Redis 设计在线 酷站推荐 网页设计 WEB标准 视频处理 设计活动 网站运营 建站经验 策划盈利 SEO优化 网站推广 淘宝秘籍 短信通道 新闻资讯 业界动态 收购融资 门户动态 搜索引擎 网络游戏 电子商务 广告传媒 厂商开发 手机应用 各业合同 法律法规 名词解释 钓鱼技巧 百科知识 理财 生肖星座 操作系统 windows xp sp3 windows server 2008 win10 windows server 2016 windows11 Linux 图形图像 Photoshop教程 illustrator教程 CAD设计教程 开放平台 腾讯 新浪 手机应用 小米手机 魅族手机 装修 壁纸施工 防水技术 室内平面设计 蹲便器 卫生间 CAD室内三维图形 装修知识 学生学习资料库 小学生学习资料库 初中生学习资料库 高中生学习资料库 搜索引擎 百度 360 搜狗 神马 头条 集群搭建 Hadoop集群 k8s集群 平台架构 SaaS 测试工具 JMeter 大数据 站长在线 好站推荐 联盟资讯 联盟新闻 联盟介绍 联盟点评 网赚技巧
隐藏

col-xs , col-sm , col-md , col-lg的理解

发布:2023/3/17 22:53:12作者:管理员 来源:本站 浏览次数:981

.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;这样我们就可以控制我们自己想要的什么排版了。


7、以下案例说明:

col-md-4

col-md-4

col-md-4

col-md-4

col-md-8

col-md-3

col-md-6

col-md-3


8、混用案例:


HTML代码:

当屏幕尺寸


小于 768px 的时候,用 col-xs-12 类对应的样式;


在 768px 到 992px 之间的时候,用 col-sm-9 类对应的样式;


在 992px 到 1200px 之间的时候,用 col-md-6 类对应的样式;


大于 1200px 的时候,用 col-lg-3 类对应的样式;