Twitter Bootstrap ve jQuery UI'yi aynı anda kullanabilir miyim?

108

Twitter Bootstrap kullanıyorum ve Bootstrap'te bulunmayan bir "otomatik öneri" kullanmak istiyorum, oysa jQuery UI'nin otomatik öneri için kendi yöntemleri var.

İkisini de kullanabilir miyim? Bant genişliğini aşırı yükleyecek mi?

jquery-ui  twitter-bootstrap 
— Sanket Sahu
kaynak
6
jQuery kullanıcı arayüzü 6.6k'dir (küçültülmüş ve gzip'lenmiş), bu nedenle bant genişliğiniz kb cinsinden ölçülmediği sürece bu bir sorun olmayacaktır.
— BryanH
4
Bu soruyu yayınladığımdan beri işler değişti. Şimdi, mevcut jQuery UI eklentilerinin yerini alacak kadar iyi birçok Bootstrap eklentisi var. Şimdi, bootstrap için yapılmış eklentilerle Bootstrap kullanıyorum.
— Sanket Sahu
1
Neden otomatik öneri için twitter'ın typeahead'i ( twitter.github.io/typeahead.js/examples ) kullanmıyorsunuz ?
— koppor

Yanıtlar:

83

Check out jquery-ui-ön yükleme alanı . BENİOKU'dan:

Twitter'ın Bootstrap'i 2011'den çıkan en sevdiğim projelerden biriydi, ancak bunu düzenli olarak kullandığım için iki şey istememe neden oldu:

