Twitter Bootstrap vs jQuery UI? [cerrado]

214

He estado usando jQuery UI para algunas mejoras básicas de la página. Botones y estilos de entrada y cuadros de diálogo modales. Ahora me he encontrado con Bootstrap y se ve bastante bien.

¿Alguien tiene alguna experiencia de pasar de usar jQuery UI a Bootstrap? Esto es lo que estoy pensando hacer, pero antes de hacerlo me gustaría saber qué problemas podría enfrentar.

javascript jquery jquery-ui twitter-bootstrap Jessica
fuente
44
Una posible solución que puede no haber estado disponible cuando se le preguntó esto ... Addy Osmani y su equipo han estado trabajando en la fusión de los dos: si está atrapado entre ellos, ¡eche un vistazo y tal vez pueda obtener todo lo que desea! - addyosmani.github.io/jquery-ui-bootstrap
farola
1
¿Cómo actualizar (2014!) Respuestas? ¿Alguien puede comenzar una recompensa aquí?
Peter Krauss
Desde el sitio web de Bootstrap: "Bootstrap solo admite una ventana modal a la vez. Los modales anidados no son compatibles, ya que creemos que son malas experiencias de usuario". -- Caramba.
George Beier el

Respuestas:

133

Tengo en varios proyectos.

La mayor diferencia en mi opinión.

  • La interfaz de usuario de jQuery es segura, funciona correctamente y se ve bien en los navegadores antiguos, donde Bootstrap se basa en CSS3, que básicamente significa GRANDE en los nuevos navegadores, no tan bueno en los viejos

  • Frecuencia de actualización: Bootstrap está obteniendo grandes actualizaciones con increíbles nuevas características, pero lamentablemente pueden romper el código anterior, por lo que no puede simplemente instalar Bootstrap y actualizar cuando hay una nueva versión importante, básicamente requiere mucha codificación nueva

  • jQuery UI se basa en una buena estructura html con transformaciones de JavaScript, mientras que Bootstrap se basa en una estructura en línea visual y personalizable. (llamando a un widget en JQUERY UI, definiéndolo en Bootstrap)

Entonces, ¿qué elegir?

Eso siempre depende del tipo de proyecto en el que esté trabajando. ¿Son mejores los widgets de aspecto rápido y rápido, o sus usuarios suelen utilizar navegadores antiguos?

Siempre termino usando ambos, así que puedo usar lo mejor de ambos mundos.

Aquí están los enlaces a ambos marcos, si decide usarlos.

  1. jQuery UI
  2. Oreja
Marco Johannesen
fuente
2
-Gracias por tomarte el tiempo de responder. Mis necesidades son para algo que funcione en IE9 u otros navegadores de versiones posteriores que tengan bastante buena compatibilidad con CSS3. Bootstrap está empezando a verse bien para mí. Una pregunta. Estoy usando ASP.MVC. Noté algo acerca de necesitar menos. ¿Boostrap funcionará bien con la plataforma Microsoft ASP MVC? ¿Dónde encaja "menos"?
Jessica
Puede compilar menos archivos en archivos .css. Construir el bootstrap (usando make) creará archivos CSS listos para usar. De esa manera no necesitas usar menos.
mikaelb
3
MENOS es un marco CSS. De ninguna manera es necesario para usar Boostrap (tienen una versión CSS / JS regular), pero con LESS puede hacer fácilmente variables en CSS (cambiar colores, etc.), hacerlo dependiente, tener funciones. Ver aquí: lesscss.org y hay una versión BETA para un compilador en .NET ver: dotlesscss.org
Marco Johannesen
20
¿Cómo utilizas lo "mejor de ambos mundos"? Lo más cerca que he llegado es al usar jQueryUI Bootstrap (básicamente un tema de jQueryUI) pero aún está diseñado para Bootstrap 1.4, no 2.0, y hay conflictos al intentar usar JS para botones, etc.
Adam Lynch
3
@ PhoenixX_2 lo intentaré! Ejemplo: en bootstrap, escribe todas las clases en el elemento del botón (es decir button button-primary button-small, en jQueryUI asigna un elemento para que sea un botón, es decir, simplemente agregue "btn" y luego a través de JS lo convierta en un botón $(".btn").button(). Esto significa que en Bootstrap usted defínalo en HTML, y en jQueryUI lo define en JS. Lo negativo en Bootstrap es que necesita editar su HTML si actualiza / cambia algo (es decir, versiones de Bootstrap) donde jQueryUI solo necesita cambiar su JS, que a menudo es más fácil. ¡Hay aspectos positivos y negativos con ambos! :)
Marco Johannesen
73

