html - sfnge8fjt3gxweongsv7zt27nxfoaoapmym81iuxopkfojwj8erdknlpmo - ¿Cómo usar Bootstrap CDN?
jquery cdn (6)
Haga que su HTML se vea así:
<!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>
Intento utilizar un CDN en Bootstrap para aumentar el rendimiento de mi sitio web. Sin embargo, al hacer referencia al CSS directamente funciona, mientras que el uso de CDN no lo hace.
¿Cómo voy a resolver esto? Mi código está adjunto 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.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>
</html>
sigue este uso de fiddle 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>
Soy nuevo en el uso de Twitter Bootstrap y BootstrapCDN. Hice una breve experimentación esta noche e hice que mi sitio se viera correcto, casi con la siguiente ''Cabeza''.
<!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>
Así que he reemplazado las hojas de estilo anteriores con las proporcionadas en BootstrapCDN.com. No estoy seguro de si es correcto reemplazar las hojas de estilo existentes, pero aquí va a la experimentación y mi resultado es muy ...
Esto hace que todo tenga un estilo casi correcto; Bueno, quizás su estilo es totalmente correcto. Todavía estoy repasando las herramientas DOM para ver por qué mis modales no son funcionales. Sospecho que mi problema con los modales es el JavaScript y el hecho de que el sitio acaba de migrar desde una carpeta local.
Como otros lo han mencionado, usar un CDN suele ser tan fácil como agregar:
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css"
rel="stylesheet">
en tu HTML. Pero esto no funciona cuando está cargando su html desde un archivo local .
El motivo es el protocolo faltante. Cuando se utiliza una CDN, generalmente es una buena idea no especificar el protocolo, de modo que su navegador utilizará http o https dependiendo del protocolo utilizado para obtener su html en primer lugar.
Esto es importante porque si su servidor usa https, es mejor tener todas las referencias usando https para evitar que los navegadores (especialmente IExplorer) se quejen de mezclar contenido. Por otro lado, el uso de una URL sin protocolo para CDN es más amigable con la memoria caché ( http://encosia.com/cripple-the-google-cdns-caching-with-a-single-character/ ).
Desafortunadamente, una URL sin protocolo es una mala idea si el protocolo es file:// . Entonces, si está creando un HTML privado que se cargará desde el disco, entonces debe agregar el protocolo y usar el CDN de esta manera:
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css"
rel="stylesheet">
Espero que esto sea útil para alguien ...
Usando Microsoft Ajax Content Delivery Network como Bootstrap 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>
Hola Akkatracker, aprecio tu pregunta; Me ayudó. Puedes usar un CDN para Bootstrap. Aquí hay un ejemplo de html completo simple en el que no tiene que descargar bootstrap ya que está enlazando a una red distribuida de contenido público de los archivos css y js.
Ejemplo simple de HTML CDN de Bootstrap
<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>
Tenga en cuenta que JQuery debe aparecer antes de bootstrap.js. El orden de nuestras bibliotecas JavaScript es significativo. Espero que esto ayude