부트스트랩 팝업 상자에 내용이 없는 이유는 무엇입니까?

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

팝오버 플러그인은 요청 시 콘텐츠와 마크업을 생성합니다. 기본적으로 팝오버는 트리거 요소 뒤에 배치됩니다. 다음 두 가지 방법으로 팝오버를 추가할 수 있습니다. (권장 학습: Bootstrap 비디오 튜토리얼)

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

<a>
    请悬停在我的上面
</a>

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

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

팝오버 플러그인은 이전에 설명한 드롭다운 메뉴 및 기타 플러그인과 같은 순수한 CSS 플러그인이 아닙니다. 플러그인을 사용하려면 jquery(javascript 읽기)를 사용하여 활성화해야 합니다.

페이지의 모든 팝오버를 활성화하려면 다음 스크립트를 사용하세요.

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

다음 예에서는 데이터 속성을 통해 팝오버 플러그인을 사용하는 방법을 보여줍니다.

nbsp;html>


    <meta> 
    <title>Bootstrap 实例 - 弹出框（Popover）插件</title>
    <link>
    <script></script>
    <script></script>



<div>
    <button>
        左侧的 Popover
    </button>
    <button>
        顶部的 Popover
    </button>
    <button>
        底部的 Popover
    </button>
    <button>
        右侧的 Popover
    </button>
</div>
<script>
$(function () { 
    $("[data-toggle=&#39;popover&#39;]").popover();
});
</script>

Bootstrap과 관련된 더 많은 기술 기사를 보려면

Bootstrap Tutorial

칼럼을 방문하여 알아보세요!

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