programming bootstrap

Bootstrap mục tiêu dữ liệu

Đoạn mã trên không bao gồm

var myDefaultWhiteList = $.fn.tooltip.Constructor.DEFAULTS.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]

72 ở đây -

var myDefaultWhiteList = $.fn.tooltip.Constructor.DEFAULTS.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]

73 nói rằng cuốn sách canada có thể đối chiếu tham số

var myDefaultWhiteList = $.fn.tooltip.Constructor.DEFAULTS.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]

74 thành

var myDefaultWhiteList = $.fn.tooltip.Constructor.DEFAULTS.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]

75. Hay sẽ

Nếu biến

var myDefaultWhiteList = $.fn.tooltip.Constructor.DEFAULTS.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]

76 áp dụng cho kết quả đầu tiên, thì tôi sẽ sử dụng biến đầu tiên [có thể đọc được] và định cấu hình nó làm lệnh gọi lại thứ hai

Và tại sao việc sử dụng các thuộc tính dữ liệu cho cài đặt và kiểu dáng trạng thái JavaScript không phải lúc nào cũng là lựa chọn đúng đắn

Nếu bạn là nhà phát triển web, rất có thể bạn đã nhìn thấy hoặc sử dụng thuộc tính data-target như thế này để kiểm soát tiện ích con trong JavaScript

HTML phương thức của Bootstrap 3 [đơn giản hóa]

In the above example, data-target specifies which element is the target to be controlled by the button — targeting the

with an ID of “myModal.”

Tuy nhiên, có một cách tốt hơn nhiều để hoàn thành cùng một mục tiêu

Tại sao thuộc tính data-* tùy chỉnh kém hơn trong ngữ cảnh này

Nghe có vẻ có ngữ nghĩa với “mục tiêu” là một phần của tên thuộc tính, nhưng nó không có ngữ nghĩa. Thông số kỹ thuật của W3C thậm chí còn nói như vậy

Thông số kỹ thuật dành cho tác nhân người dùng không được xác định các thuộc tính này có bất kỳ giá trị có ý nghĩa nào

Ngoài ra, các thuộc tính data-* được thiết kế để sử dụng khi không có lựa chọn thay thế nào khác, nhưng vẫn tồn tại một thuộc tính phù hợp hơn

Thuộc tính dữ liệu tùy chỉnh nhằm mục đích lưu trữ dữ liệu tùy chỉnh ở chế độ riêng tư cho trang hoặc ứng dụng mà không có thuộc tính hoặc thành phần nào phù hợp hơn

Sự thay thế tốt hơn trong bối cảnh này

Trong một bài viết trước của tôi, tôi đã thảo luận về giá trị của việc sử dụng các thuộc tính ARIA trong JavaScript và tôi minh họa cách một nhà phát triển có thể đạt được nhiều mục tiêu giống hệt nhau với ARIA thay vì các lớp hoặc trong trường hợp này là các thuộc tính data-*

Trong ngữ cảnh này, thuộc tính aria-controls sẽ phù hợp hơn. Nó không chỉ có nhiều ngữ nghĩa hơn mà còn bổ sung thông tin cần thiết cho trình đọc màn hình ban đầu không có trong ví dụ trên. Mã sẽ trông như thế này

Nhóm Bootstrap nên cân nhắc sử dụng điều khiển aria trên phương thức của họ. Xem “Ghi chú 1" ở cuối trang

Tôi nghĩ sẽ an toàn khi cho rằng hầu như mỗi khi bạn sử dụng mục tiêu dữ liệu, bạn đang xử lý một nút điều khiển một phần tử khác. Có thể có các trường hợp cạnh khác, nhưng bối cảnh này rất có thể là phần lớn các trường hợp sử dụng. Ở đây, điều khiển aria là giải pháp thay thế tốt hơn

Nếu bạn thấy mình đang sử dụng mục tiêu dữ liệu trong ngữ cảnh bên ngoài nút điều khiển một phần tử khác, thì có lẽ có một thuộc tính ARIA phù hợp với trường hợp sử dụng của bạn, chẳng hạn như aria-labelledby hoặc aria-descriptedby. Phương án cuối cùng — nếu không còn thuộc tính nào phù hợp hơn — thì hãy sử dụng data-target. Nhưng, xin đừng mặc định nó

Có khả năng, có một thuộc tính ARIA cho điều đó

Cần nghiêm túc tìm kiếm các thuộc tính có ý nghĩa hơn ngoài việc chỉ đặt mặc định cho các thuộc tính data-* trong quy trình phát triển web của bạn. Dành thời gian để xem xét làm thế nào ứng dụng của bạn sẽ chống đạn và dễ truy cập nhất có thể chỉ là lập trình tốt

Dưới đây là một vài thuộc tính ARIA bổ sung [trong số nhiều thuộc tính khác] mang lại lợi ích tương tự cho các điều khiển aria

aria-press=“true” — sử dụng lớp này thay cho lớp “hoạt động” trên các nút
aria-selected=“true” — sử dụng lớp này thay cho lớp “đang hoạt động” hoặc “được chọn” trên các tab
aria-current=“true” — sử dụng lớp này thay vì lớp “hoạt động” trên phân trang và menu
aria-expanded=“true” — sử dụng lớp này thay vì lớp “mở” trên đàn accordions và các tiện ích có thể chuyển đổi tương tự khác cũng như các nút của chúng

Lợi ích của phương pháp này

Sử dụng các thuộc tính ARIA để định kiểu và đặt trạng thái trong JavaScript sẽ luôn có những lợi ích này

Đơn giản và nhanh như phương pháp thông thường sử dụng các thuộc tính data-* [hoặc áp dụng/xóa các lớp]
Khả năng tiếp cận tốt hơn được tích hợp ngay từ đầu
Nhiều ngữ nghĩa hơn vì các thuộc tính ARIA cung cấp ý nghĩa

Nhược điểm duy nhất ở đây là đường cong học tập liên quan đến việc sử dụng ARIA đúng cách - đó là một điều khác cần học trong thế giới phát triển web. Ngày trước, sự thất vọng xung quanh việc học CSS thay vì sử dụng bảng để bố trí là như nhau. Mặc định các phương pháp hiện tại của bạn luôn dễ dàng hơn — thay đổi khó hơn. Tuy nhiên, mọi người đều được hưởng lợi từ những thay đổi như thế này về lâu dài

Nhận xét & phản hồi

Như mọi khi, tôi muốn nghe suy nghĩ và phản hồi của mọi người về việc thay thế càng nhiều thuộc tính data-* và lớp CSS càng tốt bằng nhiều tùy chọn ngữ nghĩa hơn, chẳng hạn như thuộc tính ARIA

Các plugin có thể được bao gồm riêng lẻ [sử dụng các tệp

var myDefaultWhiteList = $.fn.tooltip.Constructor.DEFAULTS.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]

4 riêng lẻ của Bootstrap] hoặc tất cả cùng một lúc [sử dụng

var myDefaultWhiteList = $.fn.tooltip.Constructor.DEFAULTS.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]

5 hoặc

var myDefaultWhiteList = $.fn.tooltip.Constructor.DEFAULTS.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]

6 được rút gọn]

Sử dụng JavaScript đã biên dịch

Cả

var myDefaultWhiteList = $.fn.tooltip.Constructor.DEFAULTS.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]

5 và

var myDefaultWhiteList = $.fn.tooltip.Constructor.DEFAULTS.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]

6 đều chứa tất cả các plugin trong một tệp duy nhất. Chỉ bao gồm một

Phụ thuộc plugin

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 đều phụ thuộc vào jQuery [điều này có nghĩa là jQuery phải được đưa vào trước các tệp plugin]. Tham khảo

var myDefaultWhiteList = $.fn.tooltip.Constructor.DEFAULTS.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]

9 của chúng tôi để xem phiên bản jQuery nào được hỗ trợ

Thuộc tính dữ liệu

Bạn có thể sử dụng tất cả các plugin Bootstrap hoàn toàn thông qua API đánh dấu mà không cần viết một dòng JavaScript nào. Đây là API hạng nhất của Bootstrap và bạn nên cân nhắc đầu tiên khi sử dụng plugin

Điều đó nói rằng, trong một số trường hợp, có thể tắt chức năng này. Do đó, chúng tôi cũng cung cấp khả năng vô hiệu hóa API thuộc tính dữ liệu bằng cách hủy liên kết tất cả các sự kiện trên tài liệu được đặt tên bằng

$['#yourTooltip'].tooltip[{
  sanitizeFn: function [content] {
    return DOMPurify.sanitize[content]
  }
}]

0. Cái này trông như thế này

$[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 dưới dạng không gian tên cùng với không gian tên data-api như thế này

________số 8

Chỉ một plugin cho mỗi thành phần thông qua thuộc tính dữ liệu

Không sử dụng thuộc tính dữ liệu từ nhiều plugin trên cùng một phần tử. Ví dụ: một nút không thể vừa có chú giải công cụ vừa chuyển đổi chế độ. Để thực hiện điều này, hãy sử dụng một phần tử gói

API có lập trình

Chúng tôi cũng tin rằng bạn sẽ 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ể xâu chuỗi và trả về bộ sưu tập được thực hiện theo

$['.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 tạo plugin có hành vi mặc định]

var myDefaultWhiteList = $.fn.tooltip.Constructor.DEFAULTS.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]

Mỗi plugin cũng hiển thị hàm tạo thô của nó trên thuộc tính

$['#yourTooltip'].tooltip[{
  sanitizeFn: function [content] {
    return DOMPurify.sanitize[content]
  }
}]

$['#yourTooltip'].tooltip[{
  sanitizeFn: function [content] {
    return DOMPurify.sanitize[content]
  }
}]

2. Nếu bạn muốn lấy 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ử.

$['#yourTooltip'].tooltip[{
  sanitizeFn: function [content] {
    return DOMPurify.sanitize[content]
  }
}]

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 đối tượng

$['#yourTooltip'].tooltip[{
  sanitizeFn: function [content] {
    return DOMPurify.sanitize[content]
  }
}]

4 của plugin

var myDefaultWhiteList = $.fn.tooltip.Constructor.DEFAULTS.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]

Không có xung đột

Đôi khi cần 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, xung đột không gian tên đôi khi có thể xảy ra. Nếu điều này xảy ra, bạn có thể gọi

$['#yourTooltip'].tooltip[{
  sanitizeFn: function [content] {
    return DOMPurify.sanitize[content]
  }
}]

5 trên plugin mà bạn muốn hoàn nguyên giá trị của

var myDefaultWhiteList = $.fn.tooltip.Constructor.DEFAULTS.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]

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 xuất hiện ở dạng nguyên mẫu và quá khứ phân từ - trong đó nguyên mẫu [ví dụ:.

$['#yourTooltip'].tooltip[{
  sanitizeFn: function [content] {
    return DOMPurify.sanitize[content]
  }
}]

6] được kích hoạt khi bắt đầu một sự kiện và dạng quá khứ phân từ của nó [ví dụ:.

$['#yourTooltip'].tooltip[{
  sanitizeFn: function [content] {
    return DOMPurify.sanitize[content]
  }
}]

7] được kích hoạt khi hoàn thành một hành động

kể từ 3. 0. 0, tất cả các sự kiện Bootstrap đều được đặt tên

Tất cả các sự kiện nguyên mẫu cung cấp chức năng

$['#yourTooltip'].tooltip[{
  sanitizeFn: function [content] {
    return DOMPurify.sanitize[content]
  }
}]

8. Đ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

var myDefaultWhiteList = $.fn.tooltip.Constructor.DEFAULTS.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]

chất khử trùng

Chú giải công cụ và Cửa sổ bật lên sử dụng trình khử trùng tích hợp sẵn 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 của

$['#yourTooltip'].tooltip[{
  sanitizeFn: function [content] {
    return DOMPurify.sanitize[content]
  }
}]

9 như sau

var myDefaultWhiteList = $.fn.tooltip.Constructor.DEFAULTS.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 thêm các giá trị mới vào

$['#yourTooltip'].tooltip[{
  sanitizeFn: function [content] {
    return DOMPurify.sanitize[content]
  }
}]

9 mặc định này, bạn có thể làm như sau

var myDefaultWhiteList = $.fn.tooltip.Constructor.DEFAULTS.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 chất khử trùng của chúng tôi vì bạn muốn sử dụng 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]
  }
}]

Trình duyệt không có

$[document].off['.alert.data-api']

Trong trường hợp các trình duyệt không hỗ trợ

$[document].off['.alert.data-api']

01, chẳng hạn như Internet Explorer 8, chức năng khử trùng tích hợp sẽ trả về HTML như vốn có

