Colisión del tema jQuery UI y Bootstrap

Question

Tengo ambos, jQuery UI theme y un Bootstrap 2.1 css vinculado a mi página. En los casos en que utilizo botones estilo Bootstrap, no se muestra texto en ellos. Resultó que era estas líneas en el tema de jQuery UI que están causando el problema:

.ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button { font-family: Verdana,Arial,sans-serif; font-size: 1em; }

cuando se ha retirado en una herramienta de depuración, 1 em ya no arroja el texto del botón para ser tan pequeño que es invisible. Me he asegurado de que Bootstrap.css figure más adelante en la lista de hojas de estilo, por lo que tiene más valor, pero la defeiniciton de jQuery UI es más específica. ¿Cómo puedo evitar que los datos de jQuery UI css influyan en mis botones de arranque?

Answer 1

botones, en particular, son un problema. La implementación del botón de jQuery UI entra en conflicto con Bootstrap. Si desea utilizar en su forma estándar, se pueden añadir las siguientes líneas a su página, antes de las inicializaciones de widgets, para eliminar el conflicto:

var btn = $.fn.button.noConflict() // reverts $.fn.button to jqueryui btn 
$.fn.btn = btn // assigns bootstrap button functionality to $.fn.btn 

sólo lo he probado esto en los casos sencillos, pero supongo que funciona en general. El enfoque se describe aquí con los enlaces de referencia apropiados:

http://www.dullsharpness.com/2013/04/29/resolve-jqueryui-and-twitter-bootstrap-button-conflict/

Answer 2

Se pueden combinar lo mejor de ambos mundos con este tema: http://addyosmani.github.com/jquery-ui-bootstrap