Twitter Bootstrap vs jQuery UI? [kapalı]


214

Bazı temel sayfa geliştirmeleri için jQuery UI kullanıyorum. Düğme ve giriş stili ve mod iletişim kutuları. Şimdi Bootstrap ile karşılaştım ve oldukça iyi görünüyor.

Herkes jQuery UI Bootstrap kullanma deneyimi var mı? Bunu yapmayı düşünüyorum ama bunu yapmadan önce hangi sorunlarla karşılaşabileceğimin farkında olmak istiyorum.


4
Bu sorulduğunda bulunmayan olası bir çözüm ... Addy Osmani ve ekibi ikisinin birleşmesi üzerinde çalışıyorlar - aralarında sıkışıp kalırsanız, kontrol edin ve belki istediğiniz her şeyi alabilirsiniz! - addyosmani.github.io/jquery-ui-bootstrap
sokak lambası

1
(2014!) Cevapları nasıl güncellenir? Burada kimse ödül kazanabilir mi?
Peter Krauss

Bootstrap web sitesinden - "Bootstrap her seferinde yalnızca bir kalıcı pencere destekler. Zayıf kullanıcı deneyimi olduklarına inandığımız için iç içe modals desteklenmez." - İyi keder.
George Beier

Yanıtlar:


133

Birkaç projem var.

Bence en büyük fark

  • jQuery UI geri dönüş güvenlidir, düzgün çalışır ve Bootstrap'ın CSS3'e dayandığı eski tarayıcılarda iyi görünür, bu da temel olarak yeni tarayıcılarda BÜYÜK anlamına gelir;

  • Güncelleme sıklığı: Bootstrap harika yeni özelliklerle harika büyük güncellemeler alıyor, ancak ne yazık ki önceki kodu kırabilirler, bu nedenle yeni bir büyük sürüm olduğunda bootstrap yükleyebilir ve güncelleyemezsiniz, temelde çok fazla yeni kodlama gerektirir

  • jQuery UI, JavaScript'ten dönüştürmelerle iyi html yapısını temel alırken, Bootstrap görsel ve özelleştirilebilir satır içi yapıyı temel alır. (JQUERY kullanıcı arayüzünde bir widget çağırma, Bootstrap'ta tanımlama)

Peki ne seçilir?

Bu her zaman üzerinde çalıştığınız proje türüne bağlıdır. Havalı ve hızlı görünen widget'lar daha mı iyi, yoksa kullanıcılarınız genellikle eski tarayıcıları mı kullanıyor?

Her zaman ikisini de kullanırım, böylece her iki dünyanın en iyisini kullanabilirim.

Bunları kullanmaya karar verirseniz, her iki çerçeveye de bağlantılar.

  1. jQuery Kullanıcı Arayüzü
  2. çizme atkısı

2
-Cevaplamak için zaman ayırdığınız için teşekkür ederiz. Benim ihtiyaçlarım IE9 veya oldukça iyi CSS3 desteğine sahip diğer sonraki sürüm tarayıcılarda çalışan bir şey için. Bootstrap benim için iyi görünmeye başlıyor. Bir soru. ASP.MVC kullanıyorum. Daha az ihtiyaç duyma konusunda bir şey fark ettim. Boostrap, Microsoft ASP MVC platformunda sorunsuz çalışır mı? "Daha az" nereye sığar?
Jessica

Daha az dosyayı .css dosyalarına derleyebilirsiniz. Bootstrap (make) kullanarak, kullanıma hazır CSS dosyaları oluşturulur. Bu şekilde daha az kullanmanıza gerek yoktur.
mikaelb

3
DAHA AZ bir css çerçevesidir. Boostrap'ı kullanmak için hiçbir şekilde gerekli değildir (normal bir CSS / JS sürümüne sahiptir), ancak LESS ile CSS'de kolayca değişkenler (renkleri değiştir vb.) Yapabilir, bağımlı hale getirebilir, işlevlere sahip olabilirsiniz. Buraya bakın: lesscss.org ve derleyici için bir BETA sürümü .NET bakınız de vardır: dotlesscss.org
Marco Johannesen

20
"Her iki dünyanın en iyilerini" nasıl kullanıyorsunuz? Ben ele verdik en yakın kullanmaktır jQueryUI Bootstrap (temelde bir jQueryUI tema) ama yine de Bootstrap 1.4 değil, 2.0 için tasarlanmıştır ve çatışmalar vb düğmeler için JS kullanmaya çalışırken var
Adam Lynch

3
@ PhoenixX_2 hasta denemek! Örnek: bootstrap'ta düğme sınıfına tüm sınıfları yazarsınız (yani button button-primary button-small, jQueryUI'de düğme olarak bir öğe atarsınız, yani sadece "btn" ekleyin ve JS ile bunu bir düğme $(".btn").button()yaparsınız. HTML'de tanımlayın ve jQueryUI'de bunu JS'de tanımlarsınız.JotuPre uygulamasındaki olumsuzluklar, jQueryUI'nin genellikle daha kolay olan JS'nizi değiştirmeniz gereken bir şeyi (/. Bootstrap sürümleri) güncellerseniz / değiştirirseniz HTML'nizi düzenlemeniz gerekir. Her ikisinde de
Marco Johannesen

73

