定制的Bootstrap和CDN

时间:2014-10-20 17:05:14

标签: twitter-bootstrap cdn

我对自定义Bootstrap插件如何工作以及它们是否/如何与传统CDN一起使用感到困惑。


在线调整自定义设置?

如果我正确理解Bootstrap 3的文档,那么定制Bootstrap外观的标准方法是转到this page,更改变量,然后将生成的/自定义版本下载到您的计算机上。

但我怎么知道我是否会喜欢我所做的改变,直到我真正看到它的实际效果?如果没有将我的更改应用于某种“在线展示”的能力,我将不得不:

  1. 进行更改(每个周期可能需要20 - 30分钟)
  2. 点击“编译和下载”按钮
  3. 下载并解压缩自定义版本
  4. 在我自己的应用程序中使用它,等待看到我不喜欢的东西;当发生这种情况时,从上面的步骤#1开始冲洗并重复
  5. 这是一个昂贵的开发/测试周期(对于最终开发人员而言,时间成本都很高,而在服务器端对于所有这些自定义项的Bootstrap服务器来说都是昂贵的。)

    所以我的第一个问题:是否有办法在该页面上进行更改,然后在某种展示案例中看到它们的运行情况?如果没有,那么核心Bootstrap开发人员会做些什么来定制/有效调整Bootstrap?


    自定义引导程序版本和CDN

    因此有很多流行的Bootstrap CDN。我一次又一次看到的是:

      

    https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css

    但是我必须假设这个URL只是拉下了“正常”(非定制)最新版本的Bootstrap,是吗?因此,对于我将自定义版本放在CDN上,我必须付费才能自己托管。

    所以我问:是否有能够为您托管自定义Bootstrap版本的CDN?如果没有,那么是否有办法对Bootstrap进行编码/配置,以便它只会降低我的自定义CSS更改了我的Web服务器,但是从CDN中删除了所有模板/普通/ JS代码?硬核Bootstrap开发人员如何处理自定义Bootstrap风格的CDN托管?

3 个答案:

答案 0 :(得分:3)

我所做的是下载Bootstrap的源代码并为我的自定义和覆盖创建一个LESS文件。我在加载Bootstrap变量LESS后直接加载它然后编译为CSS。这允许我在单独的LESS文件中快速创建mod并编译可以升级的基本Bootstrap,而不会覆盖我的任何更改。如果您使用grunt进行编译,Bootstrap确实有自己的grunt文件。

你可以举办像CloudFlare CDN这样的活动。

答案 1 :(得分:3)

  

有没有办法在该页面上进行更改,然后在某种展示案例中查看它们?

不,虽然有第三方定制器确实有这样的实时预览功能。

  

核心Bootstrap开发人员如何有效地自定义/调整Bootstrap?

Build Bootstrap locally via Grunt.然后run the docs locally查看您的自定义设置的外观。然后进行更多更改。泡沫,冲洗,重复。

  

对于引导所有这些自定义的Bootstrap服务器,服务器端的这种方法很昂贵

实际上它很便宜! Customizer完全在客户端运行。

  

但是我必须假设这个网址只是拉下了#34;正常" (非定制)Bootstrap的最新版本,是吗?

正确。

  

是否有能够为您托管自定义Bootstrap版本的CDN?

只需使用普通的CDN即可。 Bootstrap就像任何其他前端库一样; CDN并不需要特别对待它。

答案 2 :(得分:0)

使用 CDN 主要是性能问题。 CDN 背后的想法是,如果多个网站使用相同的资源,例如 bootstrap.min.js,它只加载一次并存储在浏览器缓存中供所有网站使用。另一个优点是 CDN 源将并行加载,因为它源自另一台服务器。浏览器往往最多打开两个连接到一个浏览器。第三个优势是 CDN 内容托管在许多地理位置,并且使用离您最近的一个,因此使用速度最快。

如果您自定义引导程序,您将无法再与其他网站共享此信息。没有满足第一个优势的约束条件。如果您主要关心的是性能,那么您可以做的是为 staioc 内容(引导程序、图像、样式等)使用不同的主机名

例如

www.example.com 和 static.example.com 是否在同一台服务器上运行并不重要。只有主机名才算数。