Nếu bạn muốn thực hiện vệ sinh trong trường hợp này, vui lòng chỉ định

$[document].off['.alert.data-api']

03 và sử dụng thư viện bên ngoài như DOMPurify

số phiên bản

Có thể truy cập phiên bản của từng plugin jQuery của Bootstrap thông qua thuộc tính

$[document].off['.alert.data-api']

04 của hàm tạo của plugin. Ví dụ: đối với plugin chú giải công cụ

$[document].off['.alert.data-api']

Không có dự phòng đặc biệt khi JavaScript bị tắt

Các plugin của Bootstrap không quay trở lại một cách đặc biệt 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

$[document].off['.alert.data-api']

05 để 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 của 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. Mặc dù có sự kiện

$['#yourTooltip'].tooltip[{
  sanitizeFn: function [content] {
    return DOMPurify.sanitize[content]
  }
}]

5 và không gian đặt tên, vẫn có thể có sự cố tương thích mà bạn cần tự khắc phục

Giới thiệu về quá trình chuyển đổi

Đối với các hiệu ứng chuyển tiếp đơn giản, hãy bao gồm một lần

$[document].off['.alert.data-api']

07 cùng với các tệp JS khác. Nếu bạn đang sử dụng

var myDefaultWhiteList = $.fn.tooltip.Constructor.DEFAULTS.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]

5 đã được biên dịch [hoặc được rút gọn], thì không cần phải bao gồm phần này—nó đã có rồi

Có gì bên trong

chuyển tiếp. js là trình trợ giúp cơ bản cho các sự kiện

$[document].off['.alert.data-api']

09 cũng như trình mô phỏng chuyển tiếp 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

Vô hiệu hóa quá trình chuyển đổi

Chuyển đổi có thể bị vô hiệu hóa trên toàn cầu bằng cách sử dụng đoạn mã JavaScript sau, đoạn mã này phải xuất hiện sau khi tải xong

$[document].off['.alert.data-api']

07 [hoặc

var myDefaultWhiteList = $.fn.tooltip.Constructor.DEFAULTS.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]

5 hoặc

var myDefaultWhiteList = $.fn.tooltip.Constructor.DEFAULTS.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]

6, tùy từng trường hợp]

$[document].off['.alert.data-api']

Các phương thức được sắp xếp hợp lý, nhưng linh hoạt, lời nhắc hộp thoại với chức năng cần thiết tối thiểu và mặc định thông minh

Nhiều phương thức mở không được hỗ trợ

Đảm bảo không mở một phương thức trong khi một phương thức khác vẫn hiển thị. Hiển thị nhiều phương thức cùng một lúc yêu cầu mã tùy chỉnh

Vị trí đánh dấu phương thức

Luôn cố gắng đặt mã HTML của phương thức ở vị trí cấp cao nhất trong tài liệu của bạn để tránh các thành phần khác ảnh hưởng đến giao diện và/hoặc chức năng của phương thức

Do cách HTML5 xác định ngữ nghĩa của nó, thuộc tính HTML

$[document].off['.alert.data-api']

13 không có tác dụng trong các phương thức Bootstrap. Để đạt được hiệu quả tương tự, hãy sử dụng một số JavaScript tùy chỉnh

$[document].off['.alert.data-api']

ví dụ

ví dụ tĩnh

Phương thức được hiển thị có tiêu đề, nội dung và tập hợp các hành động ở chân trang

$[document].off['.alert.data-api']

Bản thử trực tiếp

Chuyển đổi phương thức qua JavaScript bằng cách nhấp vào nút bên dưới. Nó sẽ trượt xuống và mờ dần từ đầu trang

Văn bản trong một phương thức

Duis mollis, est non commodo luctus, nisi erat porttitor ligula

Popover trong một phương thức

Nút này sẽ kích hoạt cửa sổ bật lên khi nhấp chuột

Chú giải công cụ trong một phương thức

Liên kết này và liên kết đó phải có chú giải công cụ khi di chuột

Tràn văn bản để hiển thị hành vi cuộn

Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, tiền đình ở eros

Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor

Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla

Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, tiền đình ở eros

Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor

Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla

Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, tiền đình ở eros

Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor

Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla

$[document].off['.alert.data-api']

Làm cho các phương thức có thể truy cập được

Đảm bảo thêm

$[document].off['.alert.data-api']

14 và

$[document].off['.alert.data-api']

15, tham chiếu tiêu đề phương thức, vào

$[document].off['.alert.data-api']

16 và

$[document].off['.alert.data-api']

17 vào chính

$[document].off['.alert.data-api']

Ngoài ra, bạn có thể đưa ra mô tả về hộp thoại phương thức của mình với

$[document].off['.alert.data-api']

19 trên

$[document].off['.alert.data-api']

Nhúng video YouTube

Nhúng video YouTube vào các phương thức yêu cầu JavaScript bổ sung không có trong Bootstrap để tự động dừng phát lại và hơn thế nữa. Xem bài đăng Stack Overflow hữu ích này để biết thêm thông tin

Kích thước tùy chọn

Các phương thức có hai kích thước tùy chọn, có sẵn thông qua các lớp bổ trợ được đặt trên

$[document].off['.alert.data-api']

$[document].off['.alert.data-api']

Xóa hoạt ảnh

Đối với các phương thức chỉ xuất hiện thay vì mờ dần để xem, hãy xóa lớp

$[document].off['.alert.data-api']

22 khỏi đánh dấu phương thức của bạn

$[document].off['.alert.data-api']

Sử dụng hệ thống lưới

Để tận dụng lợi thế của hệ thống lưới Bootstrap trong một phương thức, chỉ cần lồng các

$[document].off['.alert.data-api']

23 vào trong

$[document].off['.alert.data-api']

24 và sau đó sử dụng các lớp hệ thống lưới thông thường

col-md-4. col-md-offset-4

col-md-3. col-md-offset-3

col-md-2. col-md-offset-4

col-md-6. col-md-offset-3

Cấp độ 1. . col-sm-9

Cấp độ 2. . col-xs-8. col-sm-6

Cấp độ 2. . col-xs-4. col-sm-6

$[document].off['.alert.data-api']

Có một loạt các nút kích hoạt cùng một phương thức, chỉ với nội dung hơi khác nhau? . Xem tài liệu Sự kiện phương thức để biết chi tiết về

$[document].off['.alert.data-api']

27,

Mở phương thức cho @mdo Mở phương thức cho @fat Mở phương thức cho @getbootstrap. nhiều nút hơn

$[document].off['.alert.data-api']

$[document].off['.alert.data-api']

Cách sử dụng

Plugin phương thức chuyển đổi nội dung ẩn của bạn theo yêu cầu, thông qua thuộc tính dữ liệu hoặc JavaScript. Nó cũng thêm

$[document].off['.alert.data-api']

28 vào

$[document].off['.alert.data-api']

05 để ghi đè hành vi cuộn mặc định và tạo

$[document].off['.alert.data-api']

30 để cung cấp khu vực nhấp chuột để loại bỏ các phương thức được hiển thị khi nhấp vào bên ngoài phương thức

Thông qua thuộc tính dữ liệu

Kích hoạt một phương thức mà không cần viết JavaScript. Đặt

$[document].off['.alert.data-api']

31 trên thành phần bộ điều khiển, chẳng hạn như nút, cùng với

$[document].off['.alert.data-api']

32 hoặc

$[document].off['.alert.data-api']

33 để nhắm mục tiêu một phương thức cụ thể để chuyển đổi

$['.btn.danger'].button['toggle'].addClass['fat']

Qua JavaScript

Gọi một phương thức có id

$[document].off['.alert.data-api']

34 bằng một dòng JavaScript

$['.btn.danger'].button['toggle'].addClass['fat']

Tùy chọn

Các tùy chọn có thể được chuyển qua thuộc tính dữ liệu hoặc JavaScript. Đối với các thuộc tính dữ liệu, hãy thêm tên tùy chọn vào

$[document].off['.alert.data-api']

35, như trong

$[document].off['.alert.data-api']

Nametypedefaultdescriptionbackdropboolean hoặc chuỗi

$[document].off['.alert.data-api']

37trueBao gồm phần tử phông nền phương thức. Ngoài ra, chỉ định

$[document].off['.alert.data-api']

38 cho phông nền không đóng chế độ khi nhấp. keyboardbooleantrueĐóng phương thức khi nhấn phím thoátshowbooleantrueHiển thị phương thức khi được khởi tạo. điều khiển từ xa

Tùy chọn này không được dùng nữa kể từ v3. 3. 0 và đã bị xóa trong v4. Thay vào đó, chúng tôi khuyên bạn nên sử dụng khuôn mẫu phía máy khách hoặc khung liên kết dữ liệu hoặc gọi jQuery. tải cho mình

Nếu một URL từ xa được cung cấp, nội dung sẽ được tải một lần thông qua phương thức

$[document].off['.alert.data-api']

39 của jQuery và được đưa vào div

$[document].off['.alert.data-api']

40. Nếu bạn đang sử dụng data-api, bạn có thể sử dụng thuộc tính

$[document].off['.alert.data-api']

41 để chỉ định nguồn từ xa. Một ví dụ về điều này được hiển thị dưới đây

$['.btn.danger'].button['toggle'].addClass['fat']

phương pháp

$[document].off['.alert.data-api']

Kích hoạt nội dung của bạn dưới dạng phương thức. Chấp nhận một tùy chọn tùy chọn

$[document].off['.alert.data-api']

$['.btn.danger'].button['toggle'].addClass['fat']

$[document].off['.alert.data-api']

Bật/tắt chế độ theo cách thủ công. Trả về người gọi trước khi phương thức thực sự được hiển thị hoặc ẩn [i. e. trước khi sự kiện

$[document].off['.alert.data-api']

45 hoặc

$[document].off['.alert.data-api']

46 xảy ra]

$['.btn.danger'].button['toggle'].addClass['fat']

$[document].off['.alert.data-api']

Mở một phương thức theo cách thủ công. Trả về người gọi trước khi phương thức thực sự được hiển thị [i. e. trước khi sự kiện

$[document].off['.alert.data-api']

45 xảy ra]

$['.btn.danger'].button['toggle'].addClass['fat']

$[document].off['.alert.data-api']

Ẩn phương thức theo cách thủ công. Trả về người gọi trước khi phương thức thực sự bị ẩn [i. e. trước khi sự kiện

$[document].off['.alert.data-api']

46 xảy ra]

$['.btn.danger'].button['toggle'].addClass['fat']

$[document].off['.alert.data-api']

Điều chỉnh lại vị trí của phương thức để chống lại thanh cuộn trong trường hợp một thanh cuộn xuất hiện, điều này sẽ làm cho phương thức nhảy sang trái

Chỉ cần thiết khi chiều cao của phương thức thay đổi trong khi nó đang mở

$['.btn.danger'].button['toggle'].addClass['fat']

Sự kiện

Lớp phương thức của Bootstrap hiển thị một vài sự kiện để nối vào chức năng phương thức

Tất cả các sự kiện phương thức được kích hoạt tại chính phương thức đó [i. e. tại

$[document].off['.alert.data-api']

05]

Loại sự kiệnMô tảshow. bs. modal Sự kiện này kích hoạt ngay lập tức khi phương thức đối tượng

$['#yourTooltip'].tooltip[{
  sanitizeFn: function [content] {
    return DOMPurify.sanitize[content]
  }
}]

6 được gọi. Nếu do nhấp chuột gây ra, phần tử được nhấp sẽ có sẵn dưới dạng thuộc tính

$[document].off['.alert.data-api']

27 của sự kiện. cho xem. bs. modalSự kiện này được kích hoạt khi modal được hiển thị cho người dùng [sẽ đợi quá trình chuyển đổi CSS hoàn tất]. Nếu do nhấp chuột gây ra, phần tử được nhấp sẽ có sẵn dưới dạng thuộc tính

$[document].off['.alert.data-api']

27 của sự kiện. ẩn giấu. bs. modal Sự kiện này được kích hoạt ngay lập tức khi phương thức đối tượng

$[document].off['.alert.data-api']

56 được gọi. ẩn giấu. bs. modalSự kiện này được kích hoạt khi modal đã hoàn tất bị ẩn khỏi người dùng [sẽ đợi quá trình chuyển đổi CSS hoàn tất]. nạp vào. bs. modalSự kiện này được kích hoạt khi modal đã tải nội dung bằng tùy chọn

$[document].off['.alert.data-api']

$['.btn.danger'].button['toggle'].addClass['fat']

ví dụ

Thêm menu thả xuống vào hầu hết mọi thứ với plugin đơn giản này, bao gồm thanh điều hướng, tab và thuốc

Trong một thanh điều hướng

Trong viên thuốc

Cách sử dụng

