君山区建设局网站,大气金融投资企业网站模板,淘宝客购物网站源码,热门网络游戏前言 对于一些初学boostrap的同学来说#xff0c;肯定也像我一样傻傻的搞不懂col--*都是要怎么使用吧#xff0c;我刚开始也表示一脸懵逼#xff0c;后来查阅了这篇文章才搞懂了他们之间的区别#xff0c;我整理了一下供大家一起学习。
摘要: bootstrap栅栏系统css中的col…前言 对于一些初学boostrap的同学来说肯定也像我一样傻傻的搞不懂col-××-*都是要怎么使用吧我刚开始也表示一脸懵逼后来查阅了这篇文章才搞懂了他们之间的区别我整理了一下供大家一起学习。
摘要: bootstrap栅栏系统css中的col-xs-*、col-sm-*、col-md-* 、col-lg-*的意义
.col-xs-* 超小屏幕 手机 (768px)
.col-sm-* 小屏幕 平板 (≥768px)
.col-md-* 中等屏幕 桌面显示器 (≥992px)
.col-lg-* 大屏幕 大桌面显示器 (≥1200px)
关键字解释
1、col-column列
2、xs-maxsmall超小 sm-small小 md-medium中等 lg-large大
3、-*表示占列即占自动每行row分12列栅格系统比
4、.col-xs-*超小屏幕 手机 (768px)超小屏幕时使用 .col-sm-*小屏幕 平板 (≥768px)小屏幕时使用 .col-md-*中等屏幕 桌面显示器 (≥992px)(栅格参数)中等屏幕时使用 .col-lg-*大屏幕 大桌面显示器 (≥1200px)大屏幕时使用。
5、不管在哪种屏幕上栅格系统都会自动的每行row分12列 col-xs-*和col-sm-* 和col-md-*后面跟的参数表示在当前的屏幕中 每个div所占列数。例如 div classcol-xs-6 col-md-3 这个div在屏幕中占的位置是 .col-xs-6 在超小屏幕中占6列 也就是屏幕的一半12/6列2个div .col-md-3 在中单屏幕中占3列也就是1/412/3列4个div。
6、反推如果我们要在小屏幕上并排显示3个div(12/3个每个占4 列 )则col-xs-4在大屏幕上显示6个div(12/6个每个占2列 ) 则 col-md-2这样我们就可以控制我们自己想要的什么排版了。
案例说明
1、单一案例分析 div classcontainer div classrow div classcol-md-4col-md-4/div div classcol-md-4col-md-4/div div classcol-md-4col-md-4/div !-- 说明每row行共12列分个3div每个div平占4列即3个*4列12列 -- /div div classrow div classcol-md-4col-md-4/div div classcol-md-8col-md-8/div !-- 说明每row行共12列分个2div第1个div占4列第2个div则占8列即4列8列12列 -- /div div classrow div classcol-md-3col-md-3/div div classcol-md-6col-md-6/div div classcol-md-3col-md-3/div !-- 说明每row行共12列分个3div每1,3个div占3列第2个div则占6列即3列6列3列12列 -- /div /div
2、混用案例分析
HTML代码
div classcol-xs-12 col-sm-9 col-md-6 col-lg-3测试/div
当屏幕尺寸 小于 768px 的时候用 col-xs-12 类对应的样式 在 768px 到 992px 之间的时候用 col-sm-9 类对应的样式 在 992px 到 1200px 之间的时候用 col-md-6 类对应的样式
大于 1200px 的时候用 col-lg-3 类对应的样式
完
参考文章http://www.cnblogs.com/sdusrz/p/7170564.html
