<!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. mvc中怎么读取htm的文件

    @Html.Raw(File.ReadAllText(Server.MapPath("/Include/head01.htm")))

  2. STM32 定时器用于外部脉冲计数（转）

    源:STM32 定时器用于外部脉冲计数 STM32 定时器(一)——定时器时间的计算 STM32的定时器是灰常NB的,也是灰常让人头晕的(当然是对于白菜来说的). STM32中的定时器有很多用法: ( ...

  3. mac解压缩

    tar 解包:tar xvf FileName.tar打包:tar cvf FileName.tar DirName(注:tar是打包,不是压缩!)---------------.gz解压1:gunz ...

  4. js传递数组到后台

    //post方法不得行,各种问题...改为ajax就阔以了.//默认的话,traditional为false,即jquery会深度序列化参数对象,以适应如PHP和Ruby on Rails框架, // ...

  5. java--反射和注解

    一.java.lang.reflect类   Class类 1.反射机制(Reflection):通过类创建对象, 2.反射机制提供了如下功能: 在运行时,判断任意一个对象所属的类 构造任意一个类的对 ...

  6. [转python 父类可以调用子类的方法

    问题描述:我也是在读500 Line 里满的DBDB 的代码时发现的,python的父类可以调用子类的方法,这跟平常习惯的理解方式很不一样,所以就查了下原因,记录如下:   1.现象:最近使用到了So ...

  7. Pearson相关系数

    理解皮尔逊相关的两个角度 其一, 按照高中数学水平来理解, 皮尔逊相关(Pearson Correlation Coefficient)很简单, 可以看做将两组数据首先做Z分数处理之后, 然后两组数据 ...

  8. IOS 利用图片设置背景

    UIImageView* imageView = [[UIImageView alloc] initWithFrame:self.view.bounds]; imageView.image = [UI ...

  9. js 如何判断鼠标点击事件还是js代码调用

    <html> <head> <meta http-equiv="Content-Type" content="text/html; char ...

  10. php正则表达式简介

    正则表达式简介 正则表达式Regular Expression,使用单个字符串来描述.匹配一系列符合某个句法规则的字符串.代表性书籍<正则表达式之道>里面有详细论述,本书籍为个人查阅之用力 ...