JavaScript
Làm cho các thành phần của Bootstrap trở nên sống động với hơn một chục plugin jQuery tùy chỉnh. Dễ dàng bao gồm tất cả hoặc từng cái một.
Làm cho các thành phần của Bootstrap trở nên sống động với hơn một chục plugin jQuery tùy chỉnh. Dễ dàng bao gồm tất cả hoặc từng cái một.
Các plugin có thể được bao gồm riêng lẻ (sử dụng các tệp riêng lẻ của Bootstrap *.js
) hoặc tất cả cùng một lúc (sử dụng bootstrap.js
hoặc rút gọn bootstrap.min.js
).
Cả hai bootstrap.js
và bootstrap.min.js
chứa tất cả các plugin trong một tệp duy nhất. Chỉ bao gồm một.
Một số plugin và thành phần CSS phụ thuộc vào các plugin khác. Nếu bạn bao gồm các plugin riêng lẻ, hãy đảm bảo kiểm tra các phần phụ thuộc này trong tài liệu. Cũng lưu ý rằng tất cả các plugin phụ thuộc vào jQuery (điều này có nghĩa là jQuery phải được bao gồm trước các tệp plugin). Tham khảo ý kiến của chúng tôibower.json
để xem phiên bản jQuery nào được hỗ trợ.
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 một plugin.
Điều đó nói rằng, trong một số trường hợp, bạn có thể muốn 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ó vị trí đặt với data-api
. Nó trông như thế này:
Ngoài ra, để nhắm mục tiêu một plugin cụ thể, chỉ cần bao gồm tên của plugin làm không gian tên cùng với không gian tên data-api như sau:
Không sử dụng các 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 có thể chuyển đổi một phương thức. Để thực hiện điều này, hãy sử dụng một phần tử bao bọc.
Chúng tôi cũng tin rằng bạn có thể sử dụng tất cả các plugin Bootstrap hoàn toàn thông qua API JavaScript. Tất cả các API công khai đều là các phương thức đơn lẻ, có thể điều khiển được và trả về bộ sưu tập đã hoạt động.
Tất cả các phương thức phải chấp nhận một đối tượng tùy chọn tùy chọn, một chuỗi nhắm mục tiêu một phương thức cụ thể hoặc không có gì (khởi chạy một plugin với hành vi mặc định):
Mỗi plugin cũng hiển thị hàm tạo thô của nó trên thuộc tính Constructor
:. $.fn.popover.Constructor
Nếu bạn muốn nhận một phiên bản plugin cụ thể, hãy truy xuất nó trực tiếp từ một phần tử $('[rel="popover"]').data('popover')
:.
Bạn có thể thay đổi cài đặt mặc định cho plugin bằng cách sửa đổi Constructor.DEFAULTS
đối tượng của plugin:
Đôi khi cần sử dụng các plugin Bootstrap với các khung giao diện người dùng khác. Trong những trường hợp này, đôi khi có thể xảy ra xung đột không gian tên. Nếu điều này xảy ra, bạn có thể gọi .noConflict
plugin mà bạn muốn hoàn nguyên giá trị.
Bootstrap cung cấp các sự kiện tùy chỉnh cho hầu hết các hành động độc đáo của plugin. Nói chung, chúng có dạng phân từ nguyên thể và quá khứ - trong đó nguyên thể (ví dụ show
) được kích hoạt khi bắt đầu một sự kiện và dạng phân từ trong quá khứ của nó (ví dụ shown
) được kích hoạt khi hoàn thành một hành động.
Kể từ 3.0.0, tất cả các sự kiện Bootstrap đều có không gian tên.
Tất cả các sự kiện vô tận đều cung cấp preventDefault
chức năng. Điều này cung cấp khả năng dừng thực hiện một hành động trước khi nó bắt đầu.
Phiên bản của mỗi plugin jQuery của Bootstrap có thể được truy cập thông qua thuộc VERSION
tính của hàm tạo của plugin. Ví dụ: đối với plugin chú giải công cụ:
Các plugin của Bootstrap không hoạt động trở lại một cách đặc biệt duyên dáng khi JavaScript bị tắt. Nếu bạn quan tâm đến trải nghiệm người dùng trong trường hợp này, hãy sử dụng <noscript>
để giải thích tình huống (và cách bật lại JavaScript) cho người dùng của bạn và / hoặc thêm các dự phòng tùy chỉnh của riêng bạn.
Bootstrap không chính thức hỗ trợ các thư viện JavaScript của bên thứ ba như Prototype hoặc jQuery UI. Bất chấp .noConflict
và các sự kiện không gian tên, có thể có các vấn đề tương thích mà bạn cần tự khắc phục.
Đối với các hiệu ứng chuyển tiếp đơn giản, hãy bao gồm transition.js
một lần cùng với các tệp JS khác. Nếu bạn đang sử dụng phần mềm đã biên dịch (hoặc được rút gọn) bootstrap.js
, thì không cần phải bao gồm phần này — nó đã ở đó.
Transition.js là một trình trợ giúp cơ bản cho transitionEnd
các sự kiện cũng như một trình mô phỏng chuyển đổi CSS. Nó được các plugin khác sử dụng để kiểm tra hỗ trợ chuyển tiếp CSS và bắt các chuyển đổi bị treo.
Quá trình 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 transition.js
(hoặc bootstrap.js
hoặc bootstrap.min.js
, tùy từng trường hợp) đã tải xong:
Các chế độ đượ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 bắt buộc tối thiểu và các giá trị mặc định thông minh.
Đả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ị. Việc hiển thị nhiều phương thức cùng một lúc yêu cầu mã tùy chỉnh.
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.
Có một số lưu ý liên quan đến việc sử dụng các phương thức trên thiết bị di động. Xem tài liệu hỗ trợ trình duyệt của chúng tôi để biết chi tiết.
Do cách HTML5 xác định ngữ nghĩa của nó, autofocus
thuộc tính HTML 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:
Một phương thức được hiển thị với tiêu đề, nội dung và tập hợp các hành động trong chân trang.
Chuyển đổi một 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.
Đảm bảo thêm role="dialog"
và aria-labelledby="..."
, tham chiếu đến tiêu đề phương thức, đến .modal
và role="document"
chính .modal-dialog
nó.
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 aria-describedby
bật .modal
.
Nhúng video YouTube trong 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.
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 a .modal-dialog
.
Đối với các phương thức chỉ xuất hiện thay vì mờ dần để xem, hãy xóa .fade
lớp khỏi đánh dấu phương thức của bạn.
Để 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 .row
các s vào bên trong .modal-body
và sau đó sử dụng các lớp hệ thống lưới thông thường.
Có một loạt các nút đều kích hoạt cùng một phương thức, chỉ với nội dung hơi khác nhau? Sử dụng event.relatedTarget
và các thuộc tính HTMLdata-*
(có thể thông qua jQuery ) để thay đổi nội dung của phương thức tùy thuộc vào nút nào được nhấp. Xem tài liệu Sự kiện phương thức để biết chi tiết về relatedTarget
,
Plugin phương thức chuyển đổi nội dung ẩn của bạn theo yêu cầu, thông qua các thuộc tính dữ liệu hoặc JavaScript. Nó cũng thêm .modal-open
vào <body>
để ghi đè hành vi cuộn mặc định và tạo ra một .modal-backdrop
vùng 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.
Kích hoạt một phương thức mà không cần viết JavaScript. Đặt data-toggle="modal"
trên một phần tử bộ điều khiển, như một nút, cùng với data-target="#foo"
hoặc href="#foo"
để nhắm mục tiêu một phương thức cụ thể để chuyển đổi.
Gọi một phương thức có id myModal
với một dòng JavaScript:
Các tùy chọn có thể được chuyển qua các thuộc tính dữ liệu hoặc JavaScript. Đối với các thuộc tính dữ liệu, hãy nối tên tùy chọn vào data-
, như trong data-backdrop=""
.
Tên | loại hình | mặc định | sự mô tả |
---|---|---|---|
phông nền | boolean hoặc chuỗi'static' |
thật | Bao gồm một yếu tố phương thức-phông nền. Ngoài ra, chỉ định static phông nền không đóng phương thức khi nhấp chuột. |
bàn phím | boolean | thật | Đóng phương thức khi nhấn phím thoát |
buổi bieu diễn | boolean | thật | Hiển thị phương thức khi khởi tạo. |
Xa xôi | đường dẫn | sai | 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 tạo khuôn mẫu phía máy khách hoặc khung liên kết dữ liệu hoặc tự gọi jQuery.load . Nếu một URL từ xa được cung cấp, nội dung sẽ được tải một lần qua |
.modal(options)
Kích hoạt nội dung của bạn như một phương thức. Chấp nhận một tùy chọn tùy chọn object
.
.modal('toggle')
Chuyển đổi một phương thức theo cách thủ công. Trả về cho người gọi trước khi phương thức thực sự được hiển thị hoặc ẩn (tức là trước khi sự kiện shown.bs.modal
hoặc hidden.bs.modal
sự kiện xảy ra).
.modal('show')
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ị (tức là trước khi shown.bs.modal
sự kiện xảy ra).
.modal('hide')
Ẩn 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ự bị ẩn (tức là trước khi hidden.bs.modal
sự kiện xảy ra).
.modal('handleUpdate')
Điều chỉnh lại vị trí của phương thức để chống lại một 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ở.
Lớp phương thức của Bootstrap cho thấy một vài sự kiện để kết nối vào chức năng phương thức.
Tất cả các sự kiện của phương thức được kích hoạt tại chính phương thức (tức là tại <div class="modal">
).
Loại sự kiện | Sự mô tả |
---|---|
show.bs.modal | Sự kiện này kích hoạt ngay lập tức khi show phương thức thể hiện được gọi. Nếu do một lần nhấp gây ra, phần tử được nhấp sẽ có sẵn dưới dạng thuộc relatedTarget tính của sự kiện. |
show.bs.modal | Sự kiện này được kích hoạt khi phương thức đã đượ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 một lần nhấp gây ra, phần tử được nhấp sẽ có sẵn dưới dạng thuộc relatedTarget tính của sự kiện. |
hide.bs.modal | Sự kiện này được kích hoạt ngay lập tức khi hide phương thức thể hiện đã được gọi. |
hidden.bs.modal | Sự kiện này được kích hoạt khi phương thức 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). |
load.bs.modal | Sự kiện này được kích hoạt khi phương thức đã tải nội dung bằng cách sử dụng remote tùy chọn. |
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à viên thuốc.
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 .open
lớp trên mục danh sách mẹ.
Trên thiết bị di động, việc mở menu thả xuống sẽ thêm .dropdown-backdrop
vùng 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 thích hợp. Điều này có nghĩa là việc chuyển từ một menu thả xuống đang mở sang một menu thả xuống khác yêu cầu thêm một lần nhấn trên thiết bị di động.
Lưu ý: data-toggle="dropdown"
Thuộc tính được dựa vào để đóng menu thả xuống ở cấp ứng dụng, vì vậy bạn nên luôn sử dụng nó.
Thêm data-toggle="dropdown"
vào liên kết hoặc nút để chuyển đổi menu thả xuống.
Để giữ nguyên các URL với các nút liên kết, hãy sử dụng data-target
thuộc tính thay vì href="#"
.
Gọi các trình đơn thả xuống qua JavaScript:
data-toggle="dropdown"
vẫn được yêu cầuBất kể bạn gọi menu thả xuống của mình qua JavaScript hay thay vào đó sử dụng data-api, data-toggle="dropdown"
luôn bắt buộc phải có trên phần tử trình kích hoạt của menu thả xuống.
Không có
$().dropdown('toggle')
Chuyển đổi menu thả xuống của một thanh điều hướng hoặc tab điều hướng nhất định.
Tất cả các sự kiện thả xuống đều được kích hoạt tại .dropdown-menu
phần tử mẹ của.
Tất cả các sự kiện thả xuống đều có một relatedTarget
thuộc tính, có giá trị là phần tử neo chuyển đổi.
Loại sự kiện | Sự mô 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. |
show.bs.dropdown | Sự kiện này được kích hoạt khi menu thả xuống hiển thị cho người dùng (sẽ đợi quá trình chuyển đổi CSS hoàn tất). |
hide.bs.dropdown | Sự kiện này được kích hoạt ngay lập tức khi phương thức ẩn thể hiện đã được gọi. |
hidden.bs.dropdown | Sự kiện này được kích hoạt khi danh sách 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). |
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.
Bàn phím xà cạp quảng cáo, bữa tiệc nửa buổi id nghệ thuật dolor labore. Pitchfork yr enim lo-fi trước khi họ bán hết. Tumblr farm-to-table xe đạp quyền bất cứ điều gì. Anim keffiyeh carles cardigan. Gian hàng ảnh 3 con sói mặt trăng của Velit seitan mcsweeney. Cosby áo len lomo quần short jean, williamsburg hoodie minim qui có thể bạn chưa nghe nói về chúng et cardigan quỹ tín thác quần áo culpa biodiesel wes anderson thẩm mỹ. Nihil hình xăm tố cáo, tín dụng mỉa mai biodiesel keffiyeh nghệ nhân ullamcoequat.
Veniam marfa ria mép ván trượt, adipisicing fugiat velit pitchfork râu. Freegan râu aliqua cupidatat mcsweeney's vero. Cupidatat bốn loko nisi, ea helvetica nulla carles. Xe chở đồ ăn bằng áo len hình xăm cosby, mcsweeney's quis non freegan vinyl. Lo-fi wes anderson +1 sartorial. Carles tập thể dục không thẩm mỹ quis gentrify. Brooklyn adipisicing bia thủ công phó bàn thờ chính.
Occaecat goodso aliqua delectus. Fap bia thủ công cần ván trượt ea. Lomo xe đạp quyền adipisicing banh mi, velit ea sunt cấp tiếp theo locavore cà phê một nguồn gốc ở magna veniam. Cuộc sống cao id vinyl, echo park resultat quis aliquip banh mi pitchfork. Vero VHS est adipisicing. Túi nhỏ nhắn tự làm Consectetur nisi. Cred ex in, bền vững delectus consectetur fanny pack iphone.
In incididunt echo park, officia deserunt mcsweeney's proident master cleanse thundercats sapiente veniam. Excepteur VHS elit, proident shoreditch +1 biodiesel laborum craft beer. Single-origin coffee wayfarers irure four loko, cupidatat terry richardson master cleanse. Assumenda you probably haven't heard of them art party fanny pack, tattooed nulla cardigan tempor ad. Proident wolf nesciunt sartorial keffiyeh eu banh mi sustainable. Elit wolf voluptate, lo-fi ea portland before they sold out four loko. Locavore enim nostrud mlkshk brooklyn nesciunt.
Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.
Keytar twee blog, culpa messenger bag marfa bất cứ thứ gì xe tải đồ ăn ngon. Sapiente synth id giả định. Locavore sed helvetica mỉa mai châm biếm, những chiếc áo khoác sấm sét mà bạn có thể chưa nghe nói về chúng do áo hoodie không chứa gluten lo-fi fap aliquip. Labore elit placeat trước khi bán hết hàng, terry richardson proident brunch nesciunt quis cosby sweater nghệ nhân của nghệ nhân p Cosre elit keffiyeh ut helvetica. Cardigan bia thủ công seitan velit làm sẵn. VHS chambray labris tempor veniam. Hoạt hình mollit minimine hàng hóa ullamco Thundercats.
Các 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 được. Ví dụ, một <a href="#home">home</a>
phải tương ứng với một cái gì đó trong DOM như <div id="home"></div>
.
:visible
mục tiêu bị bỏ quaCác phần tử mục tiêu không :visible
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 đánh dấu.
Bất kể phương pháp triển khai nào, scrollspy yêu cầu sử dụng position: relative;
phần tử mà bạn đang theo dõi. Trong hầu hết các trường hợp, đây là <body>
. Khi cuộn tìm kiếm trên các phần tử khác với phần tử <body>
, hãy đảm bảo có một height
tập hợp và overflow-y: scroll;
được áp dụng.
Để dễ dàng thêm hành vi cuộn tròn vào điều hướng thanh trên cùng của bạn, hãy thêm data-spy="scroll"
vào phần tử bạn muốn theo dõi (thông thường nhất sẽ là phần tử này <body>
). Sau đó, thêm data-target
thuộc tính với ID hoặc lớp của phần tử mẹ của bất kỳ .nav
thành phần Bootstrap nào.
Sau khi thêm position: relative;
CSS của bạn, hãy gọi scrollspy qua JavaScript:
.scrollspy('refresh')
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ư sau:
Các tùy chọn có thể được chuyển qua các thuộc tính dữ liệu hoặc JavaScript. Đối với các thuộc tính dữ liệu, hãy nối tên tùy chọn vào data-
, như trong data-offset=""
.
Tên | loại hình | mặc định | sự mô tả |
---|---|---|---|
bù lại | con số | 10 | Điểm ảnh để bù đắp từ trên cùng khi tính toán vị trí của cuộn. |
Loại sự kiện | Sự mô tả |
---|---|
active.bs.scrollspy | Sự 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 con lăn. |
Thêm chức năng tab động, nhanh chóng để chuyển đổi qua các ngăn nội dung cục bộ, ngay cả qua menu thả xuống. Các tab lồng nhau không được hỗ trợ.
Chất liệu denim thô chắc hẳn bạn chưa từng nghe nói đến quần short jean Austin. Nesciunt đậu phụ stumptown aliqua, làm sạch tổng thể retro synth. Ria mép khuôn mẫu, williamsburg carles vegan helvetica. Người bán thịt người bán thịt retro keffiyeh dreamcatcher synth. Áo len Cosby eu banh mi, qui irure terry richardson ex ink. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan may mặc của mỹ, butcher voluptate nisi qui.
Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia yr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bit, sustainable jean shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party scenester stumptown, tumblr butcher vero sint qui sapiente accusamus tattooed echo park.
Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo retro fanny pack lo-fi farm-to-table readymade. Messenger bag gentrify pitchfork tattooed craft beer, iphone skateboard locavore carles etsy salvia banksy hoodie helvetica. DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred pitchfork. Williamsburg banh mi whatever gluten-free, carles pitchfork biodiesel fixie etsy retro mlkshk vice blog. Scenester cred you probably haven't heard of them, vinyl craft beer blog stumptown. Pitchfork sustainable tofu synth chambray yr.
Trust fund seitan letterpress, keytar raw denim keffiyeh etsy art party before they sold out master cleanse gluten-free squid scenester freegan cosby sweater. 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 vegan.
Plugin này mở rộng thành phần điều hướng theo tab để thêm các khu vực có thể lập tab.
Bật các tab có thể chuyển thành tab qua JavaScript (mỗi tab cần được kích hoạt riêng lẻ):
Bạn có thể kích hoạt các tab riêng lẻ theo một số cách:
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 data-toggle="tab"
hoặc data-toggle="pill"
trên một phần tử. Thêm nav
và nav-tabs
các lớp vào tab sẽ áp dụng kiểu tabul
Bootstrap , trong khi thêm và các lớp sẽ áp dụng kiểu viên .nav
nav-pills
Để làm cho các tab mờ dần, hãy thêm .fade
vào từng tab .tab-pane
. Ngăn tab đầu tiên cũng phải .in
hiển thị nội dung ban đầu.
$().tab
Kích hoạt phần tử tab và vùng chứa nội dung. Tab phải có một data-target
hoặc một href
nhắm mục tiêu một nút vùng chứa trong DOM. Trong các ví dụ trên, các tab là các tab <a>
có data-toggle="tab"
thuộc tính.
.tab('show')
Chọn tab nhất định và hiển thị nội dung liên quan của nó. Bất kỳ tab nào khác đã được chọn trước đó sẽ trở thành không được chọn và nội dung liên quan của nó bị ẩn. Trả về trình gọi trước khi ngăn tab thực sự được hiển thị (tức là trước khi shown.bs.tab
sự kiện xảy ra).
Khi hiển thị một tab mới, các sự kiện sẽ kích hoạt theo thứ tự sau:
hide.bs.tab
(trên tab hoạt động hiện tại)show.bs.tab
(trên tab được hiển thị)hidden.bs.tab
(trên tab hoạt động trước đó, tab tương tự như cho hide.bs.tab
sự kiện)shown.bs.tab
(trên tab vừa được hiển thị mới hoạt động, tab tương tự như đối với show.bs.tab
sự kiện)Nếu không có tab nào hoạt động, thì sự kiện hide.bs.tab
và hidden.bs.tab
sẽ không được kích hoạt.
Loại sự kiện | Sự mô tả |
---|---|
show.bs.tab | Sự kiện này kích hoạt trên chương trình tab, nhưng trước khi tab mới được hiển thị. Sử dụng event.target và event.relatedTarget để 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. |
show.bs.tab | Sự kiện này kích hoạt trên tab hiển thị sau khi tab được hiển thị. Sử dụng event.target và event.relatedTarget để 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. |
hide.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 event.target và event.relatedTarget để nhắm mục tiêu tab đang hoạt động hiện tại và tab sắp hoạt động mới, tương ứng. |
hidden.bs.tab | Sự kiện này kích hoạt sau khi một tab mới được hiển thị (và do đó tab hoạt động trước đó bị ẩn). Sử dụng event.target và event.relatedTarget để nhắm mục tiêu tab hoạt động trước đó và tab hoạt động mới, tương ứng. |
Lấy cảm hứng từ plugin jQuery.tipsy tuyệt vời được viết bởi Jason Frame; Chú giải công cụ là phiên bản cập nhật, không dựa vào hình ảnh, sử dụng CSS3 cho hoạt ảnh và thuộc tính dữ liệu để lưu trữ tiêu đề cục bộ.
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 các chú giải công cụ:
Những chiếc quần bó sát cấp độ tiếp theo có thể bạn chưa từng nghe nói về chúng. Ảnh gian hàng râu vải thô denim letterpress túi đưa tin thuần chay stumptown. Seitan từ trang trại đến bàn ăn, quần áo Mỹ 8-bit quinoa bền vững fixie của mcsweeney có một chambray vinyl richardson terry. Beard stumptown, cardigans banh mi lomo Thundercats. Đậu phụ diesel sinh học williamsburg marfa, bánh chambray thuần chay làm sạch 4 loko mcsweeney. Một nghệ nhân thực sự mỉa mai bất cứ thứ gì keytar , scenester farm-to-table banky Austin twitter xử lý virus cà phê nguyên liệu denim freegan.
Bốn tùy chọn có sẵn: trên cùng, bên phải, bên dưới và căn trái.
Vì lý do hiệu suất, Tooltip và Popover data-apis được chọn tham gia, nghĩa là bạn phải tự khởi chạy chúng .
Một cách để khởi tạo tất cả các chú giải công cụ trên một trang là chọn chúng theo data-toggle
thuộc tính của chúng:
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:
Đánh dấu bắt buộc cho chú giải công cụ chỉ là một data
thuộc tính và title
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 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 top
bởi plugin).
Đô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 bọc 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 white-space: nowrap;
vào neo của bạn để tránh điều này.
Khi sử dụng chú giải công cụ trên các phần tử trong a .btn-group
hoặc an , .input-group
hoặc trên các phần tử liên quan đến bảng (,,,, ) , <td>
bạn sẽ phải chỉ định tùy chọn ( được nêu bên dưới) để tránh các tác dụng phụ không mong muốn (chẳng hạn như phần tử ngày càng rộng và / hoặc mất các góc tròn khi chú giải công cụ được kích hoạt).<th>
<tr>
<thead>
<tbody>
<tfoot>
container: 'body'
Đố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ể lấy tiêu điểm bằng 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ó tabindex="0"
thuộc tính.
Để thêm chú giải công cụ vào một disabled
hoặc .disabled
phần tử, hãy đặt phần tử bên trong a <div>
và áp dụng chú giải công cụ cho phần tử <div>
đó.
Các tùy chọn có thể được chuyển qua các thuộc tính dữ liệu hoặc JavaScript. Đối với các thuộc tính dữ liệu, hãy nối tên tùy chọn vào data-
, như trong data-animation=""
.
Tên | Loại hình | Mặc định | Sự mô tả |
---|---|---|---|
hoạt hình | boolean | thật | Áp dụng chuyển đổi mờ dần CSS cho chú giải công cụ |
thùng đựng hàng | chuỗi | sai | sai | Thêm chú giải công cụ vào một phần tử cụ thể. |
sự chậm trễ | số | sự vật | 0 | Độ trễ hiển thị và ẩn chú giải công cụ (mili giây) - không áp dụng cho loại 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à: |
html | boolean | sai | Chèn HTML vào chú giải công cụ. Nếu sai, phương thức của jQuery text 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. |
vị trí | chuỗi | hàm số | 'đứng đầu' | Cách đặt chú giải công cụ - trên cùng | đáy | trái | phải không | Tự động. Khi một hàm được sử dụng để xác định vị trí, nó được gọi với nút DOM của 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à nút thứ hai của nó. Bối |
bộ chọn | sợi dây | sai | Nếu một 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 được chỉ định. Trên 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ụ. Xem điều này và một ví dụ thông tin . |
mẫu | sợi dây | '<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>' |
HTML cơ sở để sử dụng khi tạo chú giải công cụ. Chú giải công cụ
Phần tử bao bọc ngoài cùng phải có |
Tiêu đề | chuỗi | hàm số | '' | Giá trị tiêu đề mặc định nếu Nếu một hàm được cung cấp, nó sẽ được gọi với |
Kích hoạt | sợi dây | 'di chuột tiêu điểm' | Cách kích hoạt chú giải công cụ - nhấp vào | di chuột qua | tiêu điểm | thủ công. Bạn có thể vượt qua nhiều lần kích hoạt; ngăn cách chúng bằng một khoảng trắng. manual không thể kết hợp với bất kỳ trình kích hoạt nào khác. |
khung nhìn | chuỗi | đối tượng | hàm số | {selector: 'body', padding: 0} | Giữ chú giải công cụ trong giới hạn của phần tử này. Ví dụ: Nếu một hàm được cung cấp, nó được gọi với nút DOM phần tử kích hoạt làm đối số duy nhất của nó. Bối |
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.
$().tooltip(options)
Đính kèm trình xử lý chú giải công cụ vào tập hợp phần tử.
.tooltip('show')
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ị (tức là trước khi shown.bs.tooltip
sự kiện xảy ra). Đây được coi là cách 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ị.
.tooltip('hide')
Ẩn chú giải công cụ của phần tử. Trả về trình gọi trước khi chú giải công cụ thực sự bị ẩn (tức là trước khi hidden.bs.tooltip
sự kiện xảy ra). Đây được coi là cách kích hoạt "thủ công" của chú giải công cụ.
.tooltip('toggle')
Chuyển đổi chú giải công cụ của 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 bị ẩn (nghĩa là trước khi sự kiện shown.bs.tooltip
hoặc hidden.bs.tooltip
sự kiện xảy ra). Đây được coi là cách kích hoạt "thủ công" của chú giải công cụ.
.tooltip('destroy')
Ẩn và hủy chú giải công cụ của phần tử. Chú giải công cụ sử dụng ủy quyền (được tạo bằng cách sử dụng tùy selector
chọn ) không thể bị hủy riêng lẻ trên các phần tử kích hoạt con.
Loại sự kiện | Sự mô tả |
---|---|
show.bs.tooltip | Sự kiện này kích hoạt ngay lập tức khi show phương thức thể hiện được gọi. |
show.bs.tooltip | Sự kiện này được kích hoạt khi chú giải công cụ đã được hiển thị cho người dùng (sẽ đợi quá trình chuyển đổi CSS hoàn tất). |
hide.bs.tooltip | Sự kiện này được kích hoạt ngay lập tức khi hide phương thức thể hiện đã được gọi. |
hidden.bs.tooltip | Sự kiện này được kích hoạt khi chú giải công cụ 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). |
insert.bs.tooltip | Sự kiện này được kích hoạt sau show.bs.tooltip sự kiện khi mẫu chú giải công cụ đã được thêm vào DOM. |
Thêm các lớp phủ nhỏ của nội dung, như trên iPad, vào bất kỳ phần tử nào để có thông tin phụ về nhà ở.
Các cửa sổ bật lên có cả tiêu đề và nội dung có độ dài bằng 0 sẽ không bao giờ được hiển thị.
Các cửa sổ bật lên yêu cầu plugin chú giải công cụ phải được bao gồm trong phiên bản Bootstrap của bạn.
Vì lý do hiệu suất, Tooltip và Popover data-apis được chọn tham gia, nghĩa là bạn phải tự khởi chạy 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 data-toggle
thuộc tính của chúng:
Khi sử dụng cửa sổ bật lên trên các phần tử trong a .btn-group
hoặc an , .input-group
hoặc trên các phần tử liên quan đến bảng ( ,,,, ) <td>
, bạn sẽ phải chỉ định tùy chọn ( được nêu dưới đây) để tránh các tác dụng phụ không mong muốn (chẳng hạn như phần tử ngày càng rộng và / hoặc mất các góc tròn khi cửa sổ bật lên được kích hoạt).<th>
<tr>
<thead>
<tbody>
<tfoot>
container: 'body'
Để thêm cửa sổ bật lên vào một disabled
hoặc .disabled
phần tử, hãy đặt phần tử vào bên trong a <div>
và áp dụng cửa sổ bật lên đó <div>
thay thế.
Đôi khi bạn muốn thêm một cửa sổ bật lên vào một siêu kết nối bao bọc 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 white-space: nowrap;
vào neo của bạn để tránh điều này.
Bốn tùy chọn có sẵn: trên cùng, bên phải, bên dưới và căn trái.
Sed posuere consectetur est at lobortis. Aenean eu leo quam. Bìm bìm biếc.
Sed posuere consectetur est at lobortis. Aenean eu leo quam. Bìm bìm biếc.
Sed posuere consectetur est at lobortis. Aenean eu leo quam. Bìm bìm biếc.
Sed posuere consectetur est at lobortis. Aenean eu leo quam. Bìm bìm biếc.
Sử dụng trình focus
kích hoạt để loại bỏ cửa sổ bật lên vào lần nhấp tiếp theo mà người dùng thực hiện.
Để có hành vi phù hợp trên nhiều trình duyệt và đa nền tảng, bạn phải sử dụng thẻ <a>
, không phải<button>
thẻ và bạn cũng phải bao gồm các thuộc tính role="button"
và tabindex
.
Bật cửa sổ bật lên qua JavaScript:
Các tùy chọn có thể được chuyển qua các thuộc tính dữ liệu hoặc JavaScript. Đối với các thuộc tính dữ liệu, hãy nối tên tùy chọn vào data-
, như trong data-animation=""
.
Tên | Loại hình | Mặc định | Sự mô tả |
---|---|---|---|
hoạt hình | boolean | thật | Áp dụng chuyển đổi mờ dần CSS cho cửa sổ bật lên |
thùng đựng hàng | chuỗi | sai | sai | Thêm cửa sổ bật lên cho một phần tử cụ thể. |
Nội dung | chuỗi | hàm số | '' | Giá trị nội dung mặc định nếu Nếu một hàm được cung cấp, nó sẽ được gọi với |
sự chậm trễ | số | sự vật | 0 | Độ trễ hiển thị và ẩn cửa sổ bật lên (mili giây) - không áp dụng cho loại 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à: |
html | boolean | sai | Chèn HTML vào cửa sổ bật lên. Nếu sai, phương thức của jQuery text 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. |
vị trí | chuỗi | hàm số | 'bên phải' | Làm thế nào để định vị cửa sổ bật lên - trên cùng | đáy | trái | phải không | Tự động. Khi một hàm được sử dụng để xác định vị trí, nó được gọi với nút DOM popover làm đối số đầu tiên và nút DOM phần tử kích hoạt là nút thứ hai của nó. Bối |
bộ chọn | sợi dây | sai | Nế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 được chỉ định. Trên 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. Xem điều này và một ví dụ thông tin . |
mẫu | sợi dây | '<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>' |
HTML cơ sở để sử dụng khi tạo cửa sổ bật lên. Cửa sổ bật lên Cửa sổ bật lên
Phần tử bao bọc ngoài cùng phải có |
Tiêu đề | chuỗi | hàm số | '' | Giá trị tiêu đề mặc định nếu Nếu một hàm được cung cấp, nó sẽ được gọi với |
Kích hoạt | sợi dây | 'nhấp chuột' | Cách kích hoạt cửa sổ bật lên - nhấp vào | di chuột qua | tiêu điểm | thủ công. Bạn có thể vượt qua nhiều lần kích hoạt; ngăn cách chúng bằng một khoảng trắng. manual không thể kết hợp với bất kỳ trình kích hoạt nào khác. |
khung nhìn | chuỗi | đối tượng | hàm số | {selector: 'body', padding: 0} | Giữ cửa sổ bật lên trong giới hạn của phần tử này. Ví dụ: Nếu một hàm được cung cấp, nó được gọi với nút DOM phần tử kích hoạt làm đối số duy nhất của nó. Bối |
Các tùy chọn cho các cửa sổ bật lên riêng lẻ có thể được chỉ định theo cách khác thông qua việc sử dụng các thuộc tính dữ liệu, như đã giải thích ở trên.
$().popover(options)
Khởi tạo các cửa sổ bật lên cho một tập hợp phần tử.
.popover('show')
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ị (tức là trước khi shown.bs.popover
sự kiện xảy ra). Đây được coi là một "thủ công" kích hoạt cửa sổ bật lên. Các cửa sổ bật lên có cả tiêu đề và nội dung có độ dài bằng 0 sẽ không bao giờ được hiển thị.
.popover('hide')
Ẩn 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ự bị ẩn (tức là trước khi hidden.bs.popover
sự kiện xảy ra). Đây được coi là một "thủ công" kích hoạt cửa sổ bật lên.
.popover('toggle')
Chuyển đổi 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ị hoặc bị ẩn (tức là trước khi sự kiện shown.bs.popover
hoặc hidden.bs.popover
sự kiện xảy ra). Đây được coi là một "thủ công" kích hoạt cửa sổ bật lên.
.popover('destroy')
Ẩn và phá hủy cửa sổ bật lên của một phần tử. Các cửa sổ bật lên sử dụng ủy quyền (được tạo bằng cách sử dụng tùy selector
chọn ) không thể bị hủy riêng lẻ trên các phần tử kích hoạt con cháu.
Loại sự kiện | Sự mô tả |
---|---|
show.bs.popover | Sự kiện này kích hoạt ngay lập tức khi show phương thức thể hiện được gọi. |
show.bs.popover | Sự kiện này được kích hoạt khi cửa sổ bật lên hiển thị cho người dùng (sẽ đợi quá trình chuyển đổi CSS hoàn tất). |
hide.bs.popover | Sự kiện này được kích hoạt ngay lập tức khi hide phương thức thể hiện đã được gọi. |
hidden.bs.popover | 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). |
insert.bs.popover | Sự kiện này được kích hoạt sau show.bs.popover sự kiện khi mẫu cửa sổ bật lên đã được thêm vào DOM. |
Thêm chức năng loại bỏ cho tất cả các thông báo cảnh báo với plugin này.
Khi sử dụng một .close
nút, nó phải là nút con đầu tiên .alert-dismissible
và không có nội dung văn bản nào có thể đứng trước nó trong phần đánh dấu.
Thay đổi cái này cái kia và thử lại. Duis mollis, est non rowo luctus, nisi erat porttitor ligula, eget lacinia odio sem perf elit. Cras mattis consectetur purus sit amet fermentum.
Chỉ cần thêm data-dismiss="alert"
vào nút đóng của bạn để tự động cung cấp chức năng đóng cảnh báo. Đóng một cảnh báo sẽ xóa nó khỏi DOM.
Để cảnh báo của bạn sử dụng hoạt ảnh khi đóng, hãy đảm bảo rằng chúng có các lớp .fade
và .in
lớp đã được áp dụng cho chúng.
$().alert()
Làm cho 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ó data-dismiss="alert"
thuộc tính. (Không cần thiết khi sử dụng tự động khởi tạo data-api.)
$().alert('close')
Đóng một cảnh báo bằng cách xóa nó khỏi DOM. Nếu các lớp .fade
và .in
có trên phần tử, cảnh báo sẽ mờ dần trước khi nó bị xóa.
Plugin cảnh báo của Bootstrap cho thấy một vài sự kiện để kết nối với chức năng cảnh báo.
Loại sự kiện | Sự mô tả |
---|---|
close.bs.alert | Sự kiện này kích hoạt ngay lập tức khi close phương thức thể hiện được gọi. |
đã đóng.bs.alert | Sự kiện này được kích hoạt khi cảnh báo đã được đóng (sẽ đợi quá trình chuyển đổi CSS hoàn tất). |
Làm được nhiều việc hơn với các nút. Các 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ụ.
Firefox vẫn tồn tại trạng thái kiểm soát biểu mẫu (vô hiệu hóa và kiểm tra) qua các lần tải trang . Một giải pháp cho điều này là sử dụng autocomplete="off"
. Xem lỗi Mozilla # 654072 .
Thêm data-loading-text="Loading..."
để sử dụng trạng thái tải trên một nút.
Tính năng này không được dùng nữa kể từ v3.3.5 và đã bị xóa trong v4.
Vì mục đích của cuộc trình diễn này, chúng tôi đang sử dụng data-loading-text
và $().button('loading')
, nhưng đó không phải là trạng thái duy nhất bạn có thể sử dụng. Xem thêm về điều này bên dưới trong $().button(string)
tài liệu .
Thêm data-toggle="button"
để kích hoạt bật tắt trên một nút duy nhất.
.active
vàaria-pressed="true"
Đối với các nút được chuyển đổi trước, bạn phải thêm .active
lớp và aria-pressed="true"
thuộc tính cho button
chính mình.
Thêm vào data-toggle="buttons"
hộp .btn-group
kiểm có chứa hoặc các đầu vào radio để bật chuyển đổi theo các kiểu tương ứng.
.active
Đối với các tùy chọn đã chọn trước, bạn phải tự thêm .active
lớp vào đầu vào của label
chính mình.
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 click
sự kiện trên nút (ví dụ: thông qua <input type="reset">
hoặc thông qua thiết lập thuộc checked
tính của đầu vào), bạn sẽ cần phải tự mình chuyển đổi .active
lớp trên đầu vào label
.
$().button('toggle')
Chuyển đổi trạng thái đẩy. Cung cấp cho nút giao diện như nó đã được kích hoạt.
$().button('reset')
Đặt lại trạng thái nút - hoán đổi văn bản thành văn bản gốc. Phương thức này không đồng bộ và trả về trước khi quá trình đặt lại thực sự hoàn tất.
$().button(string)
Hoán đổi văn bản thành bất kỳ trạng thái văn bản nào do dữ liệu xác định.
Plugin linh hoạt sử dụng một số lớp để dễ dàng chuyển đổi hành vi.
Thu gọn yêu cầu plugin chuyển tiếp phải được bao gồm trong phiên bản Bootstrap của bạn.
Nhấp vào các nút bên dưới để hiển thị và ẩn một phần tử khác thông qua các thay đổi lớp:
.collapse
ẩn nội dung.collapsing
được áp dụng trong quá trình chuyển đổi.collapse.in
hiển thị nội dungBạn có thể sử dụng liên kết có href
thuộc tính hoặc nút có data-target
thuộc tính. Trong cả hai trường hợp, data-toggle="collapse"
yêu cầu là bắt buộc.
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.
Cũng có thể hoán đổi .panel-body
s với .list-group
s.
Đảm bảo thêm aria-expanded
vào phần tử điều khiển. 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ự. Nếu phần tử có thể thu gọn được đóng theo mặc định, phần tử đó phải có giá trị là aria-expanded="false"
. Nếu bạn đã đặt phần tử có thể thu gọn được mở theo mặc định bằng cách sử dụng in
lớp, hãy đặt aria-expanded="true"
trên điều khiển thay thế. 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 hay chưa.
Ngoài ra, nếu phần tử điều khiển của bạn đang nhắm mục tiêu đến một phần tử có thể thu gọn - tức là data-target
thuộc tính đang trỏ đến một id
bộ chọn - bạn có thể thêm phần tử bổ sungaria-controls
thuộc tính bổ sung vào phần tử điều khiển, chứa thuộc tính của phần tử có id
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.
Plugin thu gọn sử dụng một số lớp để xử lý công việc nặng nhọc:
.collapse
ẩn nội dung.collapse.in
hiển thị nội dung.collapsing
được thêm vào khi quá trình chuyển đổi bắt đầu và bị xóa khi kết thúcCác lớp này có thể được tìm thấy trongcomponent-animations.less
.
Chỉ cần thêm data-toggle="collapse"
và a data-target
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 data-target
tính chấp nhận một bộ chọn CSS để áp dụng tính năng thu gọn. Đảm bảo thêm lớp collapse
vào phần tử có thể thu gọn. Nếu bạn muốn nó mở mặc định, hãy thêm lớp bổ sungin
.
Để thêm 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 data-parent="#selector"
. Tham khảo bản demo để thấy điều này trong hoạt động.
Bật theo cách thủ công với:
Các tùy chọn có thể được chuyển qua các thuộc tính dữ liệu hoặc JavaScript. Đối với các thuộc tính dữ liệu, hãy nối tên tùy chọn vào data-
, như trong data-parent=""
.
Tên | loại hình | mặc định | sự mô tả |
---|---|---|---|
cha mẹ | bộ chọn | sai | Nếu một bộ chọn được cung cấp, thì tất cả các phần tử có thể thu gọn trong phần tử 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 panel lớp) |
chuyển đổi | boolean | thật | Chuyển đổi phần tử có thể thu gọn khi gọi |
.collapse(options)
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 object
.
.collapse('toggle')
Chuyển đổi phần tử có thể thu gọn thành hiển thị hoặc ẩn. Trả về trình gọi trước khi phần tử thu gọn thực sự được hiển thị hoặc bị ẩn (tức là trước khi sự kiện shown.bs.collapse
hoặc hidden.bs.collapse
sự kiện xảy ra).
.collapse('show')
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ử thu gọn thực sự được hiển thị (tức là trước khi shown.bs.collapse
sự kiện xảy ra).
.collapse('hide')
Ẩn một phần tử có thể thu gọn. Trả về trình gọi trước khi phần tử thu gọn thực sự bị ẩn (tức là trước khi hidden.bs.collapse
sự kiện xảy ra).
Lớp thu gọn của Bootstrap cho thấy một vài sự kiện để kết nối vào chức năng thu gọn.
Loại sự kiện | Sự mô tả |
---|---|
show.bs.collapse | Sự kiện này kích hoạt ngay lập tức khi show phương thức thể hiện được gọi. |
show.bs.collapse | Sự kiện này được kích hoạt khi một 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). |
hide.bs.collapse | Sự kiện này được kích hoạt ngay lập tức khi hide phương thức đã được gọi. |
hidden.bs.collapse | Sự kiện này được kích hoạt khi một 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). |
Một thành phần trình chiếu để quay vòng qua các phần tử, như băng chuyền. Băng chuyền lồng nhau không được hỗ trợ.
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 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.
Bootstrap chỉ sử dụng CSS3 cho các 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 đổi 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.
Lớp .active
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ị.
Các lớp .glyphicon .glyphicon-chevron-left
và .glyphicon .glyphicon-chevron-right
không nhất thiết phải cần thiết cho các điều khiển. Bootstrap cung cấp .icon-prev
các .icon-next
lựa chọn thay thế unicode đơn giản.
Thêm chú thích vào trang trình bày của bạn một cách dễ dàng với .carousel-caption
phần tử bên trong bất kỳ .item
. Chỉ đặt khoảng bất kỳ HTML tùy chọn nào trong đó và nó sẽ được căn chỉnh và định dạng tự động.
Băng chuyền yêu cầu sử dụng id
hộp chứa ở ngoài cùng (cái .carousel
) để đ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 băng chuyền id
, hãy nhớ cập nhật các điều khiển có liên quan.
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. data-slide
chấp nhận các từ khóa prev
hoặc next
thay đổi vị trí trang chiếu so với vị trí hiện tại của nó. Ngoài ra, sử dụng data-slide-to
để chuyển một chỉ mục trang trình bày thô vào băng chuyền data-slide-to="2"
, chuyển vị trí trang trình bày sang một chỉ mục cụ thể bắt đầu bằng0
.
Thuộc data-ride="carousel"
tính được sử dụng để đánh dấu một băng chuyền là hoạt ảnh bắt đầu 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 (thừa và không cần thiết) của cùng một băng chuyền.
Gọi băng chuyền theo cách thủ công với:
Các tùy chọn có thể được chuyển qua các thuộc tính dữ liệu hoặc JavaScript. Đối với các thuộc tính dữ liệu, hãy nối tên tùy chọn vào data-
, như trong data-interval=""
.
Tên | loại hình | mặc định | sự mô tả |
---|---|---|---|
khoảng thời gian | con số | 5000 | Khoảng thời gian để trì hoãn giữa việc tự động quay một mục. Nếu sai, băng chuyền sẽ không tự động xoay vòng. |
tạm ngừng | chuỗi | vô giá trị | "bay lượn" | Nếu được đặt thành "hover" , hãy tạm dừng quay băng chuyền mouseenter và tiếp tục quay băng chuyền mouseleave . Nếu được đặt thành null , di chuột qua băng chuyền sẽ không tạm dừng. |
bọc | boolean | thật | Cho dù băng chuyền sẽ quay vòng liên tục hay có các điểm dừng khó. |
bàn phím | boolean | thật | Liệu băng chuyền có phản ứng với các sự kiện bàn phím hay không. |
.carousel(options)
Khởi tạo băng chuyền với một tùy chọn tùy chọn object
và bắt đầu quay vòng qua các mục.
.carousel('cycle')
Xoay qua các mục trong băng chuyền từ trái sang phải.
.carousel('pause')
Ngăn băng chuyền di chuyển qua các mục.
.carousel(number)
Xoay băng chuyền thành một khung cụ thể (dựa trên 0, tương tự như một mảng).
.carousel('prev')
Chuyển sang mục trước đó.
.carousel('next')
Chuyển sang mục tiếp theo.
Lớp băng chuyền của Bootstrap cho thấy hai sự kiện để kết 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:
direction
: Hướng băng chuyền đang trượt (một trong hai "left"
hoặc "right"
).relatedTarget
: Phần tử DOM đang được trượt vào vị trí như một mục đang 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 (tức là tại <div class="carousel">
).
Loại sự kiện | Sự mô tả |
---|---|
slide.bs.carousel | Sự kiện này kích hoạt ngay lập tức khi slide phương thức thể hiện được gọi. |
slid.bs.carousel | 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ó. |
Plugin liên kết bật position: fixed;
và tắt, mô phỏng hiệu ứng được tìm thấy với position: sticky;
. Điều khoản phụ ở bên phải là bản demo trực tiếp của plugin đính kèm.
Sử dụng plugin đính kèm thông qua các thuộc tính dữ liệu hoặc theo cách thủ công với JavaScript của riêng bạn. Trong cả hai trường hợp, bạn phải cung cấp CSS để định vị và chiều rộng của nội dung được dán.
Lưu ý: Không sử dụng plugin gắn trên 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 .
Plugin liê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ể .affix
:, .affix-top
và .affix-bottom
. Bạn phải cung cấp các kiểu, ngoại trừ position: fixed;
bật.affix
, cho chính các lớp này (độc lập với plugin này) để xử lý các vị trí thực tế.
Đây là cách hoạt động của plugin đính kèm:
.affix-top
để cho biết phần tử đang ở vị trí cao nhất. Tại thời điểm này, không cần định vị CSS..affix
thay thế .affix-top
và thiết lập position: fixed;
(được cung cấp bởi Bootstrap's CSS)..affix
bằng .affix-bottom
. Vì hiệu số là tùy chọn, cài đặt một yêu cầu bạn phải đặt CSS thích hợp. Trong trường hợp này, hãy bổ sung position: absolute;
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í của 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.
Để dễ dàng thêm hành vi liên kết vào bất kỳ phần tử nào, chỉ cần thêm data-spy="affix"
vào phần tử bạn muốn theo dõi. Sử dụng hiệu số để xác định thời điểm chuyển đổi ghim của một phần tử.
Gọi plugin liên kết qua JavaScript:
Các tùy chọn có thể được chuyển qua các thuộc tính dữ liệu hoặc JavaScript. Đối với các thuộc tính dữ liệu, hãy nối tên tùy chọn vào data-
, như trong data-offset-top="200"
.
Tên | loại hình | mặc định | sự mô tả |
---|---|---|---|
bù lại | số | chức năng | sự vật | 10 | Điểm ảnh để bù đắp từ màn hình khi tính toán vị trí của cuộn. Nếu cung cấp một số duy nhất, phần bù sẽ được áp dụng theo cả hướng trên và dưới. Để cung cấp một độ lệch duy nhất, dưới cùng và trên cùng, chỉ cần cung cấp một đối tượng offset: { top: 10 } hoặc offset: { top: 10, bottom: 5 } . Sử dụng một hàm khi bạn cần tính toán động một phần bù. |
Mục tiêu | bộ chọn | nút | phần tử jQuery | đối window tượng |
Chỉ định phần tử đích của phụ tố. |
.affix(options)
Kích hoạt nội dung của bạn dưới dạng nội dung gắn liền. Chấp nhận một tùy chọn tùy chọn object
.
.affix('checkPosition')
Tính toán lại trạng thái của dấu 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 .affix
, .affix-top
và .affix-bottom
các lớp đượ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 thức này cần được gọi bất cứ khi nào kích thước của nội dung được gắn hoặc phần tử đích được thay đổi, để đảm bảo vị trí chính xác của nội dung được gắn.
Plugin liên kết của Bootstrap cho thấy một vài sự kiện để kết nối vào chức năng gắn kết.
Loại sự kiện | Sự mô tả |
---|---|
affix.bs.affix | Sự kiện này kích hoạt ngay lập tức trước khi phần tử được gắn. |
affixed.bs.affix | Sự kiện này được kích hoạt sau khi phần tử đã được gắn. |
affix-top.bs.affix | Sự kiện này kích hoạt ngay lập tức trước khi phần tử được gắn trên cùng. |
affixed-top.bs.affix | Sự kiện này được kích hoạt sau khi phần tử đã được gắn trên cùng. |
affix-bottom.bs.affix | Sự kiện này kích hoạt ngay lập tức trước khi phần tử được gắn ở dưới cùng. |
affixed-bottom.bs.affix | Sự kiện này được kích hoạt sau khi phần tử đã được gắn ở dưới cùng. |