我正在研究大型单页应用程序的 HTML5/CSS3/JavaScript 库/框架,我发现了 Twitter Bootstrap 和BoilerplateJS。这两个库/框架看起来都非常有趣,我们正在考虑同时使用它们。但是,我们想同时使用两者。由于我们没有使用任何一个库/框架的经验,我们认为我们会发布一个(或两个)关于两者结合的问题。
是否可以将 Twitter Bootstrap 与 BoilerplateJS 一起使用?如果是这样,如何将两者一起使用?
谢谢。
我正在研究大型单页应用程序的 HTML5/CSS3/JavaScript 库/框架,我发现了 Twitter Bootstrap 和BoilerplateJS。这两个库/框架看起来都非常有趣,我们正在考虑同时使用它们。但是,我们想同时使用两者。由于我们没有使用任何一个库/框架的经验,我们认为我们会发布一个(或两个)关于两者结合的问题。
是否可以将 Twitter Bootstrap 与 BoilerplateJS 一起使用?如果是这样,如何将两者一起使用?
谢谢。
BoilerplateJS 独立于 Twitter Bootstrap 等任何 UI 框架,它们可以有效地组合在一起以创建漂亮的单页应用程序。
Twitter Bootstrap 帮助您构建一致的 UI,您可以使用它为您的组件创建视图,而 BoilerplateJS 帮助您编排您的组件。
你可能知道推荐使用 MVVM/MVC 框架和 BoilerplateJS。如果您像我一样选择 KnockoutJS,您可能需要在视图中为 Twitter Bootstrap 元素使用自定义绑定。
例如,我在我的项目中使用它来将 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) {
我在设计 BoilerplateJS 时看过 Twitter Bootstrap,HTML5 Boilerplate 类型的项目。我看到上述框架非常互补而不是竞争。
BoilerplateJS 提出了一种架构/结构来组织项目中的 JS 代码。Twitter bootstrap 在 BoilerplateJS 没有提出特定的指导线的情况下帮助您进行响应、UI 小部件、样式等。
我认为将 BoilerplateJS(非常专注于 JS 结构)与 Twitter Bootstrap 或 HTML5 Boilerplate(小部件、CSS、HTML 最佳实践)一起使用总是一个聪明的主意。