30

我正在尝试在 Bootstrap 上使用 CDN 来提高我网站的性能。但是，当直接引用 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 时，最好不要指定协议，以便您的浏览器首先使用 http 或 https，具体取决于用于获取 html 的协议。

这很重要，因为如果您的服务器使用 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 我很欣赏你的问题；它帮助了我。您可以将 CDN 用于 Bootstrap。这是一个简单的完整 html 示例，您无需下载引导程序，因为您正在链接到 css 和 js 文件的公共内容分布式网络。

简单的引导 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 回答
6

按照这个小提琴 cdn 用法http://jsfiddle.net/MgcDU

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>

于 2013-06-29T07:31:44.670 回答
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 回答
1

我不熟悉使用 Twitter Bootstrap 和 BootstrapCDN。今晚我做了一些简短的实验，使用下面的“Head”让我的网站看起来正确，几乎是正确的。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>My Project Site</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">

<!--link rel="stylesheet/less" href="less/bootstrap.less" type="text/css" /-->
<!--link rel="stylesheet/less" href="less/responsive.less" type="text/css" /-->
<!--script src="js/less-1.3.3.min.js"></script--> 
<!--append ‘#!watch’ to the browser URL, then refresh the page. -->


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


<!-- my custom stylesheet -->
     <link href="/word/css/style.css" rel="stylesheet">

<!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<![endif]-->

<!-- Fav and touch icons -->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="img/apple-touch-icon-144-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="img/apple-touch-icon-114-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="img/apple-touch-icon-72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="img/apple-touch-icon-57-precomposed.png">
<link rel="shortcut icon" href="img/favicon.png">


</head>

所以我用 BootstrapCDN.com 提供的样式表替换了旧样式表。我不确定替换现有样式表是否合适，但这里进行实验，我的结果是如此......

这使所有样式几乎正确；好吧，也许它的风格完全正确。我仍在逐步浏览 DOM 工具，以了解为什么我的模态框不起作用。我怀疑我对模态的问题是 JavaScript 以及该站点刚刚从本地文件夹迁移的事实。

于 2013-07-29T06:24:37.667 回答
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 回答