Twitter Bootstrap vs jQuery UI? [Zamknięte]

214

Używam jQuery UI do niektórych podstawowych ulepszeń strony. Okna dialogowe stylów przycisków i wprowadzania oraz modalne okna dialogowe. Teraz natknąłem się na Bootstrap i wygląda całkiem nieźle.

Czy ktoś doświadczył przejścia z używania jQuery UI do Bootstrap? Właśnie to zamierzam zrobić, ale zanim to zrobię, chciałbym wiedzieć, z jakimi problemami mogę się zmierzyć.

javascript jquery jquery-ui twitter-bootstrap Jessica
źródło
4
Jedno możliwe rozwiązanie, które może nie być dostępne, gdy zostanie o to poproszony ... Addy Osmani i jego zespół pracują nad połączeniem tych dwóch - jeśli utkniesz między nimi, sprawdź i może uda ci się zdobyć wszystko, czego chcesz! - addyosmani.github.io/jquery-ui-bootstrap
streetlight
1
Jak zaktualizować (2014!) Odpowiedzi? Czy ktoś może tutaj rozpocząć nagrodę?
Peter Krauss,
Ze strony internetowej Bootstrap - „Bootstrap obsługuje tylko jedno okno modalne na raz. Zagnieżdżone moduły nie są obsługiwane, ponieważ uważamy, że są one niekorzystne dla użytkowników”. -- O jeny.
George Beier,

Odpowiedzi:

133

Mam kilka projektów.

Największa różnica moim zdaniem

  • Interfejs jQuery jest bezpieczny, działa poprawnie i dobrze wygląda w starych przeglądarkach, gdzie Bootstrap jest oparty na CSS3, co w zasadzie oznacza WIELKIE w nowych przeglądarkach, a nie tak świetne w starych

  • Częstotliwość aktualizacji: Bootstrap dostaje świetne świetne aktualizacje z niesamowitymi nowymi funkcjami, ale niestety mogą one zepsuć poprzedni kod, więc nie możesz po prostu zainstalować bootstrap i zaktualizować, gdy pojawi się nowa główna wersja, to zasadniczo wymaga dużo nowego kodowania

  • Interfejs jQuery oparty jest na dobrej strukturze html z transformacjami z JavaScript, podczas gdy Bootstrap oparty jest na wizualnej i konfigurowalnej strukturze wbudowanej. (wywoływanie widgetu w interfejsie JQUERY, definiowanie go w Bootstrap)

Co więc wybrać?

To zawsze zależy od rodzaju projektu, nad którym pracujesz. Czy fajne i szybko wyglądające widżety są lepsze, czy też użytkownicy często używają starych przeglądarek?

Zawsze używam obu, więc mogę korzystać z najlepszych z obu światów.

Oto linki do obu frameworków, jeśli zdecydujesz się ich użyć.

  1. jQuery UI
  2. Bootstrap
Marco Johannesen
źródło
2
-Dziękujemy za poświęcenie czasu na odpowiedź. Moje potrzeby dotyczą czegoś, co działa na przeglądarkach IE9 lub innych późniejszych wersjach, które mają całkiem dobrą obsługę CSS3. Bootstrap zaczyna dla mnie wyglądać dobrze. Jedno pytanie. Używam ASP.MVC. Zauważyłem coś o potrzebie mniej. Czy Boostrap będzie działał poprawnie z platformą Microsoft ASP MVC? Gdzie mieści się „mniej”?
Jessica,
Możesz skompilować mniej plików do plików .css. Budowanie bootstrapu (przy użyciu make), stworzy gotowe do użycia pliki CSS. W ten sposób nie musisz używać mniej.
mikaelb
3
LESS jest strukturą css. Nie jest w żaden sposób potrzebny do korzystania z Boostrap (mają one zwykłą wersję CSS / JS), ale dzięki LESS możesz łatwo tworzyć zmienne w CSS (zmieniać kolory itp.), Uzależniać je, mieć funkcje. Zobacz tutaj: lesscss.org, a jest wersja BETA kompilatora w .NET patrz: dotlesscss.org
Marco Johannesen
20
Jak w ogóle korzystasz z „najlepszych z obu światów”? Najbliższe, jakie dostałem, to użycie jQueryUI Bootstrap (w zasadzie motyw jQueryUI), ale nadal jest on zaprojektowany dla Bootstrap 1.4, a nie 2.0, i są starcia przy próbie użycia JS do przycisków itp.
Adam Lynch
3
@ PhoenixX_2 źle spróbuję! Przykład: w bootstrap zapisujesz wszystkie klasy na elemencie button (tj. button button-primary button-smallGdzie w jQueryUI przypisujesz element do przycisku, tzn. Po prostu dodajesz „btn”, a następnie za pomocą JS zmieniasz go w przycisk $(".btn").button(). Oznacza to, że w Bootstrap możesz zdefiniuj go w HTML, a w jQueryUI definiujesz go w JS. Negatywne w Bootstrap jest to, że musisz edytować HTML, jeśli coś aktualizujesz / zmieniasz (np. wersje Bootstrap), gdzie jQueryUI po prostu musisz zmienić JS, co jest często łatwiejsze. Oba są pozytywne i negatywne! :)
Marco Johannesen
73

