zoukankan      html  css  js  c++  java
  • bootstrap3兼容IE8

    <!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协议访问页面
  • 相关阅读:
    web api 初体验之 GET和POST传参
    清除系统日志及数据库(sql server)日志最佳实践
    大家好啊!
    [oc学习笔记]多态
    [oc学习笔记]便利构造器无法被继承
    [oc学习笔记]字符串
    antd异步加载的树
    react新建页面步骤(新手必看)
    ECharts 经常会修改到的一些样式配置
    关于数组的一些常用方法
  • 原文地址:https://www.cnblogs.com/hjbky/p/7442887.html
Copyright © 2011-2022 走看看