부트스트랩에서 팝오버의 사용법은 무엇입니까?

부트스트랩에서 팝오버 플러그인은 지정된 콘텐츠와 태그가 있는 팝업 상자를 생성하는 데 사용됩니다. 데이터 속성과 JavaScript를 사용하여 팝업 상자를 추가할 수 있습니다. popover"" 및 "$(element).popover(" 각각.options)".

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

부트스트랩에서 팝오버의 사용법은 무엇입니까?

팝오버는 툴팁과 유사합니다. 확장된 모습. 팝오버를 활성화하려면 사용자가 해당 요소 위로 마우스를 가져가면 됩니다. 팝업 상자의 내용은 Bootstrap Data API를 사용하여 완전히 채울 수 있습니다. 이 방법은 도구 설명에 의존합니다.

팝오버 플러그인은 요청 시 콘텐츠와 마크업을 생성합니다. 기본적으로 팝오버는 트리거 요소 뒤에 배치됩니다. 두 가지 방법으로 팝오버를 추가할 수 있습니다.

데이터 속성을 통해: 팝오버를 추가하려면 앵커/버튼 태그에 data-toggle="popover"를 추가하기만 하면 됩니다. 앵커의 제목은 팝오버의 텍스트입니다. 기본적으로 플러그인은 팝오버를 상단에 배치합니다.

예는 다음과 같습니다.

<a href="#" data-toggle="popover" title="Example popover">    请悬停在我的上面</a>

JavaScript를 통해: JavaScript를 통해 팝오버 활성화:

예는 다음과 같습니다.

$('#identifier').popover(options)

Popover 플러그인은 드롭다운 메뉴 및 기타 플러그인과 같은 순수한 팝업이 아닙니다. 이전에 논의된 CSS 플러그인. 플러그인을 사용하려면 jquery(javascript 읽기)를 사용하여 활성화해야 합니다. 페이지의 모든 팝오버를 활성화하려면 다음 스크립트를 사용하세요.

$(function () { $("[data-toggle='popover']").popover(); });

권장 학습: "bootstrap 사용 튜토리얼"

위 내용은 부트스트랩에서 팝오버의 사용법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!