bootstrap -- 一个标签中,同时有 col-xs , col-sm , col-md , col-lg
2015-08-19 15:54
696 查看
.col-xs- 超小屏幕 手机 (<768px)
.col-sm- 小屏幕 平板 (≥768px)
.col-md- 中等屏幕 桌面显示器 (≥992px)
.col-lg- 大屏幕 大桌面显示器 (≥1200px)
HTML代码:
当屏幕尺寸
小于 768px 的时候,用 col-xs-12 类对应的样式;
在 768px 到 992px 之间的时候,用 col-sm-9 类对应的样式;
在 992px 到 1200px 之间的时候,用 col-md-6 类对应的样式;
大于 1200px 的时候,用 col-lg-3 类对应的样式;
.col-sm- 小屏幕 平板 (≥768px)
.col-md- 中等屏幕 桌面显示器 (≥992px)
.col-lg- 大屏幕 大桌面显示器 (≥1200px)
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 类对应的样式;
相关文章推荐
- daterangepicker-bootstrap之双日历时间段选择控件(汉化版)
- bootstrap学习笔记二
- 从第一眼你就会爱上的bootstrap UI资源(下载)。
- Metronic 定制主题
- bootstrap注意事项(二)
- bootstrap注意事项(一)
- BootStrap基本样式
- bootstrap,select
- 认识Bootstrap
- bootstrap3 char.js 使用
- bootstrap简单的签收页面
- bootstrap学习笔记一
- Domino/Xpages Bootstrap 动态生成首页功能
- Flask-Bootstrap Demo
- Bootstrap兼容处理
- 20150816 Bootstrap入门
- bootstrap-editable文档
- BootstrapTable(附源码) Bootstrap结合BootstrapTable的使用,分为两种模试显示列表。
- bootstrap布局 网格系统
- bootstrap布局 网格系统