Korzystając z obu, Bootstrap na Twitterze jest doskonałym zestawem technologii. Oto kilka różnic,

  • Widżety : wygrywa tutaj interfejs jQuery. Widżet daty, który udostępnia, jest niezwykle przydatny, a Twitter Bootstrap nie zapewnia niczego takiego.
  • Rusztowanie : tutaj wygrywa Bootstrap. Siatka Twittera zarówno płynna, jak i stała są na najwyższym poziomie. Interfejs jQuery nie zapewnia nawet tego kierunku, pozostawiając układ strony użytkownikowi końcowemu.
  • Profesjonalizm po wyjęciu z pudełka : Bootstrap za pomocą CSS3 jest o krok do przodu, interfejs użytkownika jQuery wygląda na przestarzały.
  • Ikony : Wiążę się z tym. Bootstrap ma ładniejsze ikony imho niż interfejs użytkownika jQuery , ale nie podoba mi się te terminy, Glyphicons Halflings zwykle nie są dostępne za darmo, ale porozumienie między Bootstrap i twórcami Glyphicons umożliwiło ci to jako programistom bez żadnych kosztów. W ramach podziękowania prosimy o dołączenie opcjonalnego linku do Glifikonów, ilekroć jest to możliwe.
  • Obrazy i miniatury : idzie do Bootstrap , interfejs użytkownika jQuery nawet tutaj nie pomaga.

Inne notatki,

  • Ważne jest, aby zrozumieć, w jaki sposób te dwie technologie również konkurują ze sobą. Wiele się nakłada, ale jeśli chcesz prostego rusztowania i tworzenia stałych / płynnych Bootstrap nie jest inną technologią, to najlepsza technologia. Jeśli chcesz mieć pojedynczy widget, jQuery UI prawdopodobnie nie znajduje się nawet w pierwszej trójce. Obecnie interfejs użytkownika jQuery jest głównie zabawką zapewniającą spójność i potwierdzenie koncepcji tworzenia widgetów po stronie klienta przy użyciu ujednoliconego frameworka.
Evan Carroll
źródło
34

Możesz używać obu przy stosunkowo niewielu problemach. Twitter Bootstrap używa jQuery 1.7.1 (od tego momentu) i nie mogę wymyślić żadnych powodów, dla których nie można zintegrować dodatkowych komponentów interfejsu Jquery z szablonami HTML.

Używam kombinacji HTML5 Boilerplate i Twitter Bootstrap zbudowanych na Initializr.com. Łączy to dwa niesamowite szablony startowe w jeden świetny projekt startowy. Sprawdź szczegóły na stronie http://html5boilerplate.com/ i http://www.initializr.com/. Aby rozpocząć, przejdź do strony http://www.initializr.com/ , kliknij „Bootstrap 2” i kliknij „Pobierz”. To da ci wszystkie pliki js i css potrzebne do rozpoczęcia pracy.

I nie bój się HTML5 i CSS3. Initializr i HTML5 Boilerplate zawierają wypełnienia i kod specyficzny dla IE, który pozwoli wszystkim funkcjom działać w IE 6, 7 8 i 9.

Korzystanie z LESS w Twitter Bootstrap jest również opcjonalne. Używają LESS do kompilacji wszystkich CSS używanych przez Bootstrap, ale jeśli chcesz po prostu zastąpić lub dodać własne style, dostarczają do tego celu pusty plik css.

Istnieje również pusty plik js (script.js), aby dodać niestandardowy kod. W tym miejscu należy dodać moduły obsługi lub selektory dodatkowych komponentów jQueryUI.

eterps
źródło
Świetna odpowiedź. Szybkie pytanie trudne, co naprawdę oferuje interfejs jquery, czego nie ma w pakiecie startowym Twittera i jego wtyczkach?
MindWire
5
Przepraszam, właśnie to widziałem. Jeśli chodzi o widżety js, interfejs użytkownika jQuery ma datepicker i suwak, które nie są zawarte w Bootstrap. Również jqUI obejmuje interakcje i efekty, takie jak przeciąganie i upuszczanie, pokazywanie / ukrywanie animacji, przełączanie klas i kilka innych. Łączenie interakcji jqUI z komponentami układu Bootstrap może być bardzo potężną kombinacją.
eterps
6
Jeden problem, na który należy uważać; oba projekty definiują przycisk $ .fn. w niezgodny sposób.
Levi
27

Użyliśmy obu i lubimy Bootstrap ze względu na jego prostotę oraz tempo, w jakim jest rozwijany i ulepszany. Problem z interfejsem jQuery polega na tym, że porusza się on w tempie ślimaka. Wiele lat zajmuje wdrożenie wspólnych funkcji, takich jak Menubar, kontrola drzewa i DataGrid, które są na etapie planowania / rozwoju na zawsze. Czekaliśmy, czekaliśmy, wreszcie się poddaliśmy i korzystaliśmy z innych bibliotek, takich jak ExtJS, dla naszego produktu http://dblite.com .

Bootstrap opracował dość obszerny zestaw funkcji w bardzo krótkim czasie i jestem pewien, że wkrótce wyprzedzi interfejs użytkownika jQuery.

Nie widzę więc sensu w używaniu czegoś, co w końcu będzie przestarzałe ...

Rajiv
źródło
43
Wszystko w końcu będzie przestarzałe. Nie ma sensu nic robić.
tilgovi
6
To prawda, że ​​musimy wybrać ten, który naszym zdaniem będzie trwał dłużej.
Rajiv
8
Nie, musisz tylko wybrać ten, który przyniesie pieniądze od twoich klientów. Gdy zaczniesz działać, powinien on nadal działać przez pewien czas, nawet jeśli przestanie być modny, więc jedynym prawdziwym problemem są pieniądze.
Adam