Câu trả lời:
Nó là một thuộc tính dữ liệu Bootstrap tự động nối phần tử vào loại widget. Dữ liệu- * là một phần của thông số html5 và chuyển đổi dữ liệu dành riêng cho Bootstrap.
Vài ví dụ:
data-toggle="modal"
data-toggle="collapse"
data-toggle="dropdown"
data-toggle="tab"Đi qua các tài liệu JavaScript Bootstrap và tìm kiếm chuyển đổi dữ liệu và bạn sẽ thấy nó được sử dụng trong các ví dụ mã.
Một ví dụ hoạt động:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Dropdown trigger</a>
<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
<li><a href="#">Item</a></li>
</ul>
</div>Bất kỳ thuộc tính nào bắt đầu bằng data-là tiền tố cho các thuộc tính tùy chỉnh được sử dụng cho một số mục đích cụ thể (mục đích đó phụ thuộc vào ứng dụng). Nó được thêm vào như một phương thuốc ngữ nghĩa cho việc sử dụng nhiều của mọi người relvà các thuộc tính khác cho các mục đích khác với mục đích ban đầu của họ ( relthường được sử dụng để giữ dữ liệu cho những thứ như chú giải công cụ nâng cao).
Trong trường hợp của Bootstrap, tôi không quen với hoạt động bên trong của nó, nhưng đánh giá từ cái tên, tôi đoán đó là một cái móc để cho phép tầm nhìn hoặc có lẽ là một chế độ của yếu tố mà nó được gắn vào (chẳng hạn như có thể thu gọn thanh bên trên Octopress.org ).
html5doctor có một bài viết hay về thuộc tính data- .
Chu kỳ 2 là một ví dụ khác về việc sử dụng rộng rãi thuộc tính data- .
Ví dụ: giả sử bạn đang tạo một ứng dụng web để liệt kê và hiển thị các công thức nấu ăn. Bạn có thể muốn khách hàng của mình có thể sắp xếp danh sách, hiển thị các tính năng của công thức nấu ăn, v.v. trước khi họ chọn công thức để mở. Để làm điều này, bạn cần liên kết những thứ như thời gian nấu, thành phần chính, vị trí bữa ăn, vv ngay trong danh sách các yếu tố cho công thức nấu ăn.
<li><a href="recipe1.html">Borscht</a></li>
<li><a href="recipe2.html">Chocolate Mousse</a></li>
<li><a href="recipe3.html">Almond Radiccio Salad</a></li>
<li><a href="recipe4.html">Deviled Eggs</a></li>Để có được thông tin đó vào trang, bạn có thể làm nhiều việc khác nhau. Bạn có thể thêm nhận xét cho từng thành phần LI, bạn có thể thêm thuộc tính rel vào các mục danh sách, bạn có thể đặt tất cả các công thức nấu ăn trong các thư mục riêng dựa trên thời gian, bữa ăn và thành phần (ví dụ). Giải pháp mà hầu hết các nhà phát triển đã thực hiện là sử dụng các thuộc tính lớp để lưu trữ thông tin về phần tử hiện tại. Điều này có một số lợi thế:
Nhưng có một số nhược điểm chính của phương pháp này:
Tất cả các phương pháp khác tôi đề nghị có những vấn đề này cũng như những vấn đề khác. Nhưng vì đó là cách duy nhất để nhanh chóng và dễ dàng bao gồm dữ liệu, đó là những gì chúng tôi đã làm. Thuộc tính dữ liệu HTML5 để giải cứu
HTML5 đã thêm một loại thuộc tính mới cho bất kỳ phần tử nào. Phần tử dữ liệu tùy chỉnh (data- *). Đây là các thuộc tính tùy chỉnh (được biểu thị bằng *) mà bạn có thể thêm vào các thành phần HTML của mình để xác định bất kỳ loại dữ liệu nào bạn muốn. Chúng bao gồm hai phần:
Tên thuộc tính Đây là tên của thuộc tính. Nó phải có ít nhất một ký tự chữ thường và có dữ liệu tiền tố-. Ví dụ: dữ liệu-thành phần chính, thời gian nấu dữ liệu, bữa ăn dữ liệu. Đây là tên của dữ liệu của bạn.
Thuộc tính Vaule Giống như bất kỳ thuộc tính HTML nào khác, bạn bao gồm chính dữ liệu trong dấu ngoặc kép được phân tách bằng dấu bằng. Dữ liệu này có thể là bất kỳ chuỗi nào hợp lệ trên một trang web. Ví dụ: data-main-thành phần = "sô cô la".
Sau đó, bạn có thể áp dụng các thuộc tính dữ liệu này cho bất kỳ yếu tố HTML nào bạn muốn. Ví dụ: bạn có thể xác định thông tin trong danh sách ví dụ ở trên:
<li data-main-ingredient="beets" data-cooking-time="1 hour" data-meal="dinner"><a href="recipe1.html">Borscht</a></li>
<li data-main-ingredient="chocolate" data-cooking-time="30 minutes" data-meal="dessert"><a href="recipe2.html">Chocolate Mousse</a></li>
<li data-main-ingredient="radiccio" data-cooking-time="20 minutes" data-meal="dinner"><a href="recipe1.html">Almond Radiccio Salad</a></li>
<li data-main-ingredient="eggs" data-cooking-time="15 minutes" data-meal="appetizer"><a href="recipe1.html">Deviled Eggs</a></li>Khi bạn có thông tin đó trong HTML của mình, bạn sẽ có thể truy cập bằng JavaScript và thao tác trang dựa trên dữ liệu đó.
<!--Activate a modal without writing JavaScript. Set data-toggle="modal" on a
controller element, like a button, along with a data-target="#foo" or href="#foo"
to target a specific modal to toggle.-->
<button type="button" data-toggle="modal" data-target="#myModal">Launch modal</button>Rất nhiều câu trả lời đã được đưa ra, nhưng chúng không đi đến điểm chính. Hãy sửa nó đi.
http://www.w3schools.com/bootstrap/bootstrap_Vf_js_collapse.asp
Đến điểm
data-không được phân tích cú pháp bởi trình phân tích cú pháp HTML5.data-togglethuộc tính để tạo chức năng thu gọn.Cách sử dụng : Chỉ 2 bước
class="collapse"vào yếu tố #Abạn muốn sụp đổ.data-target="#A"và data-toggle="collapse".Mục đích: data-togglethuộc tính cho phép chúng ta tạo một điều khiển để thu gọn / mở rộng một div(khối) nếu chúng ta sử dụng Bootstrap.
Sự hiện diện của thuộc tính dữ liệu này cho Bootstrap chuyển đổi giữa trạng thái trực quan hoặc logic của một yếu tố khác trên sự tương tác của người dùng.
Nó được sử dụng để hiển thị các chế độ, nội dung tab, chú giải công cụ và menu popover cũng như đặt trạng thái nhấn cho nút chuyển đổi. Nó được sử dụng theo nhiều cách mà không có tài liệu rõ ràng.
Mục đích của việc chuyển đổi dữ liệu trong bootstrap là để bạn có thể sử dụng jQuery để tìm tất cả các thẻ thuộc một loại nhất định. Ví dụ: bạn đặt data-toggle = "popover" trong tất cả các thẻ popover và sau đó bạn có thể sử dụng bộ chọn JQuery để tìm tất cả các thẻ đó và chạy hàm popover () để khởi tạo chúng. Bạn cũng có thể đặt class = "myPopover" vào thẻ và sử dụng bộ chọn .myPopover để làm điều tương tự. Các tài liệu này là khó hiểu, bởi vì nó làm cho có vẻ như một cái gì đó đặc biệt đang xảy ra với thuộc tính đó.
Điều này
<div class="container">
<h3>Popover Example</h3>
<a href="#" class="myPop" title="Popover1 Header" data-content="Some content inside the popover1">Toggle popover1</a>
<a href="#" class="myPop" title="Popover2 Header" data-content="Some content inside the popover2">Toggle popover2</a>
</div>
<script>
$(document).ready(function(){
$('.myPop').popover();
});
</script>hoạt động tốt
Bootstrap tận dụng các tiêu chuẩn HTML5 để dễ dàng truy cập các thuộc tính phần tử DOM trong javascript.
Hình thành một lớp các thuộc tính, được gọi là thuộc tính dữ liệu tùy chỉnh, cho phép trao đổi thông tin độc quyền giữa HTML và biểu diễn DOM của nó có thể được sử dụng bởi các tập lệnh. Tất cả dữ liệu tùy chỉnh như vậy có sẵn thông qua giao diện HTMLE bổ sung của phần tử mà thuộc tính được đặt. Thuộc tính HTMLEuity.dataset cung cấp quyền truy cập vào chúng.