Twitterブートストラップvs jQuery UI?[閉まっている]


214

基本的なページの機能強化のためにjQuery UIを使用しています。ボタンと入力のスタイルとモーダルダイアログボックス。今、Bootstrapに出会いました。

jQuery UIからBootstrapに移行した経験はありますか?これは私がやろうとしていることですが、これを行う前に、私が直面する可能性のある問題を認識したいと思います。


4
これが求められたときに利用できなかった可能性のある解決策の1つ... Addy Osmaniと彼のチームは2つのマージに取り組んでいます-両者の間に行き詰まっている場合は、チェックしてください。-addyosmani.github.io/jquery-ui-bootstrap
街灯

1
(2014!)の回答を更新するには?誰でもここで賞金を始めることができますか?
Peter Krauss、2014年

Bootstrapウェブサイトから-「Bootstrapは一度に1つのモーダルウィンドウしかサポートしません。ネストされたモーダルは、ユーザーエクスペリエンスが悪いと思われるため、サポートされていません。」 - やれやれだぜ。
George Beier

回答:


133

私はいくつかのプロジェクトに参加しています。

私の意見の最大の違い

  • jQuery UIはフォールバックしても安全で、正しく動作し、古いブラウザで見栄えがします。BootstrapはCSS3に基づいています。つまり、基本的に新しいブラウザでは素晴らしいが、古いブラウザではそれほど優れていません。

  • 更新頻度:ブートストラップは素晴らしい新機能を備えたいくつかの大きな更新を取得していますが、悲しいことに、以前のコードが壊れる可能性があるため、新しいメジャーリリースがあったときにブートストラップをインストールして更新するだけではなく、基本的に多くの新しいコーディングが必要です

  • jQuery UIはJavaScriptからの変換を備えた優れたhtml構造に基づいていますが、Bootstrapは視覚的かつカスタマイズ可能なインライン構造に基づいています。(JQUERY UIでウィジェットを呼び出し、それをBootstrapで定義する)

それで、何を選ぶべきですか?

それは常にあなたが取り組んでいるプロジェクトの種類に依存します。クールで高速なウィジェットの方が優れていますか、それともユーザーが古いブラウザをよく使用していますか?

私は常に両方を使用することになるので、両方の世界の最良のものを使用できます。

これらを使用する場合は、両方のフレームワークへのリンクを次に示します。

  1. jQuery UI
  2. ブートストラップ

2
-時間を割いて答えてくれてありがとう。私のニーズは、CSS3をかなりサポートしているIE9またはそれ以降のバージョンのブラウザーで動作するものに対するものです。ブートストラップは私によく見え始めています。一つの質問。ASP.MVCを使用しています。必要量が少ないことに気づきました。BoostrapはMicrosoft ASP MVCプラットフォームで問題なく動作しますか?「少ない」はどこに収まるのですか?
ジェシカ

lessファイルを.cssファイルにコンパイルできます。(makeを使用して)ブートストラップをビルドすると、すぐに使用できるCSSファイルが作成されます。このようにして、使用量を減らす必要はありません。
mikaelb 2012年

3
LESSはcssフレームワークです。Boostrap(通常のCSS / JSバージョンがあります)を使用するために必要な方法はありませんが、LESSを使用すると、CSSを簡単に変更(色を変更するなど)したり、依存させたり、機能を追加したりできます。ここを参照してください:lesscss.org、.NETのコンパイラにはベータ版があります。参照:dotlesscss.org
Marco Johannesen

20
「両方の長所」をどのように使用していますか?私が得ている最も近い使用しているjQueryUIブートストラップ(基本的にjQueryUIテーマ)が、まだそれはブートストラップ1.4、ない2.0用に設計されています、との衝突等、ボタンのJSを使用しようとするときがあります
アダム・リンチ

3
@ PhoenixX_2頑張ってね!例:ブートストラップでボタン要素にすべてのクラスを記述します(つまりbutton button-primary button-small、jQueryUIで要素をボタンに割り当てます。つまり、「btn」を追加し、JSを介してボタンにします$(".btn").button()。これは、ブートストラップでそれをHTMLで定義し、jQueryUIでJSで定義します。Bootstrapのネガティブは、何かを更新または変更する場合(つまり、Bootstrapバージョン)にHTMLを編集する必要があります。jQueryUIはJSを変更するだけでよく、多くの場合は簡単です。両方に良い点と悪い点があります!:)
Marco Johannesen

73

