Question

我正在为大型单页面应用程序研究HTML5 / CSS3 / JavaScript库/框架，我找到了Twitter Bootstrap和BoilerplateJS。这两个库/框架看起来都非常有趣，我们正在考虑使用它们。但是，我们希望将两者结合使用。由于我们没有图书馆/框架的经验，我们认为我们会发布关于两者结合的问题（或两个）。

是否可以将Twitter Bootstrap与BoilerplateJS一起使用？如果是这样，怎么会一起使用它们？

感谢。

Answer 1

在设计BoilerplateJS时，我查看了Twitter Bootstrap，HTML5 Boilerplate类型的项目。我认为上述框架与竞争非常相辅相成。

BoilerplateJS提出了一种架构/结构来组织项目中的JS代码。 Twitter引导程序可以帮助您提供响应能力，UI小部件，样式等，其中BoilerplateJS没有提出特定的guilde线。

我认为使用BoilerplateJS（非常关注JS结构）以及我认为的Twitter Bootstrap或HTML5 Boilerplate（Widgets，CSS，HTML最佳实践）总是一个明智的想法。

Answer 2

BoilerplateJS独立于任何UI框架，如Twitter Bootstrap，它们可以有效地组合在一起，创建漂亮的单页应用程序。

Twitter Bootstrap可帮助您构建一致的UI，您可以使用它为组件创建视图，而BoilerplateJS可帮助您编写组件。

您可能知道建议将MVVM / MVC框架与BoilerplateJS一起使用。如果您像我一样选择KnockoutJS，您可能需要在视图中使用Twitter Bootstrap元素的自定义绑定。

E.g。我在我的项目中使用它将grouped buttons和typeaheads之类的UI元素无缝绑定到viewmodel。您只需要在viewmodel中引用此类绑定代码，以便能够在视图中使用类似的内容：

<label class="control-label"><strong>How many rooms:</strong></label>
<div class="btn-group" data-toggle="buttons-checkbox">
    <button type="button" class="btn btn-info" data-value="1" data-bind="checkedButtons: RoomNumber">1</button>
    <button type="button" class="btn btn-info" data-value="2" data-bind="checkedButtons: RoomNumber">2</button>
    <button type="button" class="btn btn-info" data-value="3" data-bind="checkedButtons: RoomNumber">3+</button>
</div>

请注意此处的checkedButtons自定义绑定，使用

加载到viewmodel中

define(['Boiler', './../../kobuttonbinding' ], function (Boiler, kobuttonbinding) {

如何在BoilerplateJS中使用Twitter Bootstrap？

2 个答案: