क्या मैं एक ही समय में ट्विटर बूटस्ट्रैप और jQuery UI का उपयोग कर सकता हूं?

Question

मैं ट्विटर बूटस्ट्रैप का उपयोग कर रहा हूं और मैं एक "ऑटो-सुझाव" का उपयोग करना चाहता हूं जो बूटस्ट्रैप में उपलब्ध नहीं है, जबकि ऑटो-सुझाव के लिए jQuery UI के अपने तरीके हैं।

क्या मैं दोनों का उपयोग कर सकता हूं? क्या यह बैंडविड्थ को अधिभारित करेगा?

Comments

jQuery UI 6.6k (छोटा और gzipped) है, जब तक कि आपके बैंडविड्थ को kb में नहीं मापा जाता है, यह समस्या नहीं होगी।

— ब्रायनएच

जब से मैंने यह प्रश्न पोस्ट किया है, चीजें बदल गई हैं। अब, बहुत सारे बूटस्ट्रैप प्लगइन्स हैं जो मौजूदा jQuery यूआई प्लगइन्स को बदलने के लिए पर्याप्त हैं। अब, मैं बूटस्ट्रैप का उपयोग बूटस्ट्रैप के लिए बने प्लगइन्स के साथ करता हूं।

— साकेत साहू १६'१३ को

ऑटो सुझाव के लिए ट्विटर के टाइपहेड ( twitter.github.io/typeahead.js/examples ) का उपयोग क्यों नहीं किया जाता है?

— कूपर

Answer 1

की जाँच करें jQuery-ui-बूटस्ट्रैप । README से:

ट्विटर का बूटस्ट्रैप 2011 से बाहर आने के लिए मेरी पसंदीदा परियोजनाओं में से एक था, लेकिन नियमित रूप से इसका इस्तेमाल करने से मुझे दो चीजों की चाहत हुई:

JQuery UI के साथ साइड-बाय-साइड काम करने की क्षमता (ऐसा कुछ जिसके कारण नेत्रहीन रूप से तोड़ने के लिए विगेट्स की संख्या होती है) बूटस्ट्रैप शैलियों का उपयोग करके jQuery UI विजेट को थीम करने की क्षमता। जब भी मुझे jQuery UI पसंद आता है, मैं (अन्य लोगों की तरह) थोड़े दिनांक देखने के लिए कुछ वर्तमान थीम ढूंढता हूं। मेरी आशा है कि यह विषय दूसरों के लिए एक अच्छा विकल्प प्रदान करता है जो समान महसूस करते हैं। स्पष्ट करने के लिए, यह परियोजना ट्विटर बूटस्ट्रैप को बदलने का लक्ष्य या उद्देश्य नहीं रखती है। यह बूटस्ट्रैप के डिजाइन से प्रेरित एक jQuery यूआई-संगत विषय प्रदान करता है। यह बूटस्ट्रैप सीएसएस का एक संस्करण भी प्रदान करता है जिसमें कुछ (छोटे) अनुभागों की टिप्पणी की गई है जो थीम को साथ-साथ काम करने में सक्षम बनाते हैं।

Answer 2

बस इसे अद्यतन करने के लिए, बूटस्ट्रैप v2 अब jquery ui के साथ संघर्ष नहीं करता है

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

संपादित करें : @Freshblood के रूप में कुछ चीजें हैं जो अभी भी संघर्ष कर रही हैं। हालांकि, जैसा कि मूल रूप से पोस्ट किए गए ट्विटर का सुझाव है कि वे इस पर काम कर रहे हैं और यह काफी हद तक काम करता है, विशेष रूप से v1 की तुलना में।

Comments

क्या आप वाकई इसके बारे में निश्चित हैं? फिर भी मुझे jquery datepicker

— Freshblood के

