<!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. 用C/C++创建windows服务程序

    转载:https://blog.csdn.net/chenyujing1234/article/details/8023816 一.演示过程下方代码演示了如何使用vs(C/C++)创建windows服 ...

  2. Codeforces Round #588 (Div. 2)C（思维，暴力）

    #define HAVE_STRUCT_TIMESPEC#include<bits/stdc++.h>using namespace std;int a[27],b[27];int vis ...

  3. Android之收音机UI实现（转）

    源码: http://www.2cto.com/kf/201211/171417.html 最近在研究收音机的源码,本来想把收音机从源码中提取出来,做成一个单独的应用,但是,收音机需要底层的支持,所以 ...

  4. Centos7 配置subversion

    CentOS7:配置SVN服务器 Posted on 2016-11-10 15:17 eastson 阅读(4266) 评论(0) 编辑 收藏 1. 安装 CentOS通过yum安装subversi ...

  5. 吴裕雄--天生自然HADOOP操作实验学习笔记：Wor的Count程序的编写

    实验目的 理解mapreduce的工作原理 理解Partitioner的书写方法 理解GroupingComparator的书写方法 实验原理 我们已经学习了hadoop的大部分基础知识,剩下的就是利 ...

  6. CF1209C Paint the Digits

    CF1209C Paint the Digits 题意:给定T组数据,每组数据第一行输入数字串长度,第二行输入数字串,用数字1和2对数字串进行涂色,被1涂色的数字子串和被2涂色的数字子串拼接成新的数字 ...

  7. 简单易懂之python 中的map，filter，reduce用法

    map(function,sequence) 把sequence中的值当参数逐个传给function,返回一个包含函数执行结果的list. 重点是结果返回一个列表,这样对返回的列表就可以干很多的活了. ...

  8. 学习进度-11 RDD 编程初级实践

    一. 请到本教程官网的“下载专区”的“数据集”中下载 chapter5-data1.txt,该数据集包含 了某大学计算机系的成绩,数据格式如下所示: Tom,DataBase,80 Tom,Algor ...

  9. 1552146271@qq.com

    北京时间9月27日早间消息,美国外卖服务DoorDash周四宣布,一项安全漏洞暴露了该公司大约490万客户.商家和送货员的个人数据. 这家总部位于旧金山的公司在一份声明中说,此次泄露的信息可能包括大约 ...

  10. for 循环遍历数据动态渲染html

    本案例通过ajax动态获取数据,然后遍历出数据渲染html小心踩坑:因为有时候不注意,渲染页面的时候只能输出最后一个数据所以正确写法为下:如果AJAX数据请求成功的情况下: html <div ...