Her ikisini de kullanan Twitter'ın Bootstrap'ı üstün bir teknoloji seti. İşte bazı farklılıklar,

  • Widget'lar : jQuery UI burada kazanır. Sağladığı tarih widget'ı son derece kullanışlıdır ve Twitter Bootstrap bu türden hiçbir şey sağlamaz.
  • İskele : Bootstrap burada kazanıyor. Twitter'ın hem akışkan hem de sabit ızgarası birinci sınıftır. jQuery UI, sayfa düzenini son kullanıcıya kadar bırakarak bu yönü bile sağlamaz.
  • Kutudan çıktığı profesyonellik : CSS3 kullanan Bootstrap önde gelen liglerdir, jQuery UI karşılaştırmaya göre tarihli görünüyor.
  • Simgeler : Ben buna bağlanacağım. Bootstrap, jQuery UI'den daha güzel ikonlara sahiptir , ancak bir bit terimini sevmiyorum , Glificons Halflings normalde ücretsiz olarak mevcut değildir, ancak Bootstrap ve Glyphicons yaratıcıları arasındaki bir düzenleme, bunu geliştiriciler olarak size ücretsiz olarak mümkün kılmıştır. Bir teşekkür olarak, mümkün olduğunda Glifikonlara geri isteğe bağlı bir bağlantı eklemenizi rica ediyoruz.
  • Resimler ve Küçük Resimler : Bootstrap'a gider , jQuery UI burada bile yardımcı olmaz.

Diğer notlar,

  • Bu iki teknolojinin de alanlarda nasıl rekabet ettiğini anlamak önemlidir. Çok fazla çakışma var, ancak basit iskele ve sabit / sıvı oluşturma istiyorsanız Bootstrap başka bir teknoloji değil, en iyi teknoloji. Tek bir widget istiyorsanız, jQuery UI muhtemelen ilk üçte bile değildir. Bugün, jQuery UI temelde birleşik bir çerçeve kullanarak istemci tarafı widget oluşturma için tutarlılık ve kavram kanıtı için sadece bir oyuncak.

34

Her ikisini de nispeten az sorunla kullanabilirsiniz. Twitter Bootstrap jQuery 1.7.1'i (bu yazıdan itibaren) kullanır ve ek Jquery UI bileşenlerini HTML şablonlarınıza entegre edememenizin nedenlerini düşünemiyorum.

Initializr.com'da oluşturulan HTML5 Boilerplate ve Twitter Bootstrap kombinasyonunu kullanıyorum. Bu, iki harika başlangıç ​​şablonunu harika bir başlangıç ​​projesinde birleştirir. Http://html5boilerplate.com/ ve http://www.initializr.com/ adresindeki ayrıntıları inceleyin. Hemen başlamak için http://www.initializr.com/ adresine gidin, "Bootstrap 2" yi tıklayın. düğmesini tıklayın ve "İndir" i tıklayın. Bu size başlamak için gereken tüm js ve css verecektir.

HTML5 ve CSS3'ten korkmayın. Initializr ve HTML5 Boilerplate, tüm özelliklerin IE 6, 7 8 ve 9'da çalışmasına izin verecek çoklu dolgular ve IE'ye özel kod içerir.

Twitter Bootstrap'ta LESS kullanımı da isteğe bağlıdır. Bootstrap tarafından kullanılan tüm CSS'leri derlemek için LESS kullanırlar, ancak sadece kendi stillerinizi geçersiz kılmak veya eklemek isterseniz, bu amaç için boş bir css dosyası sağlarlar.

Özel kod eklemeniz için de boş bir js dosyası (script.js) vardır. Bu, ek jQueryUI bileşenleri için işleyicilerinizi veya seçicilerinizi ekleyeceğiniz yerdir.


Mükemmel cevap. Hızlı soru zor, jquery ui twitter bootstrap ve eklentilerine dahil olmayandan gerçekten ne sunuyor?
MindWire

5
Üzgünüm, bunu gördüm. JS widget'larına gelince, jQuery UI'de Bootstrap'a dahil olmayan bir tarih seçici ve kaydırıcı bulunur. Ayrıca jqUI, sürükle ve bırak, animasyonları göster / gizle, sınıf değiştirme ve daha fazlası gibi etkileşimleri ve efektleri içerir. JqUI'nin etkileşimlerini Bootstrap'ın düzen bileşenleri ile birleştirmek çok güçlü bir kombinasyon olabilir.
eterps

6
Dikkat edilmesi gereken bir konu; her iki proje de $ .fn.düğmesini uyumsuz şekillerde tanımlar.
Levi

27

Her ikisini de kullandık ve basitliği ve geliştirilme ve geliştirme hızı için Bootstrap'i seviyoruz. JQuery UI ile ilgili sorun, bir salyangoz hızında ilerlemesidir. Menubar, Ağaç kontrolü ve DataGrid gibi planlama / geliştirme aşamasında olan ortak özelliklerin ortaya çıkması yıllar alıyor. Bekledi bekledi ve nihayet pes ve http://dblite.com ürün için ExtJS gibi diğer kütüphaneleri kullandık .

Bootstrap çok kısa bir süre içinde oldukça kapsamlı bir özellik seti ile geldi ve yakında jQuery UI'yi geride bırakacağından eminim.

Bu yüzden sonunda modası geçmiş bir şey kullanmanın bir anlamı yok ...


43
Her şey sonunda modası geçmiş olacak. Hiçbir şey yapmanın bir anlamı yok.
tilgovi

6
Doğru, sadece daha uzun süre dayanacağını düşündüğümüz birini seçmemiz gerekiyor.
Rajiv

8
Hayır, sadece müşterilerinizden para getirecek olanı seçmeniz gerekiyor. Çalıştırdıktan sonra, stilden düşse bile bir süre çalışmaya devam etmelidir, bu yüzden tek gerçek endişe paradır.
Adam
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.