मेरा सुझाव है कि आप बूटस्ट्रैप v2 और jquery ui लें और यह सत्यापित करने के लिए एक खाली परीक्षण पृष्ठ बनाएं कि यह आपका कोड नहीं है। मुझे नए संस्करण के बाद से कोई समस्या नहीं हुई है

— Eonasdan

कृपया इस jquery ui datepicker jqueryui.com/demos/datepicker/#dropdown-month-year को देखें । जैसा कि आप इस सेटिंग के साथ देख सकते हैं डेटपिकर में ड्रॉपडाउन तत्व शामिल है इसलिए बूटस्ट्रैप पहले से ही सभी इनपुट तत्वों को ओवरराइड करता है। लेकिन कोई समस्या नहीं है अगर आप इन सेटिंग्स के साथ डेटकिकर का उपयोग नहीं करते हैं।

— फ्रेशबल्ड

किसी भी विजेट में इनपुट तत्व शामिल है ट्विटर बूटस्ट्रैप सीएसएस शैलियों के साथ संघर्ष होगा।

— फ्रेशबल्ड

ख़राब। बूटस्ट्रैप के बटन फ़ंक्शन jQuery UI के साथ काम नहीं करते हैं क्योंकि वे दोनों एक button()विधि को परिभाषित करते हैं ।

— ब्रायनएच

Answer 3

भविष्य के संदर्भ के लिए (चूंकि यह Google का शीर्ष उत्तर एटीएम है), jQuery UI को बूटस्ट्रैप या आपके कस्टम शैली को ओवरराइड करने से रोकने के लिए, आपको एक कस्टम डाउनलोड बनाने और no-themeथीम का चयन करने की आवश्यकता है । इसमें केवल jQuery यूआई के रीसेट शामिल होंगे, और विभिन्न तत्वों के लिए बूटस्ट्रैप की शैली को अधिभारित नहीं किया जाएगा।

जब हम इस पर होते हैं, कुछ jQuery यूआई घटकों (जैसे कि डेटपिकर) में एक मूल बूटस्ट्रैप कार्यान्वयन होता है। मूल बूटस्ट्रैप कार्यान्वयन बूटस्ट्रैप सीएसएस वर्गों, विशेषताओं और लेआउट का उपयोग करेगा, इसलिए बाकी ढांचे के साथ बेहतर एकीकरण होना चाहिए।

Comments

मुझे यहाँ कोई थीम-थीम नहीं दिख रहा है: jqueryui.com/themeroller । क्या मुझे यह याद आया या यह अब नहीं है?

— गफान १६'१४ को २३:२०

jqueryui.com/download वह लिंक है जिसका आपको उपयोग करना चाहिए। नीचे स्क्रॉल करें और सूची में "नो थीम" चुनें।

— T0xicCode 16

Answer 4

अपने सीमित अनुभव में मैं मुद्दों पर भी आ रहा हूं। ऐसा प्रतीत होता है कि JQuery तत्व (जैसे बटन) बूटस्ट्रैप CSS का उपयोग करके स्टाइल किए जा सकते हैं। हालाँकि, मैं एक JQuery यूआई टैब बनाने और प्रत्येक टैब के नीचे केवल इनपुट (इनपुट-एपेंड क्लास का उपयोग करके) बूटस्ट्रैप को लॉक करने के लिए मुद्दों का सामना कर रहा हूं, केवल पहला ही सही बैठता है। तो, JQuery टैब + बूटस्ट्रैप बटन = शायद नहीं।

Answer 5

बूटस्ट्रैप अभी भी Jquery UI के साथ काम नहीं करता है, उदाहरण के लिए modal.Bootstrap में अच्छी शैली है, लेकिन उस अच्छे के पीछे ट्विटर के साथ एक रूपरेखा के रूप में।

Answer 6

यदि आप जावास्क्रिप्ट नाम स्थान टकराव में चल रहे हैं, तो आप बूटस्ट्रैप के noConflict()फ़ंक्शन का उपयोग करके इसे jQuery UI में कार्यशीलता बना सकते हैं ।

