상호작용

사용자가 웹 사이트 콘텐츠와 상호 작용하는 방식을 변경하는 유틸리티 클래스입니다.

텍스트 선택

사용자가 콘텐츠와 상호 작용할 때 콘텐츠가 선택되는 방식을 변경합니다.

이 단락은 사용자가 클릭하면 완전히 선택됩니다.

이 단락에는 기본 선택 동작이 있습니다.

이 단락은 사용자가 클릭하면 선택할 수 없습니다.

<p class="user-select-all">This paragraph will be entirely selected when clicked by the user.</p>
<p class="user-select-auto">This paragraph has default select behavior.</p>
<p class="user-select-none">This paragraph will not be selectable when clicked by the user.</p>

포인터 이벤트

부트스트랩은 요소 상호 작용을 방지하거나 추가하는 클래스를 .pe-none제공 합니다..pe-auto

이 링크 는 클릭할 수 없습니다.

이 링크 를 클릭할 수 있습니다(기본 동작).

pointer-events속성이 부모로부터 상속 되기 때문에 이 링크 를 클릭 할 수 없습니다 . 그러나 이 링크 에는 pe-auto클래스가 있으며 클릭할 수 있습니다.

<p><a href="#" class="pe-none" tabindex="-1" aria-disabled="true">This link</a> can not be clicked.</p>
<p><a href="#" class="pe-auto">This link</a> can be clicked (this is default behavior).</p>
<p class="pe-none"><a href="#" tabindex="-1" aria-disabled="true">This link</a> can not be clicked because the <code>pointer-events</code> property is inherited from its parent. However, <a href="#" class="pe-auto">this link</a> has a <code>pe-auto</code> class and can be clicked.</p>

.pe-none클래스(및 설정한 CSS pointer-events속성)는 포인터(마우스, 스타일러스, 터치)와의 상호 작용만 방지합니다. 가 포함된 링크 및 컨트롤 .pe-none은 기본적으로 키보드 사용자가 여전히 포커스를 맞추고 실행할 수 있습니다. 키보드 사용자의 경우에도 완전히 무효화되도록 하려면 tabindex="-1"(키보드 포커스를 받는 것을 방지하기 위해) 및 aria-disabled="true"(보조 기술에 효과적으로 비활성화되어 있다는 사실을 전달하기 위해)와 같은 추가 속성을 추가하고 JavaScript를 사용하여 가능하면 실행 가능한 것을 완전히 방지합니다. 양식 컨트롤의 경우 disabledHTML 속성을 대신 사용하는 것이 좋습니다.

사스

유틸리티 API

상호 작용 유틸리티는 의 유틸리티 API에 선언되어 있습니다 scss/_utilities.scss. 유틸리티 API를 사용하는 방법을 알아보세요.

    "user-select": (
      property: user-select,
      values: all auto none
    ),
    "pointer-events": (
      property: pointer-events,
      class: pe,
      values: none auto,
    ),