Como utilizar CDN Bootstrap?
<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 answers
Como outros já mencionaram, usar uma CDN é normalmente tão fácil como adicionar:
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css"
rel="stylesheet">
Para o teu HTML. mas isto não funciona quando está a carregar o seu html de um ficheiro local.
A razão é o protocolo em falta. Ao usar um CDN, geralmente é uma boa idéia não especificar o protocolo, de modo que o seu navegador irá usar tanto http ou https dependendo do protocolo usado para obter o seu html em primeiro lugar.Isto é importante porque se o seu servidor estiver a usar https, é melhor ter todas as referências usando https para evitar navegadores (especialmente IExplorer) queixando-se de conteúdo de mistura. Por outro lado, usar um URL sem Protocolo para CDN é mais amigável para cache ( http://encosia.com/cripple-the-google-cdns-caching-with-a-single-character/).
Infelizmente, um URL sem protocolo é uma má ideia se o protocolo forfile://
. Então, se você está criando um HTML privado que será carregado a partir do disco, então você deve adicionar o protocolo e usar o CDN como este:
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css"
rel="stylesheet">
Espero que isto seja útil a alguém...
Exemplo simples 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>
Por favor, note que o JQuery tem de vir antes do bootstrap.js. A ordem de nossas bibliotecas JavaScript é significativa.
Espero que isto ajude.
Siga esta utilização 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>
Faça com que o seu HTML se pareça com isto:
<!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>
Sou novo em usar o Twitter Bootstrap assim como o BootstrapCDN. Fiz umas breves experiências esta noite e fiz o meu site. Olha. correcto, bem quase, usando a seguinte "cabeça".
<!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>
Por isso, troquei as velhas folhas de estilo pelas que foram fornecidas em BootstrapCDN.com. eu não sou certo se é apropriado substituir as folhas de estilo existentes, mas aqui vai à experimentação e meu resultado é assim...
Isto dá estilo a tudo.; bem, talvez tenha um estilo totalmente certo. Ainda estou a passar pelas ferramentas DOM para ver porque é que os meus modais não são funcionais. Suspeito que o meu problema com os modais é o JavaScript e o facto do site ter sido migrado de uma pasta local.
Usando a 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>