<!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. Codeforces#360Div2

    A题 题意:给定d个操作,每个操作当中只包含1和0,若存在0,则表示操作者获胜,求最大的连续获胜个数 分析:直接统计之后用一个数组纪录下来即可 #include <iostream> #i ...

  2. vs生成解决方案错误无法将文件“xx.*”复制到xx.*”。对路径“bin\xx.*”的访问被拒绝

    使用vs2008生成解决方案时出现的问题: 无法将文件“obj\xx.*”复制到“bin\xx.*”.对路径“bin\xx.*”的访问被拒绝 解决方法: 将*.dll的只读属性去掉(在windows对 ...

  3. MonkeyRecorder

    http://www.cnblogs.com/lynn-li/p/5894953.html

  4. Java 之 HTML

    1.HTML a.定义:HTML指的是超文本标记语言 b.特点:HTML不是一种编程语言,而是一种标记语言 标记语言是一套标记标签 HTML使用标记标签来描述网页 c.HTML标签:①通常标签是成对出 ...

  5. js脚本语言（数组）

    定义:给数据Array(1,3.14,"aa")给长度(Array(5))使用方括号定义[1,3.14,"aa"] 属性:lenght(数据的长度) 方法:pu ...

  6. 微信小程序之----加载中提示框loading

    loading loading只有一个属性hidden .wxml <view> <loading hidden="{{hidden}}"> 加载中... ...

  7. C++类的存储（部分可用与c的结构体）

    c++中最重要的就是类,那么给你一个类的对象,你知道它在内存中如何存储的吗?它占内存中多少个字节? 首先确定类的构成: 1,数据成员:可以是内置类型,类类型. 2,函数成员:虚函数,非虚函数 1)数据 ...

  8. Apache Bench安装与使用

    一.Apache Bench简介 ApacheBench 是 Apache 服务器自带的一个web压力测试工具,简称ab.ab又是一个命令行工具,对发起负载的本机要求很低,根据ab命令可以创建很多的并 ...

  9. Oracle用户管理和角色管理

    原博:http://liwx.iteye.com/blog/1182251 一.创建用户的Profile文件 SQL> create profile student limit // stude ...

  10. Tsinsen A1333： 矩阵乘法（整体二分）

    http://www.tsinsen.com/A1333 题意:-- 思路:和之前的第k小几乎一样,只不过把一维BIT换成二维BIT而已.注意二维BIT写法QAQ #include <cstdi ...