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

Question

在我的Play 2.0项目中，我已经集成了Bootstrap（作为less文件，Play可以即时编译），但现在我发现了Boilerplate，我认为这也是一个不错的想法去利用它。经过一番搜索，我找到了这个链接：http://www.quora.com/Is-Bootstrap-a-complement-OR-an-alternative-to-HTML5-Boilerplate-or-viceversa。看起来集成是可能的，甚至有两个项目试图做到这一点。唯一的问题是它们完全做了不同的事情，我不确定哪一个是正确的。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之间的冲突呢？

所以我有些犹豫不决。在这种情况下，什么是正确的操作方式呢？

- Piotr Kukielka

---

你想要集成html5Boilerplate的哪个部分？ - Andres Ilich

Answer 1

只需要使用Initializr，它是半官方的解决方案，并且提供了大量选项。Bootstrap和H5BP也被默认支持！

http://www.initializr.com/

- hyperknot

Answer 2

我从 Twitter Bootstrap 中删除了重置样式（通过删除 less @import 语句），并将其粘贴到 HTML5 Boilerplate 中的用户样式部分。运行良好。

- welldan97

---

这听起来不错 :) 但让我担心的是代码片段下面的一条评论（第一篇帖子中的链接）：“我认为合并CSS不会很好地工作，因为Bootstrap需要重置以删除默认标题边距和列表填充。这是代码其余部分的假设（上次我检查时是这样），这可能会影响像顶部栏和选项卡/药丸之类的东西。”您在修改中使用Bootstrap的程度有多深？ - Piotr Kukielka

我使用了顶部栏、标题和表单以及警告消息。你说得对，我刚刚查看了样式表，发现我实际上添加了规则.alert-message p{ margin-top: 0}。所以在这种集成中需要进行一些重置的操作。 - welldan97

Answer 3

• Workless http://workless.ikreativ.com 是另一个 Bootstrap/H5BP 组合。
• 这个代码片段 https://gist.github.com/1422879 是 H5BP + Twitter Bootstrap 的整合

- Tun