Bootstrap栅栏布局里col-xs-*、col-sm-*、col-md-*、col-lg-*之间的区别及使用方法
2018-03-24 14:14
501 查看
前言
对于一些初学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 class="col-xs-6 col-md-3"> 这个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;这样我们就可以控制我们自己想要的什么排版了。
案例说明
1、单一单例分析<div class="container">
<div class="row">
<div class="col-md-4">col-md-4</div>
<div class="col-md-4">col-md-4</div>
<div class="col-md-4">col-md-4</div>
<!-- 说明:每row行共12列,分个3div,每个div平占4列,即3个*4列=12列 -->
</div>
<div class="row">
<div class="col-md-4">col-md-4</div>
<div class="col-md-8">col-md-8</div>
<!-- 说明:每row行共12列,分个2div,第1个div占4列,第2个div则占8列,即4列+8列=12列 -->
</div>
<div class="row">
<div class="col-md-3">col-md-3</div>
<div class="col-md-6">col-md-6</div>
<div class="col-md-3">col-md-3</div>
<!-- 说明:每row行共12列,分个3div,每1,3个div占3列,第2个div则占6列,即3列+6列+3列=12列 -->
</div>
</div>
2、混用案例分析:
HTML代码:
小于 768px 的时候,用 col-xs-12 类对应的样式;
在 768px 到 992px 之间的时候,用 col-sm-9 类对应的样式;
在 992px 到 1200px 之间的时候,用 col-md-6 类对应的样式;
大于 1200px 的时候,用 col-lg-3 类对应的样式;
-----------------------------------------------end-------------------------------------------------
参考文章:http://www.cnblogs.com/sdusrz/p/7170564.html
对于一些初学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 class="col-xs-6 col-md-3"> 这个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;这样我们就可以控制我们自己想要的什么排版了。
案例说明
1、单一单例分析<div class="container">
<div class="row">
<div class="col-md-4">col-md-4</div>
<div class="col-md-4">col-md-4</div>
<div class="col-md-4">col-md-4</div>
<!-- 说明:每row行共12列,分个3div,每个div平占4列,即3个*4列=12列 -->
</div>
<div class="row">
<div class="col-md-4">col-md-4</div>
<div class="col-md-8">col-md-8</div>
<!-- 说明:每row行共12列,分个2div,第1个div占4列,第2个div则占8列,即4列+8列=12列 -->
</div>
<div class="row">
<div class="col-md-3">col-md-3</div>
<div class="col-md-6">col-md-6</div>
<div class="col-md-3">col-md-3</div>
<!-- 说明:每row行共12列,分个3div,每1,3个div占3列,第2个div则占6列,即3列+6列+3列=12列 -->
</div>
</div>
2、混用案例分析:
HTML代码:
<div class="col-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 类对应的样式;
-----------------------------------------------end-------------------------------------------------
参考文章:http://www.cnblogs.com/sdusrz/p/7170564.html
相关文章推荐
- bootstrap -- 一个标签中,同时有 col-xs , col-sm , col-md , col-lg
- bootstrap栅栏系统css中的col-xs-*,col-sm-*,col-md-* 的意义
- bootstrap -- 一个标签中,同时有 col-xs , col-sm , col-md , col-lg
- bootstrap -- 一个标签中,同时有 col-xs , col-sm , col-md , col-lg
- Bootstrap3基础 栅格系统 标尺(col-lg/md/sm/xs-1)
- bootstrap -- 一个标签中,同时有 col-xs , col-sm , col-md , col-lg
- Bootstrap3基础 栅格系统 col-lg/md/sm/xs-* 简单示例
- Bootstrap简介及Bootstrap里的栅格系统col-md/sm/xs-x;
- bootstrap中col-xs-*和col-sm-* 和col-md-*
- col-xs , col-sm , col-md , col-lg是什么意思?什么时候用?
- Bootstrap三种表单布局的使用方法
- Bootstrap基本布局(container, row, col-xs-4)
- Bootstrap三种表单布局的使用方法
- Bootstrap三种表单布局的使用方法
- 五 C# 多线程研究 使用Mutex类来同步方法及其与Monitor类和Lock之间的区别
- [置顶] bootstrap栅栏系统css中的col-xs-*,col-sm-*,col-md-* 的意义
- <div class="col-xs-6 col-sm-6 col-md-6">
- 答:SQLServer DBA 三十问之一: char、varchar、nvarchar之间的区别(包括用途和空间占用);xml类型查找某个节点的数据有哪些方法,哪个效率高;使用存储 过程和使用T-SQL查询数据有啥不一样;
- BootStrap :环境搭建;布局容器;视口:在移动设备上使用,用于比例缩小视口内容;栅格系统;Col-屏幕尺寸-所占栅格数