Answer 7

हालाँकि इस प्रश्न में विशेष रूप से jQuery-UI ऑटोसुगेस्ट फीचर का उल्लेख है, प्रश्न शीर्षक अधिक सामान्य है: क्या बूटस्टैप 3 ____ यूआई के साथ काम करता है? मुझे jQUI डेटपिकर (पॉप-अप कैलेंडर) फीचर से परेशानी हो रही थी। मैंने डेटपिकर समस्या को हल किया है और आशा है कि समाधान अन्य jQUI / BS मुद्दों के साथ मदद करेगा।

मुझे बूटस्ट्रैप 3.3.7 के साथ काम करने के लिए नवीनतम jQueryUI (ver 1.12.1) डेटपिकर प्राप्त करने में आज मुश्किल समय था। क्या हो रहा था कि कैलेंडर प्रदर्शित होगा लेकिन यह बंद नहीं होगा।

JQUI और BS के साथ एक संस्करण समस्या बन गई। मैं बूटस्ट्रैप के नवीनतम संस्करण का उपयोग कर रहा था, और पाया कि मुझे jQUI और jQuery के इन संस्करणों में अपग्रेड करना पड़ा:

jQueryUI - 1.9.2 (परीक्षण - काम करता है)
jQuery - 1.9.1 या 2.1.4 (परीक्षण किया गया - दोनों काम। अन्य छंद काम कर सकते हैं, लेकिन ये काम करते हैं।)
बूटस्ट्रैप 3.3.7 (परीक्षण - काम करता है)

क्योंकि मैं एक कस्टम थीम का उपयोग करना चाहता था, इसलिए मैंने jQUI का एक कस्टम डाउनलोड भी बनाया (कुछ चीजों को हटा दिया, जैसे सभी इंटरैक्शन, डायलॉग, प्रगतिबार और कुछ प्रभाव जो मैं उपयोग नहीं करता) - और "क्यूपर्टिनो" का चयन करना सुनिश्चित किया नीचे मेरे विषय के रूप में।

मैंने उन्हें इस प्रकार स्थापित किया:

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

रुचि रखने वालों के लिए, सीएसएस फ़ोल्डर इस तरह दिखता है:

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

Answer 8

यदि वह इसे स्थानीय रूप से संग्रहीत नहीं करता है और लिंक का उपयोग करता है तो वे आपको एक बेहतर प्रदर्शन दे सकते हैं। क्लाइंट के पास कुछ मामलों में पहले से रखी गई स्क्रिप्ट हो सकती हैं। JQueryUI के मामले के लिए मैं इसे आवश्यक नहीं होने तक लोड नहीं करने की सलाह दूंगा। वे दोनों कम से कम हैं, लेकिन आप कंसोल को आग लगा सकते हैं और नेटवर्क टैब को देख सकते हैं और देख सकते हैं कि इसे लोड करने में कितना समय लगता है, एक बार इसे शुरू में डाउनलोड करने के बाद इसे कैश किया जाएगा ताकि आपको बाद में चिंता न हो। मेरा निष्कर्ष होगा हाँ उन दोनों का उपयोग करें, लेकिन CDN का उपयोग करें

Answer 9

हाँ आप दोनों का उपयोग कर सकते हैं। ट्विटर से js बूटस्ट्रैप jquery प्लगइन्स का एक संग्रह है। वहाँ jQuery UI के साथ किसी भी संघर्ष नहीं होना चाहिए।

बैंडविड्थ अधिभार के बारे में, यह वास्तव में इस बात पर निर्भर करता है कि आप अपनी सभी js फ़ाइलों को लोड करने के अनुरोधों को कैसे संभालते हैं। यदि आप वास्तव में सर्वर से प्रत्येक फ़ाइल के लिए अनुरोध करने के लिए कई अनुरोध नहीं करना चाहते हैं, तो बस उन्हें एक साथ जोड़ दें और कम से कम करें। या आप शायद कुछ js बूटस्ट्रैप प्लगइन्स से छुटकारा पा सकते हैं जिनकी आपको आवश्यकता नहीं है। यह बहुत मॉड्यूलर है।

