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.jshoặ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/*.jscá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ử duy nhấ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 có thể muốn tắt chức năng này. Để tắt API thuộc tính dữ liệu, hãy bỏ 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-apinhư sau:

$(document).off('.data-api')

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:

$(document).off('.alert.data-api')

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().

$('#myModal').on('show.bs.modal', function (event) {
  if (!data) {
    return event.preventDefault() // stops modal from being shown
  }
})

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.

$('.btn.danger').button('toggle').addClass('fat')

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

$('#myModal').modal() // initialized with defaults
$('#myModal').modal({ keyboard: false }) // initialized with no keyboard
$('#myModal').modal('show') // initializes and invokes show immediately

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.ConstructorNế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.

$('#myCollapse').on('shown.bs.collapse', function (event) {
  // Action to execute once the collapsible area is expanded
})

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 .

$('#myCarousel').on('slid.bs.carousel', function (event) {
  $('#myCarousel').carousel('2') // Will slide to the slide 2 as soon as the transition to slide 1 is finished
})

$('#myCarousel').carousel('1') // Will start sliding to the slide 1 and returns to the caller
$('#myCarousel').carousel('2') // !! Will be ignored, as the transition to the slide 1 is not finished !!

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:

// changes default for the modal plugin's `keyboard` option to false
$.fn.modal.Constructor.Default.keyboard = false

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 .noConflictplugin mà bạn muốn hoàn nguyên giá trị.

var bootstrapButton = $.fn.button.noConflict() // return $.fn.button to previously assigned value
$.fn.bootstrapBtn = bootstrapButton // give $().bootstrapBtn the Bootstrap functionality

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 VERSIONtính của hàm tạo của plugin. Ví dụ: đối với plugin chú giải công cụ:

$.fn.tooltip.Constructor.VERSION // => "4.6.2"

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.

Util

Tất cả các tệp JavaScript của Bootstrap đều phụ thuộc vào util.jsvà 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.jsbao gồm các chức năng tiện ích và trình trợ giúp cơ bản cho transitionEndcá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.

Chất tẩy rửa

Chú giải công cụ và Trình mở rộng sử dụng trình khử trùng tích hợp của chúng tôi để khử trùng các tùy chọn chấp nhận HTML.

Giá trị mặc định whiteListnhư sau:

var ARIA_ATTRIBUTE_PATTERN = /^aria-[\w-]*$/i
var DefaultWhitelist = {
  // Global attributes allowed on any supplied element below.
  '*': ['class', 'dir', 'id', 'lang', 'role', ARIA_ATTRIBUTE_PATTERN],
  a: ['target', 'href', 'title', 'rel'],
  area: [],
  b: [],
  br: [],
  col: [],
  code: [],
  div: [],
  em: [],
  hr: [],
  h1: [],
  h2: [],
  h3: [],
  h4: [],
  h5: [],
  h6: [],
  i: [],
  img: ['src', 'srcset', 'alt', 'title', 'width', 'height'],
  li: [],
  ol: [],
  p: [],
  pre: [],
  s: [],
  small: [],
  span: [],
  sub: [],
  sup: [],
  strong: [],
  u: [],
  ul: []
}

Nếu bạn muốn thêm các giá trị mới vào mặc định này, whiteListbạn có thể làm như sau:

var myDefaultWhiteList = $.fn.tooltip.Constructor.Default.whiteList

// To allow table elements
myDefaultWhiteList.table = []

// To allow td elements and data-option attributes on td elements
myDefaultWhiteList.td = ['data-option']

// You can push your custom regex to validate your attributes.
// Be careful about your regular expressions being too lax
var myCustomRegex = /^data-my-app-[\w-]+/
myDefaultWhiteList['*'].push(myCustomRegex)

Nếu bạn muốn bỏ qua trình khử trùng của chúng tôi vì bạn thích sử dụng một thư viện chuyên dụng, chẳng hạn như DOMPurify , bạn nên làm như sau:

$('#yourTooltip').tooltip({
  sanitizeFn: function (content) {
    return DOMPurify.sanitize(content)
  }
})