Hiển thị JavaScript

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

$.support.transition = false
1 riêng lẻ của Bootstrap) hoặc tất cả cùng một lúc (sử dụng
$.support.transition = false
2 hoặc
$.support.transition = false
3 được rút gọn)

Show

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

Cả

$.support.transition = false
2 và
$.support.transition = false
3 đề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

$.support.transition = false
6 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

$.support.transition = false
7. 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)

$.support.transition = false
0

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

$.support.transition = false
8.
$.support.transition = false
9. 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ử.
$.support.transition = false
30

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

$.support.transition = false
31 của plugin

$.support.transition = false
5

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

$.support.transition = false
32 trên plugin mà bạn muốn hoàn nguyên giá trị của

$.support.transition = false
7

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ụ:.

$.support.transition = false
33) đượ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ụ:.
$.support.transition = false
34) đượ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

$.support.transition = false
35. Đ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

$.support.transition = false
1

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

$.support.transition = false
36 của hàm tạo của plugin. Ví dụ: đối với plugin chú giải công cụ

$.support.transition = false
3

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

$.support.transition = false
37 để 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ó

$.support.transition = false
32 và các sự kiện được đặt tên, có thể có cá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

$.support.transition = false
39 một lần cùng với các tệp JS khác. Nếu bạn đang sử dụng
$.support.transition = false
2 đã được biên dịch (hoặc được rút gọn), thì không cần thêm phần này—nó đã có sẵn 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')
01 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

$.support.transition = false
39 (hoặc
$.support.transition = false
2 hoặc
$.support.transition = false
3, tùy từng trường hợp)

$.support.transition = false

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')
05 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

$.support.transition = false
3

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')
0

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')
1

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')
06 và
$(document).off('.alert.data-api')
07, tham chiếu tiêu đề phương thức, vào
$(document).off('.alert.data-api')
08 và
$(document).off('.alert.data-api')
09 vào chính
$(document).off('.alert.data-api')
10

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')
11 trên
$(document).off('.alert.data-api')
08

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')
10

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

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')
14 khỏi đánh dấu phương thức của bạn

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

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')
15 vào trong
$(document).off('.alert.data-api')
16 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')
4

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')
19,

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')
5
$(document).off('.alert.data-api')
6

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')
20 vào
$.support.transition = false
37 để ghi đè hành vi cuộn mặc định và tạo
$(document).off('.alert.data-api')
22 để 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')
23 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')
24 hoặc
$(document).off('.alert.data-api')
25 để nhắm mục tiêu một phương thức cụ thể để chuyển đổi

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

Qua JavaScript

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

$(document).off('.alert.data-api')
26 bằng một dòng JavaScript

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

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')
27, như trong
$(document).off('.alert.data-api')
28

Nametypedefaultdescriptionbackdropboolean hoặc chuỗi

$(document).off('.alert.data-api')
29trueBao gồm phần tử phông nền phương thức. Ngoài ra, hãy chỉ định
$(document).off('.alert.data-api')
30 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')
31 của jQuery và được đưa vào div
$(document).off('.alert.data-api')
32. 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')
33 để chỉ định nguồn từ xa. Một ví dụ về điều này được hiển thị dưới đây

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

phương pháp

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

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')
35

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

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

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')
37 hoặc
$(document).off('.alert.data-api')
38 xảy ra)

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

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

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')
37 xảy ra)

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

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

Ẩ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')
38 xảy ra)

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

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

Đ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')
4

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

$.support.transition = false
37)

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

$.support.transition = false
33 đượ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')
19 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')
19 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')
48 đượ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')
49

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

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')
50 trên mục danh sách gốc

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

$(document).off('.alert.data-api')
51 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')
52 đượ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')
52 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')
6

Để 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')
54 thay vì
$(document).off('.alert.data-api')
55

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

Qua JavaScript

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

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

$(document).off('.alert.data-api')
52 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')
52 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')
58

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')
59

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

$(document).off('.alert.data-api')
19, 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. shown. 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. dropdownThis event is fired when the dropdown has finished being hidden from the user (will wait for CSS transitions, to complete)

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

The ScrollSpy plugin is for automatically updating nav targets based on scroll position. Scroll the area below the navbar and watch the active class change. The dropdown sub items will be highlighted as well

@fat

Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. 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

Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. 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ả

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')
61 phải tương ứng với một cái gì đó trong DOM như
$.support.transition = false
37

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

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

$(document).off('.alert.data-api')
63 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 thức triển khai là gì, scrollspy yêu cầu sử dụng

$(document).off('.alert.data-api')
65 trên phần tử mà bạn đang theo dõi. Trong hầu hết các trường hợp, đây là
$.support.transition = false
37. Khi scrollspying trên các phần tử không phải là
$.support.transition = false
37, hãy chắc chắn rằng bạn đã đặt
$(document).off('.alert.data-api')
68 và áp dụng
$(document).off('.alert.data-api')
69

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 ____870 vào phần tử bạn muốn theo dõi (thông thường nhất, đây sẽ là ____137). Sau đó, thêm thuộc tính

$(document).off('.alert.data-api')
54 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')
73 nào

$.support.transition = false
00
$.support.transition = false
01

Qua JavaScript

Sau khi thêm

$(document).off('.alert.data-api')
65 vào CSS của bạn, hãy gọi scrollspy qua JavaScript

$.support.transition = false
02

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

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

$.support.transition = false
03

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')
27, như trong
$(document).off('.alert.data-api')
77

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

