Question

我是BS的新手。我正在从MaxCDN检索Bootstrap CSS和JS文件的v3.3.6。我希望有一种方法可以包括glyphicons，但我不知道如何做到这一点。是否可以从CDN中检索字形符？

另外，我不明白Bootstrap download page在引用＆＃34;预编译Bootstrap＆＃34;时的含义。为什么我要预编译下载与MaxCDN下载。我看到预编译提供了glyphicons所以也许这是唯一的原因。

Answer 1

如果您在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

这是因为字体是使用相对网址加载的。解析bootstrap.min.css中的CSS时，将用于下载的网址作为基础，而不是您网站的网址。

关于预编译的Bootstrap ：如果您想在自己的Web服务器上托管文件（由于某种原因），这非常有用。它们以zip文件的形式提供，其中包含上述行为开箱即用的正确目录结构。它被标记为预编译，因为您可以选择下载源文件。虽然CSS和JavaScript文件本身就被视为源文件，但Bootstrap在其CSS上使用预编译器，使它们更容易编写大文件。他们还使用几个较小的JavaScript文件，它们合并在一起，以便通过构建脚本发布。您可以在their GitHub repository处看到这一点。

Answer 2

关于Glythicon问题

使用新版本的bootstrap（Bootstrap 4）; Glythicons已被完全删除，因此请考虑弃用，并尽量不要在当前或未来的项目中使用它们。有了这个说，FontAwesome是一个惊人的，轻量级的库，有一个很好的CDN，非常容易使用。

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

如果你想变懒，你应该总是试着偷懒！使用下面的代码，与任何链接一样，粘贴到项目的头部，立即开始使用它！

localhost:58620

FontAwesome是一个广泛的字体图标库，您可以通过类调用将其添加到任何DOM元素。它也非常适合浏览器，并且不需要任何 javascript。

以下是入门指南： https://fortawesome.github.io/Font-Awesome/get-started/

以下是图标列表： https://fortawesome.github.io/Font-Awesome/icons/

关于预编译与CDN问题

如果您不打算以任何方式为您的项目修改库（通常您不应该这样做），那么使用CDN而不是手动将其下载到项目中总是好的。您将获得显着的性能提升，并减轻您的git仓库的负载。

预编译版本的另一个好处是它允许您将代码直接集成到您的前端。如果您使用节点任务运行器（如gulp或grunt），您可以获取代码，将其更改为与您的主题或首选项相匹配，然后将其直接折叠到您的工作代码中。这使您可以开发自己的引导程序。

然而，通常标准版本很好，因为您可以稍后使用自己的css覆盖它。如果这对您没问题，那么只需使用CDN，因为它将为您提供标准版本的Bootstrap。

希望这有帮助！

Answer 3

对于在Rails中使用bootstrap-sass gem进行此操作的任何人，您都不会在html中手动添加主要的bootstrap样式表，并且您也无法重新定义$ 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的管道来避免为登台应用程序编译这些路径时，这是必要的，导致生产应用程序指向登台以加载Glyphicons。

Answer 4

要导入整个Bootstrap，您只能导入Bootstrap Glyphicons：

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

我可以从CDN获取Bootstrap Glyphicons吗？

4 个答案: