Twitter Bootstrap vs jQuery UI? [geschlossen]

214

Ich habe die jQuery-Benutzeroberfläche für einige grundlegende Seitenverbesserungen verwendet. Schaltflächen- und Eingabestil sowie modale Dialogfelder. Jetzt bin ich auf Bootstrap gestoßen und es sieht ziemlich gut aus.

Hat jemand Erfahrung mit der Verwendung von jQuery UI zu Bootstrap? Dies ist, was ich denke zu tun, aber bevor ich dies tue, möchte ich wissen, mit welchen Problemen ich konfrontiert sein könnte.

javascript jquery jquery-ui twitter-bootstrap Jessica
quelle
4
Eine mögliche Lösung, die möglicherweise nicht verfügbar war, als dies gefragt wurde ... Addy Osmani und sein Team haben an der Zusammenführung der beiden gearbeitet - wenn Sie zwischen ihnen stecken bleiben, schauen Sie sich das an und vielleicht können Sie alles bekommen, was Sie wollen! - addyosmani.github.io/jquery-ui-bootstrap
Straßenlaterne
1
Wie aktualisiere ich (2014!) Antworten? Kann hier jemand ein Kopfgeld starten?
Peter Krauss
Von der Bootstrap-Website - "Bootstrap unterstützt jeweils nur ein Modalfenster. Verschachtelte Modalitäten werden nicht unterstützt, da wir der Meinung sind, dass sie eine schlechte Benutzererfahrung darstellen." - Guter Kummer.
George Beier

Antworten:

133

Ich habe an mehreren Projekten teilgenommen.

Der größte Unterschied meiner Meinung nach

  • Die jQuery-Benutzeroberfläche ist ausfallsicher, funktioniert ordnungsgemäß und sieht in alten Browsern gut aus, wobei Bootstrap auf CSS3 basiert, was in neuen Browsern im Grunde GROSS bedeutet, in alten nicht so gut

  • Aktualisierungshäufigkeit: Bootstrap erhält einige großartige Updates mit großartigen neuen Funktionen, aber leider können sie den vorherigen Code beschädigen, sodass Sie Bootstrap nicht einfach installieren und aktualisieren können, wenn es eine neue Hauptversion gibt. Es erfordert im Grunde viel neuen Code

  • Die jQuery-Benutzeroberfläche basiert auf einer guten HTML-Struktur mit Transformationen aus JavaScript, während Bootstrap auf einer visuell und anpassbaren Inline-Struktur basiert. (Aufrufen eines Widgets in der JQUERY-Benutzeroberfläche, Definieren in Widstrap)

Also, was soll ich wählen?

Das hängt immer von der Art des Projekts ab, an dem Sie arbeiten. Sind coole und schnell aussehende Widgets besser oder verwenden Ihre Benutzer häufig alte Browser?

Am Ende benutze ich immer beide, damit ich das Beste aus beiden Welten nutzen kann.

Hier sind die Links zu beiden Frameworks, falls Sie diese verwenden möchten.

  1. jQuery-Benutzeroberfläche
  2. Bootstrap
Marco Johannesen
quelle
2
-Danke, dass Sie sich die Zeit genommen haben, um zu antworten. Ich brauche etwas, das mit IE9 oder anderen Browsern der späteren Version funktioniert und ziemlich gute CSS3-Unterstützung bietet. Bootstrap sieht für mich langsam gut aus. Eine Frage. Ich benutze ASP.MVC. Mir ist aufgefallen, dass ich weniger brauche. Funktioniert Boostrap mit der Microsoft ASP MVC-Plattform? Wo passt "weniger" hin?
Jessica
Sie können die weniger Dateien zu CSS-Dateien kompilieren. Wenn Sie den Bootstrap (mit make) erstellen, werden gebrauchsfertige CSS-Dateien erstellt. Auf diese Weise müssen Sie nicht weniger verwenden.
Mikaelb
3
WENIGER ist ein CSS-Framework. Es wird in keiner Weise für die Verwendung von Boostrap benötigt (sie haben eine reguläre CSS / JS-Version), aber mit WENIGER können Sie problemlos Variablen in CSS erstellen (Farben ändern usw.), es abhängig machen, Funktionen haben. Siehe hier: lesscss.org und es gibt eine BETA-Version für einen Compiler in .NET. Siehe: dotlesscss.org
Marco Johannesen
20
Wie nutzt du überhaupt das "Beste aus beiden Welten"? Das nächste, was ich erreicht habe, ist die Verwendung von jQueryUI Bootstrap (im Grunde ein jQueryUI-Thema), aber es ist immer noch für Bootstrap 1.4 und nicht für 2.0 konzipiert, und es gibt Konflikte, wenn versucht wird, JS für Schaltflächen usw. zu verwenden.
Adam Lynch
3
@ PhoenixX_2 Ich versuche es nicht! Beispiel: In Bootstrap schreiben Sie alle Klassen auf das Schaltflächenelement (dh button button-primary button-small, in jQueryUI weisen Sie ein Element als Schaltfläche zu, dh fügen Sie einfach "btn" hinzu und machen es dann über JS zu einer Schaltfläche $(".btn").button(). Dies bedeutet, dass Sie in Bootstrap Definieren Sie es in HTML, und in jQueryUI definieren Sie es in JS. Negativ in Bootstrap ist, dass Sie Ihren HTML-Code bearbeiten müssen, wenn Sie etwas aktualisieren / ändern (dh Bootstrap-Versionen), in jQueryUI müssen Sie nur Ihren JS ändern, was oft einfacher ist. Es gibt positive und negative mit beiden! :)
Marco Johannesen
73

Nachdem beide verwendet wurden, ist Bootstrap von Twitter ein überlegenes Technologie-Set. Hier sind einige Unterschiede,

  • Widgets : Die jQuery-Benutzeroberfläche gewinnt hier. Das Datums-Widget ist immens nützlich, und Twitter Bootstrap bietet nichts dergleichen.
  • Gerüst : Bootstrap gewinnt hier. Das flüssige und feste Twitter-Raster ist erstklassig. Die jQuery-Benutzeroberfläche bietet diese Richtung nicht einmal und überlässt das Seitenlayout dem Endbenutzer.
  • Out-of-the-Box-Professionalität : Bootstrap mit CSS3 ist weit voraus, die jQuery-Benutzeroberfläche sieht im Vergleich veraltet aus.
  • Icons : Ich werde dieses hier binden. Bootstrap hat imho schönere Symbole als die jQuery-Benutzeroberfläche , aber ich mag die Begriffe nicht ein bisschen. Glyphicons-Halblinge sind normalerweise nicht kostenlos verfügbar, aber eine Vereinbarung zwischen Bootstrap und den Glyphicons-Erstellern hat dies für Sie als Entwickler kostenlos ermöglicht. Als Dankeschön bitten wir Sie, wenn möglich einen optionalen Link zurück zu Glyphicons hinzuzufügen.
  • Bilder & Thumbnails : Geht zu Bootstrap , die jQuery-Benutzeroberfläche hilft hier nicht einmal.

Weitere Hinweise,

  • Es ist wichtig zu verstehen, wie diese beiden Technologien auch in den Bereichen miteinander konkurrieren. Es gibt viele Überlappungen, aber wenn Sie ein einfaches Gerüst und eine feste / flüssige Erstellung wünschen, ist Bootstrap keine andere Technologie, sondern die beste Technologie. Wenn Sie ein einzelnes Widget möchten, ist die jQuery-Benutzeroberfläche wahrscheinlich nicht einmal unter den ersten drei. Heutzutage ist die jQuery-Benutzeroberfläche hauptsächlich ein Spielzeug für Konsistenz und Proof of Concept für eine clientseitige Widget-Erstellung unter Verwendung eines einheitlichen Frameworks.
Evan Carroll
quelle
34

Sie können beide mit relativ wenigen Problemen verwenden. Twitter Bootstrap verwendet jQuery 1.7.1 (zum Zeitpunkt dieses Schreibens), und ich kann mir keine Gründe vorstellen, warum Sie keine zusätzlichen Jquery-UI-Komponenten in Ihre HTML-Vorlagen integrieren können.

