30

Bootstrap で CDN を使用して、Web サイトのパフォーマンスを向上させようとしています。ただし、CSS を直接参照すると機能しますが、CDN を使用すると機能しません。

これを解決するにはどうすればよいですか-私のコードは下に添付されています。? 

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

<html>
<div class="navbar">
<div class="navbar-inner">
<a class="brand" href="#">Matt's Homepage</a>
<ul class="nav">
  <li class="active"><a href="#">Home</a></li>
  <li><a href="http://www.mattydb.com">Website</a></li>
  <li><a href="http://www.twitter.com/akkatracker">Twitter</a></li>
</ul>
</div>
</div>
<div class="btn"><a href="http://www.mattydb.com">Click Here to Visit my Blog</a>  
</div>              
</html>
4

6 に答える 6

87

他の人が述べたように、CDN の使用は通常、以下を追加するのと同じくらい簡単です。

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css"
      rel="stylesheet">

あなたのHTMLに。ただし、ローカル ファイルから html をロードしている場合、これは機能しません。

その理由は、欠落しているプロトコルです。CDN を使用する場合、通常はプロトコルを指定しないことをお勧めします。これにより、最初に html を取得するために使用されたプロトコルに応じて、ブラウザーが http または https を使用するようになります。

これは重要です。サーバーが https を使用している場合、すべての参照に https を使用して、ブラウザー (特に IExplorer) がコンテンツの混合について不平を言うのを避ける方がよいからです。一方、CDN にプロトコルのない URL を使用すると、よりキャッシュ フレンドリーになります ( http://encosia.com/cripple-the-google-cdns-caching-with-a-single-character/ )。

残念ながら、プロトコルがfile://. したがって、ディスクからロードされるプライベート HTML を作成する場合は、プロトコルを追加して、次のように CDN を使用する必要があります。

<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css"
      rel="stylesheet">

これが誰かに役立つことを願っています...

于 2014-01-23T20:33:42.810 に答える
8

こんにちは Akkatracker ご質問ありがとうございます。それは私を助けました。Bootstrap には CDN を使用できます。css および js ファイルのパブリック コンテンツ分散ネットワークにリンクしているため、ブートストラップをダウンロードする必要がない単純な完全な html の例を次に示します。

シンプルなブートストラップ CDN HTML の例

<html>
    <head>
        <title>Bootstrap CDN Simple Example</title>
        <link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
    </head>
    <body>
        <h1> Bootstrap CDN Simple Complete HTML Example</h1>    
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
        <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
    </body>
</html>

JQuery は bootstrap.js の前に来る必要があることに注意してください。JavaScript ライブラリの順序は重要です。お役に立てれば

于 2014-03-05T10:00:07.500 に答える
1

Microsoft Ajax コンテンツ配信ネットワークをブートストラップ CDN として使用する:

<!DOCTYPE html>
<html>
    <head>
        <title>Bootstrap Demo</title>
        <link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.6/css/bootstrap.min.css">
        <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.4.min.js"></script>
        <script src="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.6/bootstrap.min.js"></script>
    </head>
    <body>
        <div class="container">
            <h1>Bootstrap Demo</h1>
        </div>
    </body>
</html>
于 2016-06-22T09:14:24.627 に答える
1

HTML を次のようにします。

<!DOCTYPE html>
<html>
  <head>
    <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet">
  </head>
  <body>
    <div class="navbar">
      <div class="navbar-inner">
        <a class="brand" href="#">Matt's Homepage</a>
        <ul class="nav">
          <li class="active"><a href="#">Home</a></li>
          <li><a href="http://www.akkatracker.com">Blog</a></li>
          <li><a href="http://www.twitter.com">Twitter</a></li>
        </ul>
      </div>
    </div>
    <div class="btn"><a href="http://www.akkatracker.com">Click Here to Visit my Blog</a>  </div>
  </body>
</html>
于 2013-06-29T06:32:37.560 に答える