web-dev-qa-db-fra.com

Comment utiliser Bootstrap CDN?

J'essaie d'utiliser un CDN sur Bootstrap pour améliorer les performances de mon site Web. Cependant, lorsque vous référencez directement les CSS, cela fonctionne, contrairement à CDN. 

Comment pourrais-je résoudre ce problème, mon code est attaché 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>
htmlcsstwitter-bootstrapcdn
28
akkatracker

Comme d'autres l'ont mentionné, utiliser un CDN est généralement aussi simple 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 code HTML à partir d'un fichier local.

La raison en est le protocole manquant. Lorsque vous utilisez un CDN, il est généralement préférable de ne pas spécifier le protocole afin que votre navigateur utilise soit http, soit https, en fonction du protocole utilisé pour obtenir votre code HTML en premier lieu. 

Ceci est important car si votre serveur utilise https, il est préférable que toutes les références utilisent https pour éviter que les navigateurs (spécialement IExplorer) ne se plaignent du mixage de contenu. D'autre part, utiliser une URL sans protocole pour CDN est plus convivial 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 code HTML privé qui sera chargé à partir du disque, vous devez 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 cela sera utile à quelqu'un ...

81
Googol

Bonjour Akkatracker, j'apprécie votre question. ça m'a aidé. Vous pouvez utiliser un CDN pour Bootstrap. Voici un exemple simple et complet en HTML où il n’est pas nécessaire de télécharger bootstrap puisque vous vous connectez à un réseau de contenu public distribué à partir des fichiers css & js.

Exemple simple d'amorçage 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>

Veuillez noter que JQuery doit précéder le fichier bootstrap.js. L'ordre de nos bibliothèques JavaScript est important. J'espère que cela t'aides

8
Catto

suivez cette utilisation 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>

6
hserusv

Utilisation de Réseau de distribution de contenu Microsoft Ajax as 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>
1
Mathias

J'utilise pour la première fois Twitter Bootstrap et BootstrapCDN. J'ai fait quelques brèves expériences ce soir et j'ai créé mon sitelookcorrect, enfin presque, en utilisant le mot "Head" suivant.

<!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 sur BootstrapCDN.com. Je ne suis pas sûr qu'il soit approprié de remplacer les feuilles de style existantes, mais je passe à l'expérimentation et mon résultat est tellement ...

Cela donne un style presque correct; bien peut-être son style totalement à droite. Je suis encore en train de parcourir les outils du DOM pour voir pourquoi mes modaux ne sont pas fonctionnels. Je soupçonne que le problème avec les modaux est le JavaScript et le fait que le site a été migré depuis un dossier local. 

1
Ryan H.

Faites en sorte que votre HTML ressemble à 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>
1
Strelok