web-dev-qa-db-ja.com

Bootstrap= CDN？

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>
htmlcsstwitter-bootstrapcdn
28
akkatracker

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

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

あなたのHTMLに。 しかし、これはローカルファイルからHTMLをロードしているときは動作しません。

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

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

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

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

これが誰かにとって使いやすいことを願っています...

82
Googol

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

Simple Bootstrap CDN HTML Example

<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ライブラリの順序は重要です。お役に立てれば

8
Catto

このフィドルCDNの使用法に従ってください http://jsfiddle.net/MgcD

css

@import url('http://Twitter.github.com/bootstrap/assets/css/bootstrap.css');
.container {
   margin-top: 10px;
}

html

 <div class="container">
<div class="hero-unit">
    <h1>Bootstrap jsFiddle Skeleton</h1>
    <p>Fork this fiddle to test your Bootstrap stuff.</p>
    <p>
        <a class="btn btn-primary btn-large" href="http://Twitter.github.com/bootstrap/index.html" target="_blank">
            Learn more about Bootstrap
        </a>
    </p>
</div>
6
hserusv

Microsoft Ajax Content Delivery Network as Bootstrap 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>
1
Mathias

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>
1
Strelok