<!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. 第1节 Scala基础语法：13、list集合的定义和操作；16、set集合；17、map集合

    list.+:5 , list.::5: 在list集合头部添加单个元素5 : li1.:+(5):在list集合尾部添加单个元素5: li1++li2,li1:::li2:在li1集合尾部添加il2 ...

  2. 「Luogu P3680 凸轮廓线」

    一道神奇的计算几何题 前置芝士 正三角形,正方形,圆:什么,您都会,那真是太好了. 三角函数的运用:因为我不是很想在这一块写太多,具体可以自行百度. 推导公式 对于一串是圆和正方形开头和结尾时是十分好 ...

  3. Linux--常用的linux基本命令学习大全01（适合所有人群）

    常用 Linux 命令的基本使用 序号 命令 对应英文 作用 01 ls list 查看当前文件夹下的内容 02 pwd print wrok directory 查看当前所在文件夹 03 cd [目 ...

  4. SQL数据库入门基础

      SQL(Structure Query Language,结构化查询语言)语言是国际标准化组织(ISO)采纳的标准数据库语言. 数据库就是一幢大楼,我们要先盖楼,然后再招住户(住户当然就是数据库对 ...

  5. 136、Java的内部类

    01.代码如下: package TIANPAN; class Outer { // 外部类 private String msg = "Hello World !"; class ...

  6. 本周总结（19年暑假）—— Part2

    日期:2019.7.21 博客期:108 星期日 这几天正在认真学习大数据,我是在B站上看尚老师的视频搞得.我已经配好了Hadoop的基本环境,现在学习的是HDFS的相关内容

  7. JavaScript图形实例：正弦曲线

    正弦曲线的坐标方程为: Y=A*SIN(X)    (A为振幅) 1．正弦曲线 在弧度为0~4π的正弦曲线上取360个点,将这些点用线连接起来,可以绘制出正弦曲线.编写如下的HTML代码. <! ...

  8. VS2017+EF6+MySQL8.0配置(.Net Framework 4.5）

     开发环境Vs2017 运行环境:.Net Framework 4.5(win7专业版 64位) 1.下载安装mysql数据库版本:mysql-8.0.19-winx64 ----数据库版本貌似跟My ...

  9. 《React后台管理系统实战 ：一》：目录结构、引入antd、引入路由、写login页面、使用antd的form登录组件、form前台验证、高阶函数/组件

    实战 上接,笔记:https://blog.csdn.net/u010132177/article/details/104150177 https://gitee.com/pasaulis/react ...

  10. 后台：Django项目创建

    后台:Django项目创建 环境 """ 为luffy项目创建一个虚拟环境 >: mkvirtualenv luffy """ &qu ...