$.support.transition = false
04

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 you probably haven't heard of them, vinyl craft beer blog 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, art party locavore wolf cliche high life echo park Austin. Cred vinyl keffiyeh DIY salvia PBR, banh mi before they sold out farm-to-table VHS viral locavore cosby sweater. Lomo wolf viral, mustache readymade thundercats keffiyeh craft beer marfa ethical. 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ẻ)

$.support.transition = false
05

You can activate individual tabs in several ways

$.support.transition = false
06

đá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')
78 hoặc
$(document).off('.alert.data-api')
79 trên một phần tử. Adding the
$(document).off('.alert.data-api')
80 and
$(document).off('.alert.data-api')
81 classes to the tab
$(document).off('.alert.data-api')
82 will apply the Bootstrap tab styling, while adding the
$(document).off('.alert.data-api')
80 and
$(document).off('.alert.data-api')
84 classes will apply pill styling

$.support.transition = false
07

Fade effect

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

$(document).off('.alert.data-api')
14 vào mỗi
$(document).off('.alert.data-api')
86. Ngăn tab đầu tiên cũng phải có
$(document).off('.alert.data-api')
87 để hiển thị nội dung ban đầu

$.support.transition = false
08

phương pháp

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

Kích hoạt phần tử tab và vùng chứa nội dung. Tab should have either a

$(document).off('.alert.data-api')
54 or an
$(document).off('.alert.data-api')
33 targeting a container node in the DOM. In the above examples, the tabs are the
$.support.transition = false
37s with
$(document).off('.alert.data-api')
78 attributes

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

Chọn tab đã cho và hiển thị nội dung được liên kết của nó. Any other tab that was previously selected becomes unselected and its associated content is hidden. Quay lại trình gọi trước khi ngăn tab thực sự được hiển thị (i. e. before the

$(document).off('.alert.data-api')
94 event occurs)

$.support.transition = false
09

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

  1. $(document).off('.alert.data-api')
    95 (trên tab đang hoạt động hiện tại)
  2. $(document).off('.alert.data-api')
    96 (trên tab sắp được hiển thị)
  3. $(document).off('.alert.data-api')
    97 (trên tab hoạt động trước đó, giống với tab đối với sự kiện
    $(document).off('.alert.data-api')
    95)
  4. $(document).off('.alert.data-api')
    94 (trên tab vừa được hiển thị mới hoạt động, tương tự như đối với sự kiện
    $(document).off('.alert.data-api')
    96)

Nếu chưa có tab nào hoạt động thì sự kiện

$(document).off('.alert.data-api')
95 và
$(document).off('.alert.data-api')
97 sẽ không được kích hoạt

Event TypeDescriptionshow. 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')
03 và
$(document).off('.alert.data-api')
17 để 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. shown. 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ị. Use
$('.btn.danger').button('toggle').addClass('fat')
03 and
$(document).off('.alert.data-api')
17 to target the active tab and the previous active tab (if available) respectively. ẩ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). Use
$('.btn.danger').button('toggle').addClass('fat')
03 and
$(document).off('.alert.data-api')
17 to target the current active tab and the new soon-to-be-active tab, respectively. ẩ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')
03 và
$(document).off('.alert.data-api')
17 để nhắm mục tiêu tab hoạt động trước đó và tab hoạt động mới tương ứng

$.support.transition = false
50

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. A really ironic artisan whatever keytar, scenester farm-to-table banksy Austin twitter handle freegan cred raw denim single-origin coffee viral

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

Four options are available. căn trên, phải, dưới và trái

Four directions

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

$.support.transition = false
51

Opt-in functionality

For performance reasons, the Tooltip and Popover data-apis are opt-in, meaning you must initialize them yourself

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')
11 của chúng

$.support.transition = false
52

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

$.support.transition = false
53

đánh dấu

The required markup for a tooltip is only a

$('.btn.danger').button('toggle').addClass('fat')
12 attribute and
$('.btn.danger').button('toggle').addClass('fat')
13 on the HTML element you wish to have a tooltip. The generated markup of a tooltip is rather simple, though it does require a position (by default, set to
$('.btn.danger').button('toggle').addClass('fat')
14 by the plugin)

$.support.transition = false
54

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. The default behavior of the tooltip plugin is to center it horizontally and vertically. Thêm

$('.btn.danger').button('toggle').addClass('fat')
15 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')
16 hoặc
$('.btn.danger').button('toggle').addClass('fat')
17 hoặc trên các phần tử liên quan đến bảng (
$.support.transition = false
37,
$.support.transition = false
37,
$.support.transition = false
37,
$.support.transition = false
37,
$.support.transition = false
37,
$.support.transition = false
37), bạn sẽ phải chỉ định tùy chọn
$('.btn.danger').button('toggle').addClass('fat')
24 (được ghi dưới đây) để tránh các tác dụng phụ không mong muốn

Don't try to show tooltips on hidden elements

Invoking

$('.btn.danger').button('toggle').addClass('fat')
25 when the target element is
$('.btn.danger').button('toggle').addClass('fat')
26 will cause the tooltip to be incorrectly positioned

Accessible tooltips for keyboard and assistive technology users

For users navigating with a keyboard, and in particular users of assistive technologies, you should only add tooltips to keyboard-focusable elements such as links, form controls, or any arbitrary element with a

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

Tooltips on disabled elements require wrapper elements

To add a tooltip to a

$('.btn.danger').button('toggle').addClass('fat')
28 or
$('.btn.danger').button('toggle').addClass('fat')
29 element, put the element inside of a
$.support.transition = false
37 and apply the tooltip to that
$.support.transition = false
37 instead

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

$(document).off('.alert.data-api')
27, as in
$('.btn.danger').button('toggle').addClass('fat')
33

NameTypeDefaultDescriptionanimationbooleantrueApply a CSS fade transition to the tooltipcontainerstring . falsefalse

