col-xs , col-sm , col-md , col-lg是什么意思?什么时候用?
.col-xs- 超小屏幕 手机 (<768px)
.col-sm- 小屏幕 平板 (≥768px)
.col-md- 中等屏幕 桌面显示器 (≥992px)
.col-lg- 大屏幕 大桌面显示器 (≥1200px)
<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 类对应的样式;
col-xs , col-sm , col-md , col-lg是什么意思?什么时候用?的更多相关文章
- iView栅格的使用
一般情况下栅格系统都会把每行row分为12列,但是iview是采用了24栅格系统,将区域进行24等分 基础用法 实例代码: <template> <Row> <Col s ...
- vue iviem UI grid布局
Grid 栅格 概述 我们采用了24栅格系统,将区域进行24等分,这样可以轻松应对大部分布局问题.使用栅格系统进行网页布局,可以使页面排版美观.舒适. 我们定义了两个概念,行row和列col,具体使用 ...
- [Bootstrap]全局样式(一)
页面必须设置为html5文档类型 <!DOCTYPE html> <html lang="zh-CN"> ... </html> 适应移动设备 ...
- 深入新版BS4源码 探索flex和工程化sass奥秘
你可能已经听说了一个“大新闻”:Bootstrap4 合并了代号为#21389的PR,宣布放弃支持IE9,并默认使用flexbox弹性盒模型.这标志着:1)前端开发全面步入“现代浏览器”的时代进一步来 ...
- bootstrap3之栅格系统
原理 栅格系统的核心就是媒体查询.指定的尺寸都是百分比,也就是流式布局. 查看bootstrap中的源码可以发现,对样式的定义次序全都是依次 xs.sm.md.lg,如: // grid-framew ...
- 尝试实现bootstrap3网格系统
这是一篇搁置了很久的博文,个人实现的关键代码如下: // 这是用sass实现的,只是大致实现了网格系统和offset的功能 $size_list: ( xs: 0, sm: 576, md: 992, ...
- Element-ui-Basic
一.Layout 布局 1.基础布局 <el-row> <el-col :span="24"><div class="grid-conten ...
- Element-ui学习笔记1
1.col,row布局注意事项 el-row el-col gutter就是css,span的时候宽度是按boder-box来计算. 将 type 属性赋值为 'flex',可以启用 flex 布局, ...
- 使用Less/Sass生成Bootstrap格栅样式系统
熟悉Bootstrap的同学应该了解其中的格栅系统,用来排版非常方便.他将页面分为12等分,并且适用不同的尺寸屏幕.超小xs(小于768px),小屏sm(大于等于768px),中屏md(大于等于992 ...
- AdminLTE-2.2.0 学习
这货基于Bootstrap 3(提供了统一的样式,覆盖了默认的),所以官方建议先搞懂Bootstrap 3再说. # 布局 Layout 布局由四个主要部分组成: Wrapper (.wrapper) ...
随机推荐
- Android UI布局之LinearLayout
LinearLayout是Android中最经常使用的布局之中的一个.它将自己包括的子元素依照一个方向进行排列.方向有两种,水平或者竖直.这个方向能够通过设置android:orientation=& ...
- Android实现图片裁剪
MainActivity.java package com.kale.imagetailor; import java.io.File; import java.io.FileNotFoundExce ...
- .Net Core HTML解析利器之HtmlAgilityPack
一 .HtmlAgilityPack简介 这是一个敏捷的HTML解析器,它构建了一个读/写DOM,并支持简单的XPATH或XSLT(实际上,你实际上并不了解XPATH和XSLT来使用它,不必担心).它 ...
- 开闭原则(Open Closed Principle,OCP)
遵循开闭原则设计出的模块具有两个主要特征: 对于扩展是开放的(Open for extension).这意味着模块的行为是可以扩展的.当应用的需求改变时,我们可以对模块进行扩展,使其具有满足那些改变的 ...
- Android Asynchronous Http Client-Android异步网络请求客户端接口
1.简介 Android中网络请求一般使用Apache HTTP Client或者采用HttpURLConnect,但是直接使用这两个类库需要写大量的代码才能完成网络post和get请求,而使用and ...
- go语言之进阶篇通过结构体生成json
1.通过结构体生成json 示例: package main import ( "encoding/json" "fmt" ) //成员变量名首字母必须大写 t ...
- [leetcode]Merge Sorted Array @ Python
原题地址:https://oj.leetcode.com/problems/merge-sorted-array/ 题意:Given two sorted integer arrays A and B ...
- Linear Regression总结
转自:http://blog.csdn.net/dongtingzhizi/article/details/16884215 Linear Regression总结 作者:洞庭之子 微博:洞庭之子-B ...
- 为Linux操作系统所在的logical volumn扩容
感谢Lieven和Tom的协助,这个问题才得以解决.我在这里把解决问题的步骤总结一下,帮助自己学习. 问题描述 =========== 笔者有一台linux的物理机,其上名为centos-root的l ...
- 用VS自带的打包程序打包Web程序,安装时安装中断
出现这种问题,可能是你的IIS的兼容性问题: 把IIS兼容性安装好,再试试,应该可以了.