Posso utilizzare Twitter Bootstrap e jQuery UI contemporaneamente?

Sto usando Twitter Bootstrap e desidero utilizzare un "suggerimento automatico" che non è disponibile in Bootstrap, mentre l'interfaccia utente di jQuery ha i suoi metodi per il suggerimento automatico.

Posso usare entrambi? Sovraccaricherà la larghezza di banda?

Dai un'occhiata a jquery-ui-bootstrap . Dal README:

Bootstrap di Twitter è stato uno dei miei progetti preferiti uscito nel 2011, ma dopo averlo usato regolarmente mi ha fatto desiderare due cose:

La capacità di lavorare fianco a fianco con jQuery UI (qualcosa che ha causato la rottura visiva di un certo numero di widget) La capacità di creare temi per i widget dell'interfaccia utente di jQuery utilizzando gli stili Bootstrap. Anche se adoro l'interfaccia utente di jQuery, io (come altri) trovo che alcuni dei temi attuali sembrino un po 'datati. La mia speranza è che questo tema offra un'alternativa decente per altri che si sentono allo stesso modo. Per chiarire, questo progetto non mira né intende sostituire Twitter Bootstrap. Fornisce semplicemente un tema compatibile con l'interfaccia utente jQuery ispirato al design di Bootstrap. Fornisce anche una versione di Bootstrap CSS con alcune sezioni (minori) commentate che consentono al tema di funzionare insieme ad esso.

solo per aggiornarlo, bootstrap v2 non è più in conflitto con jquery ui

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

Modifica : come @Freshblood ci sono alcune cose che sono ancora in conflitto. Tuttavia, come originariamente pubblicato su Twitter suggerisce che ci stanno lavorando e in gran parte funziona, specialmente rispetto alla v1.

Per riferimento futuro (poiché questo è l'ATM con la risposta migliore di Google), per evitare che jQuery UI sovrascriva il bootstrap o il tuo stile personalizzato, devi creare un download personalizzato e selezionare il no-themetema. Ciò includerà solo i ripristini dell'interfaccia utente di jQuery e non sovraccaricherà lo stile di bootstrap per vari elementi.

Già che ci siamo, alcuni componenti dell'interfaccia utente di jQuery (come datepicker) hanno un'implementazione bootstrap nativa. Le implementazioni bootstrap native useranno classi, attributi e layout bootstrap css, quindi dovrebbero avere una migliore integrazione con il resto del framework.

Nella mia limitata esperienza sto incontrando anche problemi. Sembra che gli elementi di JQuery (come i pulsanti) possano essere stilizzati utilizzando CSS bootstrap. Tuttavia, sto riscontrando problemi avendo creato una scheda dell'interfaccia utente di JQuery e volendo bloccare un solo input bootstrap (utilizzando la classe input-append) nella parte inferiore di ogni scheda, solo il primo si trova correttamente. Quindi, schede JQuery + pulsanti Bootstrap = probabilmente no.

Bootstrap continua a non funzionare con l'interfaccia utente di Jquery, ad esempio il modal.Bootstrap ha uno stile carino ma come framework con Twitter dietro non è così buono.

Se stai riscontrando collisioni nello spazio dei nomi javascript, puoi utilizzare la noConflict()funzione Bootstrap per far sì che ceda la funzionalità all'interfaccia utente jQuery.

Sebbene questa domanda menzioni specificamente la funzione di suggerimento automatico jQuery-UI, il titolo della domanda è più generale: bootstrap 3 funziona con jQuery UI? Ho avuto problemi con la funzione jQUI datepicker (calendario pop-up). Ho risolto il problema del datepicker e spero che la soluzione possa aiutare con altri problemi di jQUI / BS.

Oggi ho avuto difficoltà a ottenere l'ultimo datepicker jQueryUI (ver 1.12.1) per funzionare con bootstrap 3.3.7. Quello che stava succedendo è che il calendario sarebbe stato visualizzato ma non si sarebbe chiuso.

Si è rivelato essere un problema di versione con jQUI e BS. Stavo usando l'ultima versione di Bootstrap e ho scoperto che dovevo eseguire il downgrade a queste versioni di jQUI e jQuery:

jQueryUI - 1.9.2 (testato - funziona)
jQuery - 1.9.1 o 2.1.4 (testato - entrambi funzionano. Altri vers possono funzionare, ma funzionano.)
Bootstrap 3.3.7 (testato - funziona)

Poiché volevo utilizzare un tema personalizzato, ho anche creato un download personalizzato di jQUI (rimosso alcune cose come tutte le interazioni, i dialoghi, la barra di avanzamento e alcuni effetti che non uso) - e mi sono assicurato di selezionare "Cupertino" in fondo come il mio tema.

Li ho installati così:

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

Per chi è interessato, la cartella CSS si presenta così:

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

Se non lo si memorizza localmente e si utilizza il collegamento fornito, si potrebbero migliorare le prestazioni. In alcuni casi, il client potrebbe avere gli script già memorizzati nella cache. Per quanto riguarda il caso di jQueryUI, consiglierei di non caricarlo fino a quando non sarà necessario. Sono entrambi ridotti a icona, ma puoi avviare la console e guardare la scheda di rete e vedere quanto tempo ci vuole per caricarsi, una volta scaricato inizialmente verrà memorizzato nella cache, quindi non dovresti preoccuparti in seguito. sì, usali entrambi ma usa un CDN

Sì, puoi usare entrambi. js bootstrap da twitter è una raccolta di plugin jquery. Non ci dovrebbe essere alcun conflitto con jQuery UI.

Per quanto riguarda il sovraccarico della larghezza di banda, dipende davvero da come gestisci le richieste per caricare tutti i tuoi file js. se davvero non vuoi fare più richieste al server per richiedere ogni file, aggiungili insieme e riducili a icona. O probabilmente puoi sbarazzarti di alcuni plugin js bootstrap che non ti servono. è molto modulare.

L'interfaccia utente di Kendo ha un bel tema di bootstrap qui e un set di interfaccia utente web paragonabile a jquery-UI. Hanno anche una versione open source che funziona bene con il tema.

Ho un sito sviluppato utilizzando jquery ui, ho appena provato a collegare bootstrap per lo sviluppo e lo stile futuri, ma praticamente rompe tutto.

Quindi no non sono compatibili.

Poiché questo è il miglior risultato su google su jquery ui e bootstrap.js, ho deciso di aggiungerlo come wiki della comunità.

Sto usando:

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

e in qualche modo quando includo bootstrap.js disabilita il menu a discesa del completamento automatico dell'interfaccia utente jquery .

le mie tre soluzioni alternative:

• escludi bootstrap.js
• o più per digitare head lib
• passare da bootstrap.js a bootstrap.min.js (strano, ma ha funzionato per me)

Il data-role = "none" è la chiave per farli funzionare insieme. Puoi applicare agli elementi che desideri che il bootstrap tocchi ma che jquery mobile ignori. come questo input type = "text" class = "form-control" placeholder = "Search" data-role = "none"