<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>bootstrap3兼容</title>

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

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

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

</head>

<body>

<div class="row" >

    <div class="col-xs-6 col-sm-3"

         style="background-color: #dedef8;

         box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">

        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>

    </div>

    <div class="col-xs-6 col-sm-3"

         style="background-color: #dedef8;box-shadow:

         inset 1px -1px 1px #444, inset -1px 1px 1px #444;">

        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do

            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut

            enim ad minim veniam, quis nostrud exercitation ullamco laboris

            nisi ut aliquip ex ea commodo consequat.

        </p>

        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do

            eiusmod tempor incididunt ut.

        </p>

    </div>

    <div class="clearfix visible-xs"></div>

    <div class="col-xs-6 col-sm-3"

         style="background-color: #dedef8;

         box-shadow:inset 1px -1px 1px #444, inset -1px 1px 1px #444;">

        <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco

            laboris nisi ut aliquip ex ea commodo consequat.

        </p>

    </div>

    <div class="col-xs-6 col-sm-3"

         style="background-color: #dedef8;box-shadow:

         inset 1px -1px 1px #444, inset -1px 1px 1px #444;">

        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do

            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut

            enim ad minim

        </p>

    </div>

</div>

</body>

</html>

在引入bootstrap.min.css文件后引入一下两个文件：

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

<script src="js/html5shiv.min.js"></script>
respond.min：让不支持css3 Media Query的浏览器包括IE6-IE8等其他浏览器支持查询。
html5shiv：解决ie9以下浏览器对html5新增标签的不识别，并导致CSS不起作用的问题。

由于浏览器的安全机制，Respond.min.js不能直接在本地访问的页面上发挥正常的功能，如果需要测试ie8响应式特性，必须通过http协议访问页面。

bootstrap3兼容IE8的更多相关文章

  1. bootstrap3兼容ie8浏览器

    bootstrap3 兼容IE8浏览器 2016-01-22 14:01 442人阅读 评论(0) 收藏 举报  分类: html5(18)    目录(?)[+]   近期在使用bootstrap这 ...

  2. bootstrap3 兼容IE8浏览器

    近期在使用bootstrap这个优秀的前端框架,这个框架非常强大,框架里面有下拉菜单.按钮组.按钮下拉菜单.导航.导航条.面包屑.分页.排版.缩略图.警告对话框.进度条.媒体对象等,bootstrap ...

  3. bootstrap3在IE8下导航不显示,自动识别成手机模式

    想让bootstrap3兼容ie8,需要将html5shiv.js.respond.js还有bootstrap的所有css.js文件都放在本地服务器空间,不能用CDN. bootstrap所有css. ...

  4. 【转】让Bootstrap 3兼容IE8浏览器

    FROM : http://www.ijophy.com/2014/05/bootstrap3-compatible-with-ie8.html 最近在研究Bootstrap(官方,Github)这个 ...

  5. 让Bootstrap 3兼容IE8浏览器

    最近在研究Bootstrap(官方,Github)这个优秀的前端框架,Bootstrap最开始是Twitter团队内部的一个前端框架,所谓前端框架就是一个CSS/HTML框架,框架里面有下拉菜单.按钮 ...

  6. Bootstrap 3兼容IE8浏览器（转）

    Bootstrap是一个响应式的布局,你可以在宽屏电脑.普通电脑,平板电脑,手机上都得到非常优秀的布局体验.这种响应式的布局正是通过CSS3的媒体查询(Media Query)功能实现的,根据不同的分 ...

  7. Bootstrap 3 兼容 IE8 浏览器

    公司新上的项目,前端用的Bootstrap3的框架,但它已经放弃对IE9下的支持了.可IE8还是有着许多用户,不能不照顾到他们,IE7以下的,我只想说,现在什么年代了,要解放思想,与时俱进啊,就不能动 ...

  8. 兼容IE8以下浏览器input表单属性placeholder不能智能提示功能

    当前很多表单提示使用了表单属性placeholder,可这属性不兼容IE8以下的浏览器,我自己写了一个兼容处理js // 兼容IE8以下浏览器input不能智能提示功能 if(navigator.ap ...

  9. 如何使用videojs兼容IE8浏览器

    需要在服务器下运行 首先我们需要下载videojs包 https://github.com/videojs/video.js/releases 这里简单写了一个小栗子 <!DOCTYPE htm ...

随机推荐

  1. WIN10中DOCKER的安装

    1.docker的安装 环境准备 Docker for Windows是一个Docker Community Edition(CE)应用程序.Docker for Windows安装包包含了在Wind ...

  2. （转）Spring Boot(九)：定时任务

    http://www.ityouknow.com/springboot/2016/12/02/spring-boot-scheduler.html 在我们开发项目过程中,经常需要定时任务来帮助我们来做 ...

  3. C#深度学习の枚举类型（IEnumerator，IEnumerable）

    一.关于枚举的含义 .Net提供了可枚举类型的接口IEnumerable和枚举器接口IEnumerator,程序集System.Collections 另: IQueryable 继承自IEnumer ...

  4. 如何给30台centos7服务器分别增加相同的用户

    老大直接给了30台新鲜的生产服务器,要给每一台服务器增加一个用户,密码相同 难道我们要部署一个工具吗?这样对生产环境可能会产生影响,为了保证服务器的新鲜以及节约时间,研究了小半天,终于研究出一个不是很 ...

  5. 【Java8】@FunctionalInterface

    阅读目录 什么是函数式接口(Functional Interface) 函数式接口用途 关于@FunctionalInterface注解 函数式接口里允许定义默认方法 函数式接口里允许定义静态方法 函 ...

  6. UVA12563-Jin Ge Jin Qu hao（动态规划基础）

    Problem UVA12563-Jin Ge Jin Qu hao Accept: 642  Submit: 7638Time Limit: 3000 mSec Problem Descriptio ...

  7. 用于文本分类的多层注意力模型（Hierachical Attention Nerworks）

    论文来源:Hierarchical Attention Networks for Document Classification 1.概述 文本分类时NLP应用中最基本的任务,从之前的机器学习到现在基 ...

  8. java和maven环境变量设置，Tomcat部署

    Java环境变量设置 Win10我的电脑右击属性,高级系统设置,高级,环境变量设置 新建系统变量JAVA_HOME 和CLASSPATH  变量名:JAVA_HOME 变量值:C:\Program F ...

  9. Python排序算法——插入排序

    有趣的事,Python永远不会缺席! 如需转发,请注明出处:小婷儿的python https://www.cnblogs.com/xxtalhr/p/10787464.html 一.插入排序(Inse ...

  10. Luogu P3703 [SDOI2017]树点涂色

    比较有趣的综合树上问题,刷LCT题单时做的但是发现后面LCT只是起了辅助作用233 首先我们分析每一个操作,\(1\)的定义就让我们联想到了access,我们回忆一下LCT的性质: LCT中每一个sp ...