<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <!-- 处理低版本IE 4.0不考虑IE8 -->

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <!-- 移动端视口的设置 -->

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- 引入bootstrap.css -->

    <link rel="stylesheet" href="css/bootstrap.css">

    <style>

        .tips1{

            width:30px;

            height:300px;

            background:black;

            right:0;

        }

        .tips2{

            width:30px;

            height:100px;

            background:blue;

            right:0;

        }

    </style>

</head>

<body>

<div class="container-fluid">

    <div class="row">

        <div class="tips1 visible-lg-block affix"></div>

        <div class="tips2 hidden-lg affix"></div>

    </div>

    <div>aaaaaaaaaa</div>

</div>

</body>

<script>

    /*

        响应式工具

            概念

                -针对不同设备展示或隐藏页面内容

            可见类

                -visible*-*

                    》lg md sm xs

                    》block inline inline-block

                -hidden-*

                    》lg md sm xs

            打印类

                -visible-print-*  hidden-print

            实例：天猫侧边栏

     */

</script>

bootstrap 响应式工具的更多相关文章

  1. 移动web——bootstrap响应式工具

    基本介绍 1.利用媒体查询功能并使用这些工具类可以方便的针对不同设备展示或隐藏页面内容. 基本使用 <!DOCTYPE html> <html lang="zh-CN&qu ...

  2. Bootstrap 辅组类和响应式工具

    1.情景文本颜色 //各种色调的字体 <p class="text-muted">Bootstrap 视频教程</p> <p class=" ...

  3. bootstrap——辅助类和响应式工具类

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. Bootstrap(6)辅组类和响应式工具

    一．辅助类 Bootstrap 在布局方面提供了一些细小的辅组样式,用于文字颜色以及背景色的设置.显示关闭图标等等. 1.情景文本颜色 各种色调的字体 <p class="text-m ...

  5. 第二百三十六节，Bootstrap辅组类和响应式工具

    Bootstrap辅组类和响应式工具 学习要点: 1.辅组类 2.响应式工具 本节课我们主要学习一下 Bootstrap 的辅组类和响应式工具,辅助类提供了一组类来辅 组页面设计,而响应式工具则利用媒 ...

  6. bootstrap 学习笔记（5）---- 图片和响应式工具

    (一)响应式图片: 在 Bootstrap 版本 3 中,通过为图片添加 .img-responsive 类可以让图片支持响应式布局.其实质是为图片设置了 max-width: 100%;. heig ...

  7. bootstrap的栅格系统和响应式工具

    关于bootstrap的响应式布局,昨天看了杨老师的视频教学https://www.bilibili.com/video/av18357039豁然开朗,在这里记录一下 一:meta标签的引用 < ...

  8. Bootstrap内辅助类，响应式工具，组件的个人总结

    辅助类(工具类): 文本颜色: <p class="text-muted">Fusce dapibus, tellus ac cursus commodo, torto ...

  9. bootstrap_栅格系统_响应式工具_源码分析

    -----------------------------------------------------------------------------margin 为负 ​使盒子重叠 ​等高 等高 ...

随机推荐

  1. iOS 框架 Nimbus

    Nimbus好像是用来处理 视图控制器的 解耦 参考: http://www.oschina.net/p/nimbuskit

  2. sae中thinkphp使用smarty

    因为最近在学thinkphp跟着做一个小商城. 没有使用thinkphp自带的think引擎,使用的是smarty引擎. 在sea中使用的时候出现了问题.已经是前几天的事了,问题图片没保存下来. 在网 ...

  3. samba.conf 范例

    # Sample configuration file for the Samba suite for Debian GNU/Linux. # # This is the main Samba con ...

  4. PHP新手之学习类与对象(2)

    二.自动加载对象 很多开发者写面向对象的应用程序时对每个类的定义建立一个 PHP 源文件.一个很大的烦恼是不得不在每个脚本(每个类一个文件)开头写一个长长的包含文件列表. 在 PHP 5 中,不再需要 ...

  5. Html 和 Css 的杂乱总结

    1. input 中可以设置 maxLength 属性,控制输入的文字数量,中英文字节数一样,但是没有验证兼容性 2.客户端中的页面禁止右键,复制等 <body scroll="no& ...

  6. js原生设计模式——2面向对象编程之闭包2

    <!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8&qu ...

  7. 仿网易邮箱5.0(四)：信息提示插件(tips.js)

    信息提示插件,在平常的开发中也是经常乃至的一个插件,像是一些辅助信息的提示,如:加载成功.提交信息成功或失败等等.这个插件在163邮箱中用在切换标签时提示加载状态. 下面我们先来分析一下这个小插件需要 ...

  8. [转载]rabbitmq可靠发送的自动重试机制

    转载地址http://www.jianshu.com/p/6579e48d18ae http://www.jianshu.com/p/4112d78a8753 接这篇 在上文中,主要实现了可靠模式的c ...

  9. Spring JdbcTemplate用法整理

    Spring JdbcTemplate用法整理: xml: <?xml version="1.0" encoding="UTF-8"?> <b ...

  10. spring mvc rest 方式

    handler中编写方式: @RequestMapping("/{userName}/ajaxUser3.do") @ResponseBody public UserInfo aj ...