Twitter BootstrapとjQuery UIを同時に使用できますか？

108

私はTwitter Bootstrapを使用していて、Bootstrapでは使用できない「自動提案」を使用したいのですが、jQuery UIには自動提案のための独自のメソッドがあります。

両方使用できますか？帯域幅が過負荷になりますか？

jquery-ui  twitter-bootstrap 
— サンケットサフ
ソース
6
jQuery UIは6.6k（縮小およびgzip）であるため、帯域幅がKBで測定されない限り、これは問題になりません。
— BryanH
4
この質問を投稿してから、状況は変わりました。現在、多くのBootstrapプラグインがあり、既存のjQuery UIプラグインを置き換えるのに十分です。今、私はブートストラップ用に作られたプラグインでブートストラップを使用しています。
— Sanket Sahu 2013
1
自動提案にtwitterのtypeahead（twitter.github.io/typeahead.js/examples）を使用しないのはなぜですか？
— koppor 2013年

回答:

83

jquery-ui-bootstrapをチェックしてください。READMEから：

TwitterのBootstrapは、2011年にリリースする私のお気に入りのプロジェクトの1つでしたが、定期的に使用していたため、次の2つのことを望んでいました。

jQuery UIと並行して機能する機能（多くのウィジェットが視覚的に壊れる原因となったもの）Bootstrapスタイルを使用してjQuery UIウィジェットにテーマを設定する機能。私はjQuery UIが好きですが、（他の人と同じように）現在のテーマのいくつかを少し古く見えるようにしています。私の希望は、このテーマが同じように感じている他の人にまともな代替案を提供することです。明確にするために、このプロジェクトはTwitter Bootstrapを置き換えることを目的とはしていません。Bootstrapのデザインに触発されたjQuery UI互換のテーマを提供するだけです。また、Bootstrap CSSのバージョンを提供します。いくつかの（マイナー）セクションがコメント化されているため、テーマを一緒に機能させることができます。

— サムドラン
ソース
62

これを更新するだけで、ブートストラップv2はjquery uiと競合しなくなりました

https://github.com/twbs/bootstrap/issues/171

編集：@Freshbloodとして、まだ競合することがいくつかあります。ただし、最初に投稿されたように、Twitterは彼らがこれに取り組んでいることを示唆しており、特にv1と比較すると、ほとんど機能します。

— Eonasdan
ソース
10
本当によろしいですか？それでもjquery datepickerに問題がある
— Freshblood
ブートストラップv2とjquery uiを使用して空のテストページを作成し、それが自分のコードではないことを確認することをお勧めします。新しいバージョン以来問題はありませんでした
— Eonasdan
1
このjquery ui datepicker jqueryui.com/demos/datepicker/#dropdown-month-yearを確認してください。この設定でわかるように、datepickerにはdropdownbox要素が含まれているため、ブートストラップはすべての入力要素をすでにオーバーライドしています。ただし、これらの設定で日付ピッカーを使用しなくても問題はありません。
— フレッシュブラッド
1
ウィジェットにinput要素が含まれていると、TwitterブートストラップのCSSスタイルと競合します。
— フレッシュブラッド
1
否定。ブートストラップのボタン関数はどちらもbutton()メソッドを定義しているため、jQuery UIでは機能しません。
— BryanH
24

今後の参考のため（これはGoogleのトップアンサーATMであるため）、jQuery UIがブートストラップまたはカスタムスタイルを上書きしないようにするには、カスタムダウンロードを作成してno-themeテーマを選択する必要があります。これにはjQuery UIのリセットのみが含まれ、さまざまな要素のブートストラップのスタイルはオーバーロードされません。

その間、一部のjQuery UIコンポーネント（datepickerなど）にはネイティブブートストラップ実装があります。ネイティブブートストラップの実装では、ブートストラップのcssクラス、属性、およびレイアウトを使用するため、フレームワークの他の部分との統合が向上するはずです。

— T0xicCode
ソース
ここにテーマなしのテーマが表示されません：jqueryui.com/themeroller。私はそれを逃したか、それはもうそこにありませんか？
— gaefan 2014
3
jqueryui.com/downloadは、使用する必要があるリンクです。一番下までスクロールし、リストから[テーマなし]を選択します。
— T0xicCode
3

限られた経験の中で、私も問題に直面しています。JQuery要素（ボタンなど）は、ブートストラップCSSを使用してスタイル設定できるようです。しかし、JQuery UIタブを作成していて、（input-appendクラスを使用して）ブートストラップのみの入力を各タブの下部にロックしようとすると問題が発生し、最初のタブのみが正しく表示されます。したがって、JQueryタブ+ブートストラップボタン=おそらくそうではありません。

— フラックスコンデンサ
ソース
2

BootstrapはまだJquery UIで機能しません。たとえば、modal.Bootstrapは素晴らしいスタイルを持っていますが、Twitterの背後にあるフレームワークとしてはそれほど優れていません。

— ルシアン・ポバタヌ
ソース
2

javascript名前空間の衝突が発生している場合は、BootstrapのnoConflict()関数を使用して、jQuery UIに機能を譲ることができます。

— user1618143
ソース
2

この質問では特にjQuery-UI自動提案機能について説明していますが、質問のタイトルはより一般的です。ブートストラップ3はjQuery UIで機能しますか？jQUI日付ピッカー（ポップアップカレンダー）機能に問題がありました。私は日付ピッカーの問題を解決し、ソリューションが他のjQUI / BSの問題に役立つことを願っています。