Appends the tooltip to a specific element. Example.

$('.btn.danger').button('toggle').addClass('fat')
24. This option is particularly useful in that it allows you to position the tooltip in the flow of the document near the triggering element - which will prevent the tooltip from floating away from the triggering element during a window resize

delaynumber . object0

Delay showing and hiding the tooltip (ms) - does not apply to manual trigger type

If a number is supplied, delay is applied to both hide/show

Object structure is.

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

htmlbooleanfalseInsert HTML into the tooltip. If false, jQuery's
$('.btn.danger').button('toggle').addClass('fat')
36 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í. function'top'

Cách định vị chú giải công cụ - trên cùng. đáy. left . right . tự động.
Khi "tự động" được chỉ định, nó sẽ tự động định hướng lại chú giải công cụ. For example, if placement is "auto left", the tooltip 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 tooltip DOM node as its first argument and the triggering element DOM node as its second. Bối cảnh

$('.btn.danger').button('toggle').addClass('fat')
37 được đặt thành phiên bản chú giải công cụ

selectorstringfalseIf a selector is provided, tooltip objects will be delegated to the specified targets. Trong thực tế, điều này được sử dụng để cho phép nội dung HTML động được thêm chú giải công cụ. See this and an informative example. templatestring
$('.btn.danger').button('toggle').addClass('fat')
38

Base HTML to use when creating the tooltip

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

$('.btn.danger').button('toggle').addClass('fat')
13 sẽ được đưa vào
$('.btn.danger').button('toggle').addClass('fat')
40

$('.btn.danger').button('toggle').addClass('fat')
41 will become the tooltip's arrow

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

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

titlestring . chức năng''

Default title value if

$('.btn.danger').button('toggle').addClass('fat')
13 attribute isn't present

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')
37 của nó được đặt thành phần tử mà chú giải công cụ được đính kèm

triggerstring'hover focus'How tooltip is triggered - click . bay lượn. focus . 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')
45 với bất kỳ trình kích hoạt nào khác. chuỗi khung nhìn. object . chức năng { bộ chọn. 'body', padding. 0 }

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

$('.btn.danger').button('toggle').addClass('fat')
46 hoặc
$('.btn.danger').button('toggle').addClass('fat')
47

If a function is given, it is called with the triggering element DOM node as its only argument. Bối cảnh

$('.btn.danger').button('toggle').addClass('fat')
37 được đặt thành phiên bản chú giải công cụ

Data attributes for individual tooltips

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

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

Đí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')
50

Tiết lộ chú giải công cụ của một phần tử. Returns to the caller before the tooltip has actually been shown (i. e. before the

$('.btn.danger').button('toggle').addClass('fat')
51 event occurs). Đâ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ị

$.support.transition = false
55

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

Ẩ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')
53 xảy ra). This is considered a "manual" triggering of the tooltip

$.support.transition = false
56

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

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')
51 hoặc
$('.btn.danger').button('toggle').addClass('fat')
53 xảy ra). This is considered a "manual" triggering of the tooltip

$.support.transition = false
57

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

Hides and destroys an element's tooltip. 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')
58) không thể bị hủy riêng lẻ trên các phần tử kích hoạt hậu duệ

$.support.transition = false
58

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

$.support.transition = false
33 được gọi. shown. bs. tooltipThis event is fired when the tooltip has been made visible to the user (will wait for CSS transitions to complete). ẩn giấu. bs. tooltipThis event is fired immediately when the
$(document).off('.alert.data-api')
48 instance method has been called. hidden. bs. tooltip Sự kiện này được kích hoạt khi tooltip đã 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). inserted. bs. tooltipThis event is fired after the
$('.btn.danger').button('toggle').addClass('fat')
61 event when the tooltip template has been added to the DOM

$.support.transition = false
59

Add small overlays of content, like those on the iPad, to any element for housing secondary information

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

Opt-in functionality

For performance reasons, the Tooltip and Popover data-apis are opt-in, meaning you must initialize them yourself

One way to initialize all popovers on a page would be to select them by their

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

$.support.transition = false
70

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

When using popovers on elements within a

$('.btn.danger').button('toggle').addClass('fat')
16 or an
$('.btn.danger').button('toggle').addClass('fat')
17, or on table-related elements (
$.support.transition = false
37,
$.support.transition = false
37,
$.support.transition = false
37,
$.support.transition = false
37,
$.support.transition = false
37,
$.support.transition = false
37), you'll have to specify the option
$('.btn.danger').button('toggle').addClass('fat')
24 (documented below) to avoid unwanted side effects (such as the element growing wider and/or losing its rounded corners when the popover is triggered)

Đừ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')
72 khi phần tử đích là
$('.btn.danger').button('toggle').addClass('fat')
26 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

To add a popover to a

$('.btn.danger').button('toggle').addClass('fat')
28 or
$('.btn.danger').button('toggle').addClass('fat')
29 element, put the element inside of a
$.support.transition = false
37 and apply the popover to that
$.support.transition = false
37 instead

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

Sometimes you want to add a popover to a hyperlink that wraps multiple lines. 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. Add

$('.btn.danger').button('toggle').addClass('fat')
15 to your anchors to avoid this

ví dụ

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

Four options are available. căn trên, phải, dưới và trái

Popover top

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

$.support.transition = false
71

Four directions

Popover on right Popover on top Popover on bottom Popover on left

$.support.transition = false
72

Dismiss on next click

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

$('.btn.danger').button('toggle').addClass('fat')
79 để 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

Specific markup required for dismiss-on-next-click

Để 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ẻ