Thông qua thuộc tính dữ liệu hoặc JavaScript, plugin thả xuống chuyển đổi nội dung ẩn [menu thả xuống] bằng cách chuyển đổi lớp

$[document].off['.alert.data-api']

58 trên mục danh sách chính

Trên thiết bị di động, việc mở danh sách thả xuống sẽ thêm

$[document].off['.alert.data-api']

59 làm khu vực nhấn để đóng menu thả xuống khi nhấn bên ngoài menu, một yêu cầu để được hỗ trợ iOS phù hợp. Điều này có nghĩa là việc chuyển từ menu thả xuống đang mở sang menu thả xuống khác yêu cầu một lần nhấn thêm trên thiết bị di động

Ghi chú. Thuộc tính

$[document].off['.alert.data-api']

60 được dựa vào để đóng các menu thả xuống ở cấp ứng dụng, vì vậy bạn nên luôn sử dụng thuộc tính này

Thông qua thuộc tính dữ liệu

Thêm

$[document].off['.alert.data-api']

60 vào một liên kết hoặc nút để chuyển đổi danh sách thả xuống

$['.btn.danger'].button['toggle'].addClass['fat']

Để giữ nguyên URL với các nút liên kết, hãy sử dụng thuộc tính

$[document].off['.alert.data-api']

62 thay vì

$[document].off['.alert.data-api']

var myDefaultWhiteList = $.fn.tooltip.Constructor.DEFAULTS.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]

Qua JavaScript

Gọi danh sách thả xuống qua JavaScript

var myDefaultWhiteList = $.fn.tooltip.Constructor.DEFAULTS.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]

$[document].off['.alert.data-api']

60 vẫn được yêu cầu

Bất kể bạn gọi trình đơn thả xuống của mình qua JavaScript hay thay vào đó sử dụng data-api, thì

$[document].off['.alert.data-api']

60 luôn được yêu cầu phải có mặt trên phần tử kích hoạt của trình đơn thả xuống

Tùy chọn

Không có

phương pháp

$[document].off['.alert.data-api']

Chuyển đổi menu thả xuống của một thanh điều hướng hoặc điều hướng theo thẻ nhất định

Sự kiện

Tất cả các sự kiện thả xuống được kích hoạt tại phần tử cha của

$[document].off['.alert.data-api']

Tất cả các sự kiện thả xuống đều có thuộc tính

$[document].off['.alert.data-api']

27, có giá trị là phần tử neo chuyển đổi

Loại sự kiệnMô tảshow. bs. dropdown Sự kiện này kích hoạt ngay lập tức khi phương thức thể hiện show được gọi. cho xem. bs. thả xuống Sự kiện này được kích hoạt khi danh sách thả xuống được hiển thị cho người dùng [sẽ đợi quá trình chuyển đổi CSS hoàn tất]. ẩn giấu. bs. thả xuống Sự kiện này được kích hoạt ngay lập tức khi phương thức ẩn dụ được gọi. ẩn giấu. bs. thả xuốngSự kiện này được kích hoạt khi trình đơn thả xuống đã hoàn tất bị ẩn khỏi người dùng [sẽ đợi quá trình chuyển đổi CSS hoàn tất]

var myDefaultWhiteList = $.fn.tooltip.Constructor.DEFAULTS.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]

Plugin ScrollSpy dùng để tự động cập nhật các mục tiêu điều hướng dựa trên vị trí cuộn. Cuộn khu vực bên dưới thanh điều hướng và xem thay đổi lớp đang hoạt động. Các mục phụ thả xuống cũng sẽ được đánh dấu

@mập mạp

Quảng cáo xà cạp keytar, brunch id art party dolorlabore. Pitchfork yr enim lo-fi trước khi bán hết veo. Xe đạp từ trang trại đến bàn Tumblr quyền bất cứ điều gì. Áo len hoạt hình keffiyeh carles. Gian hàng ảnh của velit seitan mcsweeney 3 sói trăng irure. Áo len Cosby lomo quần short jean, áo hoodie Williamsburg minim qui có thể bạn chưa từng nghe nói về chúng et cardigan quỹ tín thác dầu diesel sinh học culpa wes anderson thẩm mỹ. Nihil xăm lời buộc tội, tín dụng dầu diesel sinh học mỉa mai keffiyeh nghệ nhân ullamco hậu quả

@mdo

Veniam marfa ria ván trượt, adipisizing fugiat velit bộ râu chĩa ba. Freegan râu aliqua cupidatat mcsweeney's vero. Cupidatat bốn loko nisi, ea helvetica nulla carles. Hình xăm xe tải thực phẩm áo len cosby, vinyl của mcsweeney quis non freegan. Lo-fi wes anderson +1 quần áo. Carles phi thẩm mỹ bài tập quis gentrify. Brooklyn adipisizing bia thủ công vice keytar deserunt

một

Occaecat hàng hóa aliqua delectus. Fap bia thủ công ván trượt deserunt ea. Lomo xe đạp quyền adipisizing bánh mì, velit ea sunt next level locavore cà phê một nguồn gốc ở magna veniam. High life id vinyl, echo park dosequat quis aliquip bánh mì chĩa ba. Vero VHS được quảng cáo. Consectetur nisi DIY minim messenger bag. Cred ex in, delectus consectetur bền vững iphone pack

hai

Trong công viên tiếng vọng sự cố, chủ nhân xuất sắc của officia deserunt mcsweeney đã dọn sạch những con mèo sấm sét sapiente veniam. Ngoại trừ VHS elit, shoreditch cao cấp +1 bia thủ công làm bằng dầu diesel sinh học. Những người đi đường cà phê một nguồn gốc làm sạch bốn loko, cupidatat terry richardson master. Giả sử bạn có thể chưa nghe nói về họ bữa tiệc nghệ thuật fanny pack, quảng cáo áo khoác tạm thời nulla có hình xăm. Proident sói nesciunt sartorial keffiyeh eu banh mi bền vững. Elit wolf voluptate, lo-fi ea portland before they sold out four loko. Locavore enim nostrud mlkshk brooklyn nesciunt

số ba

Keytar twee blog, culpa messenger bag marfa anything delectus food truck. Sapiente synth id giả định. Locavore sed helvetica trớ trêu sáo rỗng, những con mèo sấm sét mà bạn có thể chưa từng nghe nói về chúng, hậu quả là áo hoodie lo-fi fap aliquip không chứa gluten. Labore elit placeat before they sold out, terry richardson bưa ăn nửa buổi cao cấp nesciunt quis cosby sweater pariatur keffiyeh ut helvetica artisan. Cardigan thủ công bia seitan velit làm sẵn. VHS chambraylaboris tempor veniam. Anim mollit minim commodo ullamco thundercats

Yêu cầu mục tiêu ID có thể phân giải

Liên kết thanh điều hướng phải có các mục tiêu id có thể phân giải. Ví dụ: một

$[document].off['.alert.data-api']

69 phải tương ứng với một cái gì đó trong DOM như

$[document].off['.alert.data-api']

Các phần tử mục tiêu không phải ______871 bị bỏ qua

Các phần tử đích không phải là

$[document].off['.alert.data-api']

71 theo jQuery sẽ bị bỏ qua và các mục điều hướng tương ứng của chúng sẽ không bao giờ được tô sáng

Yêu cầu định vị tương đối

Bất kể phương pháp triển khai nào, scrollspy yêu cầu sử dụng

$[document].off['.alert.data-api']

73 trên phần tử bạn đang theo dõi. Trong hầu hết các trường hợp, đây là

$[document].off['.alert.data-api']

05. Khi scrollspying trên các phần tử không phải là

$[document].off['.alert.data-api']

05, hãy chắc chắn rằng bạn đã đặt

$[document].off['.alert.data-api']

76 và áp dụng

$[document].off['.alert.data-api']

Thông qua thuộc tính dữ liệu

Để dễ dàng thêm hành vi scrollspy vào điều hướng thanh trên cùng của bạn, hãy thêm

$[document].off['.alert.data-api']

78 vào thành phần bạn muốn theo dõi [thông thường nhất, đây sẽ là

$[document].off['.alert.data-api']

05]. Sau đó, thêm thuộc tính

$[document].off['.alert.data-api']

62 với ID hoặc lớp của phần tử cha của bất kỳ thành phần Bootstrap

$[document].off['.alert.data-api']

81 nào

var myDefaultWhiteList = $.fn.tooltip.Constructor.DEFAULTS.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]

var myDefaultWhiteList = $.fn.tooltip.Constructor.DEFAULTS.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]

Qua JavaScript

Sau khi thêm

$[document].off['.alert.data-api']

73 vào CSS của bạn, hãy gọi scrollspy qua JavaScript

var myDefaultWhiteList = $.fn.tooltip.Constructor.DEFAULTS.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]

$[document].off['.alert.data-api']

Khi sử dụng scrollspy kết hợp với việc thêm hoặc xóa các phần tử khỏi DOM, bạn sẽ cần gọi phương thức làm mới như vậy

var myDefaultWhiteList = $.fn.tooltip.Constructor.DEFAULTS.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]

Các tùy chọn có thể được chuyển qua thuộc tính dữ liệu hoặc JavaScript. Đối với các thuộc tính dữ liệu, hãy thêm tên tùy chọn vào

$[document].off['.alert.data-api']

35, như trong

$[document].off['.alert.data-api']

Nametypedefaultdescriptionoffsetnumber10Pixels để offset từ trên xuống khi tính toán vị trí cuộn

Loại sự kiệnMô tảkích hoạt. bs. scrollspySự kiện này kích hoạt bất cứ khi nào một mục mới được kích hoạt bởi scrollspy

var myDefaultWhiteList = $.fn.tooltip.Constructor.DEFAULTS.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]

tab ví dụ

Thêm chức năng tab nhanh, động để chuyển đổi qua các bảng nội dung cục bộ, thậm chí thông qua các menu thả xuống. Các tab lồng nhau không được hỗ trợ

Raw denim chắc hẳn bạn chưa từng nghe đến quần short jean Austin. Nesciunt đậu phụ gốc aliqua, tổng hợp tổng hợp retro làm sạch. Ria mép cliche tempor, williamsburg carles thuần chay helvetica. Reprehenderit butcher cổ điển keffiyeh dreamcatcher tổng hợp. Áo len cosby eu bánh mi, qui irure terry richardson ex mực. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan mỹ trang phục, butcher voluptate nisi qui

Xe tải thực phẩm fixie locavore, accusamus mcsweeney's marfa nulla mực cà phê một nguồn gốc. Bài tập +1 sartorial velit, blog sartorial PBR cấp độ tiếp theo. Qui gian hàng ảnh ép chữ, bia thủ công commodo enim mlkshk aliquip quần short jean ullamco quảng cáo vinyl cillum PBR. Homo nostrud hữu cơ, giả định thẩm mỹ magna delectus mollit. Keytar helvetica VHS salvia năm, vero magna velit sapientelabore-stumptown. Vegan fanny pack odio cillum wes anderson 8-bit, quần short jean bền vững râu ut Tự làm có đạo đức culpa terry richardson dầu diesel sinh học. Bữa tiệc nghệ thuật người đi cảnh gốc cây, người bán thịt tumblr vero sint qui sapiente accusamus tattooed echo park

Những người đi đường mixtape của Etsy, đậu phụ wes anderson có đạo đức trước khi họ bán hết lomo hữu cơ của mcsweeney lomo retro fanny pack lo-fi làm sẵn từ nông trại đến bàn ăn. Túi messenger nhẹ nhàng hình xăm cây chĩa ba bia thủ công, ván trượt iphone locavore carles etsy salvia Banky hoodie helvetica. DIY synth PBR ngân hàng trớ trêu. Xà cạp 8-bit cred pitchfork. Williamsburg bánh mì bất cứ thứ gì không chứa gluten, carles pitchfork dầu diesel sinh học fixie etsy retro mlkshk vice blog. Scenester cred mà bạn có thể chưa từng nghe đến, blog về bia thủ công vinyl ở Stumptown. Pitchfork đậu phụ bền vững synth chambray năm

Quỹ ủy thác seitan letterpress, bữa tiệc nghệ thuật keytar raw denim keffiyeh etsy trước khi chúng bán hết. Fanny pack portland seitan DIY, bữa tiệc nghệ thuật locavore wolf cliche high life echo park Austin. Cred vinyl keffiyeh DIY salvia PBR, bánh mì trước khi bán hết ve áo len cosby siêu vi VHS VHS từ nông trại đến bàn ăn. Lomo sói virus, ria mép làm sẵn thundercats keffiyeh bia thủ công marfa đạo đức. Wolf salvia freegan, sartorial keffiyeh echo park thuần chay

