吴裕雄 Bootstrap 前端框架开发——Bootstrap 辅助类：响应式实用工具
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Bootstrap 实例 - 响应式实用工具</title>
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body> <div class="container" style="padding: 40px;">
<div class="row visible-on">
<div class="col-xs-6 col-sm-3" style="background-color: #dedef8;
box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
<span class="hidden-xs">特别小型</span>
<span class="visible-xs">✔ 在特别小型设备上可见</span>
</div>
<div class="col-xs-6 col-sm-3" style="background-color: #dedef8;
box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
<span class="hidden-sm">小型</span>
<span class="visible-sm">✔ 在小型设备上可见</span>
</div>
<div class="clearfix visible-xs"></div>
<div class="col-xs-6 col-sm-3" style="background-color: #dedef8;
box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
<span class="hidden-md">中型</span>
<span class="visible-md">✔ 在中型设备上可见</span>
</div>
<div class="col-xs-6 col-sm-3" style="background-color: #dedef8;
box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
<span class="hidden-lg">大型</span>
<span class="visible-lg">✔ 在大型设备上可见</span>
</div>
</div>
</div> </body>
</html>
吴裕雄 Bootstrap 前端框架开发——Bootstrap 辅助类：响应式实用工具的更多相关文章
- 吴裕雄 Bootstrap 前端框架开发——Bootstrap 网格系统实例：响应式的列重置
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- 吴裕雄 Bootstrap 前端框架开发——Bootstrap 表格：响应式表格
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- 吴裕雄 Bootstrap 前端框架开发——Bootstrap 图片：响应式图片
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- 吴裕雄 Bootstrap 前端框架开发——Bootstrap 图片：图片响应式 (将很好地扩展到父元素)
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- 吴裕雄 Bootstrap 前端框架开发——Bootstrap 辅助类：显示下拉式功能
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- 吴裕雄 Bootstrap 前端框架开发——Bootstrap 辅助类：显示关闭按钮
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- 吴裕雄 Bootstrap 前端框架开发——Bootstrap 辅助类：将页面元素所包含的文本内容替换为背景图
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- 吴裕雄 Bootstrap 前端框架开发——Bootstrap 辅助类：在元素获取焦点时显示(如：键盘操作的用户)
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- 吴裕雄 Bootstrap 前端框架开发——Bootstrap 辅助类：除了屏幕阅读器外，其他设备上隐藏元素
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
随机推荐
- Linux centosVMware LNMP架构介绍、MySQL安装、PHP安装、Nginx介绍
一. LNMP架构介绍 和LAMP不同的是,提供web服务的是Nginx 并且php是作为一个独立服务存在的,这个服务叫做php-fpm Nginx直接处理静态请求,动态请求会转发给php-fpm ...
- IDEA导入 Eclipse项目
选址 import 导入项目,选择create..., 下一步...下一步 导入项目后: 点击config 点击OK 然后添加artifacts 即可运行项目. IDEA 添加artifacts 方法 ...
- redhat 7.6 rsync 配置，实时同步脚本
1.查看rsync,并安装 yum install rsync -y 2.配置/etc/rsyncd.conf文件 建议cp一份作为备份,清空内容复制以下配置 [服务端配置]log file = /v ...
- 「ZJOI2007」捉迷藏
题目描述 给出一棵\(N\)个有色(黑白,黑色对应关灯,白色对应开灯)节点的树以及\(M\)次操作,每次操作将改变一个节点的颜色或者求出树上最远的两个白点距离 基本思路 \(60pts\)做法 这道题 ...
- Python自动化运维的职业发展道路（暂定）
Python职业发展之路 Python自动化运维工程 Python基础 Linux Shell Fabric Ansible Playbook Zabbix Saltstack Puppet Dock ...
- Wordpress综合检测和爆破工具
WordPress是一种使用PHP语言开发的博客平台,用户可以在支持PHP和MySQL数据库的服务器上架设属于自己的网站. 也可以把 WordPress当作一个内容管理系统(CMS)来使用.WordP ...
- C＃ FileStream 对象的Seek（）方法-----转载
原创 kevin617 发布于2010-12-08 11:22:00 阅读数 8630 收藏展开 FileStream 可以随机读写文件 使用 Seek 方法 Seek() ----------有两 ...
- Intent的常用属性之ComponentName
启动activity的另一种方式 在按钮中添加如下代码 ComponentName componentName=new ComponentName(MainActivity.this,NewActiv ...
- 8核AMD Zen加持：微软Surface这回血拼
微软定于10月2日在纽约举办Surface新品发布会,几乎全线消费级产品都将更新,比如15英寸Surface Laptop 3. 最新爆料称,15寸Surface Laptop 3预计一口气推出6款型 ...
- Linux用户和用户组管理命令
一.用户管理命令 1.useradd 创建用户或更新默认新用户的信息 使用方法 useradd [options] 用户名 选项: useradd -u 指定UID具体数值, ...