$.support.transition = false
37, không phải thẻ
$.support.transition = false
37 và bạn cũng phải bao gồm các thuộc tính
$('.btn.danger').button('toggle').addClass('fat')
82 và
$('.btn.danger').button('toggle').addClass('fat')
83

$.support.transition = false
73

Cách sử dụng

Enable popovers via JavaScript

$.support.transition = false
74

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')
27, as in
$('.btn.danger').button('toggle').addClass('fat')
33

NameTypeDefaultDescriptionanimationbooleantrueApply a CSS fade transition to the popovercontainerstring . sai sự thật

Appends the popover to a specific element. Ví dụ.

$('.btn.danger').button('toggle').addClass('fat')
24. 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ổ

contentstring . chức năng''

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

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

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

$('.btn.danger').button('toggle').addClass('fat')
37 của nó được đặt thành phần tử mà cửa sổ bật lên được gắn vào

delaynumber . object0

Độ 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

If a number is supplied, delay is applied to both hide/show

Object structure is.

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

htmlbooleanfalseChèn HTML vào cửa sổ bật lên. Nếu sai, phương thức
$('.btn.danger').button('toggle').addClass('fat')
36 của jQuery sẽ được sử dụng để chèn nội dung vào DOM. Use text if you're worried about XSS attacks. chuỗi vị trí. function'right'

Cách định vị cửa sổ bật lên - trên cùng. đáy. left . right . tự động.
Khi "tự động" được chỉ định, nó sẽ tự động định hướng lại cửa sổ bật lên. 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')
37 context is set to the popover instance

selectorstringfalseNếu một bộ chọn được cung cấp, các đối tượng bật lên sẽ được ủy quyền cho các mục tiêu đã chỉ định. Trong thực tế, điều này được sử dụng để cho phép nội dung HTML động có thêm cửa sổ bật lên. See this and an informative example. templatestring
$('.btn.danger').button('toggle').addClass('fat')
92

Base HTML to use when creating the popover

The popover's

$('.btn.danger').button('toggle').addClass('fat')
13 will be injected into the
$('.btn.danger').button('toggle').addClass('fat')
94

The popover's

$('.btn.danger').button('toggle').addClass('fat')
95 will be injected into the
$('.btn.danger').button('toggle').addClass('fat')
96

$('.btn.danger').button('toggle').addClass('fat')
97 sẽ trở thành mũi tên của popover

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

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

titlestring . chức năng''

Default title value if

$('.btn.danger').button('toggle').addClass('fat')
13 attribute isn't present

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

$('.btn.danger').button('toggle').addClass('fat')
37 của nó được đặt thành phần tử mà cửa sổ bật lên được gắn vào

chuỗi kích hoạt'click'Cách kích hoạt cửa sổ bật lên - nhấp chuột. hover . 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')
45 với bất kỳ trình kích hoạt nào khác. chuỗi khung nhìn. object . chức năng { bộ chọn. 'cơ thể', phần đệm. 0 }

Giữ cửa sổ bật lên trong giới hạn của phần tử này. Example.

$('.btn.danger').button('toggle').addClass('fat')
46 hoặc
$('.btn.danger').button('toggle').addClass('fat')
47

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')
37 context is set to the popover instance

Thuộc tính dữ liệu cho các cửa sổ bật lên riêng lẻ

Ngoài ra, các tùy chọn cho các cửa sổ bật lên 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

phương pháp

$.support.transition = false
005

Khởi tạo cửa sổ bật lên cho một bộ sưu tập phần tử

$.support.transition = false
006

Hiển thị cửa sổ bật lên của một phần tử. Trả về người gọi trước khi cửa sổ bật lên thực sự được hiển thị (i. e. before the

$.support.transition = false
007 event occurs). Đây được coi là cách kích hoạt popover "thủ công". Cửa sổ bật lên có cả tiêu đề và nội dung đều có độ dài bằng không sẽ không bao giờ được hiển thị

$.support.transition = false
75

$.support.transition = false
008

Hides an element's popover. Trả về người gọi trước khi cửa sổ bật lên thực sự bị ẩn (i. e. trước khi sự kiện

$.support.transition = false
009 xảy ra). This is considered a "manual" triggering of the popover

$.support.transition = false
76

$.support.transition = false
010

Chuyển đổi cửa sổ bật lên của một phần tử. Returns to the caller before the popover has actually been shown or hidden (i. e. trước khi sự kiện

$.support.transition = false
007 hoặc
$.support.transition = false
009 xảy ra). Đây được coi là cách kích hoạt popover "thủ công"

$.support.transition = false
77

$.support.transition = false
013

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

$('.btn.danger').button('toggle').addClass('fat')
58 option) cannot be individually destroyed on descendant trigger elements

$.support.transition = false
78

Sự kiện

Event TypeDescriptionshow. bs. popover Sự kiện này kích hoạt ngay lập tức khi phương thức đối tượng

$.support.transition = false
33 được gọi. cho xem. bs. cửa sổ bật lên Sự kiện này được kích hoạt khi cửa sổ bật lên hiển thị với người dùng (sẽ đợi quá trình chuyển đổi CSS hoàn tất). ẩn giấu. bs. popoverThis event is fired immediately when the
$(document).off('.alert.data-api')
48 instance method has been called. ẩn giấu. bs. cửa sổ bật lên Sự kiện này được kích hoạt khi cửa sổ bật lên đã 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). chèn vào. bs. cửa sổ bật lên Sự kiện này được kích hoạt sau sự kiện
$.support.transition = false
017 khi mẫu cửa sổ bật lên đã được thêm vào DOM

$.support.transition = false
79

Example alerts