Cách sử dụng

Kích hoạt các tab có thể lập bảng qua JavaScript [mỗi tab cần được kích hoạt riêng lẻ]

var myDefaultWhiteList = $.fn.tooltip.Constructor.DEFAULTS.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]

Bạn có thể kích hoạt các tab riêng lẻ theo nhiều cách

var myDefaultWhiteList = $.fn.tooltip.Constructor.DEFAULTS.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]

đánh dấu

Bạn có thể kích hoạt điều hướng tab hoặc viên thuốc mà không cần viết bất kỳ JavaScript nào bằng cách chỉ định

$[document].off['.alert.data-api']

86 hoặc

$[document].off['.alert.data-api']

87 trên một phần tử. Việc thêm các lớp

$[document].off['.alert.data-api']

88 và

$[document].off['.alert.data-api']

89 vào tab

$[document].off['.alert.data-api']

90 sẽ áp dụng kiểu dáng tab Bootstrap, trong khi thêm các lớp

$[document].off['.alert.data-api']

88 và

$[document].off['.alert.data-api']

92 sẽ áp dụng kiểu dáng viên thuốc

var myDefaultWhiteList = $.fn.tooltip.Constructor.DEFAULTS.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]

hiệu ứng mờ dần

Để làm cho các tab mờ dần, hãy thêm

$[document].off['.alert.data-api']

22 vào mỗi

$[document].off['.alert.data-api']

94. Ngăn tab đầu tiên cũng phải có

$[document].off['.alert.data-api']

95 để hiển thị nội dung ban đầu

var myDefaultWhiteList = $.fn.tooltip.Constructor.DEFAULTS.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]

phương pháp

$[document].off['.alert.data-api']

Kích hoạt phần tử tab và vùng chứa nội dung. Tab phải có

$[document].off['.alert.data-api']

62 hoặc

$[document].off['.alert.data-api']

41 nhắm mục tiêu nút vùng chứa trong DOM. Trong các ví dụ trên, các tab là các

$[document].off['.alert.data-api']

05 với các thuộc tính

$[document].off['.alert.data-api']

$['.btn.danger'].button['toggle'].addClass['fat']

Chọn tab đã cho và hiển thị nội dung được liên kết của nó. Bất kỳ tab nào khác đã được chọn trước đó sẽ không được chọn và nội dung được liên kết của tab đó bị ẩn. Quay lại trình gọi trước khi ngăn tab thực sự được hiển thị [i. e. trước khi sự kiện

$['.btn.danger'].button['toggle'].addClass['fat']

02 xảy ra]

var myDefaultWhiteList = $.fn.tooltip.Constructor.DEFAULTS.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]

Sự kiện

Khi hiển thị một tab mới, các sự kiện sẽ kích hoạt theo thứ tự sau

$['.btn.danger'].button['toggle'].addClass['fat']

03 [trên tab đang hoạt động hiện tại]

$['.btn.danger'].button['toggle'].addClass['fat']

04 [trên tab sắp được hiển thị]

$['.btn.danger'].button['toggle'].addClass['fat']

05 [trên tab hoạt động trước đó, giống như đối với sự kiện

$['.btn.danger'].button['toggle'].addClass['fat']

03]

```
$['.btn.danger'].button['toggle'].addClass['fat']
```
02 [trên tab vừa được hiển thị mới hoạt động, tương tự như đối với sự kiện
```
$['.btn.danger'].button['toggle'].addClass['fat']
```
04]

Nếu không có tab nào đang hoạt động thì sự kiện

$['.btn.danger'].button['toggle'].addClass['fat']

03 và

$['.btn.danger'].button['toggle'].addClass['fat']

05 sẽ không được kích hoạt

Loại sự kiệnMô tảshow. bs. tabSự kiện này kích hoạt khi hiển thị tab, nhưng trước khi tab mới được hiển thị. Sử dụng

$['.btn.danger'].button['toggle'].addClass['fat']

11 và

$[document].off['.alert.data-api']

25 để nhắm mục tiêu tab đang hoạt động và tab đang hoạt động trước đó [nếu có] tương ứng. cho xem. bs. tabSự kiện này kích hoạt trên tab hiển thị sau khi một tab đã được hiển thị. Sử dụng

$['.btn.danger'].button['toggle'].addClass['fat']

11 và

$[document].off['.alert.data-api']

25 để nhắm mục tiêu tab đang hoạt động và tab đang hoạt động trước đó [nếu có] tương ứng. ẩn giấu. bs. tab Sự kiện này kích hoạt khi một tab mới được hiển thị [và do đó, tab đang hoạt động trước đó sẽ bị ẩn]. Sử dụng

$['.btn.danger'].button['toggle'].addClass['fat']

11 và

$[document].off['.alert.data-api']

25 để nhắm mục tiêu tab đang hoạt động hiện tại và tab mới sắp hoạt động tương ứng. ẩn giấu. bs. tabSự kiện này kích hoạt sau khi tab mới được hiển thị [và do đó, tab hoạt động trước đó bị ẩn]. Sử dụng

$['.btn.danger'].button['toggle'].addClass['fat']

11 và

$[document].off['.alert.data-api']

25 để nhắm mục tiêu tab hoạt động trước đó và tab hoạt động mới tương ứng

var myDefaultWhiteList = $.fn.tooltip.Constructor.DEFAULTS.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]

Lấy cảm hứng từ jQuery xuất sắc. plugin say được viết bởi Jason Frame;

Chú giải công cụ có tiêu đề độ dài bằng 0 không bao giờ được hiển thị

Di chuột qua các liên kết bên dưới để xem chú giải công cụ

Quần bó sát cấp độ tiếp theo keffiyeh có thể bạn chưa từng nghe nói về chúng. Gian hàng chụp ảnh râu vải denim thô in chữ thuần chay túi messenger Stutttown. Seitan từ nông trại đến bàn ăn, quần áo Mỹ 8 bit từ diêm mạch bền vững của mcsweeney có chambray vinyl terry richardson. Beard studtown, cardigans bánh mì lomo thundercats. Đậu phụ dầu diesel sinh học williamsburg marfa, chambray thuần chay sạch của bốn loko mcsweeney. Một nghệ nhân thực sự mỉa mai bất cứ điều gì keytar, người làm cảnh từ nông trại đến bàn ăn Austin twitter xử lý freegan cred denim thô lan truyền cà phê một nguồn gốc

chú giải công cụ tĩnh

Bốn tùy chọn có sẵn. căn trên, phải, dưới và trái

bốn hướng

Tooltip ở bên trái Tooltip ở trên Tooltip ở dưới Tooltip ở bên phải

var myDefaultWhiteList = $.fn.tooltip.Constructor.DEFAULTS.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]

Chức năng chọn tham gia

Vì lý do hiệu suất, apis dữ liệu Chú giải công cụ và Cửa sổ bật lên được chọn tham gia, nghĩa là bạn phải tự khởi tạo chúng

Một cách để khởi tạo tất cả chú giải công cụ trên một trang là chọn chúng theo thuộc tính

$['.btn.danger'].button['toggle'].addClass['fat']

19 của chúng

var myDefaultWhiteList = $.fn.tooltip.Constructor.DEFAULTS.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]

Plugin chú giải công cụ tạo nội dung và đánh dấu theo yêu cầu và theo mặc định, đặt chú giải công cụ sau phần tử kích hoạt của chúng

Kích hoạt chú giải công cụ qua JavaScript

var myDefaultWhiteList = $.fn.tooltip.Constructor.DEFAULTS.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]

đánh dấu

Đánh dấu bắt buộc cho chú giải công cụ chỉ là thuộc tính

$['.btn.danger'].button['toggle'].addClass['fat']

20 và

$['.btn.danger'].button['toggle'].addClass['fat']

21 trên phần tử HTML mà bạn muốn có chú giải công cụ. Đánh dấu được tạo của một chú giải công cụ khá đơn giản, mặc dù nó yêu cầu một vị trí [theo mặc định, được đặt thành

$['.btn.danger'].button['toggle'].addClass['fat']

22 bởi plugin]

var myDefaultWhiteList = $.fn.tooltip.Constructor.DEFAULTS.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]

Liên kết nhiều dòng

Đôi khi bạn muốn thêm một chú giải công cụ vào một siêu kết nối bao quanh nhiều dòng. Hành vi mặc định của plugin chú giải công cụ là căn giữa nó theo chiều ngang và chiều dọc. Thêm

$['.btn.danger'].button['toggle'].addClass['fat']

23 vào neo của bạn để tránh điều này

Chú giải công cụ trong nhóm nút, nhóm đầu vào và bảng yêu cầu cài đặt đặc biệt

Khi sử dụng chú giải công cụ trên các phần tử trong

$['.btn.danger'].button['toggle'].addClass['fat']

24 hoặc

$['.btn.danger'].button['toggle'].addClass['fat']

25 hoặc trên các phần tử liên quan đến bảng [

$[document].off['.alert.data-api']

05,

$[document].off['.alert.data-api']

05,

$[document].off['.alert.data-api']

05,

$[document].off['.alert.data-api']

05,

$[document].off['.alert.data-api']

05,

$[document].off['.alert.data-api']

05], bạn sẽ phải chỉ định tùy chọn

$['.btn.danger'].button['toggle'].addClass['fat']

32 [được ghi lại bên dưới] để tránh các tác dụng phụ không mong muốn

Đừng cố hiển thị chú giải công cụ trên các phần tử ẩn

Gọi

$['.btn.danger'].button['toggle'].addClass['fat']

33 khi phần tử đích là

$['.btn.danger'].button['toggle'].addClass['fat']

34 sẽ khiến chú giải công cụ được định vị không chính xác

Chú giải công cụ có thể truy cập cho người dùng bàn phím và công nghệ hỗ trợ

Đối với người dùng điều hướng bằng bàn phím và cụ thể là người dùng công nghệ hỗ trợ, bạn chỉ nên thêm chú giải công cụ vào các phần tử có thể tập trung vào bàn phím, chẳng hạn như liên kết, điều khiển biểu mẫu hoặc bất kỳ phần tử tùy ý nào có thuộc tính

$['.btn.danger'].button['toggle'].addClass['fat']

Chú giải công cụ về các phần tử bị vô hiệu hóa yêu cầu các phần tử bao bọc

Để thêm chú giải công cụ vào phần tử

$['.btn.danger'].button['toggle'].addClass['fat']

36 hoặc

$['.btn.danger'].button['toggle'].addClass['fat']

37, hãy đặt phần tử đó bên trong

$[document].off['.alert.data-api']

05 và thay vào đó áp dụng chú giải công cụ cho

$[document].off['.alert.data-api']

05 đó

Các tùy chọn có thể được chuyển qua thuộc tính dữ liệu hoặc JavaScript. Đối với các thuộc tính dữ liệu, hãy thêm tên tùy chọn vào

$[document].off['.alert.data-api']

35, như trong

$['.btn.danger'].button['toggle'].addClass['fat']

Lưu ý rằng vì lý do bảo mật, các tùy chọn

$['.btn.danger'].button['toggle'].addClass['fat']

42,

$[document].off['.alert.data-api']

03 và

$['#yourTooltip'].tooltip[{
  sanitizeFn: function [content] {
    return DOMPurify.sanitize[content]
  }
}]

9 không thể được cung cấp bằng thuộc tính dữ liệu

NameTypeDefaultDescriptionanimationbooleantrueÁp dụng chuyển đổi làm mờ dần CSS cho tooltipcontainerstring. sai sự thật

Nối chú giải công cụ vào một phần tử cụ thể. Thí dụ.

$['.btn.danger'].button['toggle'].addClass['fat']

32. Tùy chọn này đặc biệt hữu ích vì nó cho phép bạn định vị chú giải công cụ trong luồng tài liệu gần phần tử kích hoạt - điều này sẽ ngăn chú giải công cụ trôi ra khỏi phần tử kích hoạt trong khi thay đổi kích thước cửa sổ

số chậm trễ. đối tượng0

Độ trễ hiển thị và ẩn chú giải công cụ [ms] - không áp dụng cho loại trình kích hoạt thủ công

Nếu một số được cung cấp, độ trễ được áp dụng cho cả ẩn/hiện

Cấu trúc đối tượng là.

$['.btn.danger'].button['toggle'].addClass['fat']

htmlbooleanfalseChèn HTML vào tooltip. Nếu sai, phương thức

$['.btn.danger'].button['toggle'].addClass['fat']

47 của jQuery sẽ được sử dụng để chèn nội dung vào DOM. Sử dụng văn bản nếu bạn lo lắng về các cuộc tấn công XSS. chuỗi vị trí. chức năng'top'

