<!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. tushare 开源数据包的使用

    tushare 使用 python开源金融接口包: tushare.org/trading.html#d2 安装: pip install tushare import tushare as ts # ...

  2. 转://工作中 Oracle 常用数据字典集锦

    DBA工作中数据字典就等同于我们本和笔,时时刻刻也分不开的,不管是看状态,还是监控,都需要数据字典的支持,本文整理出来常用的数据字典系列,帮助大家来记住和汇总以便查询利用 ALL_CATALOG Al ...

  3. 七彩爱心灯手机APP

    安卓IDE3.20以后不包含sdk,需要更新重新下载. 1 下载工程 https://github.com/Dongvdong/Lovelamp_app 2打开工程 如果换了工程移动换了文件夹 (1) ...

  4. Ubuntu下的 PPPoE 拨号上网方法

    1. 配置 pppoe $ sudo pppoeconf 2. 联网 $ sudo pon dsl-provider 3. 断网 $ sudo poff 4. 查看日志 $ plog 5. 查看接口信 ...

  5. copyOf数组复制方法的使用（数组扩容练习）

    package com.Summer_0420.cn; import java.util.Arrays; /** * @author Summer * 我们使用数组存储了50名学生的考试信息 , 今天 ...

  6. Java内存模型（和堆栈等不是同一层次的划分）

    什么叫Java内存模型? 现代计算机通过指令的重排序来提升计算机的性能,而没有限制条件的指令重排序会使得程序的行为不可预测,JMM就是通过一系列的操作规则限制指令重排序的方式使得指令重排序不会破坏JM ...

  7. 3.sparkSQL整合Hive

    spark SQL经常需要访问Hive metastore,Spark SQL可以通过Hive metastore获取Hive表的元数据.从Spark 1.4.0开始,Spark SQL只需简单的配置 ...

  8. 来自后端的突袭? --开包即食的教程带你浅尝最新开源的C# Web引擎 Blazor

    在今年年初, 恰逢新春佳节临近的时候. 微软给全球的C#开发者们, 着实的送上了一分惊喜. 微软正式开源Blazor ,将.NET带回到浏览器. 这个小惊喜, 迅速的在dotnet开发者中间传开了. ...

  9. 2018年计划小目标（9月）PMP

    从6.23结束敏捷的系统贯穿学习考试,6.24开始做传统项目管理,系统学习计划,打包报考,(╥╯^╰╥):ACP+实战+PMP+软考,历时两个月 每天上下班路上3个小时,听录音,(报的远程班,倍速听了 ...

  10. 八、xadmin自定义菜单栏顺序

    xadmin默认是读取注册的app和所有注册到xadmin的mode来生成对应的菜单. nav_menu[app_key] = { 'title': app_title, 'menus': [mode ...