akk*_*ker 29 html css cdn twitter-bootstrap
我正在尝试在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>
小智 82
正如其他人所提到的,使用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/).
不幸的是,如果协议是一个无协议的URL是一个坏主意file://.因此,如果您要创建将从磁盘加载的私有HTML,那么您应该添加协议并使用CDN,如下所示:
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css"
rel="stylesheet">
希望这对某人有用...
嗨Akkatracker我很感激你的问题; 它帮助了我.您可以使用CDN进行Bootstrap.这是一个简单的完整html示例,您不必下载引导程序,因为您链接到css和js文件的公共内容分布式网络.
简单的Bootstrap 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库的顺序非常重要.希望这可以帮助
按照这个小提琴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>