Thêm chức năng loại bỏ tất cả các thông báo cảnh báo bằng plugin này

When using a

$.support.transition = false
018 button, it must be the first child of the
$.support.transition = false
019 and no text content may come before it in the markup

× Nước sốt bơ thần thánh. Tốt nhất hãy tự kiểm tra lại đi, trông bạn không được ổn cho lắm

×

Oh snap. You got an error

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

Thực hiện hành động này Hoặc làm điều này

Cách sử dụng

Chỉ cần thêm

$.support.transition = false
020 vào nút đóng của bạn để tự động đưa ra chức năng đóng cảnh báo. Closing an alert removes it from the DOM

$.support.transition = false
10

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

$(document).off('.alert.data-api')
14 and
$(document).off('.alert.data-api')
87 classes already applied to them

phương pháp

$.support.transition = false
023

Tạo cảnh báo lắng nghe các sự kiện nhấp chuột trên các phần tử con có thuộc tính

$.support.transition = false
020. (Không cần thiết khi sử dụng tính năng khởi tạo tự động của data-api. )

$.support.transition = false
025

Đóng cảnh báo bằng cách xóa nó khỏi DOM. If the

$(document).off('.alert.data-api')
14 and
$(document).off('.alert.data-api')
87 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. alertThis event fires immediately when the

$.support.transition = false
028 instance method is called. đóng cửa. bs. alertThis event is fired when the alert has been closed (will wait for CSS transitions to complete)

$.support.transition = false
11

Do more with buttons. 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ụ

Stateful

Add

$.support.transition = false
029 to use a loading state on a button

Tính năng này không được dùng nữa kể từ v3. 3. 5 và đã bị xóa trong v4

$.support.transition = false
12

chuyển đổi đơn

Thêm

$.support.transition = false
030 để kích hoạt chuyển đổi trên một nút duy nhất

Pre-toggled buttons need
$.support.transition = false
031 and
$.support.transition = false
032

Đối với các nút được chuyển đổi trước, bạn phải thêm lớp

$.support.transition = false
031 và thuộc tính
$.support.transition = false
032 vào chính
$.support.transition = false
035

$.support.transition = false
13

Hộp kiểm / Radio

Add

$.support.transition = false
036 to a
$('.btn.danger').button('toggle').addClass('fat')
16 containing checkbox or radio inputs to enable toggling in their respective styles

Các tùy chọn được chọn trước cần
$.support.transition = false
031

For preselected options, you must add the

$.support.transition = false
031 class to the input's
$.support.transition = false
040 yourself

Visual checked state only updated on click

Nếu trạng thái đã chọn của nút hộp kiểm được cập nhật mà không kích hoạt sự kiện

$.support.transition = false
041 trên nút (e. g. via
$.support.transition = false
37 or via setting the
$.support.transition = false
043 property of the input), you will need to toggle the
$.support.transition = false
031 class on the input's
$.support.transition = false
040 yourself

$.support.transition = false
14
$.support.transition = false
15

phương pháp

$.support.transition = false
046

Chuyển đổi trạng thái đẩy. Gives the button the appearance that it has been activated

$.support.transition = false
047

Đặt lại trạng thái nút - hoán đổi văn bản thành văn bản gốc. This method is asynchronous and returns before the resetting has actually completed

$.support.transition = false
048

Hoán đổi văn bản thành bất kỳ trạng thái văn bản được xác định dữ liệu nào

$.support.transition = false
16

Plugin linh hoạt sử dụng một số lớp để dễ dàng chuyển đổi hành vi

Phụ thuộc plugin

Thu gọn yêu cầu plugin chuyển đổi được đưa vào phiên bản Bootstrap của bạn

Example

Click the buttons below to show and hide another element via class changes

  • $.support.transition = false
    049 ẩn nội dung
  • $.support.transition = false
    050 được áp dụng trong quá trình chuyển đổi
  • $.support.transition = false
    051 shows content

Bạn có thể sử dụng liên kết có thuộc tính

$(document).off('.alert.data-api')
33 hoặc nút có thuộc tính
$(document).off('.alert.data-api')
54. Trong cả hai trường hợp,
$.support.transition = false
054 là bắt buộc

Liên kết với nút href với mục tiêu dữ liệu

Anim pariatur cliche reprehenderit, enim eiusmod cuộc sống cao accusamus terry richardson quảng cáo mực. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident

$.support.transition = false
17

ví dụ đàn accordion

Mở rộng hành vi thu gọn mặc định để tạo đàn accordion với thành phần bảng điều khiển

Anim pariatur cliche reprehenderit, enim eiusmod cuộc sống cao accusamus terry richardson quảng cáo mực. 3 sói mặt trăng chính thức cấp tính, không cupidatat trượt ván dolor brunch. Xe tải thực phẩm quinoa nesciuntlaborum 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, bia thủ cônglabore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Xà cạp occaecat bia thủ công từ trang trại đến bàn ăn, tổng hợp thẩm mỹ denim thô chưa từng được biết đến mà bạn có thể chưa từng nghe nói về chúng accusamuslabore bền vững VHS

Anim pariatur cliche reprehenderit, enim eiusmod cuộc sống cao accusamus terry richardson quảng cáo mực. 3 sói mặt trăng chính thức cấp tính, không cupidatat trượt ván dolor brunch. Xe tải thực phẩm quinoa nesciuntlaborum 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, bia thủ cônglabore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Xà cạp occaecat bia thủ công từ trang trại đến bàn ăn, tổng hợp thẩm mỹ denim thô chưa từng được biết đến mà bạn có thể chưa từng nghe nói về chúng accusamuslabore bền vững VHS

