基本介绍

1、利用媒体查询功能并使用这些工具类可以方便的针对不同设备展示或隐藏页面内容。

基本使用

<!DOCTYPE html>

<html lang="zh-CN">

<head>

    <meta charset="utf-8">

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

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

    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->

    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->

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

    <style>

        .row div{

            border: 1px solid #000;

        }

    </style>

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->

    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->

    <!--[if lt IE 9]>

    <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>

    <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>

    <![endif]-->

</head>

<body>

<div class="container-fluid">

    <div class="row hidden-xs">

        <div class="col-lg-3 col-sm-6">简介</div>

        <div class="col-lg-3 col-sm-6">简介</div>

        <div class="col-lg-3 col-sm-6">简介</div>

        <div class="col-lg-3 col-sm-6">简介</div>

    </div>

</div>

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->

<script src="js/jquery.min.js"></script>

<!-- Include all compiled plugins (below), or include individual files as needed -->

<script src="js/bootstrap.min.js"></script>

</body>

</html>

当屏幕小于768px就会隐藏列表

移动web——bootstrap响应式工具的更多相关文章

  1. bootstrap 响应式工具

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

  2. 移动web——bootstrap响应式轮播图

    基本介绍 1.bootstrap有轮播图的模板,我们只需要改动下就行. 2.这里我们将介绍桌面版本和移动版本最后是综合版本 桌面版本 1.这里的图片设置是有窍门的,不再去添加img标签,而是作为a标签 ...

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

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

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

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

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

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

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

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

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

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

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

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

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

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

随机推荐

  1. java数组知识总结（一）//按类

    在线api  目录: 零/数组(基本元素) 1.  声明一个数组 2.  创建一个数组 3.  数组名.length 4.  数组的引用 一/java.lang.reflect.Array     / ...

  2. LVS 源代码分析

    http://blog.chinaunix.net/uid/11207493.html http://zh.linuxvirtualserver.org/blog/3309

  3. [Vue] Setup custom keyCode

    Vue provide some shortcut methods: @mousemove.stop is comparable to e.stopPropogation() @mousemove.p ...

  4. The return type is incompatible with JspSourceDependent.getDependants():JasperException问题分析与解决方法

    Linux下基于JSP的报表集成到项目中后,显示不出来,查看tomcat的日志.有例如以下报错信息: The return type is incompatible with JspSourceDep ...

  5. Android Studio怎样改动快捷键

    在Android Studio中.如果你认为某个快捷键太复杂,要想改动.怎么改动呢,首先要找到这个快捷键,可是Android Studio搜索快捷键有一个bug,就是你不能依据快捷键来搜索相应的功能点 ...

  6. ubuntu安装phpstorm

    首先要安装jdk $ java -version java version "1.8.0_171" Java(TM) SE Runtime Environment (build 1 ...

  7. 在IIS上搭建WebSocket服务器（三）

    编写客户端代码 1.新建一个*.html文件. ws = new WebSocket('ws://192.168.85.128:8086/Handler1.ashx?user=' + $(" ...

  8. 【转载】UML图示与代码对照

    一.类继承 public class Father { } public class Child : Father { } 二.接口继承 public interface IBreath { } pu ...

  9. Rails 拉数据初始数据库

    rails c   [1] pry(main)> Scraping.exec

  10. P3379最近公共祖先（LCA）

    题目描述 如题,给定一棵有根多叉树,请求出指定两个点直接最近的公共祖先. 输入输出格式 输入格式: 第一行包含三个正整数N.M.S,分别表示树的结点个数.询问的个数和树根结点的序号. 接下来N-1行每 ...