Tôi có thể sử dụng Twitter Bootstrap và jQuery UI cùng lúc không?

Tôi đang sử dụng Twitter Bootstrap và tôi muốn sử dụng "tự động đề xuất" không có sẵn trong Bootstrap, trong khi giao diện người dùng jQuery có các phương pháp riêng để tự động đề xuất.

Tôi có thể sử dụng cả hai không? Nó sẽ làm quá tải băng thông?

Kiểm tra jquery-ui-bootstrap . Từ README:

Bootstrap của Twitter là một trong những dự án yêu thích của tôi ra mắt vào năm 2011, nhưng khi sử dụng nó thường xuyên, nó khiến tôi muốn hai điều:

Khả năng làm việc song song với giao diện người dùng jQuery (điều gì đó khiến một số tiện ích con bị hỏng một cách trực quan) Khả năng tạo chủ đề cho các tiện ích giao diện người dùng jQuery bằng cách sử dụng kiểu Bootstrap. Trong khi tôi yêu thích giao diện người dùng jQuery, tôi (cũng như những người khác) tìm thấy một số chủ đề hiện tại trông hơi cũ. Tôi hy vọng rằng chủ đề này cung cấp một giải pháp thay thế phù hợp cho những người khác cảm thấy như vậy. Để làm rõ, dự án này không nhằm mục đích hoặc có ý định thay thế Twitter Bootstrap. Nó chỉ cung cấp một chủ đề tương thích với giao diện người dùng jQuery được lấy cảm hứng từ thiết kế của Bootstrap. Nó cũng cung cấp một phiên bản Bootstrap CSS với một vài phần (nhỏ) được nhận xét cho phép chủ đề hoạt động song song với nó.

chỉ để cập nhật điều này, bootstrap v2 không còn xung đột với jquery ui

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

Chỉnh sửa : với tư cách là @Freshblood, có một số điều vẫn còn xung đột. Tuy nhiên, như Twitter đã đăng ban đầu cho thấy rằng họ đang làm việc này và nó phần lớn hoạt động, đặc biệt so với v1.

Để tham khảo trong tương lai (vì đây là máy ATM trả lời hàng đầu của google), để ngăn giao diện người dùng jQuery ghi đè bootstrap hoặc kiểu tùy chỉnh của bạn, bạn cần tạo bản tải xuống tùy chỉnh và chọn no-themechủ đề. Điều đó sẽ chỉ bao gồm các thiết lập lại của jQuery UI và không làm quá tải kiểu của bootstrap cho các phần tử khác nhau.

Trong khi chúng ta đang ở đó, một số thành phần jQuery UI (chẳng hạn như datepicker) có triển khai bootstrap gốc. Các triển khai bootstrap gốc sẽ sử dụng các lớp, thuộc tính và bố cục của bootstrap css, do đó nên có sự tích hợp tốt hơn với phần còn lại của khung.

Với kinh nghiệm hạn chế của mình, tôi cũng đang gặp phải các vấn đề. Có vẻ như các phần tử JQuery (chẳng hạn như các nút) có thể được tạo kiểu bằng cách sử dụng bootstrap CSS. Tuy nhiên, tôi đang gặp sự cố khi tạo tab giao diện người dùng JQuery và muốn khóa đầu vào chỉ bootstrap (sử dụng lớp đầu vào-chắp thêm) ở cuối mỗi tab, chỉ đầu tiên mới nằm đúng. Vì vậy, các tab JQuery + các nút Bootstrap = có lẽ là không.

Bootstrap vẫn không hoạt động với giao diện người dùng Jquery, ví dụ như modal.Bootstrap có phong cách đẹp nhưng với tư cách là một khuôn khổ với Twitter đằng sau thì không tốt.

Nếu bạn gặp phải xung đột không gian tên javascript, bạn có thể sử dụng noConflict()chức năng của Bootstrap để nhường chức năng cho giao diện người dùng jQuery.

Mặc dù câu hỏi này đề cập cụ thể đến tính năng jQuery-UI autosuggest, nhưng tiêu đề câu hỏi sẽ chung chung hơn: bootstrap 3 có hoạt động với jQuery UI không? Tôi gặp sự cố với tính năng chọn ngày jQUI (lịch bật lên). Tôi đã giải quyết vấn đề trình chọn ngày và hy vọng giải pháp sẽ giúp giải quyết các vấn đề jQUI / BS khác.