Cách định vị chú giải công cụ - trên cùng. đáy. bên trái. bên phải. Tự động.
Khi "tự động" được chỉ định, nó sẽ tự động định hướng lại chú giải công cụ. Ví dụ: nếu vị trí là "tự động sang trái", chú giải công cụ sẽ hiển thị ở bên trái khi có thể, nếu không nó sẽ hiển thị ở bên phải.

Khi một hàm được sử dụng để xác định vị trí, nó được gọi với nút DOM chú giải công cụ làm đối số đầu tiên và nút DOM phần tử kích hoạt làm đối số thứ hai. Bối cảnh

$['.btn.danger'].button['toggle'].addClass['fat']

48 được đặt thành phiên bản chú giải công cụ

selectorstringfalseNếu bộ chọn được cung cấp, các đối tượng chú giải công cụ sẽ được ủy quyền cho các mục tiêu đã chỉ định. Trong thực tế, điều này cũng được sử dụng để áp dụng chú giải công cụ cho các phần tử DOM được thêm động [hỗ trợ ____949]. Xem cái này và một ví dụ thông tin. chuỗi mẫu

$['.btn.danger'].button['toggle'].addClass['fat']

HTML cơ sở để sử dụng khi tạo chú giải công cụ

Chú giải công cụ của

$['.btn.danger'].button['toggle'].addClass['fat']

21 sẽ được đưa vào

$['.btn.danger'].button['toggle'].addClass['fat']

$['.btn.danger'].button['toggle'].addClass['fat']

53 sẽ trở thành mũi tên của chú giải công cụ

Phần tử bao bọc ngoài cùng phải có lớp

$['.btn.danger'].button['toggle'].addClass['fat']

chuỗi tiêu đề. hàm số''

Giá trị tiêu đề mặc định nếu không có thuộc tính

$['.btn.danger'].button['toggle'].addClass['fat']

Nếu một chức năng được cung cấp, nó sẽ được gọi với tham chiếu

$['.btn.danger'].button['toggle'].addClass['fat']

48 được đặt thành phần tử mà chú giải công cụ được đính kèm

chuỗi kích hoạt'tiêu điểm di chuột'Cách chú giải công cụ được kích hoạt - nhấp. bay lượn. tiêu điểm. thủ công. Bạn có thể vượt qua nhiều trình kích hoạt; . Không thể kết hợp

$['.btn.danger'].button['toggle'].addClass['fat']

57 với bất kỳ trình kích hoạt nào khác. chuỗi khung nhìn. sự vật. chức năng { bộ chọn. 'cơ thể', phần đệm. 0 }

Giữ chú giải công cụ trong giới hạn của phần tử này. Thí dụ.

$['.btn.danger'].button['toggle'].addClass['fat']

58 hoặc

$['.btn.danger'].button['toggle'].addClass['fat']

Nếu một hàm được đưa ra, thì nó được gọi với nút DOM của phần tử kích hoạt làm đối số duy nhất của nó. Bối cảnh

$['.btn.danger'].button['toggle'].addClass['fat']

48 được đặt thành phiên bản chú giải công cụ

sanitizebooleantrueBật hoặc tắt khử trùng. Nếu kích hoạt các tùy chọn

$['.btn.danger'].button['toggle'].addClass['fat']

61,

$['.btn.danger'].button['toggle'].addClass['fat']

62 và

$['.btn.danger'].button['toggle'].addClass['fat']

63 sẽ được khử trùng. whiteListobjectDefault valueObject chứa các thuộc tính và thẻ được phépsanitizeFnnull. functionnullỞ đây bạn có thể cung cấp chức năng khử trùng của riêng mình. Điều này có thể hữu ích nếu bạn muốn sử dụng thư viện chuyên dụng để thực hiện vệ sinh

Thuộc tính dữ liệu cho các chú giải công cụ riêng lẻ

Ngoài ra, các tùy chọn cho chú giải công cụ riêng lẻ có thể được chỉ định thông qua việc sử dụng các thuộc tính dữ liệu, như đã giải thích ở trên

$['.btn.danger'].button['toggle'].addClass['fat']

Đính kèm trình xử lý chú giải công cụ vào bộ sưu tập phần tử

$['.btn.danger'].button['toggle'].addClass['fat']

Tiết lộ chú giải công cụ của một phần tử. Trả về trình gọi trước khi chú giải công cụ thực sự được hiển thị [i. e. trước khi sự kiện

$['.btn.danger'].button['toggle'].addClass['fat']

66 xảy ra]. Đây được coi là kích hoạt "thủ công" của chú giải công cụ. Chú giải công cụ có tiêu đề độ dài bằng 0 không bao giờ được hiển thị

var myDefaultWhiteList = $.fn.tooltip.Constructor.DEFAULTS.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]

$['.btn.danger'].button['toggle'].addClass['fat']

Ẩn chú giải công cụ của một phần tử. Trả về trình gọi trước khi chú giải công cụ thực sự bị ẩn [i. e. trước khi sự kiện

$['.btn.danger'].button['toggle'].addClass['fat']

68 xảy ra]. Đây được coi là kích hoạt "thủ công" của chú giải công cụ

var myDefaultWhiteList = $.fn.tooltip.Constructor.DEFAULTS.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]

$['.btn.danger'].button['toggle'].addClass['fat']

Chuyển đổi chú giải công cụ của một phần tử. Trả về trình gọi trước khi chú giải công cụ thực sự được hiển thị hoặc ẩn [i. e. trước khi sự kiện

$['.btn.danger'].button['toggle'].addClass['fat']

66 hoặc

$['.btn.danger'].button['toggle'].addClass['fat']

68 xảy ra]. Đây được coi là kích hoạt "thủ công" của chú giải công cụ

var myDefaultWhiteList = $.fn.tooltip.Constructor.DEFAULTS.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]

$['.btn.danger'].button['toggle'].addClass['fat']

Ẩn và phá hủy tooltip của một phần tử. Chú giải công cụ sử dụng ủy quyền [được tạo bằng tùy chọn

$['.btn.danger'].button['toggle'].addClass['fat']

73] không thể bị hủy riêng lẻ trên các phần tử kích hoạt hậu duệ

var myDefaultWhiteList = $.fn.tooltip.Constructor.DEFAULTS.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]

Loại sự kiệnMô tảshow. bs. tooltip Sự kiện này kích hoạt ngay lập tức khi phương thức đối tượng

$['#yourTooltip'].tooltip[{
  sanitizeFn: function [content] {
    return DOMPurify.sanitize[content]
  }
}]

6 được gọi. cho xem. bs. tooltip Sự kiện này được kích hoạt khi tooltip được hiển thị cho người dùng [sẽ đợi quá trình chuyển đổi CSS hoàn tất]. ẩn giấu. bs. tooltip Sự kiện này được kích hoạt ngay lập tức khi phương thức đối tượng

$[document].off['.alert.data-api']

56 được gọi. ẩn giấu. bs. tooltip Sự kiện này được kích hoạt khi tooltip đã được ẩn khỏi người dùng [sẽ đợi quá trình chuyển đổi CSS hoàn tất]. chèn vào. bs. tooltip Sự kiện này được kích hoạt sau sự kiện

$['.btn.danger'].button['toggle'].addClass['fat']

76 khi mẫu tooltip đã được thêm vào DOM

var myDefaultWhiteList = $.fn.tooltip.Constructor.DEFAULTS.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]

Thêm các lớp phủ nội dung nhỏ, chẳng hạn như trên iPad, vào bất kỳ thành phần nào để chứa thông tin thứ cấp

Cửa sổ bật lên có cả tiêu đề và nội dung đều có độ dài bằng 0 sẽ không bao giờ được hiển thị

Phụ thuộc plugin

Cửa sổ bật lên yêu cầu plugin chú giải công cụ được đưa vào phiên bản Bootstrap của bạn

Chức năng chọn tham gia

Vì lý do hiệu suất, apis dữ liệu Chú giải công cụ và Cửa sổ bật lên được chọn tham gia, nghĩa là bạn phải tự khởi tạo chúng

Một cách để khởi tạo tất cả các cửa sổ bật lên trên một trang là chọn chúng theo thuộc tính

$['.btn.danger'].button['toggle'].addClass['fat']

19 của chúng

var myDefaultWhiteList = $.fn.tooltip.Constructor.DEFAULTS.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]

Cửa sổ bật lên trong nhóm nút, nhóm đầu vào và bảng yêu cầu cài đặt đặc biệt

Khi sử dụng cửa sổ bật lên trên các phần tử trong

$['.btn.danger'].button['toggle'].addClass['fat']

24 hoặc

$['.btn.danger'].button['toggle'].addClass['fat']

25 hoặc trên các phần tử liên quan đến bảng [

$[document].off['.alert.data-api']

05,

$[document].off['.alert.data-api']

05,

$[document].off['.alert.data-api']

05,

$[document].off['.alert.data-api']

05,

$[document].off['.alert.data-api']

05,

$[document].off['.alert.data-api']

05], bạn sẽ phải chỉ định tùy chọn

$['.btn.danger'].button['toggle'].addClass['fat']

32 [được ghi lại bên dưới] để tránh các tác dụng phụ không mong muốn

Đừng cố hiển thị cửa sổ bật lên trên các phần tử ẩn

Gọi

$['.btn.danger'].button['toggle'].addClass['fat']

87 khi phần tử đích là

$['.btn.danger'].button['toggle'].addClass['fat']

34 sẽ khiến cửa sổ bật lên bị đặt sai vị trí

Cửa sổ bật lên trên các phần tử bị vô hiệu hóa yêu cầu các phần tử bao bọc

Để thêm cửa sổ bật lên vào phần tử

$['.btn.danger'].button['toggle'].addClass['fat']

36 hoặc

$['.btn.danger'].button['toggle'].addClass['fat']

37, hãy đặt phần tử bên trong

$[document].off['.alert.data-api']

05 và thay vào đó áp dụng cửa sổ bật lên cho

$[document].off['.alert.data-api']

05 đó

Liên kết nhiều dòng

Đôi khi bạn muốn thêm cửa sổ bật lên vào siêu kết nối bao quanh nhiều dòng. Hành vi mặc định của plugin popover là căn giữa nó theo chiều ngang và chiều dọc. Thêm

$['.btn.danger'].button['toggle'].addClass['fat']

23 vào neo của bạn để tránh điều này

ví dụ

Cửa sổ bật lên tĩnh

Bốn tùy chọn có sẵn. căn trên, phải, dưới và trái

cửa sổ bật lên

Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum

Cửa sổ bật lên bên phải

Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum

đáy cửa sổ bật lên

Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum

Cửa sổ bật lên bên trái

Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum

Bản thử trực tiếp

var myDefaultWhiteList = $.fn.tooltip.Constructor.DEFAULTS.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]

bốn hướng

Popover ở bên phải Popover ở trên Popover ở dưới Popover ở bên trái

var myDefaultWhiteList = $.fn.tooltip.Constructor.DEFAULTS.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]

Bỏ qua lần nhấp tiếp theo

Sử dụng trình kích hoạt

$['.btn.danger'].button['toggle'].addClass['fat']

94 để loại bỏ cửa sổ bật lên trong lần nhấp tiếp theo mà người dùng thực hiện

Yêu cầu đánh dấu cụ thể để loại bỏ khi nhấp vào lần nhấp tiếp theo

Để có hành vi đa nền tảng và trình duyệt phù hợp, bạn phải sử dụng thẻ

$[document].off['.alert.data-api']

05, không phải thẻ

$[document].off['.alert.data-api']

05 và bạn cũng phải bao gồm các thuộc tính

$['.btn.danger'].button['toggle'].addClass['fat']

97 và

$['.btn.danger'].button['toggle'].addClass['fat']

var myDefaultWhiteList = $.fn.tooltip.Constructor.DEFAULTS.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]

Cách sử dụng

Kích hoạt cửa sổ bật lên qua JavaScript

var myDefaultWhiteList = $.fn.tooltip.Constructor.DEFAULTS.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]

Tùy chọn

Các tùy chọn có thể được chuyển qua thuộc tính dữ liệu hoặc JavaScript. Đối với các thuộc tính dữ liệu, hãy thêm tên tùy chọn vào

$[document].off['.alert.data-api']

35, như trong

$['.btn.danger'].button['toggle'].addClass['fat']

Lưu ý rằng vì lý do bảo mật, các tùy chọn

$['.btn.danger'].button['toggle'].addClass['fat']

42,

$[document].off['.alert.data-api']

03 và

$['#yourTooltip'].tooltip[{
  sanitizeFn: function [content] {
    return DOMPurify.sanitize[content]
  }
}]

9 không thể được cung cấp bằng thuộc tính dữ liệu