Anim pariatur cliche reprehenderit, enim eiusmod cuộc sống cao accusamus terry richardson quảng cáo mực. 3 sói mặt trăng chính thức cấp tính, không cupidatat trượt ván dolor brunch. Xe tải thực phẩm quinoa nesciuntlaborum 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, bia thủ cônglabore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Xà cạp occaecat bia thủ công từ trang trại đến bàn ăn, tổng hợp thẩm mỹ denim thô chưa từng được biết đến mà bạn có thể chưa từng nghe nói về chúng accusamuslabore bền vững VHS

$.support.transition = false
18

Cũng có thể hoán đổi

$.support.transition = false
055 với
$.support.transition = false
056

  • Bootply
  • One itmus ac facilin
  • tình yêu thứ hai

Làm cho các điều khiển mở rộng/thu gọn có thể truy cập được

Be sure to add

$.support.transition = false
057 to the control element. Thuộc tính này xác định rõ ràng trạng thái hiện tại của phần tử có thể thu gọn đối với trình đọc màn hình và các công nghệ hỗ trợ tương tự. If the collapsible element is closed by default, it should have a value of
$.support.transition = false
058. Nếu bạn đã đặt phần tử có thể thu gọn thành mở theo mặc định bằng cách sử dụng lớp
$.support.transition = false
059, thay vào đó, hãy đặt
$.support.transition = false
060 trên điều khiển. Plugin sẽ tự động chuyển đổi thuộc tính này dựa trên việc phần tử có thể thu gọn đã được mở hay đóng

Ngoài ra, nếu phần tử điều khiển của bạn đang nhắm mục tiêu một phần tử có thể thu gọn duy nhất – tôi. e. thuộc tính

$(document).off('.alert.data-api')
54 đang trỏ đến bộ chọn
$.support.transition = false
062 – bạn có thể thêm thuộc tính
$.support.transition = false
063 bổ sung vào phần tử điều khiển, chứa
$.support.transition = false
062 của phần tử có thể thu gọn. Trình đọc màn hình hiện đại và các công nghệ hỗ trợ tương tự sử dụng thuộc tính này để cung cấp cho người dùng các phím tắt bổ sung để điều hướng trực tiếp đến chính phần tử có thể thu gọn

Cách sử dụng

Plugin thu gọn sử dụng một vài lớp để xử lý việc nâng vật nặng

  • $.support.transition = false
    049 ẩn nội dung
  • $.support.transition = false
    051 hiển thị nội dung
  • $.support.transition = false
    050 được thêm vào khi quá trình chuyển đổi bắt đầu và bị xóa khi quá trình chuyển đổi kết thúc

Các lớp này có thể được tìm thấy trong

$.support.transition = false
068

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

Chỉ cần thêm

$.support.transition = false
054 và
$(document).off('.alert.data-api')
54 vào phần tử để tự động gán quyền kiểm soát phần tử có thể thu gọn. Thuộc tính
$(document).off('.alert.data-api')
54 chấp nhận bộ chọn CSS để áp dụng thu gọn cho. Đảm bảo thêm lớp
$.support.transition = false
072 vào phần tử có thể thu gọn. Nếu bạn muốn mở mặc định, hãy thêm lớp bổ sung
$.support.transition = false
059

Để thêm tính năng quản lý nhóm giống như đàn accordion vào điều khiển có thể thu gọn, hãy thêm thuộc tính dữ liệu

$.support.transition = false
074. Refer to the demo to see this in action

Qua JavaScript

Kích hoạt thủ công với

$.support.transition = false
19

Tùy chọn

Options can be passed via data attributes or 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')
27, như trong
$.support.transition = false
076

NametypedefaultdescriptionparentselectorfalseNếu một bộ chọn được cung cấp, thì tất cả các phần tử có thể thu gọn bên dưới cấp độ gốc được chỉ định sẽ bị đóng khi mục có thể thu gọn này được hiển thị. (tương tự như hành vi của đàn accordion truyền thống - điều này phụ thuộc vào lớp

$.support.transition = false
077)togglebooleantrueBật/tắt phần tử có thể thu gọn khi gọi

phương pháp

$.support.transition = false
078

Kích hoạt nội dung của bạn dưới dạng phần tử có thể thu gọn. Chấp nhận một tùy chọn tùy chọn

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

$.support.transition = false
30

$.support.transition = false
080

Chuyển một phần tử có thể thu gọn sang hiển thị hoặc ẩn. Returns to the caller before the collapsible element has actually been shown or hidden (i. e. before the

$.support.transition = false
081 or
$.support.transition = false
082 event occurs)

$.support.transition = false
083

Hiển thị một phần tử có thể thu gọn. Trả về trình gọi trước khi phần tử có thể thu gọn thực sự được hiển thị (i. e. before the

$.support.transition = false
081 event occurs)

$.support.transition = false
085

Ẩn phần tử có thể thu gọn. Trả về trình gọi trước khi phần tử có thể thu gọn thực sự bị ẩn (i. e. trước khi sự kiện

$.support.transition = false
082 xảy ra)

Sự kiện

Lớp thu gọn Bootstrap hiển thị một vài sự kiện để nối vào chức năng thu gọn

Loại sự kiệnMô tảshow. bs. collapseThis event fires immediately when the

$.support.transition = false
33 instance method is called. cho xem. bs. sụp đổSự kiện này được kích hoạt khi phần tử thu gọn đã đượ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. sự sụp đổSự kiện này được kích hoạt ngay lập tức khi phương thức
$(document).off('.alert.data-api')
48 được gọi. ẩn giấu. bs. sụp đổSự kiện này được kích hoạt khi phần tử thu gọn đã bị ẩn khỏi người dùng (sẽ đợi quá trình chuyển đổi CSS hoàn tất)

