Bisakah saya menggunakan Twitter Bootstrap dan jQuery UI secara bersamaan?

Saya menggunakan Twitter Bootstrap dan saya ingin menggunakan "saran otomatis" yang tidak tersedia di Bootstrap, sedangkan jQuery UI memiliki metode sendiri untuk saran otomatis.

Bisakah saya menggunakan keduanya? Apakah akan membebani bandwidth?

Lihat jquery-ui-bootstrap . Dari README:

Bootstrap Twitter adalah salah satu proyek favorit saya yang keluar pada tahun 2011, tetapi setelah menggunakannya secara teratur membuat saya menginginkan dua hal:

Kemampuan untuk bekerja berdampingan dengan jQuery UI (sesuatu yang menyebabkan sejumlah widget rusak secara visual) Kemampuan untuk mengatur tema widget UI jQuery menggunakan gaya Bootstrap. Sementara saya suka jQuery UI, saya (seperti yang lain) menemukan beberapa tema saat ini terlihat sedikit kuno. Harapan saya tema ini memberikan alternatif yang layak bagi orang lain yang merasakan hal yang sama. Untuk memperjelas, proyek ini tidak bertujuan atau bermaksud untuk menggantikan Twitter Bootstrap. Ini hanya menyediakan tema yang kompatibel dengan jQuery UI yang terinspirasi oleh desain Bootstrap. Ini juga menyediakan versi Bootstrap CSS dengan beberapa bagian (minor) yang diberi komentar yang memungkinkan tema untuk bekerja di sisinya.

hanya untuk memperbaruinya, bootstrap v2 tidak lagi konflik dengan jquery ui

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

Edit : sebagai @Freshblood ada beberapa hal yang masih bentrok. Namun, seperti yang awalnya diposting Twitter menyarankan bahwa mereka sedang mengerjakan ini dan sebagian besar berfungsi, khususnya dibandingkan dengan v1.

Untuk referensi di masa mendatang (karena ini adalah ATM jawaban teratas Google), untuk mencegah jQuery UI menimpa bootstrap atau gaya kustom Anda, Anda perlu membuat unduhan khusus dan memilih no-themetema. Itu hanya akan mencakup penyetelan ulang UI jQuery, dan tidak membebani gaya bootstrap untuk berbagai elemen.

Sementara kita melakukannya, beberapa komponen UI jQuery (seperti datepicker) memiliki implementasi bootstrap asli. Implementasi bootstrap asli akan menggunakan kelas, atribut, dan tata letak bootstrap css, sehingga harus memiliki integrasi yang lebih baik dengan kerangka kerja lainnya.

Dalam pengalaman saya yang terbatas, saya juga menemukan masalah. Tampaknya elemen JQuery (seperti tombol) dapat ditata menggunakan bootstrap CSS. Namun, saya mengalami masalah saat membuat tab UI JQuery dan ingin mengunci input bootstrap saja (menggunakan kelas input-append) ke bagian bawah setiap tab, hanya yang pertama yang duduk dengan benar. Jadi, tab JQuery + tombol Bootstrap = mungkin tidak.

Bootstrap masih tidak berfungsi dengan Jquery UI, misalnya modal.Bootstrap memiliki gaya yang bagus tetapi sebagai kerangka kerja dengan Twitter di belakang tidak terlalu bagus.

Jika Anda mengalami benturan namespace javascript, Anda dapat menggunakan noConflict()fungsi Bootstrap membuatnya menyerahkan fungsionalitas ke jQuery UI.

Meskipun pertanyaan ini secara khusus menyebutkan fitur saran otomatis jQuery-UI, judul pertanyaannya lebih umum: apakah bootstrap 3 berfungsi dengan jQuery UI? Saya mengalami masalah dengan fitur jQUI datepicker (kalender pop-up). Saya memecahkan masalah datepicker dan berharap solusinya akan membantu dengan masalah jQUI / BS lainnya.

