Giao diện người dùng jQuery và phân chia chủ đề Bootstrap

Question

Tôi có cả chủ đề jQuery UI và css Bootstrap 2.1 được liên kết với trang của tôi. Trong trường hợp tôi sử dụng các nút kiểu Bootstrap, không có văn bản nào được hiển thị trên chúng. Hóa ra đó là những dòng trong chủ đề jQuery UI của đang gây ra vấn đề:

.ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button { font-family: Verdana,Arial,sans-serif; font-size: 1em; }

Khi loại bỏ trong một công cụ gỡ lỗi, 1em không còn phôi văn bản nút là quá nhỏ mà nó là vô hình. Tôi đã chắc chắn rằng các Bootstrap.css trong likned sau này trong danh sách stylesheets để nó có nhiều giá trị hơn, nhưng defeiniciton của giao diện người dùng jQuery là cụ thể hơn. Làm thế nào tôi có thể preven dữ liệu jQuery UI css để ảnh hưởng đến các nút bootstrap của tôi?

Answer 1

Buttons, đặc biệt, là một vấn đề. Thực hiện nút của jQuery UI xung đột với Bootstrap. Nếu bạn muốn sử dụng chúng ở dạng chuẩn của họ, bạn có thể thêm những dòng sau vào trang của bạn, trước khi khởi tạo widget, để loại bỏ các mâu thuẫn:

var btn = $.fn.button.noConflict() // reverts $.fn.button to jqueryui btn 
$.fn.btn = btn // assigns bootstrap button functionality to $.fn.btn 

tôi đã chỉ được thử nghiệm này trong các trường hợp đơn giản, nhưng tôi đoán nó hoạt động nói chung. Cách tiếp cận được mô tả ở đây với các liên kết tham chiếu thích hợp:

http://www.dullsharpness.com/2013/04/29/resolve-jqueryui-and-twitter-bootstrap-button-conflict/

Answer 2

Bạn có thể kết hợp tốt nhất của cả hai thế giới với chủ đề này: http://addyosmani.github.com/jquery-ui-bootstrap