Ich verwende Twitter Bootstrap und möchte einen "automatischen Vorschlag" verwenden, der in Bootstrap nicht verfügbar ist, während die jQuery-Benutzeroberfläche über eigene Methoden für den automatischen Vorschlag verfügt.
Kann ich beide verwenden? Wird es die Bandbreite überlasten?
jquery-ui
twitter-bootstrap
Sanket Sahu
quelle
quelle
Antworten:
Schauen Sie sich jquery-ui-bootstrap an . Aus der README:
quelle
Nur um dies zu aktualisieren, steht Bootstrap v2 nicht mehr in Konflikt mit jquery ui
https://github.com/twbs/bootstrap/issues/171
Bearbeiten : Als @Freshblood gibt es einige Dinge, die immer noch in Konflikt stehen. Wie ursprünglich gepostet, deutet Twitter jedoch an, dass sie daran arbeiten, und es funktioniert größtenteils, insbesondere im Vergleich zu Version 1.
quelle
button()
Methode definieren .Um zu verhindern, dass die jQuery-Benutzeroberfläche Bootstraps oder Ihren benutzerdefinierten Stil überschreibt, müssen Sie zum späteren Nachschlagen (da dies der Top-Antwort-Geldautomat von Google ist) einen benutzerdefinierten Download erstellen und das
no-theme
Thema auswählen . Dies beinhaltet nur das Zurücksetzen der jQuery-Benutzeroberfläche und nicht das Überladen des Bootstrap-Stils für verschiedene Elemente.Währenddessen haben einige jQuery-UI-Komponenten (wie Datepicker) eine native Bootstrap-Implementierung. Die nativen Bootstrap-Implementierungen verwenden die Bootstrap-CSS-Klassen, -Attribute und -Layouts und sollten daher eine bessere Integration mit dem Rest des Frameworks aufweisen.
quelle
In meiner begrenzten Erfahrung stoße ich auch auf Probleme. Es scheint, dass JQuery-Elemente (z. B. Schaltflächen) mithilfe von Bootstrap-CSS gestaltet werden können. Ich habe jedoch Probleme beim Erstellen einer Registerkarte für die JQuery-Benutzeroberfläche und beim Sperren einer Nur-Bootstrap-Eingabe (mithilfe der Klasse "Eingabe anhängen") am unteren Rand jeder Registerkarte. Nur die erste befindet sich korrekt. Also, JQuery-Registerkarten + Bootstrap-Schaltflächen = wahrscheinlich nicht.
quelle
Bootstrap funktioniert immer noch nicht mit der Jquery-Benutzeroberfläche, zum Beispiel dem Modal. Bootstrap hat einen schönen Stil, aber als Framework mit Twitter dahinter ist es nicht so gut.
quelle
Wenn Sie auf Kollisionen mit Javascript-Namespaces stoßen, können Sie die Bootstrap-
noConflict()
Funktion verwenden, um die Funktionalität an die jQuery-Benutzeroberfläche abzutreten.quelle
Obwohl in dieser Frage speziell die Autosuggest-Funktion von jQuery-UI erwähnt wird, ist der Fragentitel allgemeiner: Funktioniert Bootstrap 3 mit jQuery UI? Ich hatte Probleme mit der Funktion jQUI Datepicker (Popup-Kalender). Ich habe das Datepicker-Problem gelöst und hoffe, dass die Lösung bei anderen jQUI / BS-Problemen hilft.
Ich hatte heute Schwierigkeiten, den neuesten jQueryUI-Datepicker (Version 1.12.1) für Bootstrap 3.3.7 zu bekommen. Was geschah, war, dass der Kalender angezeigt wurde, aber nicht geschlossen wurde.
Es stellte sich heraus, dass es sich um ein Versionsproblem mit jQUI und BS handelt. Ich habe die neueste Version von Bootstrap verwendet und festgestellt, dass ich auf diese Versionen von jQUI und jQuery herunterstufen musste:
jQueryUI - 1.9.2 (getestet - funktioniert)
jQuery - 1.9.1 oder 2.1.4 (getestet - beide funktionieren. Andere Versionen funktionieren möglicherweise, aber diese funktionieren.)
Bootstrap 3.3.7 (getestet - funktioniert)
Da ich ein benutzerdefiniertes Thema verwenden wollte, habe ich auch einen benutzerdefinierten Download von jQUI erstellt (einige Dinge wie alle Interaktionen, Dialoge, Fortschrittsbalken und einige Effekte, die ich nicht verwende, entfernt) - und sichergestellt, dass "Cupertino" ausgewählt wurde. ganz unten als mein thema.
Ich habe sie so installiert:
Für Interessenten sieht der CSS-Ordner folgendermaßen aus:
quelle
Wenn Sie es nicht lokal speichern und den von ihnen bereitgestellten Link verwenden, haben Sie möglicherweise eine verbesserte Leistung. In einigen Fällen hat der Client die Skripte möglicherweise bereits zwischengespeichert. Für den Fall von jQueryUI würde ich empfehlen, es nicht zu laden, bis es notwendig ist. Sie sind beide minimiert, aber Sie können die Konsole starten und auf der Registerkarte "Netzwerk" nachsehen, wie lange es dauert, bis sie geladen ist. Nach dem ersten Herunterladen wird sie zwischengespeichert, sodass Sie sich danach keine Sorgen mehr machen sollten. Meine Schlussfolgerung wäre Ja, verwenden Sie beide, aber verwenden Sie ein CDN
quelle
Ja, Sie können beide verwenden. js bootstrap von twitter ist eine Sammlung von jquery-Plugins. Es sollte keinen Konflikt mit der jQuery-Benutzeroberfläche geben.
In Bezug auf die Bandbreitenüberlastung hängt es wirklich davon ab, wie Sie mit den Anforderungen zum Laden aller Ihrer js-Dateien umgehen. Wenn Sie wirklich nicht mehrere Anforderungen an den Server stellen möchten, um diese für jede Datei anzufordern, fügen Sie sie einfach zusammen und minimieren Sie sie. Oder Sie können wahrscheinlich einige js Bootstrap-Plugins entfernen, die Sie nicht benötigen. es ist sehr modular.
quelle
!important
, die ich ständig überschreiben und korrigieren muss, manchmal mit hackigem Code. Ich hasse Bootstrap und rate von seiner Verwendung ab, zumindest bis es aufhört, sich mit Elementen zu beschäftigen, die die Bootstrap-Klassen nicht verwenden. (Dies ist nicht die Schuld des ursprünglichen Designers - ich bezweifle, dass die ursprünglichen Entwickler von Twitter erwartet haben, dass das, woran sie arbeiten, zu einer beliebten Bibliothek wird.)Kendo UI hat hier ein schönes Bootstrap-Thema und eine Reihe von Web-UI, die mit jquery-UI vergleichbar sind. Sie haben auch eine Open-Source-Version , die gut mit dem Thema funktioniert.
quelle
Ich habe eine Site entwickelt, die mit jquery ui entwickelt wurde. Ich habe nur versucht, Bootstrap für zukünftige Entwicklungen und das Styling anzuschließen, aber es bricht praktisch alles.
Also nein, sie sind nicht kompatibel.
quelle
Weil dies das Top-Ergebnis bei Google auf jquery ui und bootstrap.js ist ich beschlossen, dies als Community-Wiki hinzuzufügen.
Ich benutze:
und irgendwie, wenn ich bootstrap.js einbinde, deaktiviert es das Dropdown der automatischen Vervollständigung von jquery ui .
meine drei Problemumgehungen:
quelle
Die Datenrolle = "keine" ist der Schlüssel, damit sie zusammenarbeiten. Sie können auf die Elemente anwenden, die Bootstrap berühren soll, aber jquery mobile ignorieren. wie diese Eingabe type = "text" class = "form-control" placeholder = "Search" data-role = "none"
quelle