Bootstrap에서 data-[*] 속성 구성

이 글은 모두를 위해 부트스트랩의 data-[*] 속성에 대한 관련 지식을 정리했습니다. 관심 있는 친구들은 함께 살펴보세요

【1 data-attribute】

data 속성은 HTML5의 새로운 속성입니다. . 개발자는 데이터를 저장하기 위해 태그에 속성을 자유롭게 추가할 수 있습니다.

저장된 (맞춤형) 데이터는 페이지의 JavaScript에서 사용할 수 있습니다.

data-* 속성은 두 부분으로 구성됩니다.

1. * 속성 이름에는 대문자가 포함될 수 없으며 접두사 "data-" 뒤에 문자가 하나 이상 있어야 합니다.

2. * 속성 값은 모든 문자열이 될 수 있습니다.

직접 말하면 데이터 속성을 적용하는 것입니다. 따라서 HTML 태그는 암시적으로 일부 데이터를 첨부할 수 있고 JavaScript는 이러한 속성 데이터를 읽고 쓸 수 있으며 해당 동작과 이벤트를 만들 수 있습니다.

【부트스트랩의 2가지 데이터 속성】 공식 웹사이트에는 JavaScript 코드 한 줄도 작성하지 않고도 데이터 속성 API를 통해서만 모든 부트스트랩 플러그인을 사용할 수 있다는 소개가 있습니다. 이는 Bootstrap의 최고 수준 API이며 첫 번째 선택이 되어야 합니다.

과거에는 네이티브 javascrpt를 사용할 때 먼저 프런트 엔드 스타일 레이아웃과 인터랙티브 이벤트를 결정한 다음 javascript와 HTML DOM 트리를 사용하여 기존 텍스트 객체를 조작하여 동적 효과 및 기타 인터랙션을 구현했습니다.

나중에 Facebook은 드롭다운 메뉴, 접기, 모달 상자 등과 같은 많은 기본 웹 페이지 효과가 일반적으로 사용되고 자주 사용된다는 사실을 발견했습니다. 일반적으로 사용되는 것들을 표준 모델 세트로 추출한 다음 사용 규칙을 공식화하면 이 규칙에 따라 직접 사용할 수 있으므로 부트스트랩이 탄생했습니다.

솔직하게 말하면 과거에는 기능적 요구사항을 먼저 파악한 다음 구현했습니다. 이제 기본적으로 함수가 다루어졌고, js 작업 함수도 작성되었으며, CSS 스타일도 작성되었습니다. 사용하려면 해당 규칙에 따라 호출하면 됩니다. 그런 다음 더 다양해지기 위해 bootstrap.js의 함수는 다른 매개변수 값을 가질 수 있습니다. 이러한 매개변수 값은 태그에 제공하는 속성에 따라 설정됩니다. (실제로 현재 js 플러그인은 기본적으로 이 루틴을 사용합니다.)

태그의 class="xxx" 속성은 주로 부트스트랩의 CSS 스타일을 사용하고 식별 가능한 객체에 대한 클래스 이름 식별자로 사용됩니다.

태그의 data-[xx]="yy" 속성은 주로 부트스트랩 구성 요소 및 플러그인을 사용하고 호출하는 데 사용됩니다. 즉, bootstrap.js를 사용하여 일부 대화형 효과를 얻는 데 사용됩니다.

【부트스트랩 공통 데이터 속성 3개】

1 data-toggle data-toggle은 어떤 이벤트 유형이 발생하는지를 말하며 일반적으로 사용되는 것은 다음과 같습니다.

data-toggle="dropdown"//下拉菜单
data-toggle="model" //模态框事件
data-toggle="tooltip"//提示框事件
data-toggle="tab"//标签页
data-toggle="collapse"//折叠
data-toggle="popover"//弹出框
data-toggle="button"//按钮事件

일반 이벤트는 레이블 개체에 영향을 미칩니다. 다른 레이블 개체인 경우 이벤트의 레이블 대상을 참조하려면 data-target을 사용해야 합니다. 따라서 data-loggle과 data-target을 함께 사용하는 경우도 있습니다. 다음과 같습니다

<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
 开始演示模态框
</button>
<!-- 模态框（Modal） -->
<p class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
 <p class="modal-dialog">
  <p class="modal-content">
   <p class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
     ×
    </button>
    code。。。
   </p>
  </p><!-- /.modal-content -->
 </p><!-- /.modal -->
</p>

2 data-dismiss

모달 창에서 일반적으로 모달 창을 닫는 데 사용됩니다 data-dismiss="modal"

3 data-slide-to, data-slide , data- ride

data-slide-to, data-slide, data-ride는 캐러셀 캐러셀에 사용됩니다.

데이터 슬라이드 속성은 현재 위치를 기준으로 슬라이드의 위치를 ​​변경하는 데 사용되는 prev 또는 next 키워드를 허용합니다.

원시 슬라이드 인덱스를 캐러셀에 전달하려면 data-slide-to를 사용하세요. data-slide-to="2"는 슬라이더를 특정 인덱스로 이동하고 인덱스는 0부터 계산되기 시작합니다.

data-ride="carousel" 속성은 페이지가 로드될 때 애니메이션 재생을 시작하도록 캐러셀을 표시하는 데 사용됩니다.

위 내용은 제가 모든 사람을 위해 편집한 내용입니다. 앞으로 모든 사람에게 도움이 되기를 바랍니다.

관련 기사: AJAX 상호 작용의 예를 통한 vSeervlet3.0 및 순수 JavaScript

jquery를 사용하여 노드 요소 작업 방법 대체

Angular CLI를 사용하여 Angular 5 프로젝트 튜토리얼 생성

위 내용은 Bootstrap에서 data-[*] 속성 구성의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!