data-target
부트 스트랩 3에서 사용 하는 속성 뒤에있는 시스템이나 동작이 무엇인지 말씀해 주 시겠습니까?
나는 데이터 토글이 그래픽 기능의 부트 스트랩의 API JavaScript를 목표로하는 데 사용되었다는 것을 알고 있습니다.
답변:
data-target
당신의 삶을 더 쉽게 만들기 위해 부트 스트랩에서 사용됩니다. (대부분) 미리 만들어진 JavaScript 구성 요소 를 사용하기 위해 한 줄의 Javascript를 작성할 필요가 없습니다 .
data-target
속성은 HTML 요소에 포인트가 변경됩니다 CSS 선택기를 포함해야합니다.
<!-- Button trigger modal -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
[...]
</div>
이 예에서 버튼은를 data-target="#myModal"
클릭하면 <div id="myModal">...</div>
수정됩니다 (이 경우 페이드 인). 이는 #myModal
CSS 선택기 id
에서 myModal
값 이있는 속성 이있는 요소를 가리 키기 때문에 발생 합니다.
HTML5 "data-"속성에 대한 추가 정보 : https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_data_attributes
data-target
관련 요소를 가리키는 CSS 선택기를 허용합니다.
토글은 부트 스트랩에게 무엇을해야하는지 알려주고 타겟은 부트 스트랩에게 어떤 요소가 열릴 지 알려줍니다. 따라서 이와 같은 링크를 클릭 할 때마다 ID가 "basicModal"인 모달이 나타납니다.