吴裕雄 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> ...
随机推荐
- Windows驱动开发-IRP的完成例程
<Windows驱动开发技术详解 >331页, 在将IRP发送给底层驱动或其他驱动之前,可以对IRP设置一个完成例程,一旦底层驱动将IRP完成后,IRP完成例程立刻被处罚,通过设置完成例程 ...
- Linux引导过程！（重点）
1.开机自检:服务器开机后,将根据主板BIOS (基本输入系统),中的设置对CPU .内存.显卡.键盘等设备进行初步检测,并初始化部分硬件. 2.MBR 引导:当从本机硬盘中启动系统时,首先根据硬盘中 ...
- C/C++ - CallBack
这是实验楼上一个callback debug例子,我没有提交结果,但在本地上运行没有任何问题,也无警告: #include <stdio.h> #define MAX 3 typedef ...
- jquery对象和dom原生获取的对象是不同的。
写了一个点击无缝滚动的demo,但是点击的时候如果上一个不运动完成,在快速点击就会快闪. 可是开始也清除定时器了,后来发现是传入的jq对象,jqobj.timer=定时器,这里jqobj没法添加.ti ...
- Write-up-NODE-1
关于 下载地址:点我 哔哩哔哩:哔哩哔哩 一天研究OBS终于不闪屏了 顺便在这里记录一下,上网查了很久.刚刚开始是不闪屏了,但是锁屏后就唤醒不了了,只能强制关机. 然后又上网找了很久,重启了N次,终于 ...
- SpringMVC：自定义视图及其执行过程
一:自定义视图 1.自定义一个实现View接口的类,添加@Component注解,将其放入SpringIOC容器 package com.zzj.view; import java.io.PrintW ...
- SqlSession为什么可以提交事务
本应在开始读MyBatis源码时首先应该了解下MyBatis的SqlSession的四大对象:Executor.StatemenHandler.ParameterHandler.ResultHandl ...
- ch4 圆角框
固定宽度的圆角框 只需要两个图像:一个应用于框的顶部,一个应用于底部 <div class="box"> <h2>Lorem Ipsum</h2> ...
- 080、Java数组之二维数组的定义及使用
01.代码如下: package TIANPAN; /** * 此处为文档注释 * * @author 田攀 微信382477247 */ public class TestDemo { public ...
- Unity添加小米游戏SDK
因为游戏要上线小米的平台,所以游戏就要添加小米SDK,整了3天总算是把小米SDK添加上了~~ 多亏找到了这个帖子:Unity3D接入小米盒子SDK. (小米人家论坛有官方贴出来的其他开发者的接入经验~ ...