부트스트랩의 데이터는 무엇을 의미하나요?

부트스트랩에서 데이터는 사용자 정의 속성을 정의하는 것을 의미합니다. 사용자 정의 속성은 일반적으로 "data-"로 시작합니다. 데이터 속성을 적용하면 HTML 태그가 암시적으로 일부 데이터를 첨부할 수 있으며, Javascript는 이러한 속성 데이터를 처리할 수 있습니다.

이 튜토리얼의 운영 환경: Windows 10 시스템, 부트스트랩 버전 3.3.7, DELL G3 컴퓨터

부트스트랩의 데이터는 무엇을 의미합니까?

【1 데이터 속성】

데이터 속성 HTML5의 새로운 속성입니다. 개발자는 태그에 속성을 자유롭게 추가하고 데이터를 저장할 수 있습니다. 이러한 사용자 정의 속성은 일반적으로 "data-"로 시작합니다.

저장된 (커스텀) 데이터는 페이지의 JavaScript로 검색하고 활용할 수 있습니다.

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

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

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

직접 말하면 데이터 속성을 적용하여 HTML 태그가 암시적으로 일부 데이터를 첨부할 수 있고 Javascript가 이러한 속성 데이터를 읽고 쓴 다음 해당 동작과 이벤트를 만들 수 있도록 하는 것입니다.

【Bootstrap의 2가지 데이터 속성】

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

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

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

즉, 과거에는 기능적 요구사항을 먼저 파악한 다음 구현했습니다. 이제 기본적으로 함수를 다루고 작성했습니다. js 관련 작업 함수도 작성되었으며, CSS 스타일도 작성되었습니다. 사용하려면 해당 규칙에 따라 직접 호출하면 됩니다. 그런 다음 더 다양해지기 위해 Bootstrap.js의 함수는 다른 매개변수 값을 가질 수 있습니다. 이러한 매개변수 값은 태그에 제공하는 속성에 따라 설정됩니다. (실제로 다양한 Java 클래스 라이브러리와 마찬가지로 이제 js 플러그인도 기본적으로 이 루틴을 따릅니다.)

태그의 class="xxx" 속성은 주로 부트스트랩의 CSS 스타일인

을 사용하는 데 사용되며 식별 가능한 클래스로 사용됩니다. 개체 이름 ID입니다.

태그의 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） -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                    &times;
                </button>
                code。。。
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>

2 data-dismiss

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

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

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

관련 권장 사항: 부트스트랩 튜토리얼

위 내용은 부트스트랩의 데이터는 무엇을 의미하나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!