JQuery UI ile yan yana çalışma yeteneği (bir dizi widget'ın görsel olarak kırılmasına neden olan bir şey) Bootstrap stillerini kullanarak jQuery UI widget'larını temaya alma yeteneği. JQuery kullanıcı arayüzünü sevmeme rağmen, ben (diğerleri gibi) biraz tarihli görünmek için mevcut temalardan bazılarını buluyorum. Umudum, bu temanın aynı hissedenler için iyi bir alternatif sağlamasıdır. Açıklığa kavuşturmak gerekirse, bu proje Twitter Önyükleme'yi değiştirmeyi amaçlamıyor veya böyle bir niyet taşımıyor. Yalnızca Bootstrap'in tasarımından esinlenerek jQuery UI uyumlu bir tema sağlar. Ayrıca, temanın yanında çalışmasını sağlayan yorumlanmış birkaç (küçük) bölüm içeren bir Bootstrap CSS sürümü sağlar.

— Sam Dolan
kaynak
62

sadece bunu güncellemek için, bootstrap v2 artık jquery ui ile çakışmıyor

https://github.com/twbs/bootstrap/issues/171

Düzenleme : @Freshblood olarak hala çelişen birkaç şey var. Ancak, başlangıçta gönderildiği gibi Twitter, bunun üzerinde çalıştıklarını ve özellikle v1 ile karşılaştırıldığında büyük ölçüde işe yaradığını ileri sürüyor.

— Eonasdan
kaynak
10
Bundan gerçekten emin misin? Hala jquery datepicker ile ilgili bir sorun görüyorum
— Freshblood
Bootstrap v2 ve jquery kullanıcı arayüzünü almanızı ve bunun sizin kodunuz olmadığını doğrulamak için boş bir test sayfası oluşturmanızı öneririm. Yeni sürümden bu yana sorun
— yaşamadım
1
Lütfen bu jquery ui datepicker jqueryui.com/demos/datepicker/#dropdown-month-year'ı kontrol edin . Bu ayarlarda görebileceğiniz gibi, tarih seçici açılır kutu öğesi içerir, bu nedenle bootstrap zaten tüm giriş öğelerini geçersiz kılar. Ancak bu ayarlarla tarih seçici kullanmazsanız herhangi bir sorun yoktur.
— Freshblood
1
Giriş öğesi içeren herhangi bir widget, twitter bootstrap css stilleriyle çakışacaktır.
— Freshblood
1
Olumsuz. Bootstrap'in düğme işlevleri , her ikisi de bir button()yöntem tanımladıkları için jQuery UI ile çalışmaz .
— BryanH
24

Gelecekte referans olması açısından (bu, Google'ın en iyi yanıt ATM'si olduğundan), jQuery UI'nin önyükleme işlemlerini veya özel stilinizi geçersiz kılmasını önlemek için, özel bir indirme oluşturmanız ve no-themetemayı seçmeniz gerekir . Bu, yalnızca jQuery UI'nin sıfırlamalarını içerecek ve çeşitli öğeler için önyükleme stilini aşırı yüklemeyecektir.

Biz oradayken, bazı jQuery UI bileşenlerinin (datepicker gibi) yerel bir önyükleme uygulaması vardır. Yerel önyükleme uygulamaları, önyükleme css sınıflarını, özniteliklerini ve düzenlerini kullanır, bu nedenle çerçevenin geri kalanıyla daha iyi bir entegrasyona sahip olmalıdır.

— T0xicCode
kaynak
Burada temasız bir tema görmüyorum: jqueryui.com/themeroller . Özledim mi yoksa artık orada mı?
— gaefan
3
jqueryui.com/download kullanmanız gereken bağlantıdır. Aşağıya kaydırın ve listeden "Tema Yok" u seçin.
— T0xicCode
3

Sınırlı tecrübemde ben de sorunlarla karşılaşıyorum. JQuery öğelerinin (düğmeler gibi) bootstrap CSS kullanılarak stilize edilebileceği anlaşılıyor. Ancak, bir JQuery UI sekmesi oluşturduğumda ve her sekmenin altına yalnızca bir önyükleme girişini (input-append sınıfını kullanarak) kilitlemek istediğimde sorunlar yaşıyorum, yalnızca ilk doğru oturuyor. Yani, JQuery sekmeleri + Bootstrap düğmeleri = muhtemelen değil.

— fluxcapacitor
kaynak
2

Bootstrap hala Jquery UI ile çalışmıyor, örneğin modal.Bootstrap güzel bir stile sahip ama Twitter'ın arkasında bir çerçeve olarak o kadar iyi değil.

— Lucian Povatanu
kaynak
2

Javascript ad alanı çakışmalarıyla karşılaşıyorsanız, Bootstrap'in noConflict()işlevini kullanarak jQuery UI'ye işlevsellik verebilirsiniz.

— user1618143
kaynak
2

Bu soru özellikle jQuery-UI autosuggest özelliğinden bahsetse de, soru başlığı daha geneldir: bootstrap 3 jQuery UI ile çalışır mı? JQUI tarih seçici (açılır takvim) özelliğiyle ilgili sorun yaşıyordum. Tarih seçici sorununu çözdüm ve çözümün diğer jQUI / BS sorunlarına yardımcı olacağını umuyorum.

Bugün önyükleme 3.3.7 ile çalışmak için en son jQueryUI (sürüm 1.12.1) veri seçicisini almakta zorlandım. Olan şey, takvimin görünmesi ama kapanmamasıdır.

JQUI ve BS ile ilgili bir sürüm sorunu olduğu ortaya çıktı. Bootstrap'in en son sürümünü kullanıyordum ve şu jQUI ve jQuery sürümlerine geçmem gerektiğini fark ettim:

jQueryUI - 1.9.2 (test edildi - çalışıyor)
jQuery - 1.9.1 veya 2.1.4 (test edildi - her ikisi de çalışıyor. Diğer sürümler işe yarayabilir, ancak bunlar çalışıyor.)
Bootstrap 3.3.7 (test edildi - çalışıyor)

Özel bir tema kullanmak istediğim için, özel bir jQUI indirmesi de oluşturdum (tüm etkileşimler, iletişim kutusu, ilerleme çubuğu ve kullanmadığım birkaç efekt gibi birkaç şeyi kaldırdım) ve "Cupertino" yu seçmeyi de sağladım altta temam olarak.

Onları şu şekilde kurdum:

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

İlgilenenler için CSS klasörü şuna benzer:

[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
kaynak
1

Yerel olarak saklamazsanız ve size sağladıkları bağlantıyı kullanmazsanız daha iyi bir performansa sahip olabilir. İstemci bazı durumlarda komut dosyalarını önceden önbelleğe almış olabilir. JQueryUI durumunda ise, gerekli olana kadar yüklememenizi tavsiye ederim. İkisi de simge durumuna küçültülmüştür, ancak konsolu çalıştırabilir ve ağ sekmesine bakabilir ve yüklenmesinin ne kadar sürdüğünü görebilirsiniz, başlangıçta indirildikten sonra önbelleğe alınacaktır, bu nedenle daha sonra endişelenmemelisiniz. evet ikisini de kullan ama bir CDN kullan

— andrei
kaynak
1

Evet ikisini de kullanabilirsiniz. js bootstrap from twitter jquery eklentilerinin bir koleksiyonudur. JQuery UI ile herhangi bir çakışma olmamalıdır.

Bant genişliği aşırı yüklemesiyle ilgili olarak, bu gerçekten tüm js dosyalarınızı yükleme isteklerini nasıl ele aldığınıza bağlıdır. Her dosya için istekte bulunmak üzere sunucuya birden çok istekte bulunmak istemiyorsanız, bunları birbirine ekleyin ve simge durumuna küçültün. Veya muhtemelen ihtiyacınız olmayan bazı js önyükleme eklentilerinden kurtulabilirsiniz. çok modüler.

— Benny Tjia
kaynak
4
Tüm JS'ler uygun şekilde isim alanlıdır, ancak endişelenmeniz gereken CSS çarpışmalarıdır: Bir Bootstrap sekmesine bir JUI widget'ı eklerseniz, hangisi önceliklidir?
— btown
Bootstrap'te kötü görünen sadece jQuery'nin CSS'si değil. Bootstrap, sık sık !importantkendimi sürekli olarak geçersiz kılmak ve düzeltmek zorunda bulduğum, bazen hacky kodla kapsamlı CSS değişiklikleri yapıyor . Bootstrap'tan nefret ediyorum ve en azından Bootstrap'ın sınıflarını kullanmayan öğelerle uğraşmayı bırakana kadar kullanımını engelliyorum. (Bu orijinal tasarımcının hatası değil - Twitter'ın orijinal geliştiricilerinin üzerinde çalıştıkları şeyin popüler bir kitaplık haline gelmesini beklediğinden şüpheliyim.)
— Michael Scheper
0

Jquery ui kullanarak geliştirdiğim bir sitem var, sadece gelecekteki geliştirme ve şekillendirme için önyüklemeyi takmaya çalıştım ama neredeyse her şeyi bozuyor.

Yani hayır uyumlu değiller.

— NimChimpsky
kaynak
0

Google'da jquery ui ve bootstrap.js üzerindeki en iyi sonuç bu olduğundan, bunu topluluk wiki olarak eklemeye karar verdim.

Ben kullanıyorum:

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

ve bir şekilde bootstrap.js'yi eklediğimde, jquery ui otomatik tamamlamanın açılır menüsünü devre dışı bırakıyor .

üç geçici çözümüm:

  • bootstrap.js'yi hariç tut
  • veya daha fazla yazı yazmak için lib
  • bootstrap.js'den bootstrap.min.js'ye geçme (tuhaf, ancak benim için çalıştı)
— JP Hellemons
kaynak
jquery kullanıcı arabirimi önyükleme kombinasyonu, araç ipucunu ve tarih seçici de devre dışı bırakır.
— Vipul Hadiya
-3

Data-role = "none", birlikte çalışmalarını sağlamanın anahtarıdır. Bootstrap'in dokunmasını, ancak jquery mobile'ın göz ardı etmesini istediğiniz öğelere uygulayabilirsiniz. bunun gibi input type = "text" class = "form-control" placeholder = "Ara" data-role = "yok"

— Dinesh Khetarpal
kaynak
1
bu soru bootstrap ve jquery-ui hakkındaydı, jquery mobile değil
— TJ
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.