Как использовать Bootstrap CDN?

Я пытаюсь использовать CDN в Bootstrap, чтобы повысить производительность на моем сайте. Однако, когда ссылка на 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 Homepage</a>
<ul class="nav">
  <li class="active"><a href="#">Home</a></li>
  <li><a href="#" onclick="location.href='http://www.akkatracker.com'; return false;">Blog</a></li>
  <li><a href="#" onclick="location.href='http://www.twitter.com'; return false;">Twitter</a></li>
</ul>
</div>
</div>
<div class="btn"><a href="#" onclick="location.href='http://www.akkatracker.com'; return false;">Click Here to Visit my Blog</a>  
</div>              
</html>

Ответы

Ответ 1

Как отмечали другие, использование 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) не жаловались на смешивание контента. С другой стороны, использование URL-адреса без протокола для CDN более дружественное к кешированию (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">

Надеюсь, что это будет полезно кому-то...

Ответ 2

следовать этой скрипте cdn use 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>

Ответ 3

Привет, Akkatracker Я ценю ваш вопрос; это помогло мне. Вы можете использовать CDN для Bootstrap. Ниже приведен простой пример html, в котором вам не нужно загружать загрузочный блок, поскольку вы связываетесь с общедоступной контентной сетью css и js файлов.

Пример простого бутстрапа 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 значителен. Надеюсь, что это поможет

Ответ 4

Сделайте так, чтобы ваш 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 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>

Ответ 5

Я новичок в использовании Twitter Bootstrap, а также BootstrapCDN. Я сделал несколько коротких экспериментов сегодня вечером, и я сделал свой сайт выгляжу правильным, ну почти, используя следующий "Head".

<!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>

Итак, я заменил старые таблицы стилей теми, что были на BootstrapCDN.com. Я не уверен, правильно ли заменить существующие таблицы стилей, но здесь идет эксперимент, и мой результат так таков.

Это все выглядит почти правильно; ну может быть, его стиль совершенно прав. Я все еще перехожу к инструментам DOM, чтобы понять, почему мои модальные функции нефункциональны. Я подозреваю, что моя проблема с модалами - это JavaScript и тот факт, что сайт был просто перенесен из локальной папки.

Ответ 6

Использование Microsoft Ajax Content Delivery Network в качестве Bootstrap CDN:

<!DOCTYPE html>
<html>
    <head>
        <title>Bootstrap Demo</title>
        <link rel="stylesheet" href="#" onclick="location.href='https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.6/css/bootstrap.min.css'; return false;">
        <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>