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協議訪問頁面。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。