我正在尝试在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>发布于 2014-01-24 04:33:43
正如其他人所提到的,使用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">我希望这能对某些人有用。
发布于 2014-03-05 18:00:08
嗨,Akkatracker,我很感谢你的问题,它对我很有帮助。您可以使用CDN for Bootstrap。下面是一个简单完整的html示例,您不必下载bootstrap,因为您将链接到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>请注意,在bootstrap.js之前需要使用JQuery。我们的JavaScript库的顺序很重要。希望这能有所帮助
发布于 2013-06-29 15:31:45
遵循此小提琴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>
https://stackoverflow.com/questions/17377277
复制相似问题