両方を使用したTwitterのBootstrapは、優れたテクノロジーセットです。ここにいくつかの違いがあります

  • ウィジェット:jQuery UIがここで勝ちます。それが提供する日付ウィジェットは非常に便利で、Twitter Bootstrapは何も提供しません。
  • Scaffolding:Bootstrapがここで勝ちます。ツイッターのグリッドは流動的であり、固定的であることが一流です。jQuery UIはこの方向性さえ提供しておらず、ページレイアウトをエンドユーザーに任せています。
  • すぐに使えるプロフェッショナリズム:CSS3を使用したBootstrapはリーグをリードし、jQuery UIは比較すると時代遅れに見えます。
  • アイコン:私はこれに同行します。BootstrapはjQuery UIよりも優れたアイコンを備えていますがGlyphicons Halflingsは通常無料で利用できませんが、BootstrapとGlyphiconsの作成者の間の取り決めにより、開発者は無料でこれを実現できます。お礼として、可能な限り、グリフィコンへのオプションのリンクを含めるようにしてください。
  • 画像とサムネイルBootstrapに移動します。jQueryUIはここでは役に立ちません。

その他の注意事項

  • これら2つのテクノロジーがどのように競合するかを理解することも重要です。オーバーラップはたくさんありますが、単純な足場と固定/流体の作成が必要な場合、ブートストラップは別のテクノロジーではなく、最高のテクノロジーです。単一のウィジェットが必要な場合、jQuery UIはおそらく上位3つにさえありません。現在、jQuery UIは主に、統一されたフレームワークを使用してクライアント側ウィジェットを作成するための一貫性と概念実証のための単なるおもちゃです。

34

どちらも比較的少ない問題で使用できます。Twitter BootstrapはjQuery 1.7.1(この記事の執筆時点)を使用しており、追加のJquery UIコンポーネントをHTMLテンプレートに統合できない理由は考えられません。

Initializr.comで作成されたHTML5ボイラープレートとTw​​itter Bootstrapの組み合わせを使用しています。これは、2つの素晴らしいスターターテンプレートを1つの素晴らしいスタータープロジェクトに結合します。http://html5boilerplate.com/およびhttp://www.initializr.com/で詳細を確認してください または、すぐに開始するには、http://www.initializr.com/にアクセスして、「Bootstrap 2」をクリックしてください。ボタンをクリックし、「ダウンロード」をクリックします。これにより、開始するために必要なすべてのjsおよびcssが提供されます。

そして、HTML5とCSS3を恐れないでください。InitializrとHTML5ボイラープレートには、すべての機能がIE 6、7、8、9で機能できるようにするポリフィルとIE固有のコードが含まれています。

Twitter BootstrapでのLESSの使用もオプションです。LESSを使用して、Bootstrapで使用されるすべてのCSSをコンパイルしますが、独自のスタイルをオーバーライドまたは追加するだけの場合は、その目的で空のcssファイルを提供します。

カスタムコードを追加するための空のjsファイル(script.js)もあります。ここに、jQueryUIコンポーネントを追加するためのハンドラーまたはセレクターを追加します。


すばらしい答えです。簡単な質問ですが、jquery uiは、Twitterブートストラップとそのプラグインに含まれていないものよりも実際に何を提供していますか?
MindWire

5
すみません、これを見ただけです。jsウィジェットに関する限り、jQuery UIには日付ピッカーとスライダーがありますが、これらはBootstrapには含まれていません。また、jqUIには、ドラッグアンドドロップ、アニメーションの表示/非表示、クラスの切り替えなどの相互作用と効果が含まれています。jqUIのインタラクションとBootstrapのレイアウトコンポーネントを組み合わせると、非常に強力な組み合わせになります。
eterps

6
注意すべき1つの問題。どちらのプロジェクトも、互換性のない方法で$ .fn.buttonを定義しています。
Levi

27

私たちは両方を使用しており、Bootstrapはそのシンプルさと、開発および強化されているペースが気に入っています。jQuery UIの問題は、カタツムリのペースで動いていることです。Menubar、Treeコントロール、DataGridなどの一般的な機能を計画/開発段階で展開するのに何年もかかります。私たちは待って待って待って、やっとあきらめて、製品http://dblite.comに ExtJSのような他のライブラリを使用しました。

Bootstrapは非常に短い期間で非常に包括的な機能セットを生み出し、jQuery UIをすぐに追い越すと確信しています。

ですから、いつかは時代遅れになるものを使う意味がありません...


43
最終的にはすべてが古くなります。何をしても意味がありません。
tilgovi 2013

6
確かに、私たちは、その地盤をより長く保持すると思うものを選ぶ必要があるだけです。
Rajiv 2013

8
いや、あなたはあなたのクライアントからお金をもたらすつもりのものを選ぶ必要があるだけです。一旦それが機能するようになれば、たとえそれがスタイルから外れても、それはしばらく機能し続けるはずなので、唯一の本当の懸念はお金です。
Adam
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.