web-dev-qa-db-de.com

Wie benutze ich Bootstrap CDN?

Ich versuche, ein CDN für Bootstrap zu verwenden, um die Leistung meiner Website zu verbessern. Wenn Sie jedoch direkt auf das CSS verweisen, funktioniert es, die Verwendung des CDN jedoch nicht. 

Wie gehe ich vor, um dieses Problem zu lösen - mein Code ist unten angefügt. ? 

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

Wie bereits erwähnt, ist die Verwendung eines CDN normalerweise so einfach wie das Hinzufügen von:

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

in dein HTML. Dies funktioniert jedoch nicht, wenn Sie Ihre HTML-Datei aus einer lokalen Datei laden.

Der Grund ist das fehlende Protokoll. Wenn Sie ein CDN verwenden, ist es in der Regel ratsam, das Protokoll nicht anzugeben, sodass Ihr Browser entweder http oder https verwendet, je nachdem, welches Protokoll verwendet wurde, um Ihre HTML-Datei überhaupt abzurufen. 

Dies ist wichtig, denn wenn Ihr Server https verwendet, ist es besser, wenn alle Verweise https verwenden, um zu vermeiden, dass Browser (insbesondere IExplorer) sich über das Mischen von Inhalten beschweren. Auf der anderen Seite ist die Verwendung einer protokolllosen URL für CDN eher für den Cache geeignet ( 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. Wenn Sie also einen privaten HTML-Code erstellen, der von der Festplatte geladen wird, sollten Sie das Protokoll hinzufügen und das CDN folgendermaßen verwenden:

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

Hoffe, das wird jemandem nützlich sein ...

81
Googol

Hallo Akkatracker Ich freue mich über 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 keinen Bootstrap herunterladen müssen, da Sie eine Verknüpfung zu einem öffentlich zugänglichen verteilten Netzwerk der css & js-Dateien herstellen.

Einfaches 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, dass JQuery vor bootstrap.js erscheinen muss. Die Reihenfolge unserer JavaScript-Bibliotheken ist signifikant. Hoffe das hilft

8
Catto

folge dieser Geigen-CD-Nutzung 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

Verwenden von Microsoft Ajax Content Delivery Network als 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

Ich bin neu in der Verwendung von Twitter Bootstrap sowie BootstrapCDN. Ich habe heute Abend ein paar kurze Experimente durchgeführt und meine Seite look mit dem folgenden 'Kopf' fast korrekt gemacht.

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

Deshalb habe ich die alten Stylesheets durch die bei 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 ...

Dadurch wird alles gestylt fast ​​richtig; Nun, vielleicht ist es total richtig gestylt. Ich gehe immer noch die DOM-Tools durch, um zu sehen, warum meine Modals nicht funktionieren. Ich vermute, mein Problem mit den Modals ist das JavaScript und die Tatsache, dass die Site gerade aus einem lokalen Ordner migriert wurde.

1
Ryan H.

Machen Sie Ihren HTML-Code so:

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