Html 如何使用 Bootstrap CDN？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17377277/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to use Bootstrap CDN?
提问by akkatracker
I'm trying to use a CDN on Bootstrap to increase performance to my website. However when referencing the CSS directly it works whereas using the CDN doesn't.
我正在尝试在 Bootstrap 上使用 CDN 来提高我网站的性能。但是，当直接引用 CSS 时，它会起作用，而使用 CDN 则不会。
How would I go about resolving this- my code is attached 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>
回答by Googol
As others have mentioned, using a CDN is usually as easy as adding:
正如其他人所提到的，使用 CDN 通常就像添加以下内容一样简单：
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css"
rel="stylesheet">
into your HTML. But this doesn't work when you are loading your html from a local file.
进入你的 HTML。但是当您从本地文件加载 html 时，这不起作用。
The reason is the missing protocol. When using a CDN, it's usually a good idea not to specify the protocol, so that your browser will use either http or https depending on the protocol used to get your html in the first place.
原因是缺少协议。使用 CDN 时，通常最好不要指定协议，这样您的浏览器将使用 http 或 https，具体取决于最初用于获取 html 的协议。
This is important because if your server is using https, it is better to have all references using https to avoid browsers (specially IExplorer) complaining about mixing content. On the other hand, using a protocol-less URL for CDN is more cache friendly (http://encosia.com/cripple-the-google-cdns-caching-with-a-single-character/).
这很重要，因为如果您的服务器使用 https，最好让所有引用都使用 https 以避免浏览器（特别是 IExplorer）抱怨混合内容。另一方面，对 CDN 使用无协议 URL 对缓存更友好（http://encosia.com/cripple-the-google-cdns-caching-with-a-single-character/）。
Unfortunately, a protocol-less URL is a bad idea if the protocol is file://. So if you are creating a private HTML that will be loaded from disk, then you should add the protocol and use the CDN like this:
不幸的是，如果协议是file://. 因此，如果您正在创建将从磁盘加载的私有 HTML，那么您应该添加协议并使用 CDN，如下所示：
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css"
rel="stylesheet">
Hope this will be userful to someone...
希望这对某人有用...
回答by Catto
Hi Akkatracker I appreciate your question; it helped me. You can use a CDN for Bootstrap. Here is a simple complete html example where you do not have to download bootstrap since you are linking to a public content distributed network of the css & js files.
嗨 Akkatracker 我很欣赏你的问题；它帮助了我。您可以将 CDN 用于 Bootstrap。这是一个简单的完整 html 示例，您无需下载引导程序，因为您正在链接到 css 和 js 文件的公共内容分布式网络。
Simple Bootstrap CDN HTML Example
简单的引导 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>
Please note JQuery needs to come before bootstrap.js. The order of our JavaScript libraries is significant. Hope this helps
请注意 JQuery 需要在 bootstrap.js 之前出现。我们的 JavaScript 库的顺序很重要。希望这可以帮助
回答by hserusv
follow this fiddle cdn usage http://jsfiddle.net/MgcDU
按照这个小提琴 CDN 用法http://jsfiddle.net/MgcDU
css
css
@import url('http://twitter.github.com/bootstrap/assets/css/bootstrap.css');
.container {
margin-top: 10px;
}
html
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>
回答by Ryan Hell
I am new to using Twitter Bootstrap as well as BootstrapCDN. I did some brief experimenting tonight and I made my site lookcorrect, well almost, using the following 'Head'.
我是使用 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>
So I have replaced the old style sheets with the ones provided at BootstrapCDN.com. I am not sure if it is proper to replace the existing stylesheets, but here goes to experimentation and my result is so so...
所以我用 BootstrapCDN.com 提供的样式表替换了旧样式表。我不确定替换现有的样式表是否合适，但这里进行实验，我的结果是如此......
This gets everything styled almostright; well maybe its styled totally right. I am still stepping through the DOM tools to see why my modals are non-functional. I suspect my issue with the modals is the JavaScript and the fact the site was just migrated from a local folder.
这使所有样式几乎正确；好吧，也许它的风格完全正确。我仍在逐步使用 DOM 工具来了解为什么我的模态不起作用。我怀疑我的模态问题是 JavaScript 以及该站点刚刚从本地文件夹迁移的事实。
回答by Strelok
Make your HTML look like this:
让你的 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>
回答by Mathias
Using Microsoft Ajax Content Delivery Networkas Bootstrap CDN:
使用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>
