ฉันสามารถใช้ Twitter Bootstrap และ jQuery UI พร้อมกันได้หรือไม่

108

ฉันใช้ Twitter Bootstrap และต้องการใช้ "แนะนำอัตโนมัติ" ซึ่งไม่มีใน Bootstrap ในขณะที่ jQuery UI มีวิธีการแนะนำอัตโนมัติของตัวเอง

ฉันสามารถใช้ทั้งสองอย่างได้หรือไม่? แบนด์วิธมันจะเกินไหม

jquery-ui  twitter-bootstrap 
— สันเกตุซาหู่
แหล่งที่มา
6
jQuery UI คือ 6.6k (minified และ gzipped) ดังนั้นหากคุณไม่ได้วัดแบนด์วิดท์เป็น kb ก็จะไม่มีปัญหา
— BryanH
4
มีการเปลี่ยนแปลงตั้งแต่ฉันโพสต์คำถามนี้ ตอนนี้มีปลั๊กอิน Bootstrap จำนวนมากซึ่งดีพอที่จะแทนที่ปลั๊กอิน jQuery UI ที่มีอยู่ได้ ตอนนี้ฉันใช้ Bootstrap กับปลั๊กอินที่สร้างขึ้นสำหรับ bootstrap
— Sanket Sahu
1
ทำไมไม่ใช้ typeahead ของ twitter ( twitter.github.io/typeahead.js/examples ) เพื่อแนะนำอัตโนมัติ
— koppor

คำตอบ:

83

ตรวจสอบjQuery-UI-บูต จาก README:

Bootstrap ของ Twitter เป็นหนึ่งในโครงการโปรดของฉันที่จะออกมาในปี 2554 แต่การใช้งานเป็นประจำทำให้ฉันต้องการสองสิ่ง:

ความสามารถในการทำงานแบบเคียงข้างกันกับ jQuery UI (สิ่งที่ทำให้วิดเจ็ตจำนวนมากแตกภาพ) ความสามารถในการจัดธีมวิดเจ็ต jQuery UI โดยใช้สไตล์ Bootstrap ในขณะที่ฉันชอบ jQuery UI แต่ฉัน (เหมือนคนอื่น ๆ ) พบว่าธีมปัจจุบันบางส่วนดูล้าสมัยไปหน่อย ความหวังของฉันคือธีมนี้เป็นทางเลือกที่ดีสำหรับคนอื่นที่รู้สึกเหมือนกัน เพื่อความชัดเจนโครงการนี้ไม่ได้มุ่งหวังหรือตั้งใจที่จะแทนที่ Twitter Bootstrap เป็นเพียงชุดรูปแบบที่เข้ากันได้กับ jQuery UI ที่ได้รับแรงบันดาลใจจากการออกแบบของ Bootstrap นอกจากนี้ยังมี Bootstrap CSS เวอร์ชันที่มีบางส่วน (เล็กน้อย) ที่แสดงความคิดเห็นซึ่งทำให้ธีมสามารถทำงานร่วมกันได้

— แซมโดแลน
แหล่งที่มา
62

เพียงแค่อัปเดตสิ่งนี้ bootstrap v2 จะไม่ขัดแย้งกับ jquery ui อีกต่อไป

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

แก้ไข : เนื่องจาก @Freshblood มีบางสิ่งที่ยังขัดแย้งกัน อย่างไรก็ตามตามที่โพสต์ครั้งแรก Twitter แสดงให้เห็นว่าพวกเขากำลังทำงานอยู่และส่วนใหญ่ใช้งานได้ดีเมื่อเทียบกับ v1

— Eonasdan
แหล่งที่มา
10
คุณแน่ใจจริงๆหรือ? ฉันยังคงพบปัญหาเกี่ยวกับ jquery datepicker
— Freshblood
ฉันขอแนะนำให้คุณใช้ bootstrap v2 และ jquery ui และสร้างหน้าทดสอบที่ว่างเปล่าเพื่อตรวจสอบว่าไม่ใช่รหัสของคุณ ฉันไม่มีปัญหาตั้งแต่เวอร์ชันใหม่
— Eonasdan
1
โปรดตรวจสอบ jquery ui datepicker jqueryui.com/demos/datepicker/#dropdown-month-yearนี้ อย่างที่คุณเห็นในการตั้งค่า datepicker นี้มีองค์ประกอบ dropdownbox ดังนั้น bootstrap จึงแทนที่องค์ประกอบอินพุตทั้งหมดแล้ว แต่จะไม่มีปัญหาใด ๆ หากคุณไม่ได้ใช้ datepicker กับการตั้งค่าเหล่านี้
— Freshblood
1
วิดเจ็ตใด ๆ ที่มีองค์ประกอบอินพุตจะขัดแย้งกับสไตล์ css ของ twitter bootstrap
— Freshblood
1
เชิงลบ ฟังก์ชันปุ่มของ Bootstrap ใช้ไม่ได้กับ jQuery UIเนื่องจากทั้งคู่กำหนดbutton()วิธีการ
— ไบรอัน
24