Ich habe eine Kombination aus HTML5 Boilerplate und Twitter Bootstrap verwendet, die bei Initializr.com erstellt wurde. Dies kombiniert zwei großartige Starter-Vorlagen zu einem großartigen Starter-Projekt. Schauen Sie sich die Details unter http://html5boilerplate.com/ und http://www.initializr.com/ an. Um sofort loszulegen, gehen Sie zu http://www.initializr.com/ und klicken Sie auf "Bootstrap 2". Klicken Sie auf "Herunterladen". Dies gibt Ihnen alle js und css, die Sie benötigen, um loszulegen.

Und lassen Sie sich von HTML5 und CSS3 nicht abschrecken. Initializr und HTML5 Boilerplate enthalten Polyfills und IE-spezifischen Code, mit dem alle Funktionen in IE 6, 7, 8 und 9 ausgeführt werden können.

Die Verwendung von WENIGER in Twitter Bootstrap ist ebenfalls optional. Sie verwenden WENIGER, um das gesamte von Bootstrap verwendete CSS zu kompilieren. Wenn Sie jedoch nur Ihre eigenen Stile überschreiben oder hinzufügen möchten, stellen sie zu diesem Zweck eine leere CSS-Datei bereit.

Es gibt auch eine leere js-Datei (script.js), in der Sie benutzerdefinierten Code hinzufügen können. Hier würden Sie Ihre Handler oder Selektoren für zusätzliche jQueryUI-Komponenten hinzufügen.

eterps
quelle
Gute Antwort. Kurze Frage schwierig, was bietet jquery ui wirklich, als es nicht in Twitter Bootstrap und seinen Plugins enthalten ist?
MindWire
5
Entschuldigung, habe das gerade gesehen. Für js-Widgets verfügt die jQuery-Benutzeroberfläche über einen Datums- und Schieberegler, die nicht in Bootstrap enthalten sind. Außerdem enthält jqUI Interaktionen und Effekte wie Drag & Drop, Animationen zum Ein- und Ausblenden, Umschalten von Klassen und vieles mehr. Das Kombinieren der Interaktionen von jqUI mit den Layoutkomponenten von Bootstrap kann eine sehr leistungsstarke Kombination sein.
Eterps
6
Ein Problem, auf das Sie achten sollten; Beide Projekte definieren $ .fn.button auf inkompatible Weise.
Levi
27

Wir haben beide verwendet und wir mögen Bootstrap wegen seiner Einfachheit und des Tempos, mit dem es entwickelt und verbessert wird. Das Problem mit der jQuery-Benutzeroberfläche ist, dass sie sich im Schneckentempo bewegt. Es dauert Jahre, um gemeinsame Funktionen wie Menubar, Tree Control und DataGrid einzuführen, die sich für immer in der Planungs- / Entwicklungsphase befinden. Wir haben gewartet, gewartet, gewartet und schließlich aufgegeben und andere Bibliotheken wie ExtJS für unser Produkt http://dblite.com verwendet .

Bootstrap hat in sehr kurzer Zeit eine Reihe umfassender Funktionen entwickelt, und ich bin mir sicher, dass es die jQuery-Benutzeroberfläche bald übertreffen wird.

Ich sehe keinen Sinn darin, etwas zu verwenden, das irgendwann veraltet sein wird ...

Rajiv
quelle
43
Alles wird irgendwann veraltet sein. Es macht keinen Sinn, etwas zu tun.
Tilgovi
6
Es stimmt, wir müssen nur die auswählen, von der wir glauben, dass sie länger Bestand hat.
Rajiv
8
Nein, Sie müssen nur die auswählen, die das Geld von Ihren Kunden einbringt. Sobald Sie es zum Laufen gebracht haben, sollte es noch eine Weile weiter funktionieren, auch wenn es aus der Mode kommt. Das einzige wirkliche Problem ist also das Geld.
Adam