JavaScript

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ử dụng Bootstrap làm mô-đun

Chúng tôi cung cấp phiên bản Bootstrap được xây dựng dưới dạng ESM( bootstrap.esm.jsvà bootstrap.esm.min.js) cho phép bạn sử dụng Bootstrap làm mô-đun trong trình duyệt của mình, nếu các trình duyệt được nhắm mục tiêu của bạn hỗ trợ nó .

<script type="module">
  import { Toast } from 'bootstrap.esm.min.js'

  Array.from(document.querySelectorAll('.toast'))
    .forEach(toastNode => new Toast(toastNode))
</script>

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.

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 .

Bạn vẫn muốn sử dụng jQuery? Nó có thể!

Bootstrap 5 được thiết kế để sử dụng mà không cần jQuery, nhưng vẫn có thể sử dụng các thành phần của chúng tôi với jQuery. Nếu Bootstrap phát hiện jQuerytrong windowđối tượng , nó sẽ thêm tất cả các thành phần của chúng ta vào hệ thống plugin của jQuery; điều này có nghĩa là bạn sẽ có thể làm $('[data-bs-toggle="tooltip"]').tooltip()để kích hoạt chú giải công cụ. Tương tự với các thành phần khác của chúng ta.

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

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

var myModal = document.getElementById('myModal')

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

$('#myTab a').on('shown.bs.tab', function () {
  // do something...
})

API có lập trình

Tất cả các hàm tạo đều chấp nhận một đối tượng tùy chọn tùy chọn hoặc không có gì (khởi tạo một plugin với hành vi mặc định của nó):

var myModalEl = document.getElementById('myModal')

var modal = new bootstrap.Modal(myModalEl) // initialized with defaults
var modal = new bootstrap.Modal(myModalEl, { keyboard: false }) // initialized with no keyboard

Nếu bạn muốn nhận một phiên bản plugin cụ thể, mỗi plugin sẽ hiển thị một getInstancephương pháp. Để lấy nó trực tiếp từ một phần tử, hãy làm như sau bootstrap.Popover.getInstance(myPopoverEl):.

Bộ chọn CSS trong trình tạo

Bạn cũng có thể sử dụng bộ chọn CSS làm đối số đầu tiên thay vì phần tử DOM để khởi tạo plugin. Hiện tại, phần tử của plugin được tìm thấy bằng querySelectorphương pháp này vì các plugin của chúng tôi chỉ hỗ trợ một phần tử duy nhất.

var modal = new bootstrap.Modal('#myModal')
var dropdown = new bootstrap.Dropdown('[data-bs-toggle="dropdown"]')

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.

var myCollapseEl = document.getElementById('myCollapse')

myCollapseEl.addEventListener('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 .

var myCarouselEl = document.getElementById('myCarousel')
var carousel = bootstrap.Carousel.getInstance(myCarouselEl) // Retrieve a Carousel instance

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

carousel.to('1') // Will start sliding to the slide 1 and returns to the caller
carousel.to('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
bootstrap.Modal.Default.keyboard = false

Không có xung đột (chỉ khi bạn sử dụng jQuery)

Đô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 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ụ:

bootstrap.Tooltip.VERSION // => "5.0.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.

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 allowListnhư sau:

var ARIA_ATTRIBUTE_PATTERN = /^aria-[\w-]*$/i
var DefaultAllowlist = {
  // 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, allowListbạn có thể làm như sau:

var myDefaultAllowList = bootstrap.Tooltip.Default.allowList

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

// To allow td elements and data-bs-option attributes on td elements
myDefaultAllowList.td = ['data-bs-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-]+/
myDefaultAllowList['*'].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:

var yourTooltipEl = document.getElementById('yourTooltip')
var tooltip = new bootstrap.Tooltip(yourTooltipEl, {
  sanitizeFn: function (content) {
    return DOMPurify.sanitize(content)
  }
})