如何将 HTML5 Boilerplate 与 Twitter Bootstrap 正确集成？

Posted 2023-02-15

【中文标题】如何将 HTML5 Boilerplate 与 Twitter Bootstrap 正确集成？

【英文标题】：How to properly integrate HTML5 Boilerplate with Twitter Bootstrap?

【发布时间】：2012-02-05 12:01:35

【问题描述】：

在我的 Play 2.0 项目中，我已经集成了 Bootstrap（因为文件较少，Play 可以即时编译它们）但现在我找到了 Boilerplate，我认为使用它也是一个好主意。

经过一番谷歌搜索后，我发现了这个： http://www.quora.com/Is-Bootstrap-a-complement-OR-an-alternative-to-html5-Boilerplate-or-viceversa

所以，看起来集成应该是可能的，甚至有 2 个项目尝试这样做。唯一的问题是他们做的事情完全不同，我不确定哪一个是正确的。

https://gist.github.com/1422879 在其当前状态下似乎只是忽略了来自 Boilerplate 的 styles.css 文件。它已重命名为 h5bp.css，但我看不到任何地方都包含 h5bp.css。

另一方面，https://github.com/elgreg/html5-boilerstrap 使用它们，只是将styles.css 文件分成两部分（h5bp_normalize.css 和styles.css，bootstrap.css 包含在它们之间）。但是这样一来，Boilerplate 和 Bootstrap 是不是有冲突呢？

所以我有点迷路了。在这种情况下，正确的处理方式是什么？

【问题讨论】：

您希望整合 html5Boilerplate 的哪一部分？

【参考方案1】：

Workless http://workless.ikreativ.com 是另一个 Bootstrap/H5BP 组合。 Gist https://gist.github.com/1422879 是 H5BP + twitter 引导集成

【参考方案2】：

只需使用 Initializr，它是半官方的解决方案，它也有大量的选项。开箱即用支持 Bootstrap + H5BP！

http://www.initializr.com/

【参考方案3】：

我已从 twitter bootstrap 中删除了重置样式（通过删除 less @import 语句）并将其粘贴到 html5-boilerplate（在用户样式部分）。工作正常。

【讨论】：

这听起来不错 :) 但让我担心的是代码 sn-p 下的 cmets 之一（第一篇文章中的链接）：“我认为结合 CSS 效果不会那么好因为 Bootstrap 需要重置以删除默认标题边距和列表填充。这是其余代码中的假设（这是我上次检查的），这可能会影响顶部栏和选项卡/药丸等内容。您在修改中使用 Bootstrap 的程度如何？

我使用过顶栏、标题和表单、警报消息。你是对的，我刚刚查看了样式表，发现我实际上添加了规则.alert-message p margin-top: 0。因此，这种集成将需要一些带有重置的黑客攻击。