今日、最新のjQueryUI（バージョン1.12.1）の日付ピッカーをブートストラップ3.3.7で動作させるのに苦労しました。起こっていたのは、カレンダーが表示されても閉じられないことです。

jQUIとBSのバージョンの問題であることが判明しました。私は最新バージョンのBootstrapを使用していて、これらのバージョンのjQUIおよびjQueryにダウングレードする必要があることがわかりました。

jQueryUI-1.9.2 （テスト済み-機能）
jQuery-1.9.1または2.1.4 （テスト済み-両方が機能します。他のバージョンも機能しますが、これらは機能します。）
ブートストラップ3.3.7 （テスト済み-機能）

カスタムテーマを使用したかったので、jQUIのカスタムダウンロードも作成しました（すべてのインタラクション、ダイアログ、プログレスバー、使用していないいくつかのエフェクトなどを削除しました）。そして、 "Cupertino"を選択してください。一番下が私のテーマです。

私はこうしてそれらをインストールしました：

<head>
...etc...
<link rel="stylesheet" href="css/font-awesome.min.css">
<link rel="stylesheet" href="css/cupertino/jquery-ui-1.9.2.custom.min.css">
<link rel="stylesheet" href="css/bootstrap-3.3.7.min.css">

<!-- <script src="js/jquery-1.9.1.min.js"></script> -->
<script src="js/jquery-2.1.4.min.js"></script>
<script src="js/jquery-ui-1.9.2.custom.min.js"></script>
<script src="js/bootstrap-3.3.7.min.js"></script>
...etc...
</head>

興味のある人にとって、CSSフォルダーは次のようになります。

[css]
  - bootstrap-3.3.7.min.css
  - font-awesome.min.css
  - style.css
  - [cupertino]
      - jquery-ui-1.9.2.custom.min.css
      [images]
          - ui-bg_diagonals-thick_90_eeeeee_40x40.png
          - ui-bg_glass_100_e4f1fb_1x400.png
          - ui-bg_glass_50_3baae3_1x400.png
          - ui-bg_glass_80_d7ebf9_1x400.png
          - ui-bg_highlight-hard_100_f2f5f7_1x100.png
          - etc (8 more files that were in the downloaded jQUI zip file)
— cssyphus
ソース
1

ローカルに保存せず、提供されているリンクを使用すると、パフォーマンスが向上する可能性があります。場合によっては、クライアントにスクリプトがすでにキャッシュされていることがあります。jQueryUIの場合については、必要になるまでロードしないことをお勧めします。どちらも最小化されていますが、コンソールを起動してネットワークタブを表示し、ロードにかかる時間を確認できます。最初にダウンロードされると、キャッシュされるため、後で心配する必要はありません。はい、両方を使用しますが、CDNを使用します

— アンドレイ
ソース
1

はい、両方使用できます。twitterのjsブートストラップはjqueryプラグインのコレクションです。jQuery UIとの競合はありません。

帯域幅の過負荷に関しては、すべてのjsファイルをロードするリクエストをどのように処理するかによります。サーバーに複数のリクエストを出して各ファイルをリクエストしたくない場合は、それらを一緒に追加して最小化します。または、おそらく必要のないjsブートストラッププラグインを取り除くことができます。非常にモジュール化されています。

— ベニー・チア
ソース
4
すべてのJSは適切に名前空間が付けられていますが、CSSの衝突について心配する必要があります。ブートストラップタブにJUIウィジェットを含める場合、何が優先されますか？
— btown 2012
Bootstrapで見栄えが悪いのは、jQueryのCSSだけではありません。Bootstrapは、CSSを大幅に変更します。多くの場合!important、私は自分で常にオーバーライドして修正する必要があることに気づきます。私はBootstrapを嫌い、少なくともBootstrapのクラスを使用しない要素をいじくるのをやめるまで、その使用を思いとどまらせます。（これは元のデザイナーの責任ではありません。Twitterの元の開発者が彼らが人気のライブラリになるために取り組んでいたことを期待していたとは思えません。）
— Michael Scheper
0

私はjquery uiを使用してサイトを開発しましたが、将来の開発とスタイル設定のためにブートストラップを接続しようとしただけですが、事実上すべてが壊れてしまいます。

したがって、互換性はありません。

— NimChimpsky
ソース
0

これは、jquery uiとbootstrap.jsでのGoogleのトップの結果なので、コミュニティウィキとして追加することにしました。

使ってます：

  • ブートストラップv3.2.0
  • jquery-2.1.0
  • jquery-ui-1.10.3

そして、どういうわけか、bootstrap.jsを含めると、jquery ui autocompleteのドロップダウンが無効になります。

私の3つの回避策：

  • bootstrap.jsを除外する
  • libaをタイプアヘッドするには
  • bootstrap.jsからbootstrap.min.jsに移動します（奇妙ですが、私にとってはうまくいきました）
— JP Hellemons
ソース
jquery uiブートストラップの組み合わせもツールチップと日付ピッカーを無効にします。
— Vipul Hadiya、2014
-3

data-role = "none"は、それらを連携させるための鍵です。ブートストラップに触れさせたい要素に適用できますが、jquery mobileは無視します。このような入力type = "text" class = "form-control" placeholder = "Search" data-role = "none"

— ディネシュ・ケタルパル
ソース
1
この質問は、jqueryモバイルではなく、ブートストラップとjquery-uiに関するものでした
— TJ
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.