¿Puedo usar Twitter Bootstrap y jQuery UI al mismo tiempo?

Estoy usando Twitter Bootstrap y quiero usar una “sugerencia automática” que no está disponible en Bootstrap, mientras que la interfaz de usuario de jQuery tiene sus propios métodos para sugerir automáticamente.

¿Puedo usar ambos? ¿Sobrecargará el ancho de banda?

Echa un vistazo a jquery-ui-bootstrap . Del LÉAME:

Bootstrap de Twitter fue uno de mis proyectos favoritos para salir de 2011, pero habiéndolo usado regularmente me dejó con ganas de dos cosas:

La capacidad de trabajar codo con codo con jQuery UI (algo que causó que varios widgets se rompieran visualmente). La capacidad de los widgets de la interfaz de usuario de jQuery con estilos de Bootstrap. Aunque me encanta la interfaz de usuario de jQuery, (como otros) encuentro algunos de los temas actuales que parecen un poco anticuados. Mi esperanza es que este tema ofrezca una alternativa decente para otros que sienten lo mismo. Para aclarar, este proyecto no tiene como objective ni pretende reemplazar Twitter Bootstrap. Simplemente proporciona un tema compatible con jQuery UI inspirado en el diseño de Bootstrap. También proporciona una versión de Bootstrap CSS con algunas secciones (menores) comentadas que permiten que el tema trabaje a su lado.

solo para actualizar esto, bootstrap v2 ya no entra en conflicto con jquery ui

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

Editar : como @Freshblood, hay algunas cosas que aún entran en conflicto. Sin embargo, como se publicó originalmente, Twitter sugiere que están trabajando en esto y funciona en gran medida, especialmente en comparación con v1.

Para referencia futura (ya que este es el ATM de respuesta superior de Google), para evitar que jQuery UI anule el bootstrap o su estilo personalizado, debe crear una descarga personalizada y seleccionar el no-theme tema. Eso solo incluirá los restablecimientos de jQuery UI, y no sobrecargará el estilo del bootstrap para varios elementos.

Mientras estamos en eso, algunos componentes de jQuery UI (como datepicker) tienen una implementación nativa de bootstrap. Las implementaciones de arranque nativas utilizarán las clases, los atributos y los diseños de bootstrap css, por lo que deberían tener una mejor integración con el rest del marco.

En mi experiencia limitada, me encuentro con problemas también. Parece que los elementos de JQuery (como los botones) se pueden diseñar con bootstrap CSS. Sin embargo, estoy experimentando problemas al haber creado una pestaña de IU de JQuery y querer bloquear una entrada de solo arranque (usando la clase input-append) en la parte inferior de cada pestaña, solo la primera se asienta correctamente. Por lo tanto, las tabs JQuery + botones Bootstrap = probablemente no.

Bootstrap todavía no funciona con Jquery UI, por ejemplo, el modal.Bootstrap tiene un estilo agradable, pero como un marco con Twitter detrás no es tan bueno.

Si se encuentra con colisiones de espacio de nombres javascript, puede usar la función noConflict() Bootstrap para hacer que ceda la funcionalidad a jQuery UI.

Aunque esta pregunta menciona específicamente la característica de autosugestión de jQuery-UI, el título de la pregunta es más general: ¿el bootstrap 3 funciona con jQuery UI? Estaba teniendo problemas con la función jQUI datepicker (calendario emergente). Resolví el problema del marcador de fecha y espero que la solución ayude con otros problemas de jQUI / BS.

Hoy tuve dificultades para obtener el último datepicker jQueryUI (ver 1.12.1) para que funcione con bootstrap 3.3.7. Lo que sucedía era que el calendario se mostraría pero no se cerraría.

Resultó ser un problema de versión con jQUI y BS. Estaba usando la última versión de Bootstrap, y descubrí que tenía que cambiar a estas versiones de jQUI y jQuery:

jQueryUI – 1.9.2 (probado – obras)
jQuery – 1.9.1 o 2.1.4 (probado – ambos funcionan. Otros vers pueden funcionar, pero estos funcionan).
Bootstrap 3.3.7 (probado – trabaja)

Como quería usar un tema personalizado, también construí una descarga personalizada de jQUI (eliminé algunas cosas como todas las interacciones, el diálogo, la barra de progreso y algunos efectos que no uso) y me aseguré de seleccionar “Cupertino” en la parte inferior como mi tema.

Los instalé así:

  ...etc...        ...etc...  

Para aquellos interesados, la carpeta CSS se ve así:

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

Si no lo almacena localmente y usa el enlace que proporcionan, es posible que tenga un mejor rendimiento. El cliente puede tener los scripts ya almacenados en caché en algunos casos. En cuanto al caso de jQueryUI, recomendaría no cargarlo hasta que sea necesario. Ambos están minimizados, pero puedes disparar la consola y mirar la pestaña de red y ver cuánto tarda en cargarse, una vez que se descarga inicialmente, se almacenará en la memoria caché para que no te preocupes después. Mi conclusión sería sí, utilícelos pero use un CDN

Sí, puedes usar ambos. js bootstrap from twitter es una colección de plugins jquery. No debería haber ningún conflicto con jQuery UI.

En cuanto a la sobrecarga de ancho de banda, realmente depende de cómo maneje las solicitudes para cargar todos sus archivos js. si realmente no desea realizar varias solicitudes al servidor para solicitar cada archivo, solo agréguelas y minimice. O probablemente puedas deshacerte de algunos complementos js bootstrap que no necesitas. es muy modular

Kendo UI tiene un buen tema de arranque aquí y un conjunto de interfaz de usuario web comparable a jquery-UI. También tienen una versión de código abierto que funciona muy bien con el tema.

He desarrollado un sitio usando jquery ui, solo traté de conectar el bootstrap para el desarrollo y el diseño en el futuro, pero lo rompe prácticamente todo.

Entonces, no, no son compatibles.

Debido a que este es el resultado principal en google en jquery ui y bootstrap.js , decidí agregar esto como wiki de la comunidad.

Estoy usando:

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

y de alguna manera cuando incluyo bootstrap.js, deshabilita el menú desplegable de la autocompletar de jquery ui .

mis tres soluciones:

  • excluir bootstrap.js
  • o más para escribir lib anticipada
  • pasar de bootstrap.js a bootstrap.min.js (extraño, pero funcionó para mí)

El rol de datos = “ninguno” es la clave para que funcionen juntos. Puede aplicar a los elementos que desea que arranque, pero toque jquery mobile para ignorarlos. como este tipo de entrada = “texto” class = “form-control” placeholder = “Buscar” data-role = “none”