<!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. Caffe2 的基本数据结构（Basics of Caffe2 - Workspaces, Operators, and Nets）[4]

    这篇文章主要介绍Caffe2的基本数据结构: Workspaces Operators Nets 在开始之前最好先阅读以下Intro Turorial 首先,导入caffe2.其中core和works ...

  2. WPS 2019文档编辑 技巧

    wps2019文档怎么设置粘贴时自动匹配当前的格式: 菜单栏 文件 -- 选项 -- 编辑 -- 默认粘贴方式 设置为 匹配当前格式. 在编辑文档左侧或右侧显示/隐藏 目录/书签: 视图 -- 导航窗 ...

  3. 创建私有yum仓库

    创建私有yum仓库

  4. Lucene_solr

    1.总结 https://pan.baidu.com/s/1pMAWk0z  密码:ekhx 2.代码 https://pan.baidu.com/s/1nxmTWy1   密码:65ec 3.资料 ...

  5. 数字对象NSNumber的使用

    先简述下关于NSNumber的信息 NSNumber的存在就相当于java中的装箱与拆箱.只不过java中的装箱拆箱过程,使用的是对应的类型,比如基本数据类型是int.double类型,装箱时就得对应 ...

  6. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 按钮

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

  7. css 图形样式

    参考:https://css-tricks.com/examples/ShapesOfCSS/

  8. kafka-console-consumer接收不到flume推送过来的消息

    原因和解决方法:需要先启动kafka,再启动flume,两者启动有先后顺序.

  9. go语言的变量和定量

    1.变量: 1.var go 的变量非常灵活引入了关键字var. 如 var v1 int var v2 string var v3 [10]int 在go语言中变量申明有更快捷的办法可以把若干个变量 ...

  10. 被动信息收集-其他收集目标信息的途径:cupp、 recon-ng

    除了google等搜索收集,还有其他途径进行信息收集,其中就包括用命令行或集成的软件.框架进行搜集信息. 1.先举例几个简单的命令: 其实也会是调用搜索引擎,如谷歌必应等,需要翻墙,可以用proxyc ...