Kann ich Twitter Bootstrap und jQuery UI gleichzeitig verwenden?

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?

Schauen Sie sich jquery-ui-bootstrap an . Aus der README:

Der Bootstrap von Twitter war eines meiner Lieblingsprojekte aus dem Jahr 2011, aber nachdem ich ihn regelmäßig verwendet hatte, wollte ich zwei Dinge:

Die Möglichkeit, Seite an Seite mit der jQuery-Benutzeroberfläche zu arbeiten (was dazu führte, dass eine Reihe von Widgets visuell beschädigt wurden) Die Möglichkeit, Widgets der jQuery-Benutzeroberfläche mithilfe von Bootstrap-Stilen zu thematisieren. Während ich die jQuery-Benutzeroberfläche liebe, finde ich (wie andere auch) einige der aktuellen Themen etwas veraltet. Ich hoffe, dass dieses Thema eine anständige Alternative für andere darstellt, denen es genauso geht. Zur Verdeutlichung zielt dieses Projekt nicht darauf ab, Twitter Bootstrap zu ersetzen. Es bietet lediglich ein jQuery UI-kompatibles Thema, das vom Design von Bootstrap inspiriert ist. Es enthält auch eine Version von Bootstrap CSS mit einigen auskommentierten (kleineren) Abschnitten, die es dem Thema ermöglichen, neben ihm zu arbeiten.

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.

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

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.

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.

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.

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:

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

Für Interessenten sieht der CSS-Ordner folgendermaßen aus:

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

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

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.

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.

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.

Weil dies das Top-Ergebnis bei Google auf jquery ui und bootstrap.js ist ich beschlossen, dies als Community-Wiki hinzuzufügen.

Ich benutze:

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

und irgendwie, wenn ich bootstrap.js einbinde, deaktiviert es das Dropdown der automatischen Vervollständigung von jquery ui .

meine drei Problemumgehungen:

• bootstrap.js ausschließen
• oder mehr zu typeahead lib
• Wechseln Sie von bootstrap.js zu bootstrap.min.js (seltsam, aber für mich funktioniert)

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"