Comments

सभी JS को ठीक से नामांकित किया गया है, लेकिन यह CSS टकराव है, जिसके बारे में आपको चिंता करने की आवश्यकता है: यदि आप बूटस्ट्रैप टैब में JUI विजेट शामिल करते हैं, तो पूर्वता क्या है?

— 3

यह सिर्फ jQuery का सीएसएस नहीं है जो बूटस्ट्रैप में खराब दिखता है। बूटस्ट्रैप अक्सर सीएसएस परिवर्तनों को व्यापक बनाता है, अक्सर !important, मैं खुद को लगातार ओवरराइड करने और ठीक करने के लिए पाता हूं, कभी-कभी हैकी कोड के साथ। मैं बूटस्ट्रैप से नफरत करता हूं और इसके उपयोग को हतोत्साहित करता हूं, कम से कम जब तक यह उन तत्वों के साथ मिलाना बंद नहीं करता है जो बूटस्ट्रैप की कक्षाओं का उपयोग नहीं करते हैं। (यह मूल डिजाइनर की गलती नहीं है - मुझे संदेह है कि ट्विटर के मूल देवों को उम्मीद थी कि वे एक लोकप्रिय पुस्तकालय बनने के लिए क्या काम कर रहे थे।)

— माइकल शीशेर

Answer 10

केंडो यूआई में एक अच्छा बूटस्ट्रैप थीम है और वेब यूआई का एक सेट है जो jquery-UI के बराबर है। उनके पास एक ओपन सोर्स वर्जन भी है जो थीम के साथ अच्छी तरह से काम करता है।

Answer 11

मैंने jquery ui का उपयोग करके साइट विकसित की है, मैंने अभी भविष्य के विकास और स्टाइल के लिए बूटस्ट्रैप में प्लग करने की कोशिश की है लेकिन यह लगभग सब कुछ तोड़ देता है।

इसलिए नहीं, वे संगत नहीं हैं।

Answer 12

क्योंकि यह jquery ui और bootstrap.js पर Google पर शीर्ष परिणाम है मैंने इसे सामुदायिक विकि के रूप में जोड़ने का निर्णय लिया है।

मै इस्तेमाल कर रहा हूँ:

• बूटस्ट्रैप v3.2.0
• jQuery-2.1.0
• jQuery-ui-1.10.3

और किसी तरह जब मैं बूटस्ट्रैप शामिल करता हूं। तो यह jquery यूआई स्वतः पूर्ण की गिरावट को निष्क्रिय करता है ।

मेरे तीन वर्कअराउंड:

• bootstrap.js को बाहर करें
• या अधिक टाइप करने के लिए lib
• bootstrap.js से bootstrap.min.js (अजीब, लेकिन मेरे लिए काम किया) पर जाएँ

Comments

jquery ui बूटस्ट्रैप का संयोजन टूलटिप और डेटापिक को भी अक्षम करता है।

— विपुल हादिया

Answer 13

डेटा-भूमिका = "कोई नहीं" उन्हें एक साथ काम करने की कुंजी है। आप उन तत्वों पर लागू कर सकते हैं जिन्हें आप बूटस्ट्रैप को छूने के लिए चाहते हैं लेकिन अनदेखा करने के लिए jquery मोबाइल। यह इनपुट प्रकार = "टेक्स्ट" क्लास = "फॉर्म-कंट्रोल" प्लेसहोल्डर = "खोज" डेटा-भूमिका = "कोई नहीं"

Comments

यह सवाल बूटस्ट्रैप और jquery-ui के बारे में था, न कि jquery मोबाइल पर

— TJ