Kann ich Twitter Bootstrap und jQuery UI gleichzeitig verwenden?

108

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?

Sanket Sahu
quelle
6
Die jQuery-Benutzeroberfläche ist 6,6 KB groß (minimiert und komprimiert). Wenn Ihre Bandbreite nicht in KB gemessen wird, ist dies kein Problem.
BryanH
4
Die Dinge haben sich geändert, seit ich diese Frage gestellt habe. Jetzt gibt es viele Bootstrap-Plugins, die gut genug sind, um die vorhandenen jQuery-UI-Plugins zu ersetzen. Jetzt benutze ich Bootstrap mit Plugins für Bootstrap.
Sanket Sahu
1
Warum nicht den Typeahead von Twitter ( twitter.github.io/typeahead.js/examples ) für automatische Vorschläge verwenden ?
Koppor

Antworten:

83

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.

Sam Dolan
quelle
62

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.

Eonasdan
quelle
10
Bist du dir da ganz sicher ? Ich sehe immer noch ein Problem mit Jquery Datepicker
Freshblood sorgt
Ich würde vorschlagen, dass Sie Bootstrap v2 und jquery ui verwenden und eine leere Testseite erstellen, um zu überprüfen, ob es nicht Ihr Code ist. Ich habe seit der neuen Version kein Problem mehr
gehabt
1
Bitte überprüfen Sie diese jquery ui datepicker jqueryui.com/demos/datepicker/#dropdown-month-year . Wie Sie mit diesen Einstellungen sehen können, enthält der Datepicker ein Dropdownbox-Element, sodass der Bootstrap bereits alle Eingabeelemente überschreibt. Es gibt jedoch kein Problem, wenn Sie mit diesen Einstellungen keinen Datepicker verwenden.
Freshblood
1
Jedes Widget, das ein Eingabeelement enthält, steht in Konflikt mit den CSS-Stilen des Twitter-Bootstraps.
Freshblood
24

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.

T0xicCode
quelle
Ich sehe hier kein Thema ohne Thema: jqueryui.com/themeroller . Habe ich es vermisst oder ist es nicht mehr da?
Gaefan
3
jqueryui.com/download ist der Link, den Sie verwenden sollten. Scrollen Sie nach unten und wählen Sie "Kein Thema" in der Liste.
T0xicCode
3

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.

Flussmittelkondensator
quelle
2

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.

Lucian Povatanu
quelle
2

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.

user1618143
quelle
2

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)
Cssyphus
quelle
1

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

andrei
quelle
1

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.

Benny Tjia
quelle
4
Alle JS haben den richtigen Namespace, aber es sind CSS-Kollisionen, über die Sie sich Sorgen machen müssen: Wenn Sie ein JUI-Widget in eine Bootstrap-Registerkarte einfügen, was hat Vorrang?
Btown
Es ist nicht nur das CSS von jQuery, das in Bootstrap schlecht aussieht. Bootstrap nimmt umfassende CSS-Änderungen vor, häufig mit !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.)
Michael Scheper
1

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.

Programmierer
quelle
0

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.

NimChimpsky
quelle
0

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)
JP Hellemons
quelle
Die Kombination von jquery ui bootstrap deaktiviert auch Tooltip und Datepicker.
Vipul Hadiya
-3

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"

Dinesh Khetarpal
quelle
1
Diese Frage war über Bootstrap und JQuery-UI, nicht JQuery Mobile
TJ