Wie Bootstrap CDN zu verwenden?

Ich versuche ein CDN auf Bootstrap zu verwenden, um die Leistung meiner Website zu verbessern. Wenn es jedoch direkt auf das CSS verweist, funktioniert es, während das Verwenden des CDN dies nicht tut.Wie Bootstrap CDN zu verwenden?

Wie würde ich gehen, um dies zu lösen - mein Code ist beigefügt 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>

Quelle

2013-06-29 akkatracker

Wie andere erwähnt haben, ist es, ein CDN mit in der Regel so einfach wie das Hinzufügen:

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" 
     rel="stylesheet">

in Ihre HTML. Das funktioniert jedoch nicht, wenn Sie Ihren HTML-Code von einer lokalen Datei laden.

Der Grund ist das fehlende Protokoll. Wenn Sie ein CDN verwenden, ist es in der Regel eine gute Idee, das Protokoll nicht anzugeben, so dass Ihr Browser entweder http oder https verwendet, je nachdem, welches Protokoll verwendet wird, um Ihren HTML-Code zu erhalten.

Dies ist wichtig, denn wenn Ihr Server https verwendet, ist es besser, wenn alle Referenzen https verwenden, um zu vermeiden, dass Browser (speziell IExplorer) sich über das Mischen von Inhalten beschweren. Auf der anderen Seite ist die Verwendung einer protokollfreien URL für CDN cache-freundlicher (http://encosia.com/cripple-the-google-cdns-caching-with-a-single-character/).

Leider ist eine protokolllose URL eine schlechte Idee, wenn das Protokoll file:// ist. Also, wenn Sie einen eigenen HTML erstellen, die von der Festplatte geladen wird, dann sollten Sie das Protokoll hinzufügen, und verwenden Sie das CDN wie folgt aus:

<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" 
     rel="stylesheet">

Hope this userful sein wird jemand ...

Quelle

2014-01-23 20:33:42 Googol

Machen Sie Ihre HTML wie folgt aussehen:

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

Quelle

2013-06-29 06:32:37 Strelok

Nope noch nicht für mich arbeiten. – akkatracker

diese Geige CDN Nutzung folgen 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>

Quelle

2013-06-29 07:31:44 hserusv

Ich denke, das funktioniert nicht mehr .. –

Ich habe es aktualisiert, um wieder mit einem anderen CDN zu arbeiten. http://jsfiddle.net/MgcDU/9383/ – nilsi

Ich bin neu in der Verwendung von Twitter Bootstrap sowie BootstrapCDN. Ich habe heute Abend ein paar kurze Experimente gemacht und ich habe meine Seite aussehen richtig, nun fast, mit dem folgenden 'Kopf'.

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

Also habe ich die alten Stylesheets durch die auf BootstrapCDN.com bereitgestellten ersetzt. Ich bin mir nicht sicher, ob es richtig ist, die vorhandenen Stylesheets zu ersetzen, aber hier geht es zum Experimentieren und mein Ergebnis ist so so ...

Das bekommt alles gestylt fast richtig; naja vielleicht ist es ganz richtig gestylt. Ich gehe immer noch durch die DOM-Tools, um zu sehen, warum meine Modalitäten nicht funktionieren. Ich vermute, dass mein Problem mit den Modalen das JavaScript und die Tatsache ist, dass die Site gerade von einem lokalen Ordner migriert wurde.

Quelle

2013-07-29 06:24:37

Hallo Akkacker Ich schätze deine Frage; Es hat mir geholfen. Sie können ein CDN für Bootstrap verwenden.Hier ist ein einfaches vollständiges HTML-Beispiel, in dem Sie kein Bootstrap herunterladen müssen, da Sie eine Verknüpfung zu einem verteilten öffentlichen Netzwerk der css & js-Dateien herstellen.

Einfache Bootstrap CDN HTML Beispiel

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

Bitte beachten Sie JQuery vor bootstrap.js kommen muss. Die Reihenfolge unserer JavaScript-Bibliotheken ist von Bedeutung. Hope this

Quelle

2014-03-05 10:00:07 Catto

Mit Microsoft Ajax Content Delivery Network als Bootstrap CDN hilft:

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

Quelle

2016-06-22 09:14:24 Mathias

Wie Bootstrap CDN zu verwenden?

Antwort

Verwandte Themen