24

我的引导样式表大小约为 120kb。

但我只使用了 25% 的样式表代码。

我不想要那个 span* 类。我通过在引导程序自定义页面中对其进行自定义来尝试它。

我未选中网格系统，但我仍然span1 - span12 class在表单、表格和响应式布局中看到。

有人可以帮我删除这些代码吗？

4

5 回答 5

35

在与 grunt 斗争了一个小时后，我决定自己尝试uncss，它要简单得多。如果您只有几页要做，或者不介意手动操作，我建议您这样做。

uncss 页面有完整的说明，但总结一下：

  1. 安装 node.js。
  2. npm install -g uncss
  3. 从uncss页面复制示例文件，并将其命名为任何带有 .js 扩展名的名称。我将其命名为 uncss.js。
  4. 用您的 html 文件替换 files 数组。（看起来像var files = ['my', 'array', 'of', 'HTML', 'files']）
  5. 用您的样式表替换样式表数组。（看起来像stylesheets : ['lib/bootstrap/dist/css/bootstrap.css', 'src/public/css/main.css']）。如果需要，同样更改“csspath”的值。
  6. 运行node uncss.js（或任何你调用你的 uncss 文件）。它将优化后的 CSS 直接输出到命令行，因此将其保存到一个类似node uncss.js > mynewcss.css.

有很多选项可以定制行为。我忽略了所有这些，它工作得很好，但如果你想要它们，它们就在那里。我测试它的页面从 138kb 变成了 9kb。

于 2015-03-28T02:40:59.733 回答
7

我遇到了完全相同的问题！

我写了一个工具来删除 bootstrap.css 中所有未使用的 CSS 样式规则

结果，59% 规则被删除，css 文件大小从121KB 减少到 59KB，在使用Google PageSpeed测试时增加了大约 5 分

源代码在这里css-optimizer

于 2015-03-11T11:14:49.897 回答
3

您是否更关心文件大小对用户加载时间的影响？或者想让你更容易阅读/理解CSS（如果它更短）？

无论哪种方式，我建议您不要花太多时间担心删除每一个额外的 CSS 样式。取消选中您不打算使用的 Bootstrap 元素并下载自定义版本。对于您网站的实时/生产版本，请使用 CSS 的最小化版本，这将进一步减小文件大小。

如果您只是想让代码更简单以供您使用，那绝对可以理解，但 Bootstrap 团队在组织它方面做得很好。花一点时间来处理它。

考虑尝试完全删除所有span*引用将删除您可能使用的功能，例如控制表单字段的宽度。即使您不使用网格，这些也非常有用。

于 2013-01-03T10:12:12.067 回答
1

我认为 twitter 引导程序严重依赖这些span*类。当我只切换“Base CSS”下的“table”复选框时，我仍然会span*在编译的 css 中获得类，因为它们无论如何都会被渲染。看看https://github.com/twitter/bootstrap/blob/master/less/tables.less：

// R.185: Change the column widths to account for td/th padding
.table td,
.table th {
  &.span1     { .tableColumns(1); }
  &.span2     { .tableColumns(2); }
  &.span3     { .tableColumns(3); }
  &.span4     { .tableColumns(4); }
  &.span5     { .tableColumns(5); }
  &.span6     { .tableColumns(6); }
  &.span7     { .tableColumns(7); }
  &.span8     { .tableColumns(8); }
  &.span9     { .tableColumns(9); }
  &.span10    { .tableColumns(10); }
  &.span11    { .tableColumns(11); }
  &.span12    { .tableColumns(12); }
}

所以恐怕你不能用定制器删除它们，只能手动删除。

于 2013-01-03T10:09:30.590 回答
1

我有一个使用 Bootstrap 2 的模板，这是 Joomla 所需的系统。我只是手动完成了这项工作，发现它很容易做到。Bootstrap CSS 文件的结构非常好，并且在部分中排序良好。我将文件的全部内容删除到bootstrap_unused.css，然后也将其复制到bootstrap_original.css.

然后我从bootstrap_unused.css我知道的正在使用的文件中删除，小心地保留顺序，然后将其粘贴回去。大部分都是第一次工作，并将文件大小从 144KB 减少到 14KB。然后我需要为表单等添加一些零碎的东西，最终达到 30KB。

如果我将来需要任何其他功能，我可以将它们拉回来，bootstrap_unused.css我总是可以bootstrap_original.css参考。

于 2017-07-06T19:44:09.460 回答