Hôm nay tôi đã gặp khó khăn khi tải bộ chọn ngày jQueryUI (ver 1.12.1) mới nhất để hoạt động với bootstrap 3.3.7. Điều đã xảy ra là lịch sẽ hiển thị nhưng nó sẽ không đóng lại.

Hóa ra là vấn đề phiên bản với jQUI và BS. Tôi đang sử dụng phiên bản Bootstrap mới nhất và nhận thấy rằng tôi phải hạ cấp xuống các phiên bản jQUI và jQuery sau:

jQueryUI - 1.9.2 (đã thử nghiệm - hoạt động)
jQuery - 1.9.1 hoặc 2.1.4 (đã thử nghiệm - cả hai đều hoạt động. Phiên bản khác có thể hoạt động, nhưng các phiên bản này hoạt động.)
Bootstrap 3.3.7 (đã thử nghiệm - hoạt động)

Bởi vì tôi muốn sử dụng một chủ đề tùy chỉnh, tôi cũng đã tạo một bản tải xuống tùy chỉnh của jQUI (đã loại bỏ một số thứ như tất cả các tương tác, hộp thoại, thanh tiến trình và một số hiệu ứng mà tôi không sử dụng) - và đảm bảo chọn "Cupertino" ở dưới cùng làm chủ đề của tôi.

Tôi đã cài đặt chúng do đó:

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

Đối với những người quan tâm, thư mục CSS trông giống như sau:

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

Nếu không lưu trữ cục bộ và sử dụng liên kết mà họ cung cấp, bạn có thể có hiệu suất được cải thiện. Máy khách có thể có các tập lệnh đã được lưu trong bộ nhớ cache trong một số trường hợp. Đối với trường hợp của jQueryUI, tôi khuyên bạn không nên tải nó cho đến khi cần thiết. Cả hai đều được thu nhỏ, nhưng bạn có thể kích hoạt bảng điều khiển và nhìn vào tab mạng và xem mất bao lâu để tải nó, sau khi tải xuống ban đầu, nó sẽ được lưu vào bộ nhớ đệm, vì vậy bạn không nên lo lắng sau đó. vâng sử dụng cả hai nhưng sử dụng CDN

Có, bạn có thể sử dụng cả hai. js bootstrap từ twitter là một bộ sưu tập các plugin jquery. Sẽ không có bất kỳ xung đột nào với giao diện người dùng jQuery.

Về quá tải băng thông, nó thực sự phụ thuộc vào cách bạn xử lý các yêu cầu tải tất cả các tệp js của bạn. nếu bạn thực sự không muốn thực hiện nhiều yêu cầu đến máy chủ để yêu cầu cho mỗi tệp, chỉ cần nối chúng lại với nhau và thu nhỏ. Hoặc bạn có thể loại bỏ một số plugin js bootstrap mà bạn không cần. nó rất mô-đun.

Kendo UI có một chủ đề bootstrap đẹp ở đây và một bộ giao diện người dùng web có thể so sánh với jquery-UI. Họ cũng có một phiên bản mã nguồn mở hoạt động độc đáo với chủ đề.

Tôi có trang web được phát triển bằng cách sử dụng jquery ui, tôi chỉ cố gắng cắm bootstrap để phát triển và tạo kiểu trong tương lai nhưng nó hầu như hỏng mọi thứ.

Vì vậy, không chúng không tương thích.

Vì đây là kết quả hàng đầu trên google về jquery ui và bootstrap.js nên tôi quyết định thêm nó làm wiki cộng đồng.

Tôi đang dùng:

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

và bằng cách nào đó khi tôi đưa vào bootstrap.js, nó sẽ vô hiệu hóa trình đơn thả xuống của trình tự động điền jquery ui .

ba cách giải quyết của tôi:

• loại trừ bootstrap.js
• trở lên đối với lib đánh máy
• chuyển từ bootstrap.js sang bootstrap.min.js (lạ, nhưng hiệu quả với tôi)

Data-role = "none" là chìa khóa để làm cho chúng hoạt động cùng nhau. Bạn có thể áp dụng cho các phần tử bạn muốn bootstrap chạm vào nhưng jquery mobile bỏ qua. như kiểu đầu vào này = "text" class = "form-control" placeholder = "Tìm kiếm" data-role = "none"