Tìm hiểu về JQsuery – UI – Bootstrap và ứng dụng

Bootstrap là một trong những dự án ra mắt năm 2011 và được sử dụng thường xuyên làm cơ sở cho chiều dự án web-based. Tuy nhiên, khi sử dụng để thiết kế giao diện người dùng cho các dự án có nảy sinh một số vấn đề sau: Thứ nhất, chúng ta không chỉ muốn sử dụng jQuery UI cho sự phát triển các Widget mà còn muốn sử dụng nó cùng với Bootstrap. Bootstrap có một thiết kế trực quan tuyệt vời cho tất cả mọi thứ từ các nút bấm tới các tab và cung cấp cho chúng ta một giao diện cơ sở tuyệt vời mà chúng ta có thể lặp lại trên các dự án khác. Thứ hai, ta có thể biết, không có một chủ đề bootstrap có sẵn cho jQuery UI nhưng nếu thêm Bootstrap vào trong một trang, ta sẽ nhanh chóng thấy rằng một số kiểu CSS cho giao diện người dùng sẽ bị phá vỡ do xung đột. Đây không phải là lỗi của dự án Bootstrap, Bootstrap không được tạo ra để được sử dụng với giao diện người dùng jQuery, tuy nhiên, một giải pháp đã được đưa ra là thư viện Jquery UI Bootstrap.

jQuery UI Bootstrap là gì?

jQuery UI Bootstrap cung cấp một thư viện của thiết kế Twitter Bootstrap như một chủ đề cho jQuery UI có thể được áp dụng cho các widgets. Nó cũng bao gồm một phiên bản mới (sạch) của Bootstrap mà “có thể” được sử dụng cùng với các chủ đề cụ thể của jQuery UI mà không cần phải lo lắng về các xung đột CSS.

Như một minh chứng, tại sao không có một cái nhìn tại trang chủ của dự án? Cả hai vùng giới thiệu và các nút tải đang sử dụng Bootstrap làm giao diện trong khi mọi thứ khác là sử dụng một giao diện jQuery UI. Lợi ích của việc này là ta đang được sử dụng miễn phí tất cả mọi thứ từ Bootstrap để bố trí trang web của ta và các giao diện jQuery UI cho các widget tương tác. Đó là một giải pháp khá hữu ích.

Dự án này vẫn còn khá mới, nhưng ta đã có thể sử dụng một số thành phần (các nút, tập nút, thanh trượt ngang, các tab, cửa sổ modal, date-pickers) trong thiết kế với sự tự tin tất cả chúng làm việc cùng nhau. Một số tinh chỉnh vẫn đang được thực hiện cho những thứ như nút lệnh với các biểu tượng và các widgetcủa bên thứ ba và sẽ sớm có các phiên bản cải tiến mới.

Framework này hoạt động tốt trên các trình duyệt: Chrome 15+ (supports 13/14 too), Opera (stable + next), Firefox 5+, Safari 5+, IE 8+.

Đồ án này được trình bày trong 4 chương.

Chương 1: Giới thiệu về Jquery.

Chương 2: Trình bày về Jquery UI.

Chương 3: Đưa ra cách thức sử dụng và các vấn đề liên quan tới bootstrap CSS Framework.

Chương 4: Một số các ví dụ rất cơ bản cho việc thực thi kết hợp giữa JqueryUI và Bootstraps css Framework và cuối cùng là phần kết luận.

Mời các bạn quan tâm tìm hiểu đồ án cùng chủ đề “Tìm hiểu về JQsuery – UI – Bootstrap và ứng dụng” của tác giả Văn Thành Lộc tại đường link: http://lib.hpu.edu.vn/handle/123456789/20218