NameTypeDefaultDescriptionanimationbooleantrueÁp dụng chuyển đổi mờ dần CSS cho chuỗi popovercontainer. sai sự thật

Nối popover vào một phần tử cụ thể. Thí dụ.

$['.btn.danger'].button['toggle'].addClass['fat']

32. Tùy chọn này đặc biệt hữu ích vì nó cho phép bạn định vị cửa sổ bật lên trong luồng tài liệu gần phần tử kích hoạt - điều này sẽ ngăn cửa sổ bật lên trôi ra khỏi phần tử kích hoạt trong khi thay đổi kích thước cửa sổ

chuỗi nội dung. hàm số''

Giá trị nội dung mặc định nếu không có thuộc tính

var myDefaultWhiteList = $.fn.tooltip.Constructor.DEFAULTS.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]

005

Nếu một hàm được cung cấp, nó sẽ được gọi với tham chiếu

$['.btn.danger'].button['toggle'].addClass['fat']

48 được đặt thành phần tử mà cửa sổ bật lên được đính kèm

số chậm trễ. đối tượng0

Độ trễ hiển thị và ẩn cửa sổ bật lên [ms] - không áp dụng cho loại trình kích hoạt thủ công

Nếu một số được cung cấp, độ trễ được áp dụng cho cả ẩn/hiện

Cấu trúc đối tượng là.

$['.btn.danger'].button['toggle'].addClass['fat']

htmlbooleanfalseChèn HTML vào cửa sổ bật lên. If false, jQuery's

$['.btn.danger'].button['toggle'].addClass['fat']

47 method will be used to insert content into the DOM. Sử dụng văn bản nếu bạn lo lắng về các cuộc tấn công XSS. chuỗi vị trí. chức năng'đúng'

How to position the popover - top . bottom . left . right . auto.
When "auto" is specified, it will dynamically reorient the popover. For example, if placement is "auto left", the popover will display to the left when possible, otherwise it will display right.

When a function is used to determine the placement, it is called with the popover DOM node as its first argument and the triggering element DOM node as its second. The

$['.btn.danger'].button['toggle'].addClass['fat']

48 context is set to the popover instance

selectorstringfalseIf a selector is provided, popover objects will be delegated to the specified targets. In practice, this is used to enable dynamic HTML content to have popovers added. See this and an informative example. templatestring

var myDefaultWhiteList = $.fn.tooltip.Constructor.DEFAULTS.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]

010

Base HTML to use when creating the popover

The popover's

$['.btn.danger'].button['toggle'].addClass['fat']

21 will be injected into the

var myDefaultWhiteList = $.fn.tooltip.Constructor.DEFAULTS.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]

012

The popover's

var myDefaultWhiteList = $.fn.tooltip.Constructor.DEFAULTS.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]

013 will be injected into the

var myDefaultWhiteList = $.fn.tooltip.Constructor.DEFAULTS.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]

014

var myDefaultWhiteList = $.fn.tooltip.Constructor.DEFAULTS.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]

015 will become the popover's arrow

The outermost wrapper element should have the

var myDefaultWhiteList = $.fn.tooltip.Constructor.DEFAULTS.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]

016 class

chuỗi tiêu đề. hàm số''

Giá trị tiêu đề mặc định nếu không có thuộc tính

$['.btn.danger'].button['toggle'].addClass['fat']

Nếu một hàm được cung cấp, nó sẽ được gọi với tham chiếu

$['.btn.danger'].button['toggle'].addClass['fat']

48 được đặt thành phần tử mà cửa sổ bật lên được đính kèm

triggerstring'click'How popover is triggered - click . hover . focus . manual. You may pass multiple triggers; separate them with a space.

$['.btn.danger'].button['toggle'].addClass['fat']

57 cannot be combined with any other trigger. viewportstring . object . function{ selector. 'body', padding. 0 }

Keeps the popover within the bounds of this element. Example.

$['.btn.danger'].button['toggle'].addClass['fat']

58 or

$['.btn.danger'].button['toggle'].addClass['fat']

If a function is given, it is called with the triggering element DOM node as its only argument. The

$['.btn.danger'].button['toggle'].addClass['fat']

48 context is set to the popover instance

sanitizebooleantrueBật hoặc tắt khử trùng. Nếu kích hoạt các tùy chọn

$['.btn.danger'].button['toggle'].addClass['fat']

61,

$['.btn.danger'].button['toggle'].addClass['fat']

62 và

$['.btn.danger'].button['toggle'].addClass['fat']

Data attributes for individual popovers

Options for individual popovers can alternatively be specified through the use of data attributes, as explained above

phương pháp

var myDefaultWhiteList = $.fn.tooltip.Constructor.DEFAULTS.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]

026

Initializes popovers for an element collection

var myDefaultWhiteList = $.fn.tooltip.Constructor.DEFAULTS.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]

027

Reveals an element's popover. Returns to the caller before the popover has actually been shown [i. e. before the

var myDefaultWhiteList = $.fn.tooltip.Constructor.DEFAULTS.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]

028 event occurs]. This is considered a "manual" triggering of the popover. Popovers whose both title and content are zero-length are never displayed

var myDefaultWhiteList = $.fn.tooltip.Constructor.DEFAULTS.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]

var myDefaultWhiteList = $.fn.tooltip.Constructor.DEFAULTS.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]

029

Hides an element's popover. Returns to the caller before the popover has actually been hidden [i. e. before the

var myDefaultWhiteList = $.fn.tooltip.Constructor.DEFAULTS.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]

030 event occurs]. This is considered a "manual" triggering of the popover

var myDefaultWhiteList = $.fn.tooltip.Constructor.DEFAULTS.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]

var myDefaultWhiteList = $.fn.tooltip.Constructor.DEFAULTS.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]

031

Toggles an element's popover. Returns to the caller before the popover has actually been shown or hidden [i. e. before the

var myDefaultWhiteList = $.fn.tooltip.Constructor.DEFAULTS.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]

028 or

var myDefaultWhiteList = $.fn.tooltip.Constructor.DEFAULTS.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]

030 event occurs]. This is considered a "manual" triggering of the popover

var myDefaultWhiteList = $.fn.tooltip.Constructor.DEFAULTS.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]

var myDefaultWhiteList = $.fn.tooltip.Constructor.DEFAULTS.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]

034

Hides and destroys an element's popover. Popovers that use delegation [which are created using the

$['.btn.danger'].button['toggle'].addClass['fat']

73 option] cannot be individually destroyed on descendant trigger elements

var myDefaultWhiteList = $.fn.tooltip.Constructor.DEFAULTS.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]

Sự kiện

Event TypeDescriptionshow. bs. popoverThis event fires immediately when the

$['#yourTooltip'].tooltip[{
  sanitizeFn: function [content] {
    return DOMPurify.sanitize[content]
  }
}]

6 instance method is called. shown. bs. popoverThis event is fired when the popover has been made visible to the user [will wait for CSS transitions to complete]. hide. bs. popoverThis event is fired immediately when the

$[document].off['.alert.data-api']

56 instance method has been called. hidden. bs. popoverThis event is fired when the popover has finished being hidden from the user [will wait for CSS transitions to complete]. inserted. bs. popoverThis event is fired after the

var myDefaultWhiteList = $.fn.tooltip.Constructor.DEFAULTS.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]

038 event when the popover template has been added to the DOM

var myDefaultWhiteList = $.fn.tooltip.Constructor.DEFAULTS.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]

Example alerts

Add dismiss functionality to all alert messages with this plugin

When using a

var myDefaultWhiteList = $.fn.tooltip.Constructor.DEFAULTS.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]

039 button, it must be the first child of the

var myDefaultWhiteList = $.fn.tooltip.Constructor.DEFAULTS.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]

040 and no text content may come before it in the markup

× Holy guacamole. Best check yo self, you're not looking too good

Oh snap. Bạn gặp lỗi

Change this and that and try again. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum

Take this action Or do this

Cách sử dụng

Just add

var myDefaultWhiteList = $.fn.tooltip.Constructor.DEFAULTS.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]

041 to your close button to automatically give an alert close functionality. Closing an alert removes it from the DOM

var myDefaultWhiteList = $.fn.tooltip.Constructor.DEFAULTS.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]

To have your alerts use animation when closing, make sure they have the

$[document].off['.alert.data-api']

22 and

$[document].off['.alert.data-api']

95 classes already applied to them

phương pháp

var myDefaultWhiteList = $.fn.tooltip.Constructor.DEFAULTS.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]

044

Makes an alert listen for click events on descendant elements which have the

var myDefaultWhiteList = $.fn.tooltip.Constructor.DEFAULTS.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]

041 attribute. [Not necessary when using the data-api's auto-initialization. ]

var myDefaultWhiteList = $.fn.tooltip.Constructor.DEFAULTS.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]

046

Closes an alert by removing it from the DOM. If the

$[document].off['.alert.data-api']

22 and

$[document].off['.alert.data-api']

95 classes are present on the element, the alert will fade out before it is removed

Sự kiện

Plugin cảnh báo Bootstrap hiển thị một vài sự kiện để nối vào chức năng cảnh báo

Loại sự kiệnMô tảĐóng. bs. alertSự kiện này kích hoạt ngay lập tức khi phương thức đối tượng

var myDefaultWhiteList = $.fn.tooltip.Constructor.DEFAULTS.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]

049 được gọi. đóng cửa. bs. alertSự kiện này được kích hoạt khi cảnh báo đã bị đóng [sẽ đợi quá trình chuyển đổi CSS hoàn tất]

var myDefaultWhiteList = $.fn.tooltip.Constructor.DEFAULTS.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]

Làm nhiều hơn với các nút. Trạng thái nút điều khiển hoặc tạo nhóm nút cho nhiều thành phần hơn như thanh công cụ

nhà nước

Thêm

var myDefaultWhiteList = $.fn.tooltip.Constructor.DEFAULTS.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]

050 để sử dụng trạng thái tải trên nút

Tính năng này không được dùng nữa kể từ v3. 3. 5 and has been removed in v4

var myDefaultWhiteList = $.fn.tooltip.Constructor.DEFAULTS.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]

Single toggle

Add

var myDefaultWhiteList = $.fn.tooltip.Constructor.DEFAULTS.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]

051 to activate toggling on a single button

Pre-toggled buttons need

var myDefaultWhiteList = $.fn.tooltip.Constructor.DEFAULTS.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]

052 and

var myDefaultWhiteList = $.fn.tooltip.Constructor.DEFAULTS.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]

053

For pre-toggled buttons, you must add the

var myDefaultWhiteList = $.fn.tooltip.Constructor.DEFAULTS.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]

052 class and the

var myDefaultWhiteList = $.fn.tooltip.Constructor.DEFAULTS.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]

053 attribute to the

var myDefaultWhiteList = $.fn.tooltip.Constructor.DEFAULTS.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]

056 yourself

var myDefaultWhiteList = $.fn.tooltip.Constructor.DEFAULTS.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]

Checkbox / Radio

Add

var myDefaultWhiteList = $.fn.tooltip.Constructor.DEFAULTS.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]

057 to a

$['.btn.danger'].button['toggle'].addClass['fat']

24 containing checkbox or radio inputs to enable toggling in their respective styles

Preselected options need

var myDefaultWhiteList = $.fn.tooltip.Constructor.DEFAULTS.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]

052

For preselected options, you must add the

var myDefaultWhiteList = $.fn.tooltip.Constructor.DEFAULTS.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]

052 class to the input's

var myDefaultWhiteList = $.fn.tooltip.Constructor.DEFAULTS.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]

061 yourself

Visual checked state only updated on click

If the checked state of a checkbox button is updated without firing a

var myDefaultWhiteList = $.fn.tooltip.Constructor.DEFAULTS.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]

062 event on the button [e. g. via

$[document].off['.alert.data-api']

05 or via setting the

var myDefaultWhiteList = $.fn.tooltip.Constructor.DEFAULTS.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]

064 property of the input], you will need to toggle the

var myDefaultWhiteList = $.fn.tooltip.Constructor.DEFAULTS.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]

052 class on the input's

var myDefaultWhiteList = $.fn.tooltip.Constructor.DEFAULTS.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]

061 yourself

var myDefaultWhiteList = $.fn.tooltip.Constructor.DEFAULTS.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]

var myDefaultWhiteList = $.fn.tooltip.Constructor.DEFAULTS.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]

phương pháp

var myDefaultWhiteList = $.fn.tooltip.Constructor.DEFAULTS.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]

067

Toggles push state. Gives the button the appearance that it has been activated

var myDefaultWhiteList = $.fn.tooltip.Constructor.DEFAULTS.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]

068

Resets button state - swaps text to original text. This method is asynchronous and returns before the resetting has actually completed

