Puis-je utiliser Twitter Bootstrap et jQuery UI en même temps?

J'utilise Twitter Bootstrap et je souhaite utiliser une "suggestion automatique" qui n'est pas disponible dans Bootstrap, alors que jQuery UI a ses propres méthodes de suggestion automatique.

Puis-je utiliser les deux? Va-t-il surcharger la bande passante?

Découvrez jquery-ui-bootstrap . Depuis le README:

Bootstrap de Twitter était l'un de mes projets préférés à sortir de 2011, mais l'ayant utilisé régulièrement, cela m'a laissé vouloir deux choses:

La possibilité de travailler côte à côte avec l'interface utilisateur jQuery (ce qui a provoqué la rupture visuelle d'un certain nombre de widgets). Bien que j'adore l'interface utilisateur jQuery, je trouve (comme d'autres) que certains des thèmes actuels semblent un peu datés. J'espère que ce thème offre une alternative décente à d'autres qui ressentent la même chose. Pour clarifier, ce projet n'a pas pour but ou n'a pas l'intention de remplacer Twitter Bootstrap. Il fournit simplement un thème compatible avec l'interface utilisateur jQuery inspiré de la conception de Bootstrap. Il fournit également une version de Bootstrap CSS avec quelques sections (mineures) commentées qui permettent au thème de fonctionner avec lui.

juste pour mettre à jour cela, bootstrap v2 n'est plus en conflit avec jquery ui

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

Edit : comme @Freshblood, il y a quelques choses qui sont toujours en conflit. Cependant, comme indiqué à l'origine, Twitter suggère qu'ils travaillent là-dessus et cela fonctionne en grande partie, en particulier par rapport à la v1.

Pour référence future (étant donné qu'il s'agit de la principale réponse ATM de Google), pour empêcher l'interface utilisateur jQuery de remplacer celle de bootstrap ou votre style personnalisé, vous devez créer un téléchargement personnalisé et sélectionner le no-themethème. Cela n'inclura que les réinitialisations de jQuery UI et ne surchargera pas le style de bootstrap pour divers éléments.

Pendant que nous y sommes, certains composants de l'interface utilisateur jQuery (tels que datepicker) ont une implémentation native de bootstrap. Les implémentations natives de bootstrap utiliseront les classes, attributs et mises en page de bootstrap css, donc devraient avoir une meilleure intégration avec le reste du framework.

Dans mon expérience limitée, je rencontre également des problèmes. Il semble que les éléments JQuery (tels que les boutons) peuvent être stylisés à l'aide du CSS bootstrap. Cependant, je rencontre des problèmes après avoir créé un onglet JQuery UI et je souhaite verrouiller une entrée d'amorçage uniquement (en utilisant la classe input-append) au bas de chaque onglet, seul le premier se trouve correctement. Donc, onglets JQuery + boutons Bootstrap = probablement pas.

Bootstrap ne fonctionne toujours pas avec Jquery UI, par exemple le modal.Bootstrap a un style sympa mais en tant que framework avec Twitter derrière n'est pas très bon.

Si vous rencontrez des collisions d'espace de noms javascript, vous pouvez utiliser la noConflict()fonction de Bootstrap pour lui faire céder la fonctionnalité à l'interface utilisateur jQuery.

Bien que cette question mentionne spécifiquement la fonctionnalité de suggestion automatique de jQuery-UI, le titre de la question est plus général: bootstrap 3 fonctionne-t-il avec jQuery UI? J'avais des problèmes avec la fonction jQUI datepicker (calendrier contextuel). J'ai résolu le problème de datepicker et j'espère que la solution aidera avec d'autres problèmes jQUI / BS.

J'ai eu du mal aujourd'hui à faire fonctionner le dernier sélecteur de date jQueryUI (ver 1.12.1) avec bootstrap 3.3.7. Ce qui se passait, c'est que le calendrier s'afficherait mais il ne se fermait pas.

S'est avéré être un problème de version avec jQUI et BS. J'utilisais la dernière version de Bootstrap et j'ai découvert que je devais revenir à ces versions de jQUI et jQuery:

jQueryUI - 1.9.2 (testé - fonctionne)
jQuery - 1.9.1 ou 2.1.4 (testé - les deux fonctionnent. D'autres versions peuvent fonctionner, mais celles-ci fonctionnent.)
Bootstrap 3.3.7 (testé - fonctionne)

Parce que je voulais utiliser un thème personnalisé, j'ai également créé un téléchargement personnalisé de jQUI (supprimé quelques éléments comme toutes les interactions, le dialogue, la barre de progression et quelques effets que je n'utilise pas) - et je me suis assuré de sélectionner "Cupertino" en bas comme mon thème.

Je les ai installés ainsi:

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

Pour ceux qui sont intéressés, le dossier CSS ressemble à ceci:

[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 vous ne le stockez pas localement et utilisez le lien qu'ils fournissent, vous pourriez avoir de meilleures performances. Le client peut avoir les scripts déjà mis en cache dans certains cas. En ce qui concerne le cas de jQueryUI, je recommanderais de ne pas le charger avant que cela ne soit nécessaire. Ils sont tous les deux minimisés, mais vous pouvez démarrer la console et regarder l'onglet réseau et voir combien de temps il faut pour qu'il se charge, une fois qu'il est téléchargé initialement, il sera mis en cache, vous ne devriez donc pas vous inquiéter par la suite. oui utilisez les deux mais utilisez un CDN

Oui, vous pouvez utiliser les deux. js bootstrap de twitter est une collection de plugins jquery. Il ne devrait pas y avoir de conflit avec l'interface utilisateur jQuery.

En ce qui concerne la surcharge de bande passante, cela dépend vraiment de la façon dont vous gérez les demandes de chargement de tous vos fichiers js. si vous ne voulez vraiment pas faire plusieurs demandes au serveur pour demander chaque fichier, ajoutez-les simplement et réduisez-les. Ou vous pouvez probablement vous débarrasser de certains plugins de bootstrap js dont vous n'avez pas besoin. c'est très modulaire.

Kendo UI a un joli thème de bootstrap ici et un ensemble d'interface utilisateur Web comparable à jquery-UI. Ils ont également une version open source qui fonctionne bien avec le thème.

J'ai développé un site en utilisant jquery ui, j'ai juste essayé de brancher bootstrap pour le développement et le style futurs mais cela casse pratiquement tout.

Donc non, ils ne sont pas compatibles.

Parce que c'est le meilleur résultat sur google sur jquery ui et bootstrap.js j'ai décidé de l'ajouter en tant que wiki communautaire.

J'utilise:

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

et d'une manière ou d'une autre, lorsque j'inclus bootstrap.js, cela désactive la liste déroulante de la saisie semi-automatique de jquery ui .

mes trois solutions de contournement:

• exclure bootstrap.js
• ou plus pour taper lib
• passer de bootstrap.js à bootstrap.min.js (étrange, mais a fonctionné pour moi)

Le data-role = "none" est la clé pour les faire fonctionner ensemble. Vous pouvez appliquer aux éléments que vous souhaitez que bootstrap touche mais que jquery mobile ignore. comme cette entrée type = "text" class = "form-control" placeholder = "Search" data-role = "none"