it-swarm.com.de

Kann ich Bootstrap-Glyphicons von einem CDN erhalten?

Ich bin ganz neu in BS. Ich rufe v3.3.6 der Bootstrap-CSS- und -JS-Dateien von MaxCDN ab. Ich hatte gehofft, es gäbe eine Möglichkeit, die Glyphicons mit einzubeziehen, aber ich kann nicht sehen, wie das geht. Ist es möglich, die Glyphicons von einem CDN abzurufen?

Ich verstehe auch nicht, was die Bootstrap-Download-Seite bedeutet, wenn sie sich auf "Precompiled Bootstrap" bezieht. Ich sehe, dass die vorkompilierten die Glyphicons bereitstellen, also ist das vielleicht der einzige Grund. 

14
Tom Baxter

Wenn Sie das Stylesheet bootstrap.min.css so in Ihre HTML-Datei einfügen (zum Beispiel):

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" type="text/css" rel="stylesheet">

Dann werden die Glyphicons-Schriftarten automatisch von derselben Stelle heruntergeladen:

//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/fonts/glyphicons-halflings-regular.eot
//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/fonts/glyphicons-halflings-regular.svg
//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/fonts/glyphicons-halflings-regular.ttf
//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/fonts/glyphicons-halflings-regular.woff
//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/fonts/glyphicons-halflings-regular.woff2

Dies liegt daran, dass die Schriftarten mit relative URLs geladen werden. Wenn das CSS in bootstrap.min.css analysiert wird, wird die URL, von der es heruntergeladen wurde, als Basis verwendet, nicht die URL Ihrer Website.

Zu Vorkompiliertem Bootstrap: Dies ist nützlich, wenn Sie die Dateien auf Ihrem eigenen Webserver hosten möchten (aus irgendeinem Grund). Sie werden als ZIP-Datei zur Verfügung gestellt, die die richtige Verzeichnisstruktur enthält, damit das oben genannte Verhalten ordnungsgemäß funktioniert. Es ist als vorkompiliert gekennzeichnet, da Sie alternativ die Quelldateien herunterladen können. Obwohl CSS- und JavaScript-Dateien als eigene Quelldateien betrachtet werden, verwendet Bootstrap einen precompiler in seinem CSS, um das Schreiben großer Dateien zu erleichtern. Sie verwenden auch mehrere kleinere JavaScript-Dateien, die zur Freigabe durch ein Build-Skript zusammengefügt werden. Sie können dies in Aktion unter ihrem GitHub-Repository sehen.

15
MTCoster

Zur Glythicon-Frage

Mit der neuen Version von Bootstrap (Bootstrap 4); Glythicons wurden vollständig entfernt. Betrachten Sie sie daher als veraltet und versuchen Sie, sie nicht in aktuellen oder zukünftigen Projekten zu verwenden. Damit ist FontAwesome eine erstaunliche, leichte Bibliothek, die über ein Nice-CDN verfügt und sehr einfach zu bedienen ist. 

CDN https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css

Wenn Sie faul sein wollen, sollten Sie immer versuchen, faul zu sein! Verwenden Sie den nachstehenden Code wie bei jedem Link und fügen Sie ihn in den Kopf Ihres Projekts ein, um sofort damit zu beginnen!

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

FontAwesome ist eine umfangreiche Bibliothek mit Zeichensymbolen, die Sie über Klassenaufrufe zu jedem DOM-Element hinzufügen können. Es ist auch sehr browserfreundlich und erfordert kein any Javascript, um zu funktionieren. 

Hier der Leitfaden zum Einstieg: https://fortawesome.github.io/Font-Awesome/get-started/

Und hier sind die Symbollisten: https://fortawesome.github.io/Font-Awesome/icons/

Zur vorkompilierten vs. CDN-Frage 

Wenn Sie die Bibliothek in keiner Weise für Ihr Projekt ändern (was Sie normalerweise nicht tun sollten), ist es immer gut, ein CDN zu verwenden, um es manuell in Ihr Projekt herunterzuladen. Sie erhalten erhebliche Leistungssteigerungen und die Belastung für Ihr Git-Repo wird verringert. 

Ein weiterer Vorteil der vorkompilierten Version ist, dass Sie den Code direkt in Ihr Frontend integrieren können. Wenn Sie einen Knoten-Task-Runner wie gulp oder grunt verwenden, können Sie den Code nehmen, ihn an Ihr Thema oder Ihre Vorlieben anpassen und ihn dann direkt in Ihren Arbeitscode einfalten. Auf diese Weise können Sie Ihr eigenes Bootstrap-Aroma entwickeln.

Normalerweise ist die Standardversion jedoch in Ordnung, da Sie sie später mit Ihrer eigenen CSS überschreiben können. Wenn dies für Sie in Ordnung ist, verwenden Sie einfach das CDN, da Sie eine Standardversion von Bootstrap erhalten. 

Hoffe das hilft!

9
Jonjoe

Anstatt das gesamte Bootstrap zu importieren, können Sie nur Bootstrap Glyphicons importieren:

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css" rel="stylesheet">
0
Rahul Gurung

Für jeden, der dies in Rails mit bootstrap-sass gem tut, wird das Stylesheet für das Bootstrap-Format nicht manuell in html eingefügt. Sie können $ icon-font-path auch nicht neu definieren, da dies der Fall ist durch Ihre App ersetzt. 

Definieren Sie stattdessen die @ font-face-Deklaration für Glyphicons nach dem Import von Bootstrap neu. Also in stylesheets/application.scss:

@import "bootstrap-sprockets";
@import "bootstrap";

@font-face{
  font-family:'Glyphicons Halflings';
  src:url("https://stackpath.bootstrapcdn.com/bootstrap/3.3.6/fonts/glyphicons-halflings-regular.eot");
  src:url("https://stackpath.bootstrapcdn.com/bootstrap/3.3.6/fonts/glyphicons-halflings-regular.eot?#iefix") format("embedded-opentype"),
  url("https://stackpath.bootstrapcdn.com/bootstrap/3.3.6/fonts/glyphicons-halflings-regular.woff2") format("woff2"),
  url("https://stackpath.bootstrapcdn.com/bootstrap/3.3.6/fonts/glyphicons-halflings-regular.woff") format("woff"),
  url("https://stackpath.bootstrapcdn.com/bootstrap/3.3.6/fonts/glyphicons-halflings-regular.ttf") format("truetype"),
  url("https://stackpath.bootstrapcdn.com/bootstrap/3.3.6/fonts/glyphicons-halflings-regular.svg#glyphicons-halflingsregular") format("svg")
}

Ich fand dies für die Verwendung der Heroku-Pipeline erforderlich, um zu vermeiden, dass diese Pfade für die Staging-App kompiliert werden. Dies führt dazu, dass die Produktions-App wieder auf Staging verweist, um Glyphicons zu laden.

0
AFOC