web-dev-qa-db-ja.com

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

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

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

jquery-uitwitter-bootstrap
107
Sanket Sahu

jquery-ui-bootstrap を確認してください。 READMEから：

TwitterのBootstrapは、2011年に出た私のお気に入りのプロジェクトの1つでしたが、定期的に使用していたため、2つのことが必要になりました。

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

83
Sam Dolan

これを更新するだけで、bootstrap v2はjquery uiと競合しなくなりました

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

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

62
Eonasdan

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

現在、jQuery UIコンポーネント（datepickerなど）には、ネイティブのbootstrap実装があります。ネイティブのbootstrap実装はbootstrap cssクラス、属性、およびレイアウトを使用するため、残りのフレームワークとのより良い統合が必要です。

23
T0xicCode

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

3
fluxcapacitor

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

今日、bootstrap 3.3.7で動作する最新のjQueryUI（ver 1.12.1）datepickerを入手するのに苦労しました。何が起こっていたかというと、カレンダーは表示されますが、閉じません。

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)
2
cssyphus

BootstrapはまだJquery UIでは動作しません。たとえば、modal.BootstrapはNiceスタイルですが、Twitterを備えたフレームワークとしてはそれほど良いものではありません。

2
Lucian Povatanu

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

2
user1618143

Kendo UIには、ニース ここではブートストラップテーマ と、jquery-UIに匹敵するWeb UIのセットがあります。また、テーマとうまく機能する オープンソースバージョン もあります。

1
prograhammer

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

1
andrei

はい、両方を使用できます。 Twitterのjs bootstrapは、jqueryプラグインのコレクションです。 jQuery UIと競合することはありません。

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

1
Benny Tjia

これはjquery uiおよびbootstrap.jsでのgoogleの一番上の結果であるため、これをコミュニティwikiとして追加することにしました。

私は使っている：

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

そして、なんとかbootstrap.jsをインクルードすると、 jquery ui autocomplete のドロップダウンが無効になります。

私の3つの回避策：

  • bootstrap.jsを除外します
  • libを先行入力するには
  • bootstrap.jsからbootstrap.min.jsに移動します（奇妙ですが、私のために働いた）
0
JP Hellemons

Jquery uiを使用してサイトを開発しました。将来の開発とスタイリングのためにbootstrapをプラグインしようとしましたが、事実上すべてが壊れています。

いいえ、互換性がありません。

0
NimChimpsky