如何使用Bootstrap CDN？

我试图在Bootstrap上使用CDN来提高我的网站的性能。然而，当直接引用CSS时，它可以工作，而使用CDN则不能。如何使用Bootstrap CDN？

我该如何解决这个问题 - 我的代码是附加在bolow上的。？

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

来源

2013-06-29 akkatracker

正如其他人所说，使用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://，那么无协议URL是个坏主意。所以，如果你正在创建将从磁盘加载的私人HTML，那么你应该添加的协议，并使用CDN这样的：

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

希望这将是Userful公司的人......

来源

2014-01-23 20:33:42 Googol

让你的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-29 06:32:37 Strelok

都能跟得上仍然没有为我工作。 – akkatracker

关注该小提琴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-29 07:31:44 hserusv

我不认为这是工作了.. –

我更新它再次使用不同的CDN。 http://jsfiddle.net/MgcDU/9383/ – nilsi

我是使用Twitter Bootstrap以及BootstrapCDN的新手。我今晚做了一些简短的实验，并且使我的网站看起来正确，差不多，使用以下'头部'。

<!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-29 06:24:37

喜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-05 10:00:07 Catto

使用Microsoft Ajax Content Delivery Network为引导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-22 09:14:24 Mathias

如何使用Bootstrap CDN？

回答

相关问题