2013-09-05 5 views
50

Ho letto molti articoli "bootstrap vs. jQuery mobile". È chiaro che entrambi hanno obiettivi diversi. Quindi, cosa ne pensi di combinarli?Posso usare bootstrap 3 insieme a jQuery Mobile?

Oltre alle altre, mi piacciono le funzionalità di layout reattive del bootstrap. D'altra parte mi piace anche l'approccio "pagina" e le possibilità di jQuery mobile (compresi gli eventi di scorrimento, ecc.) E le transizioni.

Esistono progetti professionali che combinano entrambi? O qualcuno ha cercato di farlo e ha fallito?

Lo so Using Bootstrap with jQuery Mobile sembra una domanda simile ma è obsoleto (riferendosi al bootstrap 2).

+1

Personalmente non li combinerei, dato che stanno adottando due approcci completamente diversi, rendendo molto difficile l'integrazione dei due. Il loro scopo è in un modo non diverso, sono entrambi framework che forniscono componenti utili per creare un'interfaccia utente. – reinder

+1

Stai solo cercando di rendere un sito jQm reattivo? Non hai bisogno di un altro quadro per questo. – Mathletics

+2

Come ho scritto nella domanda: qualcuno ha fatto questo o qualcuno ha cercato di farlo invano? Conosco i pro ei contro ma questa NON è la mia domanda. Per favore non votarlo se non puoi aiutare! – Tillito

risposta

27

Personalmente penso che jQuery Mobile abbia più funzioni di quelle che realmente ti servono, inoltre ti blocca in un modo di costruire che non è flessibile. Inizia a diventare buggato e disordinato quando hai molti pannelli con animazioni diverse e di solito ti ottengono molto velocemente all'80%, ma poi impiega molto tempo a fare cose personalizzate.

Vorrei utilizzare twitter bootstrap e quindi aggiungere plug-in per supportare le funzionalità necessarie.

Bootstrap ha un sacco di plugin non ufficiali è possibile aggiungere a imitare la funzionalità di jQuery Mobile: http://bootsnipp.com/resources

c'è una guida qui per utilizzare gli eventi magnetiche da jQuery solo cellulare: http://lazcreative.com/blog/adding-swipe-support-to-bootstrap-carousel-3-0/

Oppure si puoi utilizzare il tuo plugin per aggiungere manualmente gli eventi di scorrimento: http://stephband.info/jquery.event.swipe/

Se desideri un menu della barra laterale espandibile, puoi aggiungerlo facilmente:

-webkit-transition: width 0.35s ease; 
-moz-transition: width 0.35s ease; 
-o-transition: width 0.35s ease; 
transition: width 0.35s ease; 

http://jsfiddle.net/Osis/Mns8q/ http://codepen.io/krichnafsky/pen/cuhkL http://coding.smashingmagazine.com/2013/01/15/off-canvas-navigation-for-responsive-website/

+0

E riguardo le transizioni di pagina? –

+0

Si potrebbero avere due div per il contenuto della pagina, uno mostrato, uno nascosto fuori dallo schermo. Si carica il contenuto nella pagina fuori dallo schermo, quindi si passa alla visualizzazione della pagina e si nasconde la pagina precedente dallo schermo dopo –

43

Conclusione io non lo consiglio combinando jQuery Mobile e Bootstrap per progetti complessi.

JQM Knowledge Stiamo costruendo una serie di applicazioni Web sofisticate tutte utilizzando il framework JQuery Mobile (JQM). Abbiamo trascorso più di un anno a produrre questo e ora abbiamo una conoscenza abbastanza ragionevole di JQM.

Positivi: alcune delle funzionalità sono utili come i piè di pagina persistenti e i componenti mobili che danno all'app HTML5 un tocco nativo. Negativi: abbiamo dovuto disabilitare molte funzionalità di JQM come il precaricamento delle pagine per creare la complessa funzionalità richiesta.

Il risultato finale è buono perché abbiamo ingannato gli sviluppatori iOS pensando che fosse nativo.

Bootstrap Conoscenza Recentemente ho anche realizzato un sito web reattivo utilizzando bootstrap per pubblicizzare il prodotto jQm sopra e che ha funzionato molto bene (http://www.sure-sense.com).

Combo ho cercato di combinare il bootstrap con il progetto jQm su un'applicazione cruscotto ma che ha subito evidenziato che i 2 quadri non sono compatibili. Il CSS di JQM contrassegna i componenti in cima al CSS di bootstrap ei risultati sono alcuni componenti simili a JQM e altri come bootstrap.

+1

grazie per aver condiviso l'esperienza del mondo reale! –

+0

+1, l'esperienza del mondo reale è il vero parlatore! –

+0

Buone informazioni, ma www.sure-sense.com non funziona. :-( – woolfie

2

Per il lavoro di una sola persona, non penso che importi davvero quale singola soluzione o combo essere scelto poiché è tutto ciò che voi e l'unico "voi" siete voi a far funzionare.

Tuttavia, per un lavoro di gruppo, in un'azienda o anche in un'impresa, il lavoro contiene Creazione di modelli + Implementazione dell'applicazione e responsabilità si rivolgono rispettivamente al team di progettazione creativa e al team IT. Quindi la soluzione finale deve essere OK con entrambi questi 2 team.

Per la nostra azienda, il team di CD tende a utilizzare BootStrap perché viene richiesto di creare molti modelli Web personalizzati con effetti speciali, tuttavia il team IT ha già eseguito alcune applicazioni jQM e gli piace utilizzarlo per futuri lavori di sviluppo, quindi conflitto.

A lungo termine, "Requisito utente" supera il conflitto e ora utilizzeremo il modello BootStrap e tenteremo di evitare l'utilizzo di jQM nel nostro principale sviluppo di applicazioni Web mobili, nel migliore dei casi.

Una scelta pessima ma da accettare.