bootstrap3兼容IE8

时间  2019-11-20
标签 bootstrap3 bootstrap 兼容 ie8 栏目 Bootstarp 繁體版
原文   原文链接 
<!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文件后引入一下两个文件：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协议访问页面。
相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程