基本介绍

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多线程编程核心技术（二）--对象及变量的并发访问

    1.方法内部的私有变量是线程安全的,实例变量是线程不安全的. 2.A线程先持有object对象的lock锁,B线程可以以异步的方式调用object对象中的非synchronized类型的方法. 3.A ...

  2. 【整理】uclibc,eglibc,glibc之间的区别和联系

    http://www.crifan.com/relation_between_uclibc_glibc_eglibc/ 1.Glibc glibc = GNU C Library 是GNU项(GNU ...

  3. LVS中文站点

    http://blog.csdn.net/turkeyzhou/article/details/16980161 http://zh.linuxvirtualserver.org/

  4. Python3标准库（一） 内置函数

    Python中内置了很多的函数,而学习标准库我们需要事先熟悉这些内置函数,所以在这里一个个进行介绍.有些函数比较简单,只给予文字描述,而有些函数会给出示例代码帮助理解. 1.abs(x):返回一个整数 ...

  5. Python&amp;MySQL

    环境:windows8+Python2.7+MySQL5.6 尝试过在C/C++中嵌入SQL语言,最终在其复杂"繁琐"环境配置中败下阵来,后来发现Python和MySQL比較eas ...

  6. HDU5441 Travel 离线并查集

    Travel Problem Description Jack likes to travel around the world, but he doesn’t like to wait. Now, ...

  7. Codesys——TON和TOF的使用方法

    1. 引言 介绍延迟导通.延迟关闭函数的使用方法. 2. 函数描述 TON: 当IN为FALSE时,输出Q为FALSE: 当IN为由FALSE变为TRUE时,延迟导通过程中Q为FALSE,当时间到Q变 ...

  8. 关于OpenFileDialog的使用（转）

    OpenFileDialog控件有以下基本属性 InitialDirectory 对话框的初始目录 Filter 要在对话框中显示的文件筛选器,例如,"文本文件(*.txt)|*.txt|所 ...

  9. P3567 [POI2014]KUR-Couriers 主席树

    这个题比一般主席树还要简单,但是用来练习主席树再好不过了,在这里我再放一下主席树板子. 代码: #include<iostream> #include<cstdio> #inc ...

  10. Dice (HDU 4652)

    题面: m 面骰子,求1. 出现n个连续相同的停止 ;2. 出现n个连续不同的停止的期望次数.(n, m ≤ 10^6 ) 解析: 当然要先列式子啦. 用f[i](g[i])表示出现i个连续相同(不相 ...