¿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 jQuery UI tiene sus propios métodos para la sugerencia automática.

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

Consulte jquery-ui-bootstrap . Del README:

Bootstrap de Twitter fue uno de mis proyectos favoritos de 2011, pero después de haberlo usado regularmente me dejó con dos cosas:

La capacidad de trabajar en paralelo con jQuery UI (algo que provocó que varios widgets se rompieran visualmente). La capacidad de crear temas para los widgets de jQuery UI utilizando estilos Bootstrap. Si bien me encanta la interfaz de usuario de jQuery, (como otros) creo que algunos de los temas actuales parecen un poco anticuados. Mi esperanza es que este tema proporcione una alternativa decente para otros que sienten lo mismo. Para aclarar, este proyecto no pretende 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 funcione junto con él.

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 cajero automático de respuesta principal 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 reinicios de jQuery UI y no sobrecargará el estilo de bootstrap para varios elementos.

Ya que estamos en eso, algunos componentes de la interfaz de usuario de jQuery (como datepicker) tienen una implementación nativa de bootstrap. Las implementaciones nativas de bootstrap usarán las clases, atributos y diseños de bootstrap css, por lo que deberían tener una mejor integración con el resto del marco.

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

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

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

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

Hoy tuve dificultades para conseguir que el selector de fechas jQueryUI (ver 1.12.1) más reciente funcione con bootstrap 3.3.7. Lo que pasaba es que el calendario se mostraba pero no se cerraba.

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 - funciona)
jQuery - 1.9.1 o 2.1.4 (probado - ambos funcionan. Otros vers pueden funcionar, pero estos funcionan).
Bootstrap 3.3.7 (probado - funciona)

Como quería usar un tema personalizado, también construí una descarga personalizada de jQUI (eliminé algunas cosas como todas las interacciones, diálogo, 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í:

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

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 utiliza el enlace que le proporcionan, es posible que tenga un rendimiento mejorado. Es posible que el cliente ya tenga los scripts 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 puede encender la consola y mirar la pestaña de red y ver cuánto tiempo tarda en cargarse, una vez que se descargue inicialmente, se almacenará en caché, por lo que no debe preocuparse después. sí, use ambos pero use un CDN

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

Con respecto 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, simplemente agréguelos y minimícelos. O probablemente pueda deshacerse de algunos complementos de arranque js que no necesita. es muy modular.

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

Desarrollé un sitio usando jquery ui, solo intenté conectar bootstrap para el desarrollo y el estilo futuros, pero rompe prácticamente todo.

Entonces no, no son compatibles.

Porque este es el mejor resultado 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 jquery ui autocomplete .

mis tres soluciones:

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

El data-role = "none" es la clave para que funcionen juntos. Puede aplicar a los elementos que desea que bootstrap toque pero que jquery mobile ignore. como este tipo de entrada = "texto" clase = "control de formulario" marcador de posición = "Buscar" rol de datos = "ninguno"