<!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 辅助类：响应式实用工具的更多相关文章

  1. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 网格系统实例：响应式的列重置

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  2. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 表格：响应式表格

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  3. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 图片：响应式图片

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  4. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 图片：图片响应式 (将很好地扩展到父元素)

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  5. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 辅助类：显示下拉式功能

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  6. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 辅助类：显示关闭按钮

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  7. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 辅助类：将页面元素所包含的文本内容替换为背景图

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  8. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 辅助类：在元素获取焦点时显示(如：键盘操作的用户)

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  9. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 辅助类：除了屏幕阅读器外，其他设备上隐藏元素

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

随机推荐

  1. 前端代码编译器Hbuilder下载地址和谷歌浏览器下载地址

    编译器:HbuilderX 浏览器:谷歌浏览器

  2. 笔记||Python3进阶之装饰器

    # 装饰器# 特征: 是用一个@开头的字符串# 装饰器通常用来装饰函数.或者类的方法# 被装饰后的函数,通常是在原有的函数基础上,会多出增加一点功能# 一般来说装饰器本身也是一个函数## def te ...

  3. 列举mvc ActionResult的返回值

    8.列举ASP.NET MVC ActionResult的返回值有几种类型? 主要有View(视图).PartialView(部分视图).Content(内容).Json(Json字符串).Javas ...

  4. Js为Dom元素绑定事件须知

    为异步加载的Dom 元素绑定事件必须在加载完成之后绑定: $('body').load('LearnClickBinding.ashx');$('a').click(function () { ale ...

  5. Django（二十）下拉列表-省市联动实例：jquery的ajax处理前端

    一.知识点 1.jquery的ajax请求写法 <script src="/static/js/jquery-1.12.4.min.js"></script> ...

  6. 吴裕雄--天生自然HADOOP操作实验学习笔记：hbase简介

    实验目的 了解hbase的概念 通过安装hbase了解hbase的原理 了解hbase与hadoop的关系 复习hadoop和zookeeper的运行 实验原理 hbase是bigtable的开源山寨 ...

  7. 吴裕雄--天生自然HADOOP操作实验学习笔记：协同过滤算法

    实验目的 初步认识推荐系统 学会用mapreduce实现复杂的算法 学会系统过滤算法的基本步骤 实验原理 前面我们说过了qq的好友推荐,其实推荐算法是所有机器学习算法中最重要.最基础.最复杂的算法,一 ...

  8. KMP（模板)

    kmp算法是解决单模匹配问题的算法,难点在于求next[]数组 求next[]数组:对于模板串的所有前缀子串的最长公共前后缀的长度,就是next[]数组的值 eg:主串为cbbbaababac  子串 ...

  9. 解决 /actuator/beans不能访问

    在Spring Boot中配置了actuator,能够访问到/actuator/health,但是在访问/actuator/beans的时候却显示如下404错误. 原因是 /actuator/heal ...

  10. http请求常见的状态码

    状态码是开发者需要了解的一项内容,日常开发中浏览器会返回给我们一些状态码,然后我们可以根据状态码所代表的含义进行问题解决. 1xx(临时响应) 表示临时响应并需要请求者继续执行操作的状态代码. 100 ...