13

今のところ私はjavascriptにこのように使用しています

<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/js/bootstrap.min.js"></script>
<script>    $.fn.modal || document.write('<script src="js/bootstrap.min.js">\x3C/script>')</script>

私はこのようにbootstrapcdnからbootstrap.cssをロードしています

<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css" rel="stylesheet">

CDNサーバーがダウンしている場合にローカルコピーをロードする方法を誰かに教えてもらえますか？

4

4 に答える 4

16

これに対する私の解決策は、本体の上部にブートストラップ隠しクラススタイルを使用して空のdivを作成することでした。

<div id="bootstrapCssTest" class="hidden"></div>

そして、後でJavascriptを使用してテストし、divが表示されている場合はヘッドに追加します。

    <script type="text/javascript">

    if ($('#bootstrapCssTest').is(':visible') === true) {
        $('<link href="/localcopy/css/bootstrap.css" rel="stylesheet" type="text/css" />').appendTo('head');
    }
</script>
于 2013-06-21T10:11:28.223 に答える
1

ファイルに対してjquery.Get（）を実行すると機能しますか？結果に応じて、それが利用可能かどうかがわかります。そして、それがクライアントサイドで発生するのを見ると、ローカルキャッシングはこれを余分な帯域幅の問題にしないでしょう。

于 2013-01-03T15:16:45.983 に答える
1

この要点には、CSSフォールバックをロードする必要性を検出するのに特に役立つコードスニペットがあります。

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css" />

<script type="text/javascript">
    function cssLoaded(href) {
        var cssFound = false;

        for (var i = 0; i < document.styleSheets.length; i++) {
            var sheet = document.styleSheets[i];
            if (sheet['href'].indexOf(href) >= 0 && sheet['cssRules'].length > 0) {
                cssFound = true;
            }
        };

        return cssFound;
    }

    if (!cssLoaded('bootstrap-combined.min.css')) {
        local_bootstrap = document.createElement('link');
        local_bootstrap.setAttribute("rel", "stylesheet");
        local_bootstrap.setAttribute("type", "text/css");
        local_bootstrap.setAttribute("href", "/Content/Styles/bootstrap-combined.min.css");
        document.getElementsByTagName("head")[0].appendChild(local_bootstrap);
    }
</script>

あなたのローカルCSSへの正しいパスに置き換えるだけ/Content/Styles/bootstrap-combined.min.cssであなたは良いはずです

于 2013-08-13T18:51:38.383 に答える
0

これを試して、

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet">
<script>
    function cssLoaded(href) {
        var cssFound = false;
        for (var i = 0; i < document.styleSheets.length; i++) {
            var sheet = document.styleSheets[i];
            if (
            sheet['href'] == "http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" ||
            sheet['href'] == "https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css") {
                cssFound = true;
            }
        };
        return cssFound;
    }
    if (!cssLoaded('bootstrap.min.css')) {
        local_bootstrap = new CustomEvent('link');
        local_bootstrap.setAttribute("rel", "stylesheet");
        local_bootstrap.setAttribute("href", "/css/bootstrap.min.css");
        document.getElementsByTagName("head")[0].appendChild(local_bootstrap);
    }
</script>

ソース

于 2014-03-28T11:05:31.387 に答える