var myDefaultWhiteList = $.fn.tooltip.Constructor.DEFAULTS.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]

069

Swaps text to any data defined text state

var myDefaultWhiteList = $.fn.tooltip.Constructor.DEFAULTS.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]

Flexible plugin that utilizes a handful of classes for easy toggle behavior

Phụ thuộc plugin

Collapse requires the transitions plugin to be included in your version of Bootstrap

Example

Nhấp vào các nút bên dưới để hiển thị và ẩn phần tử khác thông qua thay đổi lớp

var myDefaultWhiteList = $.fn.tooltip.Constructor.DEFAULTS.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]

070 hides content

var myDefaultWhiteList = $.fn.tooltip.Constructor.DEFAULTS.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]

071 is applied during transitions

var myDefaultWhiteList = $.fn.tooltip.Constructor.DEFAULTS.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]

072 shows content

You can use a link with the

$[document].off['.alert.data-api']

41 attribute, or a button with the

$[document].off['.alert.data-api']

62 attribute. In both cases, the

var myDefaultWhiteList = $.fn.tooltip.Constructor.DEFAULTS.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]

075 is required

Link with href Button with data-target

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident

var myDefaultWhiteList = $.fn.tooltip.Constructor.DEFAULTS.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]

Accordion example

Extend the default collapse behavior to create an accordion with the panel component

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS

var myDefaultWhiteList = $.fn.tooltip.Constructor.DEFAULTS.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]

It's also possible to swap out

var myDefaultWhiteList = $.fn.tooltip.Constructor.DEFAULTS.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]

076s with

var myDefaultWhiteList = $.fn.tooltip.Constructor.DEFAULTS.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]

077s

Bootply
One itmus ac facilin
Second eros

Make expand/collapse controls accessible

Be sure to add

var myDefaultWhiteList = $.fn.tooltip.Constructor.DEFAULTS.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]

078 to the control element. This attribute explicitly defines the current state of the collapsible element to screen readers and similar assistive technologies. If the collapsible element is closed by default, it should have a value of

var myDefaultWhiteList = $.fn.tooltip.Constructor.DEFAULTS.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]

079. If you've set the collapsible element to be open by default using the

var myDefaultWhiteList = $.fn.tooltip.Constructor.DEFAULTS.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]

080 class, set

var myDefaultWhiteList = $.fn.tooltip.Constructor.DEFAULTS.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]

081 on the control instead. The plugin will automatically toggle this attribute based on whether or not the collapsible element has been opened or closed

Additionally, if your control element is targeting a single collapsible element – i. e. the

$[document].off['.alert.data-api']

62 attribute is pointing to an

var myDefaultWhiteList = $.fn.tooltip.Constructor.DEFAULTS.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]

083 selector – you may add an additional

var myDefaultWhiteList = $.fn.tooltip.Constructor.DEFAULTS.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]

084 attribute to the control element, containing the

var myDefaultWhiteList = $.fn.tooltip.Constructor.DEFAULTS.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]

083 of the collapsible element. Modern screen readers and similar assistive technologies make use of this attribute to provide users with additional shortcuts to navigate directly to the collapsible element itself

Cách sử dụng

The collapse plugin utilizes a few classes to handle the heavy lifting

var myDefaultWhiteList = $.fn.tooltip.Constructor.DEFAULTS.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]

070 hides the content

var myDefaultWhiteList = $.fn.tooltip.Constructor.DEFAULTS.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]

072 shows the content

var myDefaultWhiteList = $.fn.tooltip.Constructor.DEFAULTS.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]

071 is added when the transition starts, and removed when it finishes

These classes can be found in

var myDefaultWhiteList = $.fn.tooltip.Constructor.DEFAULTS.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]

089

Thông qua thuộc tính dữ liệu

Just add

var myDefaultWhiteList = $.fn.tooltip.Constructor.DEFAULTS.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]

075 and a

$[document].off['.alert.data-api']

62 to the element to automatically assign control of a collapsible element. The

$[document].off['.alert.data-api']

62 attribute accepts a CSS selector to apply the collapse to. Be sure to add the class

var myDefaultWhiteList = $.fn.tooltip.Constructor.DEFAULTS.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]

093 to the collapsible element. If you'd like it to default open, add the additional class

var myDefaultWhiteList = $.fn.tooltip.Constructor.DEFAULTS.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]

080

To add accordion-like group management to a collapsible control, add the data attribute

var myDefaultWhiteList = $.fn.tooltip.Constructor.DEFAULTS.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]

095. Refer to the demo to see this in action

Qua JavaScript

Enable manually with

var myDefaultWhiteList = $.fn.tooltip.Constructor.DEFAULTS.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]

Tùy chọn

Options can be passed via data attributes or JavaScript. For data attributes, append the option name to

$[document].off['.alert.data-api']

35, as in

var myDefaultWhiteList = $.fn.tooltip.Constructor.DEFAULTS.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]

097

NametypedefaultdescriptionparentselectorfalseIf a selector is provided, then all collapsible elements under the specified parent will be closed when this collapsible item is shown. [similar to traditional accordion behavior - this is dependent on the

var myDefaultWhiteList = $.fn.tooltip.Constructor.DEFAULTS.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]

098 class]togglebooleantrueToggles the collapsible element on invocation

phương pháp

var myDefaultWhiteList = $.fn.tooltip.Constructor.DEFAULTS.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]

099

Activates your content as a collapsible element. Accepts an optional options

$[document].off['.alert.data-api']

var myDefaultWhiteList = $.fn.tooltip.Constructor.DEFAULTS.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]

var myDefaultWhiteList = $.fn.tooltip.Constructor.DEFAULTS.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]

501

Toggles a collapsible element to shown or hidden. Returns to the caller before the collapsible element has actually been shown or hidden [i. e. trước khi sự kiện

var myDefaultWhiteList = $.fn.tooltip.Constructor.DEFAULTS.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]

502 hoặc

var myDefaultWhiteList = $.fn.tooltip.Constructor.DEFAULTS.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]

503 xảy ra]

var myDefaultWhiteList = $.fn.tooltip.Constructor.DEFAULTS.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]

504

Shows a collapsible element. Returns to the caller before the collapsible element has actually been shown [i. e. before the

var myDefaultWhiteList = $.fn.tooltip.Constructor.DEFAULTS.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]

502 event occurs]

var myDefaultWhiteList = $.fn.tooltip.Constructor.DEFAULTS.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]

506

Hides a collapsible element. Returns to the caller before the collapsible element has actually been hidden [i. e. before the

var myDefaultWhiteList = $.fn.tooltip.Constructor.DEFAULTS.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]

503 event occurs]

Sự kiện

Bootstrap's collapse class exposes a few events for hooking into collapse functionality

Event TypeDescriptionshow. bs. collapseThis event fires immediately when the

$['#yourTooltip'].tooltip[{
  sanitizeFn: function [content] {
    return DOMPurify.sanitize[content]
  }
}]

6 instance method is called. shown. bs. collapseThis event is fired when a collapse element has been made visible to the user [will wait for CSS transitions to complete]. hide. bs. collapseThis event is fired immediately when the

$[document].off['.alert.data-api']

56 method has been called. hidden. bs. collapseThis event is fired when a collapse element has been hidden from the user [will wait for CSS transitions to complete]

var myDefaultWhiteList = $.fn.tooltip.Constructor.DEFAULTS.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]

Thành phần trình chiếu để quay vòng qua các phần tử, chẳng hạn như băng chuyền. Nested carousels are not supported

ví dụ

var myDefaultWhiteList = $.fn.tooltip.Constructor.DEFAULTS.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]

Accessibility issue

Thành phần băng chuyền thường không tuân thủ các tiêu chuẩn trợ năng. Nếu bạn cần phải tuân thủ, vui lòng xem xét các tùy chọn khác để trình bày nội dung của bạn

Transition animations not supported in Internet Explorer 8 & 9

Bootstrap exclusively uses CSS3 for its animations, but Internet Explorer 8 & 9 don't support the necessary CSS properties. Thus, there are no slide transition animations when using these browsers. Chúng tôi đã cố ý quyết định không bao gồm các dự phòng dựa trên jQuery cho quá trình chuyển đổi

Yêu cầu yếu tố hoạt động ban đầu

Lớp

var myDefaultWhiteList = $.fn.tooltip.Constructor.DEFAULTS.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]

052 cần được thêm vào một trong các trang chiếu. Nếu không, băng chuyền sẽ không hiển thị

Biểu tượng Glyphicon không cần thiết

Các lớp

var myDefaultWhiteList = $.fn.tooltip.Constructor.DEFAULTS.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]

511 và

var myDefaultWhiteList = $.fn.tooltip.Constructor.DEFAULTS.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]

512 không nhất thiết cần thiết cho các điều khiển. Bootstrap cung cấp

var myDefaultWhiteList = $.fn.tooltip.Constructor.DEFAULTS.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]

513 và

var myDefaultWhiteList = $.fn.tooltip.Constructor.DEFAULTS.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]

514 dưới dạng các lựa chọn thay thế unicode đơn giản

chú thích tùy chọn

Thêm chú thích vào trang chiếu của bạn một cách dễ dàng với phần tử

var myDefaultWhiteList = $.fn.tooltip.Constructor.DEFAULTS.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]

515 trong bất kỳ

var myDefaultWhiteList = $.fn.tooltip.Constructor.DEFAULTS.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]

516 nào. Đặt bất kỳ HTML tùy chọn nào trong đó và nó sẽ tự động được căn chỉnh và định dạng

Nhãn trượt đầu tiên

Nulla vitae elit libero, pharetra augue mollis interdum

Nhãn trượt thứ hai

Lorem ipsum dolor sit amet, consectetur adipiscing elit

Nhãn slide thứ ba

Praesent commodo cursus magna, vel scelerisque nisl consectetur

Trước Sau

var myDefaultWhiteList = $.fn.tooltip.Constructor.DEFAULTS.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]

Cách sử dụng

Nhiều băng chuyền

Băng chuyền yêu cầu sử dụng

var myDefaultWhiteList = $.fn.tooltip.Constructor.DEFAULTS.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]

083 trên thùng chứa ngoài cùng [_____1518] để điều khiển băng chuyền hoạt động bình thường. Khi thêm nhiều băng chuyền hoặc khi thay đổi

var myDefaultWhiteList = $.fn.tooltip.Constructor.DEFAULTS.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]

083 của băng chuyền, hãy đảm bảo cập nhật các điều khiển có liên quan

Thông qua thuộc tính dữ liệu

Use data attributes to easily control the position of the carousel.

var myDefaultWhiteList = $.fn.tooltip.Constructor.DEFAULTS.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]

520 accepts the keywords

var myDefaultWhiteList = $.fn.tooltip.Constructor.DEFAULTS.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]

521 or

var myDefaultWhiteList = $.fn.tooltip.Constructor.DEFAULTS.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]

522, which alters the slide position relative to its current position. Alternatively, use

var myDefaultWhiteList = $.fn.tooltip.Constructor.DEFAULTS.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]

523 to pass a raw slide index to the carousel

var myDefaultWhiteList = $.fn.tooltip.Constructor.DEFAULTS.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]

524, which shifts the slide position to a particular index beginning with

var myDefaultWhiteList = $.fn.tooltip.Constructor.DEFAULTS.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]

525

The

var myDefaultWhiteList = $.fn.tooltip.Constructor.DEFAULTS.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]

526 attribute is used to mark a carousel as animating starting at page load. It cannot be used in combination with [redundant and unnecessary] explicit JavaScript initialization of the same carousel

Qua JavaScript

Gọi băng chuyền theo cách thủ công với

var myDefaultWhiteList = $.fn.tooltip.Constructor.DEFAULTS.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]

Tùy chọn

Options can be passed via data attributes or JavaScript. For data attributes, append the option name to

$[document].off['.alert.data-api']

35, as in

var myDefaultWhiteList = $.fn.tooltip.Constructor.DEFAULTS.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]

528

Nametypedefaultdescriptionintervalnumber5000The amount of time to delay between automatically cycling an item. If false, carousel will not automatically cycle. pausestring . null"hover"If set to

var myDefaultWhiteList = $.fn.tooltip.Constructor.DEFAULTS.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]

529, pauses the cycling of the carousel on

var myDefaultWhiteList = $.fn.tooltip.Constructor.DEFAULTS.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]

530 and resumes the cycling of the carousel on

var myDefaultWhiteList = $.fn.tooltip.Constructor.DEFAULTS.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]

531. If set to

var myDefaultWhiteList = $.fn.tooltip.Constructor.DEFAULTS.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]