Saya mengalami kesulitan hari ini untuk mendapatkan datepicker jQueryUI (ver 1.12.1) terbaru untuk bekerja dengan bootstrap 3.3.7. Apa yang terjadi adalah kalender itu akan muncul tetapi tidak mau ditutup.

Ternyata ada masalah versi dengan jQUI dan BS. Saya menggunakan Bootstrap versi terbaru, dan ternyata saya harus menurunkan versi ke versi jQUI dan jQuery ini:

jQueryUI - 1.9.2 (diuji - berfungsi)
jQuery - 1.9.1 atau 2.1.4 (diuji - keduanya berfungsi. Vers lain mungkin berfungsi, tetapi ini berfungsi.)
Bootstrap 3.3.7 (diuji - berfungsi)

Karena saya ingin menggunakan tema khusus, saya juga membuat unduhan khusus jQUI (menghapus beberapa hal seperti semua interaksi, dialog, bilah kemajuan, dan beberapa efek yang tidak saya gunakan) - dan memastikan untuk memilih "Cupertino" di bagian bawah sebagai tema saya.

Saya menginstalnya sebagai berikut:

<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>

Bagi yang tertarik, folder CSS terlihat seperti ini:

[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)

Jika tidak menyimpannya secara lokal dan menggunakan tautan yang mereka sediakan, Anda mungkin memiliki kinerja yang lebih baik. Klien mungkin memiliki skrip yang sudah di-cache dalam beberapa kasus. Adapun kasus jQueryUI saya akan merekomendasikan untuk tidak memuatnya sampai diperlukan. Keduanya diminimalkan, tetapi Anda dapat menjalankan konsol dan melihat tab jaringan dan melihat berapa lama waktu yang dibutuhkan untuk memuatnya, setelah diunduh, itu akan disimpan dalam cache sehingga Anda tidak perlu khawatir setelahnya. ya gunakan keduanya tapi gunakan CDN

Ya, Anda bisa menggunakan keduanya. js bootstrap dari twitter adalah kumpulan plugin jquery. Seharusnya tidak ada konflik dengan jQuery UI.

Mengenai kelebihan bandwidth, itu sangat tergantung pada bagaimana Anda menangani permintaan untuk memuat semua file js Anda. jika Anda benar-benar tidak ingin membuat beberapa permintaan ke server untuk meminta setiap file, cukup tambahkan bersama-sama dan minimalkan. Atau Anda mungkin bisa menyingkirkan beberapa js bootstrap plugin yang tidak Anda butuhkan. itu sangat modular.

Kendo UI memiliki tema bootstrap yang bagus di sini dan satu set UI web yang sebanding dengan jquery-UI. Mereka juga memiliki versi open source yang bekerja dengan baik dengan temanya.

Saya memiliki situs yang dikembangkan menggunakan jquery ui, saya hanya mencoba memasang bootstrap untuk pengembangan dan gaya di masa mendatang tetapi hampir semuanya rusak.

Jadi Tidak, mereka tidak kompatibel.

Karena ini adalah hasil teratas di google pada jquery ui dan bootstrap.js saya memutuskan untuk menambahkan ini sebagai wiki komunitas.

Saya menggunakan:

• Bootstrap v3.2.0
• jquery-2.1.0
• jquery-ui-1.10.3

dan entah bagaimana ketika saya menyertakan bootstrap.js itu menonaktifkan dropdown autocomplete ui jquery .

tiga solusi saya:

• kecualikan bootstrap.js
• atau lebih ke typeahead lib
• pindah dari bootstrap.js ke bootstrap.min.js (aneh, tapi berhasil untuk saya)

Data-role = "none" adalah kunci untuk membuatnya bekerja sama. Anda dapat menerapkan elemen yang Anda ingin bootstrap untuk disentuh tetapi jquery mobile mengabaikannya. seperti ini input type = "text" class = "form-control" placeholder = "Search" data-role = "none"