<!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. 在这之后的两天又出现了w3wp进程找不到的情况了

    在这之后的两天又出现了w3wp进程找不到的情况了,我做了什么操作呢?无非就是vs中给一个过程附加删除了了一些dll,然后不停的重新生成解决方案,生成成功后,要调试,发现进程又没了. 实验了上面的方法, ...

  2. nacos 日志问题 ERR-CODE: [NACOS-0002], Type: [环境问题]

    nacos配置中心配置后,项目启动正常,运行项目也正常,但是总是打印如下日志: 2019-10-11 15:44:09.792 [com.alibaba.nacos.client.Worker.lon ...

  3. 【pwnable.kr】 asm

    一道写shellcode的题目, #include <stdio.h> #include <string.h> #include <stdlib.h> #inclu ...

  4. .Net后台实现支付宝APP支付

    前面讨论了微信支付,接下来聊聊支付宝的APP支付(新款支付宝支付).其实这些支付原理都一样,只不过具体到每个支付平台,所使用的支付配置参数不同,返回至支付端的下单参数也不同. 话不多说,直接上代码. ...

  5. UniGui安装(01)

    UniGui安装.Delphi10和uniGUI1.90.0.1509 1]下载 2]安装 3]目录说明 1]下载 在我百度网盘里  uniGUI1-90-0-1509.zip https://pan ...

  6. SpringCloud+Eureka+Feign+Ribbon的简化搭建流程,加入熔断,网关和Redis缓存[2]

    目录 前提:本篇是基于 SpringCloud+Eureka+Feign+Ribbon的简化搭建流程和CRUD练习[1] 的修改与拓展 1.修改consumer的CenterFeign.java,把返 ...

  7. Python使用正则表达式（Regular Expression）超详细

    一.导入re库 python使用正则表达式要导入re库. import re在re库中.正则表达式通常被用来检索查找.替换那些符合某个模式(规则)的文本.ps:另外很多人在学习Python的过程中,往 ...

  8. LeetCode刷题--26.删除排序数组中的重复项（简单）

    题目描述 给定一个排序数组,你需要在原地删除重复出现的元素,使得每个元素只出现一次,返回移除后数组的新长度.不要使用额外的数组空间,你必须在原地修改输入数组并在使用O(1)额外空间的条件下完成. 示例 ...

  9. ajax的分页查询

    (1)先写个显示数据的页面,分页查询需要那几个部分呢? 1.首先是查询的文本框输入,还有查询按钮,那么就开始写代码吧 1 2 3 4 <div> <input type=" ...

  10. day07 集合

    ''' list,查询过程中修改,会报错,类似java的并发修改异常 Traceback (most recent call last): File "C:/1xubenqing/pytho ...