답변:
요소를 위젯 유형에 자동으로 연결하는 것은 부트 스트랩 데이터 속성입니다. Data- *는 html5 사양의 일부이며 data-toggle은 Bootstrap에만 해당됩니다.
몇 가지 예 :
data-toggle="modal"
data-toggle="collapse"
data-toggle="dropdown"
data-toggle="tab"관통 이동 부트 스트랩 자바 스크립트 문서 및 데이터 토글을 검색하고 당신은 코드 예제에 사용되는 볼 수 있습니다.
한 가지 실례 :
<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>로 시작하는 모든 속성은 data-특정 목적에 사용되는 사용자 지정 속성의 접두사입니다 (해당 응용 프로그램에 따라 다름). rel원래 의도 된 목적 이외의 목적으로 사람들이 많이 사용 하고 다른 속성에 의미 론적 치료법으로 추가되었습니다 ( rel종종 고급 툴팁과 같은 것에 대한 데이터를 보유하는 데 사용되었습니다).
부트 스트랩의 경우 내부 작업에 익숙하지 않지만 이름으로 판단하면 가시성 또는 부착 된 요소 모드 (예 : 접을 수있는 모드)를 전환 할 수있는 고리라고 생각합니다 Octopress.org의 사이드 바 ).
예를 들어, 레시피를 나열하고 표시하기 위해 웹 애플리케이션을 작성한다고 가정하십시오. 고객이 레시피를 선택하기 전에 목록을 정렬하고 레시피의 기능을 표시하는 등의 작업을 고객이 원할 수 있습니다. 이렇게하려면 조리법의 목록 요소 안에 요리 시간, 기본 재료, 식사 위치 등과 같은 것들을 연결해야합니다.
<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>해당 정보를 페이지로 가져 오기 위해 여러 가지 다른 작업을 수행 할 수 있습니다. 각 LI 요소에 주석을 추가하고, 목록 항목에 rel 속성을 추가하고, 시간, 식사 및 성분 (예 :)에 따라 모든 레시피를 별도의 폴더에 배치 할 수 있습니다. 대부분의 개발자가 취한 솔루션은 클래스 속성을 사용하여 현재 요소에 대한 정보를 저장하는 것입니다. 여기에는 몇 가지 장점이 있습니다.
그러나이 방법에는 몇 가지 주요 단점이 있습니다.
내가 제안한 다른 모든 방법에는 다른 문제뿐만 아니라 이러한 문제가있었습니다. 그러나 데이터를 빠르고 쉽게 포함 할 수있는 유일한 방법 이었으므로 이것이 바로 우리의 일입니다. 구조에 대한 HTML5 데이터 속성
HTML5는 새로운 유형의 속성을 사용자 지정 데이터 요소 (data- *)에 추가했습니다. 이들은 원하는 데이터 유형을 정의하기 위해 HTML 요소에 추가 할 수있는 사용자 정의 (*로 표시) 속성입니다. 그들은 두 부분으로 구성됩니다.
속성 이름 속성의 이름입니다. 적어도 하나의 소문자 여야하며 접두사 data-가 있어야합니다. 예를 들어 : 데이터 주성분, 데이터 쿠킹 시간, 데이터 식사. 이것은 데이터의 이름입니다.
특성 값 다른 HTML 특성과 마찬가지로 데이터 자체를 등호로 구분하여 따옴표로 묶습니다. 이 데이터는 웹 페이지에서 유효한 문자열 일 수 있습니다. 예를 들면 다음과 같습니다. data-main-ingredient = "chocolate".
그런 다음 이러한 데이터 속성을 원하는 HTML 요소에 적용 할 수 있습니다. 예를 들어 위의 예제 목록에서 정보를 정의 할 수 있습니다.
<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>HTML에 해당 정보가 있으면 JavaScript를 사용하여 해당 정보에 액세스하고 해당 데이터를 기반으로 페이지를 조작 할 수 있습니다.
로부터 부트 스트랩 문서 :
<!--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>너무 많은 답변이 주어졌지만 요점을 얻지 못했습니다. 이 문제를 해결합시다.
http://www.w3schools.com/bootstrap/bootstrap_ref_js_collapse.asp
요점
data-은 HTML5 파서에 의해 구문 분석되지 않습니다.data-toggle속성을 사용하여 축소 기능을 만듭니다.사용 방법 : 2 단계 만
class="collapse"요소에 추가하십시오 #A.data-target="#A"및 data-toggle="collapse".목적 : data-toggle 속성 div을 사용하면 부트 스트랩을 사용하는 경우 (블록) 을 축소 / 확장하는 컨트롤을 만들 수 있습니다 .
부트 스트랩에서 데이터 토글의 목적은 jQuery를 사용하여 특정 유형의 모든 태그를 찾을 수 있도록하는 것입니다. 예를 들어, 모든 popover 태그에 data-toggle = "popover"를 넣은 다음 JQuery 선택기를 사용하여 모든 태그를 찾은 다음 popover () 함수를 실행하여 초기화 할 수 있습니다. 태그에 class = "myPopover"를 넣고 .myPopover 선택기를 사용하여 동일한 작업을 수행 할 수 있습니다. 문서가 그 속성과 관련하여 특별한 일이 일어나고 있기 때문에 혼란 스럽습니다.
이
<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>잘 작동합니다.