如何在BoilerplateJS中使用Twitter Bootstrap？

Question

我正在为一个大型的单页面应用程序研究HTML5/CSS3/JavaScript库/框架，我发现了Twitter Bootstrap和BoilerplateJS。这两个库/框架看起来都非常有趣，我们正在考虑同时使用它们。但是，我们希望同时使用这两种方法。因为我们对这两个库/框架都没有经验，所以我们想我们应该发布一个(或两个)关于两者组合的问题。

可以在BoilerplateJS中使用Twitter Bootstrap吗？如果是这样的话，如何将两者结合使用呢？

谢谢。

Answer 1

在设计BoilerplateJS时，我看过Twitter Bootstrap，HTML5样板类型的项目。我认为上面的框架比竞争框架更具互补性。

BoilerplateJS提出了一个架构/结构来组织项目中的JS代码。Twitter bootstrap在响应性、UI小部件、样式等方面为您提供帮助，而BoilerplateJS并未提出具体的行会路线。

我认为将BoilerplateJS (非常关注JS结构)与Twitter Bootstrap或HTML5样板(小部件、CSS、HTML最佳实践)一起使用总是一个明智的想法。

Answer 2

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

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

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

例如，我在我的项目中使用它来无缝地将grouped buttons和typeaheads等UI元素绑定到视图模型。你只需要在你的视图模型中引用这样的绑定代码，就能在你的视图中使用这样的东西：

<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自定义绑定，使用

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