[twitter-bootstrap-3] Bootstrap 3의`data-target` 속성은 무엇입니까?

Program / 글쓴이

data-target부트 스트랩 3에서 사용 하는 속성 뒤에있는 시스템이나 동작이 무엇인지 말씀해 주 시겠습니까?

나는 데이터 토글이 그래픽 기능의 부트 스트랩의 API JavaScript를 목표로하는 데 사용되었다는 것을 알고 있습니다.

답변

data-target당신의 삶을 더 쉽게 만들기 위해 부트 스트랩에서 사용됩니다. (대부분) 미리 만들어진 JavaScript 구성 요소 를 사용하기 위해 한 줄의 Javascript를 작성할 필요가 없습니다 .

data-target속성은 HTML 요소에 포인트가 변경됩니다 CSS 선택기를 포함해야합니다.

BS3의 모달 예제 코드 :

<!-- 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>수정됩니다 (이 경우 페이드 인). 이는 #myModalCSS 선택기 id에서 myModal값 이있는 속성 이있는 요소를 가리 키기 때문에 발생 합니다.

HTML5 “data-“속성에 대한 추가 정보 : https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_data_attributes

답변

토글은 부트 스트랩에게 무엇을해야하는지 알려주고 타겟은 부트 스트랩에게 어떤 요소가 열릴 지 알려줍니다. 따라서 이와 같은 링크를 클릭 할 때마다 ID가 “basicModal”인 모달이 나타납니다.

답변