532, hovering over the carousel won't pause it. wrapbooleantrueWhether the carousel should cycle continuously or have hard stops. keyboardbooleantrueWhether the carousel should react to keyboard events

phương pháp

var myDefaultWhiteList = $.fn.tooltip.Constructor.DEFAULTS.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]

533

Initializes the carousel with an optional options

$[document].off['.alert.data-api']

43 and starts cycling through items

var myDefaultWhiteList = $.fn.tooltip.Constructor.DEFAULTS.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]

var myDefaultWhiteList = $.fn.tooltip.Constructor.DEFAULTS.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]

535

Cycles through the carousel items from left to right

var myDefaultWhiteList = $.fn.tooltip.Constructor.DEFAULTS.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]

536

Stops the carousel from cycling through items

var myDefaultWhiteList = $.fn.tooltip.Constructor.DEFAULTS.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]

537

Cycles the carousel to a particular frame [0 based, similar to an array]

var myDefaultWhiteList = $.fn.tooltip.Constructor.DEFAULTS.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]

538

Cycles to the previous item

var myDefaultWhiteList = $.fn.tooltip.Constructor.DEFAULTS.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]

539

Cycles to the next item

Sự kiện

Bootstrap's carousel class exposes two events for hooking into carousel functionality

Both events have the following additional properties

var myDefaultWhiteList = $.fn.tooltip.Constructor.DEFAULTS.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]

540. The direction in which the carousel is sliding [either

var myDefaultWhiteList = $.fn.tooltip.Constructor.DEFAULTS.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]

541 or

var myDefaultWhiteList = $.fn.tooltip.Constructor.DEFAULTS.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]

542]

```
$[document].off['.alert.data-api']
```
27. The DOM element that is being slid into place as the active item

All carousel events are fired at the carousel itself [i. e. at the

$[document].off['.alert.data-api']

05]

Event TypeDescriptionslide. bs. carouselThis event fires immediately when the

var myDefaultWhiteList = $.fn.tooltip.Constructor.DEFAULTS.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]

545 instance method is invoked. slid. bs. carouselThis event is fired when the carousel has completed its slide transition

var myDefaultWhiteList = $.fn.tooltip.Constructor.DEFAULTS.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]

Example

The affix plugin toggles

var myDefaultWhiteList = $.fn.tooltip.Constructor.DEFAULTS.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]

546 on and off, emulating the effect found with

var myDefaultWhiteList = $.fn.tooltip.Constructor.DEFAULTS.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]

547. The subnavigation on the right is a live demo of the affix plugin

Cách sử dụng

Use the affix plugin via data attributes or manually with your own JavaScript. In both situations, you must provide CSS for the positioning and width of your affixed content

Note. Do not use the affix plugin on an element contained in a relatively positioned element, such as a pulled or pushed column, due to a Safari rendering bug

Positioning via CSS

The affix plugin toggles between three classes, each representing a particular state.

var myDefaultWhiteList = $.fn.tooltip.Constructor.DEFAULTS.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]

548,

var myDefaultWhiteList = $.fn.tooltip.Constructor.DEFAULTS.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]

549, and

var myDefaultWhiteList = $.fn.tooltip.Constructor.DEFAULTS.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]

550. You must provide the styles, with the exception of

var myDefaultWhiteList = $.fn.tooltip.Constructor.DEFAULTS.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]

546 on

var myDefaultWhiteList = $.fn.tooltip.Constructor.DEFAULTS.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]

548, for these classes yourself [independent of this plugin] to handle the actual positions

Here's how the affix plugin works

To start, the plugin adds

var myDefaultWhiteList = $.fn.tooltip.Constructor.DEFAULTS.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]

549 to indicate the element is in its top-most position. At this point no CSS positioning is required

Scrolling past the element you want affixed should trigger the actual affixing. This is where

var myDefaultWhiteList = $.fn.tooltip.Constructor.DEFAULTS.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]

548 replaces

var myDefaultWhiteList = $.fn.tooltip.Constructor.DEFAULTS.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]

549 and sets

var myDefaultWhiteList = $.fn.tooltip.Constructor.DEFAULTS.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]

546 [provided by Bootstrap's CSS]

If a bottom offset is defined, scrolling past it should replace

var myDefaultWhiteList = $.fn.tooltip.Constructor.DEFAULTS.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]

548 with

var myDefaultWhiteList = $.fn.tooltip.Constructor.DEFAULTS.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]

550. Since offsets are optional, setting one requires you to set the appropriate CSS. In this case, add

var myDefaultWhiteList = $.fn.tooltip.Constructor.DEFAULTS.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]

559 when necessary. The plugin uses the data attribute or JavaScript option to determine where to position the element from there

Follow the above steps to set your CSS for either of the usage options below

Thông qua thuộc tính dữ liệu

Để dễ dàng thêm hành vi gắn vào bất kỳ phần tử nào, chỉ cần thêm

var myDefaultWhiteList = $.fn.tooltip.Constructor.DEFAULTS.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]

560 vào phần tử bạn muốn theo dõi. Use offsets to define when to toggle the pinning of an element

var myDefaultWhiteList = $.fn.tooltip.Constructor.DEFAULTS.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]

Qua JavaScript

Call the affix plugin via JavaScript

var myDefaultWhiteList = $.fn.tooltip.Constructor.DEFAULTS.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]

Tùy chọn

Options can be passed via data attributes or JavaScript. For data attributes, append the option name to

$[document].off['.alert.data-api']

35, as in

var myDefaultWhiteList = $.fn.tooltip.Constructor.DEFAULTS.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]

562

Nametypedefaultdescriptionoffsetnumber . function . object10Pixels to offset from screen when calculating position of scroll. If a single number is provided, the offset will be applied in both top and bottom directions. To provide a unique, bottom and top offset just provide an object

var myDefaultWhiteList = $.fn.tooltip.Constructor.DEFAULTS.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]

563 or

var myDefaultWhiteList = $.fn.tooltip.Constructor.DEFAULTS.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]

564. Use a function when you need to dynamically calculate an offset. targetselector . node . jQuery elementthe

var myDefaultWhiteList = $.fn.tooltip.Constructor.DEFAULTS.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]

565 objectSpecifies the target element of the affix

phương pháp

var myDefaultWhiteList = $.fn.tooltip.Constructor.DEFAULTS.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]

566

Activates your content as affixed content. Accepts an optional options

$[document].off['.alert.data-api']

var myDefaultWhiteList = $.fn.tooltip.Constructor.DEFAULTS.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]

var myDefaultWhiteList = $.fn.tooltip.Constructor.DEFAULTS.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]

568

Recalculates the state of the affix based on the dimensions, position, and scroll position of the relevant elements. The

var myDefaultWhiteList = $.fn.tooltip.Constructor.DEFAULTS.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]

548,

var myDefaultWhiteList = $.fn.tooltip.Constructor.DEFAULTS.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]

549, and

var myDefaultWhiteList = $.fn.tooltip.Constructor.DEFAULTS.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]

550 classes are added to or removed from the affixed content according to the new state. This method needs to be called whenever the dimensions of the affixed content or the target element are changed, to ensure correct positioning of the affixed content

var myDefaultWhiteList = $.fn.tooltip.Constructor.DEFAULTS.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]

Sự kiện

Bootstrap's affix plugin exposes a few events for hooking into affix functionality

Loại sự kiệnMô tảđóng dấu. bs. affixThis event fires immediately before the element has been affixed. affixed. bs. affixThis event is fired after the element has been affixed. affix-top. bs. affixThis event fires immediately before the element has been affixed-top. gắn trên cùng. bs. affixSự kiện này được kích hoạt sau khi phần tử đã được gắn vào-top. dưới cùng. bs. affixSự kiện này kích hoạt ngay trước khi phần tử được gắn-bottom. đáy cố định. bs. affixSự kiện này được kích hoạt sau khi phần tử đã được gắn-bottom

Sự khác biệt giữa dữ liệu là gì

Lưu ý phần tử liên kết có hai thuộc tính dữ liệu tùy chỉnh. chuyển đổi dữ liệu và mục tiêu dữ liệu. Việc chuyển đổi cho Bootstrap biết phải làm gì và mục tiêu cho Bootstrap biết phần tử nào sẽ mở . Vì vậy, bất cứ khi nào một liên kết như vậy được nhấp vào, một phương thức có ID là “basicModal” sẽ xuất hiện.

Mục tiêu dữ liệu là gì?

Thông tin tuân theo một quy trình nhất định, thường bao gồm hầu hết hoặc tất cả thông tin trên một phương tiện lưu trữ .

dữ liệu là gì

Chuyển đổi dữ liệu là thuộc tính dữ liệu HTML-5 được xác định trong Bootstrap . Ưu điểm của việc sử dụng điều này là bạn có thể chọn một lớp hoặc một id và kết nối phần tử với một tiện ích con cụ thể.

Cách gọi dữ liệu

$["nút"]. on["click", function[]{ $[$[this]. attr["data-target"]]. modal["show"];

Và tại sao việc sử dụng các thuộc tính dữ liệu cho cài đặt và kiểu dáng trạng thái JavaScript không phải lúc nào cũng là lựa chọn đúng đắn

Tại sao thuộc tính data-* tùy chỉnh kém hơn trong ngữ cảnh này

Sự thay thế tốt hơn trong bối cảnh này

Có khả năng, có một thuộc tính ARIA cho điều đó

Lợi ích của phương pháp này

Nhận xét & phản hồi

Sử dụng JavaScript đã biên dịch

Phụ thuộc plugin

Thuộc tính dữ liệu

Chỉ một plugin cho mỗi thành phần thông qua thuộc tính dữ liệu

API có lập trình

Thiết lập mặc định

Không có xung đột

Sự kiện

chất khử trùng

Trình duyệt không có $[document].off['.alert.data-api']01

số phiên bản

Không có dự phòng đặc biệt khi JavaScript bị tắt

Thư viện của bên thứ ba

Giới thiệu về quá trình chuyển đổi

Có gì bên trong

Vô hiệu hóa quá trình chuyển đổi

Nhiều phương thức mở không được hỗ trợ

Vị trí đánh dấu phương thức

ví dụ

ví dụ tĩnh

Bản thử trực tiếp

Văn bản trong một phương thức

Popover trong một phương thức

Chú giải công cụ trong một phương thức

Tràn văn bản để hiển thị hành vi cuộn

Làm cho các phương thức có thể truy cập được

Nhúng video YouTube

Kích thước tùy chọn

Xóa hoạt ảnh

Sử dụng hệ thống lưới

Cách sử dụng

Thông qua thuộc tính dữ liệu

Qua JavaScript

Tùy chọn

phương pháp

$[document].off['.alert.data-api']42

$[document].off['.alert.data-api']44

$[document].off['.alert.data-api']47

$[document].off['.alert.data-api']49

$[document].off['.alert.data-api']51

Sự kiện

ví dụ

Trong một thanh điều hướng

Trong viên thuốc

Cách sử dụng

Thông qua thuộc tính dữ liệu

Qua JavaScript

$[document].off['.alert.data-api']60 vẫn được yêu cầu

Tùy chọn

phương pháp

$[document].off['.alert.data-api']66

Sự kiện

@mập mạp

@mdo

một

hai

số ba

Yêu cầu mục tiêu ID có thể phân giải

Các phần tử mục tiêu không phải ______871 bị bỏ qua

Yêu cầu định vị tương đối

Thông qua thuộc tính dữ liệu

Qua JavaScript

$[document].off['.alert.data-api']83

tab ví dụ

Cách sử dụng

đánh dấu

hiệu ứng mờ dần

phương pháp

$[document].off['.alert.data-api']96

$['.btn.danger'].button['toggle'].addClass['fat']01

Sự kiện

chú giải công cụ tĩnh

bốn hướng

Chức năng chọn tham gia

Trình duyệt không có
`$[document].off['.alert.data-api']`
01

`$[document].off['.alert.data-api']`
42

`$[document].off['.alert.data-api']`
44

`$[document].off['.alert.data-api']`
47

`$[document].off['.alert.data-api']`
49

`$[document].off['.alert.data-api']`
51

`$[document].off['.alert.data-api']`
60 vẫn được yêu cầu

`$[document].off['.alert.data-api']`
66

`$[document].off['.alert.data-api']`
83

`$[document].off['.alert.data-api']`
96

`$['.btn.danger'].button['toggle'].addClass['fat']`
01

`$['.btn.danger'].button['toggle'].addClass['fat']`
64

`$['.btn.danger'].button['toggle'].addClass['fat']`
65

`$['.btn.danger'].button['toggle'].addClass['fat']`
67

`$['.btn.danger'].button['toggle'].addClass['fat']`
69

`$['.btn.danger'].button['toggle'].addClass['fat']`
72