Comment utiliser Bootstrap CDN?
j'essaie d'utiliser un CDN sur Bootstrap pour augmenter la performance de mon site. Cependant, lorsqu'on fait référence à la CSS directement, cela fonctionne alors qu'utiliser le CDN ne fonctionne pas.
comment résoudre ce problème - mon code est joint ci-dessous. ?
<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>
6 réponses
comme d'autres l'ont mentionné, utiliser un CDN est habituellement aussi facile que d'ajouter:
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css"
rel="stylesheet">
dans votre HTML. mais cela ne fonctionne pas lorsque vous chargez votre html à partir d'un fichier local.
la raison est le protocole manquant. Lorsque vous utilisez un CDN, il est généralement préférable de ne pas spécifier le protocole, de sorte que votre navigateur utilisera soit http, soit https selon le protocole utilisé pour obtenir votre html en premier lieu.
C'est important parce que si votre serveur utilise https, il est préférable d'avoir toutes les références utilisant https pour éviter les navigateurs (surtout IExplorer) se plaindre du mélange de contenu. D'un autre côté, utiliser une URL sans protocole pour le CDN est plus facile à mettre en cache.(http://encosia.com/cripple-the-google-cdns-caching-with-a-single-character/).
malheureusement, une URL sans protocole est une mauvaise idée si le protocole est file://. Donc, si vous créez un HTML privé qui sera chargé à partir du disque, alors vous devrait ajouter le protocole et utiliser le CDN comme ceci:
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css"
rel="stylesheet">
j'Espère que ce sera divers à quelqu'un...
Salut Akkatracker j'apprécie votre question; elle m'a aidé. Vous pouvez utiliser un CDN pour Bootstrap. Voici un exemple html complet simple où vous n'avez pas à télécharger bootstrap puisque vous liez à un contenu public distribué réseau des fichiers CSS & js.
Simple Bootstrap CDN HTML Example
<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>
veuillez noter que JQuery doit venir avant bootstrap.js. L'ordre de nos bibliothèques JavaScript est importante. Espérons que cela aide
suivez ce violon cdn utilisation 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>
Faites votre HTML comme ceci:
<!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>
Je suis nouveau à utiliser Bootstrap Twitter ainsi que BootstrapCDN. J'ai fait quelques brèves expérimenter ce soir et j'ai fait mon site correct, enfin presque, en utilisant la "tête" suivante.
<!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>
J'ai donc remplacé les anciennes feuilles de style par celles fournies à BootstrapCDN.com. Je ne suis pas sûr qu'il soit approprié de remplacer les feuilles de style existantes, mais voici va à l'expérimentation et mon résultat est ainsi...
Cela fait tout de style presque d'accord; peut-être que son style est tout à fait correct. Je suis encore en train de passer à travers les outils DOM pour voir pourquoi mes modaux ne sont pas fonctionnels. Je soupçonne mon problème avec les modals est le JavaScript et le fait que le site a été juste migré à partir d'un dossier local.
en utilisant Microsoft Ajax Réseau De Livraison De Contenu comme Bootstrap CA:
<!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>