JavaScript
Mang Bootstrap vào cuộc sống với các plugin JavaScript tùy chọn của chúng tôi được xây dựng trên jQuery. Tìm hiểu về từng plugin, dữ liệu và các tùy chọn API có lập trình của chúng tôi, v.v.
Cá nhân hoặc tổng hợp
Các plugin có thể được bao gồm riêng lẻ (sử dụng Bootstrap riêng lẻ js/dist/*.js
), hoặc sử dụng tất cả cùng một lúc bootstrap.js
hoặc được rút gọn bootstrap.min.js
(không bao gồm cả hai).
Nếu bạn sử dụng một gói (Webpack, Rollup…), bạn có thể sử dụng /js/dist/*.js
các tệp đã sẵn sàng cho UMD.
Sự phụ thuộc
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. Cũng lưu ý rằng tất cả các plugin phụ thuộc vào jQuery (điều này có nghĩa là jQuery phải được bao gồm trước các tệp plugin). Tham khảo ý kiến của chúng tôipackage.json
để xem phiên bản jQuery nào được hỗ trợ.
Trình đơn thả xuống, cửa sổ bật lên và chú giải công cụ của chúng tôi cũng phụ thuộc vào Popper.js .
Thuộc tính dữ liệu
Gần như tất cả các plugin Bootstrap đều có thể được kích hoạt và định cấu hình chỉ thông qua HTML với các thuộc tính dữ liệu (cách ưa thích của chúng tôi khi sử dụng chức năng JavaScript). Đảm bảo chỉ sử dụng một tập hợp các thuộc tính dữ liệu trên một phần tử (ví dụ: bạn không thể kích hoạt chú giải công cụ và phương thức từ cùng một nút.)
Tuy nhiên, trong một số trường hợp, bạn nên tắt chức năng này. Để vô hiệu hóa API thuộc tính dữ liệu, hãy hủy liên kết tất cả các sự kiện trên tài liệu có vị trí đặt tên data-api
như sau:
Ngoài ra, để nhắm mục tiêu một plugin cụ thể, 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ư sau:
Bộ chọn
Hiện tại để truy vấn các phần tử DOM, chúng tôi sử dụng các phương pháp gốc querySelector
và querySelectorAll
vì lý do hiệu suất, vì vậy bạn phải sử dụng các bộ chọn hợp lệ . Ví dụ: nếu bạn sử dụng các bộ chọn đặc biệt: collapse:Example
hãy đảm bảo thoát khỏi chúng.
Sự 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, chúng có dạng phân từ nguyên thể và quá khứ - trong đó nguyên thể (ví dụ show
) được kích hoạt khi bắt đầu một sự kiện và dạng phân từ trong quá khứ của nó (ví dụ shown
) được kích hoạt khi hoàn thành một hành động.
Tất cả các sự kiện vô tận đều cung cấp preventDefault()
chức năng. Điều này cung cấp khả năng dừng thực hiện một hành động trước khi nó bắt đầu. Trả về false từ một trình xử lý sự kiện cũng sẽ tự động gọi preventDefault()
.
API có lập trình
Chúng tôi cũng tin rằng bạn có thể sử dụng tất cả các plugin Bootstrap 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 đã hoạt động.
Tất cả các phương thức phải 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 một phương thức cụ thể hoặc không có gì (khởi chạy một plugin với hành vi mặc định):
Mỗi plugin cũng hiển thị hàm tạo thô của nó trên thuộc tính Constructor
:. $.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')
:.
Các chức năng và chuyển tiếp không đồng bộ
Tất cả các phương thức API có lập trình là không đồng bộ và trở lại trình gọi khi quá trình chuyển đổi được bắt đầu nhưng trước khi quá trình chuyển đổi kết thúc .
Để thực hiện một hành động sau khi quá trình chuyển đổi hoàn tất, bạn có thể lắng nghe sự kiện tương ứng.
Ngoài ra, một cuộc gọi phương thức trên một thành phần chuyển tiếp sẽ bị bỏ qua .
Thiết lập mặc định
Bạn có thể thay đổi cài đặt mặc định cho plugin bằng cách sửa đổi Constructor.Default
đối tượng của plugin:
Không có xung đột
Đôi khi cần sử dụng các 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. Nếu điều này xảy ra, bạn có thể gọi .noConflict
plugin mà bạn muốn hoàn nguyên giá trị.
Số phiên bản
Phiên bản của mỗi plugin jQuery của Bootstrap có thể được truy cập thông qua thuộc VERSION
tính của hàm tạo của plugin. Ví dụ: đối với plugin chú giải công cụ:
Không có dự phòng đặc biệt khi JavaScript bị tắt
Các plugin của Bootstrap không hoạt động trở lại một cách đặc biệt duyên dáng khi JavaScript bị tắt. Nếu bạn quan tâm đến trải nghiệm người dùng trong trường hợp này, hãy sử dụng <noscript>
để giải thích tình huống (và cách bật lại JavaScript) cho người dùng của bạn và / hoặc thêm các dự phòng tùy chỉnh của riêng bạn.
Thư viện bên thứ ba
Bootstrap không chính thức hỗ trợ các thư viện JavaScript của bên thứ ba như Prototype hoặc jQuery UI. Bất chấp .noConflict
và các sự kiện không gian tên, có thể có các vấn đề tương thích mà bạn cần tự khắc phục.
Util
Tất cả các tệp JavaScript của Bootstrap đều phụ thuộc vào util.js
và nó phải được bao gồm cùng với các tệp JavaScript khác. Nếu bạn đang sử dụng phần mềm đã biên dịch (hoặc được rút gọn) bootstrap.js
, thì không cần phải bao gồm phần này — nó đã ở đó.
util.js
bao gồm các chức năng tiện ích và trình trợ giúp cơ bản cho transitionEnd
các sự kiện cũng như trình mô phỏng chuyển đổi CSS. Nó được các plugin khác sử dụng để kiểm tra hỗ trợ chuyển tiếp CSS và bắt các chuyển đổi bị treo.