Después de haber usado ambos, Bootstrap de Twitter es un conjunto de tecnología superior. Aquí hay algunas diferencias,

  • Widgets : jQuery UI gana aquí. El widget de fecha que proporciona es inmensamente útil, y Twitter Bootstrap no proporciona nada por el estilo.
  • Andamios : Bootstrap gana aquí. La red de Twitter, tanto fluida como fija, es de primera categoría. jQuery UI ni siquiera proporciona esta dirección dejando el diseño de la página al usuario final.
  • Profesionalismo fuera de la caja : Bootstrap usando CSS3 está por delante, la interfaz de usuario jQuery parece anticuada en comparación.
  • Íconos : Iré empatado en este. Bootstrap tiene iconos más bonitos que jQuery UI , pero no me gustan los términos, los Halfly de Glyphicons normalmente no están disponibles de forma gratuita, pero un acuerdo entre Bootstrap y los creadores de Glyphicons lo ha hecho posible sin costo para ustedes como desarrolladores. Como agradecimiento, le pedimos que incluya un enlace opcional de regreso a Glyphicons siempre que sea práctico.
  • Imágenes y miniaturas : va a Bootstrap , jQuery UI ni siquiera ayuda aquí.

Otras notas,

  • Es importante comprender cómo estas dos tecnologías también compiten en las esferas. Hay mucha superposición, pero si desea un andamiaje simple y una creación fija / fluida, Bootstrap no es otra tecnología, es la mejor tecnología. Si desea un widget único, jQuery UI probablemente ni siquiera esté entre los tres primeros. Hoy, jQuery UI es principalmente un juguete para la consistencia y la prueba de concepto para la creación de widgets del lado del cliente utilizando un marco unificado.
Evan Carroll
fuente
34

Puede usar ambos con relativamente pocos problemas. Twitter Bootstrap usa jQuery 1.7.1 (a partir de este escrito), y no puedo pensar en ninguna razón por la que no pueda integrar componentes adicionales de Jquery UI en sus plantillas HTML.

He estado usando una combinación de HTML5 Boilerplate y Twitter Bootstrap creado en Initializr.com. Esto combina dos increíbles plantillas de inicio en un gran proyecto de inicio. Consulte los detalles en http://html5boilerplate.com/ y http://www.initializr.com/ O para comenzar de inmediato, vaya a http://www.initializr.com/ , haga clic en "Bootstrap 2" botón y haga clic en "Descargarlo". Esto le dará todos los js y css que necesita para comenzar.

Y no se asuste con HTML5 y CSS3. Initializr y HTML5 Boilerplate incluyen polyfills y código específico de IE que permitirá que todas las funciones funcionen en IE 6, 7 8 y 9.

El uso de MENOS en Twitter Bootstrap también es opcional. Usan MENOS para compilar todo el CSS que utiliza Bootstrap, pero si solo desea anular o agregar sus propios estilos, proporcionan un archivo CSS vacío para ese propósito.

También hay un archivo js en blanco (script.js) para que pueda agregar código personalizado. Aquí es donde agregaría sus controladores o selectores para componentes jQueryUI adicionales.

Eterps
fuente
Gran respuesta. Pregunta rápida difícil, ¿qué ofrece realmente jquery ui que no está incluido en twitter bootstrap y sus complementos?
MindWire
55
Lo siento, acabo de ver esto. En cuanto a los widgets js, la interfaz de usuario jQuery tiene un selector de fecha y un control deslizante, que no están incluidos en Bootstrap. También jqUI incluye interacciones y efectos, como arrastrar y soltar, mostrar / ocultar animaciones, alternar entre clases y varios más. Combinar las interacciones de jqUI con los componentes de diseño de Bootstrap puede ser una combinación muy poderosa.
eterps
66
Un problema a tener en cuenta; ambos proyectos definen el botón $ .fn. de manera incompatible.
Levi
27

Hemos utilizado ambos y nos gusta Bootstrap por su simplicidad y el ritmo al que se está desarrollando y mejorando. El problema con jQuery UI es que se mueve a paso de tortuga. Lleva años desplegar características comunes como Menubar, Tree control y DataGrid que se encuentran en la etapa de planificación / desarrollo para siempre. Esperamos, esperamos, y finalmente nos rendimos y utilizamos otras bibliotecas como ExtJS para nuestro producto http://dblite.com .

Bootstrap ha creado un conjunto bastante completo de funciones en un período de tiempo muy corto y estoy seguro de que superará a la interfaz de usuario de jQuery muy pronto.

Así que no veo ningún punto en usar algo que eventualmente quedará desactualizado ...

Rajiv
fuente
43
Todo eventualmente estará desactualizado. No tiene sentido hacer nada.
tilgovi
66
Es cierto, solo necesitamos elegir el que creemos que se mantendrá firme por más tiempo.
Rajiv
8
No, solo tienes que elegir el que traerá el dinero de tus clientes. Una vez que lo haga funcionar, debería continuar funcionando durante un tiempo, incluso si se pasa de moda, por lo que la única preocupación real es el dinero.
Adam