$.support.transition = false
31

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. Băng chuyền lồng nhau không được hỗ trợ

ví dụ

$.support.transition = false
32

Vấn đề trợ năng

Thành phần băng chuyền thường không tuân thủ các tiêu chuẩn trợ năng. If you need to be compliant, please consider other options for presenting your content

Hoạt hình chuyển tiếp không được hỗ trợ trong Internet Explorer 8 & 9

Bootstrap chỉ sử dụng CSS3 cho hoạt ảnh của nó, nhưng Internet Explorer 8 & 9 không hỗ trợ các thuộc tính CSS cần thiết. Do đó, không có hoạt ảnh chuyển tiếp slide khi sử dụng các trình duyệt này. 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

The

$.support.transition = false
031 class needs to be added to one of the slides. Nếu không, băng chuyền sẽ không hiển thị

Glyphicon icons not necessary

Các lớp

$.support.transition = false
090 và
$.support.transition = false
091 không nhất thiết cần thiết cho các điều khiển. Bootstrap provides
$.support.transition = false
092 and
$.support.transition = false
093 as plain unicode alternatives

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ử

$.support.transition = false
094 trong bất kỳ
$.support.transition = false
095 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

First slide image

First slide label

Nulla vitae elit libero, a pharetra augue mollis interdum

Second slide image

Second slide label

Lorem ipsum dolor sit amet, consectetur adipiscing elit

Third slide image

Third slide label

Praesent commodo cursus magna, vel scelerisque nisl consectetur

Trước Sau

$.support.transition = false
33

Cách sử dụng

Nhiều băng chuyền

Băng chuyền yêu cầu sử dụng

$.support.transition = false
062 trên thùng chứa ngoài cùng (
$.support.transition = false
097) để đ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
$.support.transition = false
062 của băng chuyền, hãy nhớ cập nhật các điều khiển có liên quan

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

Sử dụng các thuộc tính dữ liệu để dễ dàng kiểm soát vị trí của băng chuyền.

$.support.transition = false
099 chấp nhận các từ khóa
$.support.transition = false
500 hoặc
$.support.transition = false
501, làm thay đổi vị trí trang chiếu so với vị trí hiện tại của nó. Alternatively, use
$.support.transition = false
502 to pass a raw slide index to the carousel
$.support.transition = false
503, which shifts the slide position to a particular index beginning with
$.support.transition = false
504

Thuộc tính

$.support.transition = false
505 được sử dụng để đánh dấu băng chuyền là hoạt ảnh bắt đầu từ khi tải trang. Nó không thể được sử dụng kết hợp với khởi tạo JavaScript rõ ràng (dư thừa và không cần thiết) của cùng một băng chuyền

Qua JavaScript

Gọi băng chuyền theo cách thủ công với

$.support.transition = false
34

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. For data attributes, append the option name to

$(document).off('.alert.data-api')
27, as in
$.support.transition = false
507

Nametypedefaultdescriptionintervalnumber5000Lượng thời gian để trì hoãn giữa các lần tự động quay vòng một mục. Nếu sai, băng chuyền sẽ không tự động quay vòng. pausestring . null"hover"Nếu được đặt thành

$.support.transition = false
508, tạm dừng chu kỳ của băng chuyền vào ngày
$.support.transition = false
509 và tiếp tục chu kỳ của băng chuyền vào ngày
$.support.transition = false
510. Nếu được đặt thành
$.support.transition = false
511, việc di chuột qua băng chuyền sẽ không tạm dừng băng chuyền. wrapbooleantrueWhether the carousel should cycle continuously or have hard stops. keyboardbooleantrueWhether the carousel should react to keyboard events

phương pháp

$.support.transition = false
512

Khởi tạo băng chuyền với tùy chọn tùy chọn

$(document).off('.alert.data-api')
35 và bắt đầu quay vòng qua các mục

$.support.transition = false
35

$.support.transition = false
514

Xoay vòng qua các mục băng chuyền từ trái sang phải

$.support.transition = false
515

Dừng băng chuyền quay vòng qua các mục

$.support.transition = false
516

Xoay vòng băng chuyền đến một khung cụ thể (dựa trên 0, tương tự như một mảng)

$.support.transition = false
517

Chu kỳ đến mục trước đó

$.support.transition = false
518

Chu kỳ đến mục tiếp theo

Sự kiện

Lớp băng chuyền của Bootstrap hiển thị hai sự kiện để nối vào chức năng băng chuyền

Cả hai sự kiện đều có các thuộc tính bổ sung sau

  • $.support.transition = false
    519. Hướng mà băng chuyền đang trượt (hoặc là
    $.support.transition = false
    520 hoặc là
    $.support.transition = false
    521)
  • $(document).off('.alert.data-api')
    19. Phần tử DOM đang được trượt vào vị trí làm mục hoạt động

Tất cả các sự kiện băng chuyền được kích hoạt tại chính băng chuyền (i. e. tại

$.support.transition = false
37)

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

$.support.transition = false
524 được gọi. trượt. bs. băng chuyền Sự kiện này được kích hoạt khi băng chuyền đã hoàn thành quá trình chuyển đổi trang chiếu của nó

$.support.transition = false
36

Example

Plugin gắn kết bật và tắt

$.support.transition = false
525, mô phỏng hiệu ứng được tìm thấy với
$.support.transition = false
526. Điều hướng con bên phải là bản demo trực tiếp của plugin phụ kiện


Cách sử dụng