สำหรับการอ้างอิงในอนาคต (เนื่องจากนี่คือ ATM คำตอบอันดับต้น ๆ ของ Google) เพื่อป้องกันไม่ให้ jQuery UI ลบล้าง bootstrap หรือสไตล์ที่คุณกำหนดเองคุณต้องสร้างการดาวน์โหลดที่กำหนดเองและเลือก no-themeธีม ซึ่งจะรวมเฉพาะการรีเซ็ตของ jQuery UI เท่านั้นและไม่ใช้สไตล์ bootstrap มากเกินไปสำหรับองค์ประกอบต่างๆ

ในขณะที่เรากำลังดำเนินการอยู่ส่วนประกอบ jQuery UI บางตัว (เช่น datepicker) มีการใช้งาน bootstrap แบบเนทีฟ การใช้งาน bootstrap แบบเนทีฟจะใช้คลาส bootstrap css แอตทริบิวต์และเลย์เอาต์ดังนั้นควรมีการผสานรวมที่ดีกว่ากับส่วนที่เหลือของเฟรมเวิร์ก

— T0xicCode
แหล่งที่มา
ฉันไม่เห็นรูปแบบที่ไม่มีรูปแบบที่นี่: jqueryui.com/themeroller ฉันพลาดไปแล้วหรือไม่มีแล้ว?
— gaefan
3
jqueryui.com/downloadคือลิงก์ที่คุณควรใช้ เลื่อนไปที่ด้านล่างและเลือก "ไม่มีธีม" ในรายการ
— T0xicCode
3

จากประสบการณ์ที่ จำกัด ของฉันฉันก็เจอปัญหาเช่นกัน ดูเหมือนว่าองค์ประกอบ JQuery (เช่นปุ่ม) สามารถจัดสไตล์ได้โดยใช้ bootstrap CSS อย่างไรก็ตามฉันกำลังประสบปัญหาในการสร้างแท็บ UI ของ JQuery และต้องการล็อกอินพุตเฉพาะบูตสแตรป (โดยใช้คลาสอินพุตต่อท้าย) ที่ด้านล่างของแต่ละแท็บโดยเฉพาะแท็บแรกเท่านั้นที่อยู่อย่างถูกต้อง ดังนั้นแท็บ JQuery + ปุ่ม Bootstrap = อาจไม่ใช่

— ฟลักซ์คาปาซิเตอร์
แหล่งที่มา
2

หากคุณกำลังพบกับการชนกันของเนมสเปซ javascript คุณสามารถใช้noConflict()ฟังก์ชันของ Bootstrap เพื่อยกระดับฟังก์ชันให้กับ jQuery UI

— user1618143
แหล่งที่มา
2

แม้ว่าคำถามนี้จะกล่าวถึงคุณลักษณะการแนะนำอัตโนมัติ jQuery-UI โดยเฉพาะ แต่ชื่อคำถามนั้นกว้างกว่า: bootstrap 3 ทำงานร่วมกับ jQuery UI ได้หรือไม่ ฉันมีปัญหากับคุณสมบัติ jQUI datepicker (ปฏิทินป๊อปอัพ) ฉันแก้ปัญหา datepicker และหวังว่าวิธีแก้ปัญหาจะช่วยแก้ปัญหา jQUI / BS อื่น ๆ

วันนี้ฉันมีช่วงเวลาที่ยากลำบากในการรับ jQueryUI (เวอร์ชัน 1.12.1) ล่าสุดเพื่อทำงานกับ bootstrap 3.3.7 สิ่งที่เกิดขึ้นคือปฏิทินจะแสดง แต่จะไม่ปิด

กลายเป็นปัญหาเวอร์ชันกับ jQUI และ BS ฉันใช้ Bootstrap เวอร์ชันล่าสุดและพบว่าฉันต้องดาวน์เกรดเป็น jQUI และ jQuery เวอร์ชันเหล่านี้:

jQueryUI - 1.9.2 (ทดสอบ - ใช้งานได้)
jQuery - 1.9.1 หรือ 2.1.4 (ทดสอบแล้ว - ทั้งสองทำงาน Vers อื่น ๆ อาจใช้งานได้ แต่ใช้งานได้)
Bootstrap 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 จะมีลักษณะดังนี้:

[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
แหล่งที่มา
1

หากไม่ได้จัดเก็บไว้ในเครื่องและใช้ลิงก์ที่มีให้คุณอาจมีการปรับปรุงประสิทธิภาพไคลเอนต์อาจมีสคริปต์ที่แคชไว้แล้วในบางกรณี สำหรับกรณีของ jQueryUI ฉันไม่แนะนำให้โหลดจนกว่าจะจำเป็น ทั้งคู่ถูกย่อให้เล็กที่สุด แต่คุณสามารถเปิดคอนโซลและดูที่แท็บเครือข่ายและดูว่าต้องใช้เวลานานแค่ไหนในการโหลดเมื่อดาวน์โหลดครั้งแรกระบบจะแคชดังนั้นคุณไม่ควรกังวลในภายหลังข้อสรุปของฉันคือ ใช่ใช้ทั้งคู่ แต่ใช้ CDN

— Andrei
แหล่งที่มา
1

ใช่คุณสามารถใช้ได้ทั้งสองอย่าง js bootstrap จาก twitter เป็นชุดปลั๊กอิน jquery shohuld ไม่มีความขัดแย้งใด ๆ กับ jQuery UI

เกี่ยวกับการโอเวอร์โหลดแบนด์วิดท์นั้นขึ้นอยู่กับว่าคุณจัดการกับคำขอโหลดไฟล์ js ทั้งหมดของคุณอย่างไร หากคุณไม่ต้องการส่งคำขอหลายรายการไปยังเซิร์ฟเวอร์เพื่อขอไฟล์แต่ละไฟล์เพียงแค่ต่อท้ายเข้าด้วยกันและย่อให้เล็กสุด หรือคุณอาจกำจัดปลั๊กอิน bootstrap js บางตัวที่คุณไม่ต้องการได้ มันเป็นแบบแยกส่วนมาก

— Benny Tjia
แหล่งที่มา
4
JS ทั้งหมดมีการกำหนดเนมสเปซอย่างถูกต้อง แต่การชนกันของ CSS ที่คุณต้องกังวล: หากคุณรวมวิดเจ็ต JUI ในแท็บ Bootstrap สิ่งใดจะมีความสำคัญกว่า
— btown
ไม่ใช่แค่ CSS ของ jQuery เท่านั้นที่ดูแย่ใน Bootstrap Bootstrap ทำการเปลี่ยนแปลง CSS อย่างรวดเร็วซึ่งบ่อยครั้ง!importantที่ฉันพบว่าตัวเองต้องลบล้างและแก้ไขอยู่ตลอดเวลาบางครั้งก็ใช้รหัสแฮ็ก ฉันเกลียด Bootstrap และไม่สนับสนุนการใช้งานอย่างน้อยก็จนกว่ามันจะหยุดยุ่งกับองค์ประกอบที่ไม่ใช้คลาสของ Bootstrap (นี่ไม่ใช่ความผิดของนักออกแบบต้นฉบับ - ฉันสงสัยว่านักพัฒนาดั้งเดิมของ Twitter คาดหวังว่าพวกเขากำลังทำอะไรเพื่อให้กลายเป็นห้องสมุดยอดนิยม)
— Michael Scheper
0

ฉันมีไซต์ที่พัฒนาโดยใช้ jquery ui ฉันเพิ่งลองเสียบ bootstrap สำหรับการพัฒนาและการจัดแต่งทรงผมในอนาคต แต่มันแทบจะทุกอย่าง

จึงไม่เข้ากันไม่ได้

— คุณ NimChimpsky
แหล่งที่มา
0

เพราะนี่คือผลการค้นหาอันดับต้น ๆ ใน google บนjquery ui และ bootstrap.jsฉันจึงตัดสินใจเพิ่มสิ่งนี้เป็นวิกิชุมชน

ฉันใช้:

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

และเมื่อฉันรวม bootstrap.js มันจะปิดใช้งานดรอปดาวน์ของการเติมข้อความอัตโนมัติ jquery uiการเติมข้อความอัตโนมัติ

วิธีแก้ปัญหาสามประการของฉัน:

  • ไม่รวม bootstrap.js
  • หรือมากกว่าเพื่อพิมพ์หัว lib
  • ย้ายจาก bootstrap.js เป็น bootstrap.min.js (แปลก แต่ใช้ได้กับฉัน)
— JP Hellemons
แหล่งที่มา
การรวมกันของ jquery ui bootstrap ยังปิดการใช้งาน tooltip และ datepicker
— Vipul Hadiya
-3

data-role = "none" คือกุญแจสำคัญที่จะทำให้มันทำงานร่วมกันได้ คุณสามารถนำไปใช้กับองค์ประกอบที่คุณต้องการให้ bootstrap สัมผัสได้ แต่ jquery mobile จะเพิกเฉย เช่นประเภทอินพุตนี้ = "text" class = "form-control" placeholder = "Search" data-role = "none"

— Dinesh Khetarpal
แหล่งที่มา
1
คำถามนี้เกี่ยวกับ bootstrap และ jquery-ui ไม่ใช่ jquery mobile
— TJ
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.