data-bs-toggle 속성종류

data-bs-toggle 속성

Collapse

• 웹 페이지에서 접을 수 있는 콘텐츠 영역을 생성
• 아코디언, 토글에서 사용

<div>
    <a class="btn btn-primary" data-bs-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
        Link with href
    </a>
    <div class="collapse" id="collapseExample">
        <div class="card card-body">
            This is a simple example of a Bootstrap collapse component.
        </div>
    </div>
</div>
data-bs-toggle="collapse": 클릭할 때 콘텐츠가 축소 또는 확장되도록 토글 기능을 부여
href="#collapseExample": 토글될 요소를 식별하기 위한 참조 링크
id="collapseExample": 토글될 요소의 식별자

Modal

• 사용자와의 상호작용을 위해 생성된 레이어
• 사용자의 입력을 받거나 정보를 보여주는 용도로 사용
• 다이얼로그나 팝업창을 만드는 데 사용

<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
    Launch demo modal
</button>
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                ...
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
            </div>
        </div>
    </div>
</div>
data-bs-toggle="modal": 클릭할 때 모달을 토글
data-bs-target="#exampleModal": 토글될 모달의 대상
id="exampleModal": 모달의 식별자

Tolitip

• 특정 요소에 대한 설명이나 정보를 제공하는 작은 팝업 창 생성
• 사용자가 특정 요소에 마우스를 올리면 해당 요소에 대한 추가 정보가 툴팁으로 표시

<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="top" title="Tooltip on top">
    Tooltip on top
</button>
data-bs-toggle="tooltip": 툴팁 표시를 토글
data-bs-placement="top": 툴팁이 나타날 위치를 정의
title="Tooltip on top": 툴팁에 나타날 내용을 지정

Popover

• 사용자가 특정 요소를 클릭하거나 호버할 때 해당 요소에 대한 상세 정보 제공
• 툴팁보다 더 많은 콘텐츠를 보여줌
• 더 많으 상호작용 가능

<button type="button" class="btn btn-secondary" data-bs-toggle="popover" title="Popover title" data-bs-content="And here's some amazing content. It's very engaging. Right?" data-bs-placement="top">
    Popover on top
</button>
data-bs-toggle="popover": 팝오버 표시를 토글
title="Popover title": 팝오버에 나타날 제목을 지정
data-bs-content="And here's some amazing content. It's very engaging. Right?": 팝오버에 나타날 내용을 지정
data-bs-placement="top": 팝오버가 나타날 위치를 정의