3

大規模なシングルページアプリケーションのHTML5/CSS3 / JavaScriptライブラリ/フレームワークを調査していて、TwitterBootstrapとBoilerplateJSを見つけました。ライブラリ/フレームワークはどちらも非常に興味深いものであり、両方を使用することを検討しています。ただし、両方を併用したいと思います。ライブラリ/フレームワークのどちらも経験がないので、2つの組み合わせについて質問（または2つ）を投稿すると思いました。

BoilerplateJSでTwitterBootstrapを使用することは可能ですか？もしそうなら、どのように両方を一緒に使用するのですか？

ありがとう。

4

2 に答える 2

2

BoilerplateJS は Twitter Bootstrap のような UI フレームワークから独立しており、これらを効果的に組み合わせて優れたシングルページ アプリを作成できます。

Twitter Bootstrap は一貫した UI を構築するのに役立ち、それを使用してコンポーネントのビューを作成できます。一方、BoilerplateJS はコンポーネントのオーケストレーションに役立ちます。

BoilerplateJS で MVVM/MVC フレームワークを使用することをお勧めします。私のように 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) {
于 2013-01-09T18:01:17.403 に答える
2

BoilerplateJS を設計するときに、Twitter Bootstrap、HTML5 Boilerplate タイプのプロジェクトを見てきました。上記のフレームワークは、競合するよりも非常に補完的だと思います。

BoilerplateJS は、プロジェクト内で JS コードを整理するためのアーキテクチャ/構造を提案しています。Twitter ブートストラップは、応答性、UI ウィジェット、スタイリングなど、BoilerplateJS に特定のガイドラインが提案されていない場合に役立ちます。

Twitter Bootstrap または HTML5 Boilerplate (ウィジェット、CSS、HTML のベスト プラクティス) と共に BoilerplateJS (JS 構造に重点を置いたもの) を使用することは常に賢明なアイデアだと思います。

于 2013-01-09T08:15:55.770 に答える