0

我使用 custom.css 文件扩展了 Bootstrap 提供的 CSS 模板。但是，我注意到在加载站点时，有片刻您可以看到引导程序提供的旧 CSS，然后站点使用新 CSS 进行自我调整。

我发现让 div 的字体/位置不断变化会分散用户的注意力。Web 开发人员如何使用 Bootstrap 解决这个问题？我了解您不要直接修改 Bootstrap CSS 文件，因为这会在更新到达时产生问题。

以供参考 ：

 <link href="{{ STATIC_URL }}css/bootstrap.css" rel="stylesheet">
 <link href="{{ STATIC_URL }}css/bootstrap-responsive.css" rel="stylesheet">
 <link href="{{ STATIC_URL }}css/custom.css" rel="stylesheet">
4

1 回答 1

1

将所有 3 个 CSS 文件合并为 1 个将是一种解决方案。有各种各样的方法可以做到这一点。低技术的方法是创建一个新的combine.css文件，然后将您的 3 个 CSS 文件复制并粘贴到这个新文件中。最好按照它们当前出现的顺序执行此操作。然后在文件的头部，将三个 CSS 文件链接替换为 

<link href="{{ STATIC_URL }}css/combined.css" rel="stylesheet">

您也可以稍微加快页面加载速度，因为您现在只加载一个文件。

如果您想更进一步，请尝试缩小您的组合 CSS。同样有各种各样的选择，一种可能性是http://www.cssminifier.com

祝你好运

于 2013-01-11T01:22:22.560 回答