Sử dụng plugin đính kèm thông qua thuộc tính dữ liệu hoặc thủ công bằng JavaScript của riêng bạn. Trong cả hai trường hợp, bạn phải cung cấp CSS cho vị trí và chiều rộng của nội dung được đính kèm

Ghi chú. Không sử dụng plugin gắn trên một phần tử có trong phần tử được định vị tương đối, chẳng hạn như cột được kéo hoặc đẩy, do lỗi kết xuất Safari

Định vị qua CSS

Plugin gắn kết chuyển đổi giữa ba lớp, mỗi lớp đại diện cho một trạng thái cụ thể.

$.support.transition = false
527,
$.support.transition = false
528 và
$.support.transition = false
529. Bạn phải cung cấp các kiểu, ngoại trừ
$.support.transition = false
525 trên
$.support.transition = false
527, cho chính các lớp này (không phụ thuộc vào plugin này) để xử lý các vị trí thực tế

Đây là cách plugin affix hoạt động

  1. Để bắt đầu, plugin thêm
    $.support.transition = false
    528 để cho biết phần tử ở vị trí trên cùng của nó. Tại thời điểm này, không cần định vị CSS
  2. Cuộn qua phần tử bạn muốn gắn sẽ kích hoạt việc gắn thực tế. Đây là nơi
    $.support.transition = false
    527 thay thế
    $.support.transition = false
    528 và thiết lập
    $.support.transition = false
    525 (do CSS của Bootstrap cung cấp)
  3. Nếu phần bù dưới được xác định, cuộn qua nó sẽ thay thế
    $.support.transition = false
    527 bằng
    $.support.transition = false
    529. Vì giá trị bù trừ là tùy chọn, nên việc đặt giá trị bù đắp yêu cầu bạn đặt CSS thích hợp. Trong trường hợp này, hãy thêm
    $.support.transition = false
    538 khi cần thiết. Plugin sử dụng thuộc tính dữ liệu hoặc tùy chọn JavaScript để xác định vị trí đặt phần tử từ đó

Làm theo các bước trên để đặt CSS của bạn cho một trong các tùy chọn sử dụng bên dưới

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

$.support.transition = false
539 vào phần tử bạn muốn theo dõi. Sử dụng độ lệch để xác định thời điểm chuyển đổi ghim của một phần tử

$.support.transition = false
37

Qua JavaScript

Gọi plugin đính kèm qua JavaScript

$.support.transition = false
38

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')
27, như trong
$.support.transition = false
541

Têntypedefaultdescriptionoffsetnumber. chức năng. object10Pixels để bù từ màn hình khi tính toán vị trí cuộn. Nếu một số duy nhất được cung cấp, phần bù sẽ được áp dụng theo cả hai hướng trên và dưới. Để cung cấp một phần bù duy nhất, dưới cùng và trên cùng, chỉ cần cung cấp một đối tượng

$.support.transition = false
542 hoặc
$.support.transition = false
543. Sử dụng hàm khi bạn cần tính toán động phần bù. bộ chọn mục tiêu. nút. Phần tử jQueryđối tượng
$.support.transition = false
544Chỉ định phần tử đích của phụ tố

phương pháp

$.support.transition = false
545

Kích hoạt nội dung của bạn dưới dạng nội dung được đính kèm. Chấp nhận một tùy chọn tùy chọn

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

$.support.transition = false
39

$.support.transition = false
547

Tính toán lại trạng thái của phụ kiện dựa trên kích thước, vị trí và vị trí cuộn của các phần tử có liên quan. Các lớp

$.support.transition = false
527,
$.support.transition = false
528 và
$.support.transition = false
529 được thêm vào hoặc xóa khỏi nội dung được gắn theo trạng thái mới. Phương pháp này cần được gọi bất cứ khi nào thay đổi kích thước của nội dung được đính kèm hoặc phần tử đích, để đảm bảo định vị chính xác nội dung được đính kèm

$.support.transition = false
0

Sự kiện

Plugin đính kèm của Bootstrap hiển thị một vài sự kiện để nối vào chức năng đính kèm

Loại sự kiệnMô tảđóng dấu. bs. affixSự kiện này kích hoạt ngay trước khi phần tử được gắn. dán vào. bs. affixSự kiện này được kích hoạt sau khi phần tử đã được gắn. gắn trên cùng. bs. affixSự kiện này kích hoạt ngay trước khi phần tử được gắn vào-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

Làm cách nào để sử dụng phương thức hiển thị trong JavaScript?

Phương thức show() hiển thị hộp thoại . Khi phương pháp này được sử dụng để hiển thị cửa sổ hộp thoại, người dùng vẫn có thể tương tác với các phần tử khác trên trang. Nếu bạn không muốn người dùng tương tác với những thứ khác ngoài hộp thoại, hãy sử dụng phương thức showModal().

Làm cách nào để hiển thị một phần tử bằng JavaScript?

Để hiển thị một phần tử, đặt thuộc tính hiển thị kiểu thành “khối” . tài liệu. getElementById("phần tử"). Phong cách.

Ẩn () trong JavaScript là gì?

Phương thức hide() ẩn các phần tử đã chọn . Mẹo. Điều này tương tự như hiển thị thuộc tính CSS. không ai. Ghi chú. Các phần tử ẩn sẽ hoàn toàn không được hiển thị (không còn ảnh hưởng đến bố cục của trang).

Cách hiển thị dữ liệu JavaScript trong HTML?

Có ba cách để hiển thị giá trị biến JavaScript trong trang HTML. .
Hiển thị biến bằng tài liệu. viết phương pháp
Hiển thị biến thành nội dung phần tử HTML bằng thuộc tính InternalHTML
Hiển thị biến bằng cửa sổ. phương thức cảnh báo ()