<!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. ORACLE odbc驱动相关

    驱动下载 http://www.oracle.com/technetwork/topics/winsoft-085727.html http://www.oracle.com/technetwork/ ...

  2. UIImageView控件

    UIImageView是用于显示图像的,在iOS开发中,我们无需专门去写什么代码,不需要检查设备的类型,只需要把1x.2x.3x的图像添加到项目中,图像视图会自动的在正确的时间加载正确的图像. (1) ...

  3. CentOS6.x升级MySQL版本5.1到5.6

    CentOS6.x升级MySQL版本5.1到5.6 分类: Web MySQL 2014-08-04 11:22 2813人阅读 评论(1) 收藏 举报 mysql云服务器升级centos6 有一些虚 ...

  4. iOS 改变导航栏高度

    需求: appdelegate里 rootviewcontroller 是tabbarcontroller,tabbarcontroller里有4个navigationcontroller,改变每个n ...

  5. 微信小程序之----组件

    1.view 把文档分割为独立的.不同的部分. view组件类似于html中的div标签,默认为块级元素,独占一行,可以通过设置display:inline-block改为行级元素. view.wxm ...

  6. IOS中单例NSUserDefaults的使用（转）

    一.了解NSUserDefaults以及它可以直接存储的类型 http://my.oschina.net/u/1245365/blog/294449 NSUserDefaults是一个单例,在整个程序 ...

  7. 分布式事务 & 两阶段提交 & 三阶段提交

    可以参考这篇文章: http://blog.csdn.net/whycold/article/details/47702133 两阶段提交保证了分布式事务的原子性,这些子事务要么都做,要么都不做. 而 ...

  8. ubuntu14.04安装配置jdk1.8.0_25

    Reference: http://jingyan.baidu.com/article/eb9f7b6d8f82a6869364e8a7.html 今天尝试在ubuntu14.04 LTS上安装jdk ...

  9. POST请求中参数以form data和request payload形式+清空数组方式

    测试与服务端ajax时用的dva封装的request方法,而后端怎么也拿不到参数.结果返现参数在request payload里. HTTP POST表单请求提交时:Content-Typeappli ...

  10. hashchange

    <!DOCTYPE html> <html> <head> <title>Hash Change Example</title> <s ...