Bootstrap - Tổng quan về plugin
Các thành phần được thảo luận trong các chương trước dưới Layout Componentschỉ là sự khởi đầu. Bootstrap đi kèm với 12 plugin jQuery giúp mở rộng các tính năng và có thể thêm nhiều tương tác hơn vào trang web của bạn. Để bắt đầu với các plugin JavaScript của Bootstrap, bạn không cần phải là một nhà phát triển JavaScript nâng cao. Bằng cách sử dụng Bootstrap Data API, hầu hết các plugin có thể được kích hoạt mà không cần viết một dòng mã nào.
Các plugin Bootstrap có thể được đưa vào trang web của bạn ở hai dạng:
Individually- Sử dụng các tệp * .js riêng lẻ của Bootstrap . Một số plugin và thành phần CSS phụ thuộc vào các plugin khác. Nếu bạn bao gồm các plugin riêng lẻ, hãy đảm bảo kiểm tra các phần phụ thuộc này trong tài liệu.
Hoặc là compiled (all at once)- Sử dụng bootstrap.js hoặc minified bootstrap.min.js . Đừng cố gắng bao gồm cả hai, vì cả bootstrap.js và bootstrap.min.js đều chứa tất cả các plugin trong một tệp duy nhất.
Tất cả các plugin phụ thuộc vào jQuery. Vì vậy, jQuery phải được bao gồm trước các tệp plugin. Kiểm tra bower.json để xem phiên bản jQuery nào được hỗ trợ.
Thuộc tính dữ liệu
Tất cả các plugin Bootstrap đều có thể truy cập được bằng API dữ liệu đi kèm. Do đó, bạn không cần phải bao gồm một dòng JavaScript để gọi bất kỳ tính năng plugin nào.
Trong một số trường hợp, bạn có thể muốn tắt chức năng này của API dữ liệu. Nếu bạn cần tắt API dữ liệu, bạn có thể hủy liên kết các thuộc tính bằng cách thêm dòng JavaScript sau:
$(document).off('.data-api')Để tắt một plugin cụ thể / đơn lẻ, chỉ cần bao gồm tên của plugin làm không gian tên cùng với không gian tên data-api như thế này -
$(document).off('.alert.data-api')API có lập trình
Các nhà phát triển của Bootstrap tin rằng bạn có thể sử dụng tất cả các plugin hoàn toàn thông qua API JavaScript. Tất cả các API công khai đều là các phương thức đơn lẻ, có thể điều khiển được và trả về bộ sưu tập được thực hiện theo ví dụ:
$(".btn.danger").button("toggle").addClass("fat")Tất cả các phương thức đều chấp nhận một đối tượng tùy chọn tùy chọn, một chuỗi nhắm mục tiêu đến một phương thức cụ thể hoặc không có gì (khởi tạo một plugin với hành vi mặc định) như được hiển thị bên dưới -
// initialized with defaults
$("#myModal").modal()
// initialized with no keyboard
$("#myModal").modal({ keyboard: false })
// initializes and invokes show immediately
$("#myModal").modal('show')Mỗi plugin cũng hiển thị hàm tạo thô của nó trên Constructorthuộc tính: $ .fn.popover.Constructor . Nếu bạn muốn nhận một phiên bản plugin cụ thể, hãy truy xuất nó trực tiếp từ một phần tử -
$('[rel = popover]').data('popover').Không có xung đột
Đôi khi có thể sử dụng plugin Bootstrap với các khung giao diện người dùng khác. Trong những trường hợp này, đôi khi có thể xảy ra xung đột không gian tên. Để vượt qua cuộc gọi này.noConflict trên plugin mà bạn muốn hoàn nguyên giá trị.
// return $.fn.button to previously assigned value
var bootstrapButton = $.fn.button.noConflict()
// give $().bootstrapBtn the Bootstrap functionality
$.fn.bootstrapBtn = bootstrapButtonSự kiện
Bootstrap cung cấp các sự kiện tùy chỉnh cho hầu hết các hành động độc đáo của plugin. Nói chung, những sự kiện này có hai dạng -
Infinitive form- Điều này được kích hoạt khi bắt đầu một sự kiện. Vd: chương trình . Các sự kiện nguyên bản cung cấp chức năng PreventDefault . Điều này cung cấp khả năng dừng việc thực hiện một hành động trước khi nó bắt đầu.
$('#myModal').on('show.bs.modal', function (e) {
// stops modal from being shown
if (!data) return e.preventDefault()
})Past participle form- Điều này được kích hoạt khi hoàn thành một hành động. Ví dụ: hiển thị.