Posso usar o Twitter Bootstrap e o jQuery UI ao mesmo tempo?

Estou usando o Twitter Bootstrap e quero usar uma "sugestão automática" que não está disponível no Bootstrap, enquanto o jQuery UI tem seus próprios métodos de sugestão automática.

Posso usar os dois? Isso vai sobrecarregar a largura de banda?

Confira jquery-ui-bootstrap . Do README:

O Bootstrap do Twitter foi um dos meus projetos favoritos em 2011, mas depois de usá-lo regularmente, fiquei com duas coisas:

A capacidade de trabalhar lado a lado com o jQuery UI (algo que fez com que vários widgets quebrassem visualmente). A capacidade de criar um tema para widgets do jQuery UI usando estilos Bootstrap. Embora eu ame o jQuery UI, eu (como outros) acho que alguns dos temas atuais parecem um pouco desatualizados. Minha esperança é que este tema forneça uma alternativa decente para outras pessoas que sentem o mesmo. Para esclarecer, este projeto não visa ou pretende substituir o Twitter Bootstrap. Ele simplesmente fornece um tema compatível com a IU do jQuery inspirado no design do Bootstrap. Ele também fornece uma versão do CSS Bootstrap com algumas seções (secundárias) comentadas que permitem que o tema funcione junto com ele.

apenas para atualizar isso, o bootstrap v2 não entra mais em conflito com jquery ui

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

Edit : como @Freshblood, existem algumas coisas que ainda estão em conflito. No entanto, como postado originalmente, o Twitter sugere que eles estão trabalhando nisso e funciona amplamente, especialmente em comparação com a v1.

Para referência futura (já que este é o caixa eletrônico de maior resposta do Google), para evitar que o jQuery UI substitua o bootstrap ou seu estilo personalizado, você precisa criar um download personalizado e selecionar o no-themetema. Isso incluirá apenas as redefinições da IU do jQuery, e não sobrecarregará o estilo do bootstrap para vários elementos.

Já que estamos nisso, alguns componentes de UI do jQuery (como datepicker) têm uma implementação de bootstrap nativa. As implementações nativas de bootstrap usarão classes, atributos e layouts de css de bootstrap, portanto, devem ter uma melhor integração com o resto do framework.

Em minha experiência limitada, também estou encontrando problemas. Parece que os elementos JQuery (como botões) podem ser estilizados usando CSS de bootstrap. No entanto, estou tendo problemas ao criar uma guia de IU do JQuery e quer bloquear uma entrada apenas de bootstrap (usando a classe input-append) na parte inferior de cada guia, apenas a primeira se encaixa corretamente. Portanto, guias JQuery + botões Bootstrap = provavelmente não.

Bootstrap ainda não funciona com a IU do Jquery, por exemplo, o modal.Bootstrap tem um bom estilo, mas como uma estrutura com o Twitter por trás não é tão bom.

Se você estiver enfrentando colisões de namespace javascript, pode usar a noConflict()função do Bootstrap para ceder funcionalidade ao jQuery UI.

Embora esta questão mencione especificamente o recurso de sugestão automática do jQuery-UI, o título da pergunta é mais geral: o bootstrap 3 funciona com o jQuery UI? Eu estava tendo problemas com o recurso jQUI datepicker (calendário pop-up). Resolvi o problema do datepicker e espero que a solução ajude com outros problemas do jQUI / BS.

Tive dificuldade em conseguir que o datepicker mais recente do jQueryUI (versão 1.12.1) funcione com o bootstrap 3.3.7. O que estava acontecendo é que o calendário seria exibido, mas não fechava.

Acabou por ser um problema de versão com jQUI e BS. Eu estava usando a versão mais recente do Bootstrap e descobri que precisava fazer o downgrade para estas versões do jQUI e jQuery:

jQueryUI - 1.9.2 (testado - funciona)
jQuery - 1.9.1 ou 2.1.4 (testado - ambos funcionam. Outros vers podem funcionar, mas funcionam.)
Bootstrap 3.3.7 (testado - funciona)

Como eu queria usar um tema personalizado, também criei um download personalizado do jQUI (removi algumas coisas como todas as interações, diálogo, barra de progresso e alguns efeitos que não uso) - e me certifiquei de selecionar "Cupertino" na parte inferior como meu tema.

Eu os instalei assim:

<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 os interessados, a pasta CSS tem a seguinte aparência:

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

Se não armazene localmente e use o link que eles fornecem, você pode ter um desempenho melhor. O cliente pode ter os scripts já armazenados em cache em alguns casos. No caso do jQueryUI, eu recomendo não carregá-lo até que seja necessário. Ambos estão minimizados, mas você pode iniciar o console e olhar a guia de rede e ver quanto tempo leva para carregar, uma vez que seja inicialmente baixado, será armazenado em cache, então você não deve se preocupar depois. Minha conclusão seria sim, use os dois, mas use um CDN

Sim, você pode usar os dois. js bootstrap from twitter é uma coleção de plugins jquery. Não deve haver nenhum conflito com a UI do jQuery.

Com relação à sobrecarga de largura de banda, realmente depende de como você lida com as solicitações para carregar todos os seus arquivos js. se você realmente não quiser fazer várias solicitações ao servidor para solicitar cada arquivo, basta anexá-los e minimizar. Ou você provavelmente pode se livrar de alguns plug-ins de bootstrap js de que não precisa. é muito modular.

Kendo UI tem um bom tema de bootstrap aqui e um conjunto de UI da web comparável ao jquery-UI. Eles também têm uma versão de código aberto que funciona muito bem com o tema.

Eu desenvolvi o site usando jquery ui, eu apenas tentei conectar o bootstrap para desenvolvimento futuro e estilo, mas ele quebra praticamente tudo.

Portanto, não, eles não são compatíveis.

Como este é o principal resultado do google em jquery ui e bootstrap.js , decidi adicioná-lo como wiki da comunidade.

Estou usando:

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

e de alguma forma, quando incluo bootstrap.js, ele desativa a lista suspensa do autocomplete jquery ui .

minhas três soluções alternativas:

• excluir bootstrap.js
• ou mais para digitar antecipadamente lib
• mover de bootstrap.js para bootstrap.min.js (estranho, mas funcionou para mim)

O data-role = "none" é a chave para fazê-los trabalhar juntos. Você pode aplicar aos elementos que deseja que o bootstrap toque, mas que o jquery mobile ignore. como esta entrada type = "text" class = "form-control" placeholder = "Search" data-role = "none"