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 dispose de ses propres méthodes de suggestion automatique.
Puis-je utiliser les deux? Va-t-il surcharger la bande passante?
Découvrez jquery-ui-bootstrap . Du README:
Twitter Bootstrap était l'un de mes projets préférés. 2011, mais l’ayant utilisé régulièrement, j’ai eu envie de deux choses:
La possibilité de travailler côte à côte avec l'interface utilisateur de jQuery (ce qui a provoqué la cassure visuelle de plusieurs widgets). Widgets jQuery UI utilisant des styles Bootstrap. Bien que j'aime jQuery UI, I (comme d’autres) trouve quelques-uns des thèmes actuels un peu datés . Mon espoir est que ce thème offre une alternative décente aux autres qui se sent la même chose. Pour clarifier, ce projet ne vise pas ou n'a pas l'intention de remplacez Twitter Bootstrap. Il fournit simplement un jQuery UI-compatible thème inspiré du design de Bootstrap. Il fournit également une version de Bootstrap CSS avec quelques sections (mineures) commentées qui permettent le thème à travailler à ses côtés.
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 encore quelques conflits. Cependant, comme indiqué à l'origine, Twitter suggère qu'ils travaillent sur cela et que cela fonctionne largement, spécialement par rapport à v1.
Pour référence future (comme il s'agit du guichet automatique le plus repondant de Google), pour empêcher l'interface utilisateur de jQuery de remplacer le style de bootstrap ou votre style personnalisé, vous devez créer un téléchargement personnalisé et sélectionner le thème no-theme. 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 de jQuery (tels que datepicker) ont une implémentation d'amorçage native. Les implémentations d'amorçage natif utiliseront les classes, les attributs et les dispositions css de bootstrap, ce qui devrait permettre une meilleure intégration avec le reste du cadre.
Dans mon expérience limitée, je rencontre également des problèmes. Il apparaît que les éléments JQuery (tels que les boutons) peuvent être stylés à l'aide de CSS d'amorçage. Toutefois, je rencontre des problèmes en créant un onglet JQuery UI et en voulant verrouiller une entrée bootstrap uniquement (à l'aide de la classe input-append) au bas de chaque onglet. Seul le premier siège correctement. Donc, onglets JQuery + boutons Bootstrap = probablement pas.
Bien que cette question mentionne spécifiquement la fonction 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 datepicker et espère que la solution aidera à résoudre d'autres problèmes liés à jQUI/BS.
J'ai eu du mal à obtenir le dernier datepicker de jQueryUI (version 1.12.1) pour qu'il fonctionne avec bootstrap 3.3.7. Ce qui se passait, c’est que le calendrier s’affiche mais ne se ferme pas.
Il 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 constaté 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. Les autres versions peuvent fonctionner, mais elles 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 (certaines choses, comme toutes les interactions, le dialogue, la barre de progression et quelques effets que je n'utilise pas) ont été supprimés - et j'ai choisi "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 que ça intéresse, 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)
Bootstrap ne fonctionne toujours pas avec l’interface utilisateur Jquery, par exemple modal.Bootstrap a un style agréable, mais comme un framework avec Twitter derrière n’est pas très bon.
Si vous rencontrez des conflits d'espaces de noms javascript, vous pouvez utiliser la fonction noConflict() de Bootstrap pour lui céder les fonctionnalités à l'interface jQuery.
Kendo UI a un thème Nice bootstrap ici et un ensemble d’interface Web comparable à jquery-UI . Ils ont également une version open source qui fonctionne bien avec le thème.
Si vous ne le stockez pas localement et utilisez le lien fourni, vos performances pourraient être améliorées. Dans certains cas, les scripts pourraient déjà être mis en cache dans le client. En ce qui concerne jQueryUI, je vous recommande de ne pas le charger avant que nécessaire. Ils sont tous les deux minimisés, mais vous pouvez lancer la console et consulter l’onglet Réseau pour voir combien de temps il faut pour le charger. Une fois le téléchargement initial effectué, il sera mis en cache. conclusion serait oui utiliser les deux mais utiliser 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 jQuery UI.
En ce qui concerne la surcharge de bande passante, cela dépend vraiment de la façon dont vous gérez les requêtes pour charger tous vos fichiers js. si vous ne voulez vraiment pas faire plusieurs demandes au serveur pour chaque fichier, ajoutez-les simplement ensemble et réduisez-les. Ou vous pouvez probablement vous débarrasser de certains plugins js bootstrap dont vous n’avez pas besoin. c'est très modulaire.
Parce que c’est le meilleur résultat sur google sur jquery ui et bootstrap.js, j’ai décidé d’ajouter cela en tant que wiki de communauté.
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’inclue bootstrap.js, il désactive la liste déroulante du jquery ui autocomplete .
mes trois solutions de contournement:
- exclure bootstrap.js
- ou plus à typeahead lib
- passer de bootstrap.js à bootstrap.min.js (étrange, mais a fonctionné pour moi)
J'ai un site développé en utilisant jquery ui, je viens d'essayer de brancher bootstrap pour un développement et un style futurs, mais cela casse pratiquement tout.
Donc non, ils ne sont pas compatibles.