부트 스트랩 프롬프트 상자를 설정하는 방법

Bootstrap은 요소에 대한 정보 프롬프트 상자를 제공합니다. 설정은 다음과 같습니다. 데이터 토글 속성 추가 및 프롬프트 텍스트 추가; 부트 스트랩 자바 스크립트 라이브러리를로드하십시오. 프롬프트 박스 플러그인을 초기화합니다.

부트 스트랩 프롬프트 상자 설정

Bootstrap은 사용자가 요소를 호버하거나 클릭 할 때 정보를 표시하는 프롬프트 상자 구성 요소를 제공합니다. 프롬프트 상자를 설정하려면 다음 단계를 수행해야합니다.

1. HTML 태그를 추가하십시오

data-toggle="tooltip" 속성을 추가하고 프롬프트 상자를 표시 할 요소에 프롬프트 텍스트를 추가하십시오.

 <code class="html"><button type="button" class="btn btn-primary" data-toggle="tooltip" title="提示文本">按钮</button></code>

2. 부트 스트랩 자바 스크립트 라이브러리를로드하십시오

페이지에 부트 스트랩 자바 스크립트 라이브러리를 포함시킵니다.

 <code class="html"><script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script></code>

3. 초기화 프롬프트 상자

Tooltip 클래스를 사용하여 프롬프트 상자를 초기화하십시오.

 <code class="javascript">$(function () { $('[data-toggle="tooltip"]').tooltip(); });</code>

프롬프트 상자의 모양을 사용자 정의하십시오

CSS를 사용자 정의하여 프롬프트 상자의 모양을 변경할 수 있습니다. 예를 들어, 프롬프트 상자의 색상을 변경할 수 있습니다.

 <code class="css">.tooltip-inner { background-color: #000; }</code>

프롬프트 상자 옵션을 구성합니다

data 속성을 수정하여 프롬프트 상자 옵션을 구성 할 수 있습니다. 예를 들어, 프롬프트 상자의 배치를 변경할 수 있습니다.

 <code class="html"><button type="button" class="btn btn-primary" data-toggle="tooltip" title="提示文本" data-placement="top">按钮</button></code>

사용 가능한 옵션은 다음과 같습니다.

• placement : 프롬프트 상자 배치 (예 : top , right , bottom , left )
• trigger : 프롬프트 상자를 트리거하는 이벤트 (예 : hover , focus , click )
• delay : 프롬프트 상자가 표시되고 밀리 초에 숨겨진 지연
• html : 프롬프트 상자에 HTML 컨텐츠를 포함하도록 허용

예

다음 코드는 완전히 사용자 정의 된 프롬프트 상자를 보여줍니다.

 <code class="html"><button type="button" class="btn btn-primary" data-toggle="tooltip" title="提示文本" data-placement="top" data-trigger="click" data-delay="500" data-html="true">按钮</button></code>

 <code class="css">.tooltip-inner { background-color: #000; color: #fff; }</code>

 <code class="javascript">$(function () { $('[data-toggle="tooltip"]').tooltip(); });</code>

위 내용은 부트 스트랩 프롬프트 상자를 설정하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!