web-dev-qa-db-ja.com

CDNからBootstrap Glyphiconsを取得できますか？

私はBSが初めてです。 MaxCDNからBootstrap CSSおよびJSファイルのv3.3.6を取得しています。グリフィコンも含める方法があることを望んでいましたが、その方法がわかりません。 CDNからグリフィコンを取得することは可能ですか？

また、 Bootstrap download page が「プリコンパイル済みブートストラップ」を指す場合の意味がわかりません。なぜプリコンパイル済みダウンロードとMaxCDNダウンロードが必要なのでしょうか。プリコンパイルされたグリフィコンが提供されるので、それが唯一の理由かもしれません。

twitter-bootstrapcdnglyphicons
14
Tom Baxter

このようなHTMLファイルにスタイルシートbootstrap.min.cssを含める場合（たとえば）：

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

次に、Glyphiconsフォントが同じ場所から自動的にダウンロードされます。

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

これは、フォントがrelativeURLを使用してロードされるためです。 bootstrap.min.cssのCSSが解析されると、ダウンロード元のURLがベースとして使用され、WebサイトのURLは使用されません。

プリコンパイルされたBootstrapに関して：これは、（何らかの理由で）自分のWebサーバーでファイルをホストする場合に便利です。これらは、上記の動作がすぐに正常に機能するために必要な正しいディレクトリ構造を含むZipファイルとして利用可能になります。代わりにソースファイルをダウンロードできるため、プリコンパイル済みとしてラベル付けされます。 CSSファイルとJavaScriptファイルはそれ自体がソースファイルと見なされますが、BootstrapはCSSでprecompilerを使用して作成しますまた、ビルドスクリプトによってリリースのためにマージされるいくつかの小さなJavaScriptファイルを使用します。これは、 their GitHub repository で実際に見ることができます。

18
MTCoster

グリシコン質問について

bootstrap（Bootstrap 4）;の新しいバージョンでは、グリシコンは完全に削除されているため、非推奨と見なし、現在または将来のプロジェクトで使用しないようにしてください。 、ナイスCDNがあり、非常に使いやすいライブラリ。

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

あなたが怠け者になりたいなら、あなたはいつも怠け者であろうとするべきです！他のリンクと同様に、以下のコードを使用して、プロジェクトの先頭に貼り付けてすぐに開始してください！

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

FontAwesomeは、クラス呼び出しを介して任意のDOM要素に追加できるフォントアイコンの広範なライブラリです。また、非常にブラウザーにやさしく、anyjavascriptが動作する必要はありません。

開始ガイドはこちらです： https://fortawesome.github.io/Font-Awesome/get-started/

そして、ここにアイコンリストがあります： https://fortawesome.github.io/Font-Awesome/icons/

プリコンパイル済みの質問とCDNの質問について

プロジェクトで何らかの方法でライブラリを変更しない場合（通常は何もしない）、プロジェクトに手動でダウンロードする際にCDNを使用することをお勧めします。パフォーマンスが大幅に向上し、gitリポジトリの負荷が軽減されます。

プリコンパイルされたバージョンの他の利点の1つは、フロントエンドにコードを直接統合できることです。 gulp や grunt のようなノードタスクランナーを使用している場合は、コードを取得して、テーマや設定に合わせて変更し、作業コードに直接折りたたむことができます。これにより、独自のフレーバーのブートストラップを開発できます。

ただし、標準バージョンは、後で独自のcssで上書きできるため、通常は問題ありません。これでよければ、Bootstrapの標準バージョンを提供するCDNを使用してください。

お役に立てれば！

9
Jonjoe

全体をインポートする代わりにBootstrapインポートできますBootstrap Glyphiconsのみ：

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

Rails bootstrap-sass gemを使用してこれを行う場合、メインのbootstrapスタイルシートをHTMLに手動で含めることはできず、再定義することはできませんドメインはアプリのドメインに置き換えられるため、これを実現するには$ icon-font-pathを使用します。

代わりに、ブートストラップのインポート後にGlyphiconsの@ font-face宣言を再定義します。したがって、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")
}

これらのパスがステージングアプリ用にコンパイルされるのを避けるためにHerokuのパイプラインを使用する場合、これが必要であることがわかりました。

0
AFOC