Bisakah saya menggunakan Twitter Bootstrap dan jQuery UI secara bersamaan?

108

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?

Sanket Sahu
sumber
6
jQuery UI adalah 6.6k (diperkecil dan di-gzip) jadi kecuali bandwidth Anda diukur dalam kb, ini tidak akan menjadi masalah.
BryanH
4
Banyak hal telah berubah sejak saya memposting pertanyaan ini. Saat ini sudah banyak plugin Bootstrap yang cukup bagus untuk menggantikan plugin jQuery UI yang sudah ada. Sekarang, saya menggunakan Bootstrap dengan plugin yang dibuat untuk bootstrap.
Sanket Sahu
1
Mengapa tidak menggunakan typeahead twitter ( twitter.github.io/typeahead.js/examples ) untuk saran otomatis?
koppor

Jawaban:

83

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.

Sam Dolan
sumber
62

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.

Eonasdan
sumber
10
Apakah kamu benar-benar yakin tentang itu? Masih saya melihat masalah dengan jquery datepicker
Freshblood
Saya sarankan Anda mengambil bootstrap v2 dan jquery ui dan membuat halaman pengujian kosong untuk memverifikasi bahwa itu bukan kode Anda. Saya tidak mengalami masalah sejak versi baru
Eonasdan
1
Silakan periksa jquery ui datepicker ini jqueryui.com/demos/datepicker/#dropdown-month-year . Seperti yang Anda lihat dengan pengaturan ini, datepicker berisi elemen dropdownbox sehingga bootstrap sudah mengganti semua elemen input. Tetapi tidak ada masalah jika Anda tidak menggunakan datepicker dengan pengaturan ini.
Freshblood
1
Setiap widget yang berisi elemen input akan berkonflik dengan gaya css bootstrap twitter.
Freshblood
1
Yg menolak. Fungsi tombol Bootstrap tidak berfungsi dengan jQuery UI karena keduanya mendefinisikan button()metode.
BryanH
24

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.

T0xicCode
sumber
Saya tidak melihat tema tanpa tema di sini: jqueryui.com/themeroller . Apakah saya melewatkannya atau sudah tidak ada lagi?
gaefan
3
jqueryui.com/download adalah link yang harus Anda gunakan. Gulir ke bawah dan pilih "Tanpa Tema" dalam daftar.
T0xicCode
3

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.

fluks kapasitor
sumber
2

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.

Lucian Povatanu
sumber
2

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

pengguna1618143
sumber
2

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)
cssyphus
sumber
1

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

andrei
sumber
1

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.

Benny Tjia
sumber
4
Semua JS memiliki namespace yang benar, tetapi benturan CSSlah yang perlu Anda khawatirkan: jika Anda menyertakan widget JUI di tab Bootstrap, apa yang diutamakan?
Btown
Bukan hanya CSS jQuery yang terlihat buruk di Bootstrap. Bootstrap membuat perubahan besar pada CSS, seringkali dengan !important, yang saya temukan terus-menerus harus diganti dan diperbaiki, terkadang dengan kode yang diretas. Saya benci Bootstrap dan tidak menyarankan penggunaannya, setidaknya sampai berhenti menyia-nyiakan elemen yang tidak menggunakan kelas Bootstrap. (Ini bukan kesalahan desainer asli — saya ragu pengembang asli Twitter mengharapkan apa yang mereka kerjakan menjadi perpustakaan populer.)
Michael Scheper
1

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.

prograhammer
sumber
0

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.

NimChimpsky
sumber
0

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)
JP Hellemons
sumber
kombinasi jquery ui bootstrap juga menonaktifkan tooltip dan datepicker.
Vipul Hadiya
-3

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"

Dinesh Khetarpal
sumber
1
pertanyaan ini tentang bootstrap dan jquery-ui, bukan jquery mobile
TJ